import { QueryClientProvider } from '@tanstack/react-query';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import * as SystemUI from 'expo-system-ui';
import { useEffect } from 'react';
import { StatusBar } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import { queryClient } from '../hooks/queryClient';
import { useAppFonts } from '../theme/typography';

import { useAuth } from '@/stores/authStore';
import colors from '@/theme/colors';

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [fontsLoaded] = useAppFonts();
  const hydrated = useAuth((state) => state.hydrated);
  const hydrate = useAuth((state) => state.hydrate);

  useEffect(() => {
    hydrate();
  }, [hydrate]);

  const ready = hydrated && fontsLoaded;

  useEffect(() => {
    if (ready) SplashScreen.hideAsync();
  }, [ready]);

  useEffect(() => {
    SystemUI.setBackgroundColorAsync(colors.deepBackground);
  }, []);

  if (!ready) return null;

  return (
    <QueryClientProvider client={queryClient}>
      <SafeAreaProvider>
        <StatusBar
          barStyle="light-content"
          backgroundColor={colors.deepBackground}
          translucent={false}
        />
        <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: colors.deepBackground } }}>
          <Stack.Screen name="(auth)" />
          <Stack.Screen name="(tabs)" />
          <Stack.Screen name="(org)" />
          <Stack.Screen name="event/[id]" />
          <Stack.Screen name="create/event" options={{ presentation: 'modal' }} />
          <Stack.Screen name="create/post"  options={{ presentation: 'modal' }} />
        </Stack>
        
      </SafeAreaProvider>
    </QueryClientProvider>
  );
}