// App.tsx — D3RO Voice Mobile root
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { StatusBar } from 'react-native'
import { I18nProvider } from '@d3ro/i18n'
import { d3roNativePalette } from '@d3ro/ui-native'
import { AuthProvider } from './src/lib/auth-context'
import TabNavigator from './src/navigation/TabNavigator'
import LoginScreen from './src/screens/LoginScreen'
import ProPaywallScreen from './src/screens/ProPaywallScreen'

const Stack = createNativeStackNavigator()

export default function App(): React.ReactElement {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <I18nProvider initialLocale="ko">
          <AuthProvider>
            <StatusBar barStyle="light-content" backgroundColor={d3roNativePalette.bg.app} />
            <NavigationContainer>
              <Stack.Navigator
                screenOptions={{
                  headerShown: false,
                  contentStyle: { backgroundColor: d3roNativePalette.bg.app },
                }}
              >
                <Stack.Screen name="Login" component={LoginScreen} />
                <Stack.Screen name="Main" component={TabNavigator} />
                <Stack.Screen
                  name="ProPaywall"
                  component={ProPaywallScreen}
                  options={{ presentation: 'modal' }}
                />
              </Stack.Navigator>
            </NavigationContainer>
          </AuthProvider>
        </I18nProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  )
}