import '../global.css';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { PortalHost } from '@rn-primitives/portal';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { View } from 'react-native';

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <View className="flex-1 bg-background">
          <StatusBar style="light" />
          <Stack
            screenOptions={{
              headerStyle: { backgroundColor: '#2d2d2d' },
              headerTintColor: '#ffffff',
              headerTitleStyle: { fontWeight: '600' },
            }}
          >
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen name="proforma/[id]" options={{ title: 'Proforma request' }} />
            <Stack.Screen name="payments/[id]" options={{ title: 'Payment' }} />
            <Stack.Screen name="notifications" options={{ title: 'Notifications' }} />
            <Stack.Screen name="notifications/settings" options={{ title: 'Notification settings' }} />
            <Stack.Screen name="login" options={{ title: 'Sign in', headerShown: false }} />
            <Stack.Screen name="register" options={{ title: 'Create account', headerShown: false }} />
            <Stack.Screen name="invoices/[id]" options={{ title: 'Invoice' }} />
            <Stack.Screen name="reports" options={{ title: 'Reports' }} />
            <Stack.Screen name="documents" options={{ title: 'Documents' }} />
            <Stack.Screen name="settings" options={{ title: 'Settings' }} />
          </Stack>
          <PortalHost />
        </View>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}