App.tsx

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { PaperProvider } from 'react-native-paper';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import * as SplashScreen from 'expo-splash-screen';
import { StyleSheet } from 'react-native';

import { DatabaseProvider } from './src/db/provider';
import { lightTheme, darkTheme } from './src/theme';
import RootNavigator from './src/navigation/RootNavigator';
import { useThemeMode } from './src/hooks/useThemeMode';

// Keep splash visible until we're ready
SplashScreen.preventAutoHideAsync();

function AppContent() {
  const { isDark } = useThemeMode();
  const theme = isDark ? darkTheme : lightTheme;

  return (
    <PaperProvider theme={theme}>
      <StatusBar style={isDark ? 'light' : 'dark'} />
      <DatabaseProvider>
        <RootNavigator />
      </DatabaseProvider>
    </PaperProvider>
  );
}

export default function App() {
  return (
    <GestureHandlerRootView style={styles.root}>
      <SafeAreaProvider>
        <AppContent />
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
});