import { toastConfig } from "@/components/ui/ToastConfig";
import { getQueryClient } from "@/configs/query-client";
import { getAppInfo } from "@/hooks/server";
import { useNetworkStatus } from "@/hooks/useNetworkStatus";
import { AuthStoreProvider } from "@/providers/AuthStoreProviders";
import { BuyShareModalProvider } from "@/providers/BuyShareModalProvider";
import { InvestModalProvider } from "@/providers/InvestModalProvider";
import { TranslationProvider } from "@/providers/TranslationProviders";
import { WishlistProvider } from "@/providers/WishlistProvider";
import { useThemeColorStore } from "@/stores/theme-color";
import { Manrope_400Regular } from "@expo-google-fonts/manrope/400Regular";
import { Manrope_500Medium } from "@expo-google-fonts/manrope/500Medium";
import { Manrope_600SemiBold } from "@expo-google-fonts/manrope/600SemiBold";
import { Manrope_700Bold } from "@expo-google-fonts/manrope/700Bold";
import { Manrope_800ExtraBold } from "@expo-google-fonts/manrope/800ExtraBold";
import { useFonts } from "@expo-google-fonts/manrope/useFonts";
import { QueryClientProvider } from "@tanstack/react-query";
import { SplashScreen, Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { useCallback, useEffect, useState } from "react";
import Toast from "react-native-toast-message";
import "./global.css";

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  let [fontsLoaded] = useFonts({
    Manrope_400Regular,
    Manrope_500Medium,
    Manrope_600SemiBold,
    Manrope_700Bold,
    Manrope_800ExtraBold,
  });
  const [info, setInfo] = useState<any>(null);
  const [loadError, setLoadError] = useState(false);
  const { setColors } = useThemeColorStore();
  const { isConnected } = useNetworkStatus();

  const loadAppInfo = useCallback(async () => {
    try {
      setLoadError(false);
      const appInfo = await getAppInfo();
      if (!appInfo) {
        setLoadError(true);
        return;
      }
      setInfo(appInfo);
      if (appInfo?.application_info?.theme?.template?.primary && appInfo?.application_info?.theme?.template?.secondary) {
        setColors(appInfo?.application_info?.theme?.template?.primary, appInfo?.application_info?.theme?.template?.secondary);
      }
    } catch (err) {
      console.error("Failed to load app info", err);
      setLoadError(true);
    } finally {
      SplashScreen.hideAsync();
    }
  }, [setColors]);

  useEffect(() => {
    loadAppInfo();
  }, [loadAppInfo]);
  return (
    <QueryClientProvider client={getQueryClient()}>
      <AuthStoreProvider appInfo={info}>
        <TranslationProvider>
          <WishlistProvider>
            <InvestModalProvider>
              <BuyShareModalProvider>
                <StatusBar style="auto" />
                <Stack
                  screenOptions={{
                    headerShown: false,
                    contentStyle: { backgroundColor: "white" },
                  }}
                />
                <Toast config={toastConfig} />
              </BuyShareModalProvider>
            </InvestModalProvider>
          </WishlistProvider>
        </TranslationProvider>
      </AuthStoreProvider>
    </QueryClientProvider>
  );
}
