// App.tsx
import React, { useCallback } from 'react'; // Removed useEffect, useState as they are implicitly used by useFonts
import { Platform, View } from 'react-native';
import { Provider as PaperProvider } from 'react-native-paper';
import { NavigationContainer, DarkTheme as NavigationDarkTheme } from '@react-navigation/native'; // Import NavigationDarkTheme
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { StatusBar } from 'expo-status-bar';
import * as SplashScreen from 'expo-splash-screen';
import { useFonts } from 'expo-font';

import { AuthProvider } from './src/contexts/AuthContext';
import RootNavigator from './src/navigation/RootNavigator';
import theme from './src/constants/theme'; // This is the Paper theme
// Removed CombinedDarkTheme import as we'll use NavigationDarkTheme directly for NavigationContainer

// Keep the splash screen visible while we fetch resourcesDone, please go ahead with the changes.
SplashScreen.preventAutoHideAsync();

// Create a navigation theme based on the Paper theme colors but without the incompatible fonts object
const navigationTheme = {
  ...NavigationDarkTheme, // Use React Navigation's dark theme as a base
  colors: {
    ...NavigationDarkTheme.colors,
    primary: theme.colors.primary,
    background: theme.colors.background,
    card: theme.colors.surface, // Map Paper surface to Navigation card
    text: theme.colors.text,
    border: theme.colors.surface, // Use surface for border or another appropriate color
    notification: theme.colors.primary, // Example mapping
  },
};

export default function App() {
  const [fontsLoaded, fontError] = useFonts({
    'Inter-Regular': require('./src/assets/fonts/Inter-Regular.ttf'),
    'Inter-Bold': require('./src/assets/fonts/Inter-Bold.ttf'),
    'Inter-Medium': require('./src/assets/fonts/Inter-Medium.ttf'),
    'Inter-Light': require('./src/assets/fonts/Inter-Light.ttf'),
    'Inter-Thin': require('./src/assets/fonts/Inter-Thin.ttf'),
    // Add other weights/styles if you have them
  });

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded || fontError) {
      // Log font loading status
      if (fontError) {
        console.error("Font loading error:", fontError);
      }
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null; // Return null or a loading indicator while fonts are loading
  }

  // If fonts are loaded (or there was an error), render the app
  return (
    <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
      <SafeAreaProvider>
        <AuthProvider>
          {/* PaperProvider uses the full theme with custom fonts */}
          <PaperProvider theme={theme}>
            {/* NavigationContainer uses the simplified navigationTheme */}
            <NavigationContainer theme={navigationTheme}>
               <RootNavigator />
            </NavigationContainer>
            <StatusBar
              style="light" // Assuming dark theme
              backgroundColor={Platform.OS === 'web' ? theme.colors.background : theme.colors.surface}
            />
          </PaperProvider>
        </AuthProvider>
      </SafeAreaProvider>
    </View>
  );
}