import { SplashScreen, Stack } from 'expo-router';
import { useState, useEffect } from 'react';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { useAppFonts } from '@/hooks/use-app-hooks';
import { AuthProvider, useAuth } from '@/contexts/AuthContext';
import { Colors } from '@/constants/theme';

import { AnimatedSplashScreen } from '@/components/animated-splash-screen';
import { View } from 'react-native';

SplashScreen.preventAutoHideAsync();

function RootContent() {
    const { isLoading } = useAuth();
    const { fontsLoaded, fontsError } = useAppFonts();
    const [splashFinished, setSplashFinished] = useState(false);

    const isAppReady = !isLoading;

    useEffect(() => {
        if (fontsLoaded || fontsError) {
            SplashScreen.hideAsync();
        }
    }, [fontsLoaded, fontsError]);

    if (!fontsLoaded && !fontsError)
        return null;

    return (
        <View style={{ flex: 1, backgroundColor: Colors.background }}>
            <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: Colors.background } }}>
                <Stack.Screen name="(app)" />
                <Stack.Screen name="login" />
                <Stack.Screen name="register" />
            </Stack>

            {!splashFinished && (
                <AnimatedSplashScreen isAppReady={isAppReady} onAnimationComplete={() => setSplashFinished(true)} />
            )}
        </View>
    )
}

export default function RootLayout() {
    return (
        <SafeAreaProvider>
            <StatusBar style="light" />
            <AuthProvider>
                <RootContent />
            </AuthProvider>
        </SafeAreaProvider>
    )
}