"use client";

import { useEffect } from "react";
import {
  init,
  mountMiniAppSync,
  mountThemeParamsSync,
  bindThemeParamsCssVars,
} from "@telegram-apps/sdk-react";
import { fixSurfaceContrast } from "@/hooks/use-telegram-theme";

/**
 * Wraps the app with Telegram Mini App SDK initialization.
 * Calls init(acceptCustomStyles), mounts theme params (binds --tg-theme-* CSS vars),
 * and mounts the mini app. Does not call ready() here — the app calls
 * callMiniAppReadyOnce() from lib/telegram-ready when the first visible screen
 * has finished loading, so Telegram keeps its native loading animation until then.
 * Theme is set before first paint by the inline script in layout.tsx (URL hash);
 * useTelegramTheme() in the app handles ongoing theme changes.
 */
export function TelegramProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  useEffect(() => {
    const cleanup = init({ acceptCustomStyles: true });

    if (mountThemeParamsSync.isAvailable()) {
      mountThemeParamsSync();
    }
    if (bindThemeParamsCssVars.isAvailable()) {
      bindThemeParamsCssVars();
    }
    fixSurfaceContrast();
    void document.documentElement.offsetHeight;

    if (mountMiniAppSync.isAvailable()) {
      mountMiniAppSync();
    }

    return cleanup;
  }, []);

  return <>{children}</>;
}