import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Image, Text, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { StatusBar } from 'expo-status-bar';
import { EventListScreen } from '../screens/EventListScreen';
import { EventDetailScreen } from '../screens/EventDetailScreen';
import { AddEventScreen } from '../screens/AddEventScreen';
import { SettingsScreen } from '../screens/SettingsScreen';
import { CalendarImportScreen } from '../screens/CalendarImportScreen';
import type { RootStack } from '../types/navigation';

// ── Root Stack ──

const Root = createNativeStackNavigator<RootStack>();

/**
 * Root native stack navigator for the app.
 * Wraps all screens in SafeAreaProvider/SafeAreaView with a dark header bar.
 */
export default function AppNavigator() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1, backgroundColor: '#090816' }}>
        <StatusBar style="light" />
        <NavigationContainer>
          <Root.Navigator
            initialRouteName="EventList"
            screenOptions={{
              headerStyle: { backgroundColor: '#17112A' },
              headerTintColor: '#F4F1EA',
              headerTitle: () => (
                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                  <Image source={require('../../assets/icon.png')} style={{ width: 28, height: 28 }} resizeMode="contain" />
                  <Text style={{ color: '#F4F1EA', fontSize: 18, fontWeight: '600' }}>Time To Leave</Text>
                </View>
              ),
            }}
          >
            <Root.Screen name="EventList" component={EventListScreen} />
            <Root.Screen name="AddEvent" component={AddEventScreen} />
            <Root.Screen name="EventDetail" component={EventDetailScreen} />
            <Root.Screen name="Settings" component={SettingsScreen} />
            <Root.Screen name="CalendarImport" component={CalendarImportScreen} />
          </Root.Navigator>
        </NavigationContainer>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}