import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { CountrySelect } from './app/screens/CountrySelect';
import { MainApp } from './app/screens/MainApp';
import { LoginScreen } from './app/screens/LoginScreen';
import { EmailLoginScreen } from './app/screens/EmailLoginScreen';
import './app/i18n';
import { TabNavigator } from './app/navigation/TabNavigator';
import { AuthProvider } from './app/contexts/AuthContext';
import { SearchScreen } from './app/screens/SearchScreen';
import { SearchResultScreen } from './app/screens/SearchResultScreen';
import { ProductDetailScreen } from './app/screens/ProductDetailScreen';
import { BalanceScreen } from './app/screens/BalanceScreen';
import { ShippingDetailsSection } from './app/screens/ShippingDetailsSection';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export type RootStackParamList = {
  CountrySelect: undefined;
  MainApp: undefined;
  Login: undefined;
  EmailLogin: undefined;
  MainTabs: undefined;
  Search: undefined;
  SearchResult: { keyword: string };
  ProductDetail: { productId: string; searchKeyword?: string };
  Balance: undefined;
  ShippingDetailsSection: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <AuthProvider>
        <NavigationContainer>
          <Stack.Navigator
            screenOptions={{
              headerShown: false,
            }}
          >
            <Stack.Screen name="CountrySelect" component={CountrySelect} />
            <Stack.Screen 
              name="Login" 
              component={LoginScreen}
              options={{
                presentation: 'modal',
                animation: 'slide_from_bottom',
                gestureEnabled: true,
                gestureDirection: 'vertical'
              }}
            />
            <Stack.Screen 
              name="MainTabs" 
              component={TabNavigator}
              options={{
                gestureEnabled: false
              }}
            />
            <Stack.Screen 
              name="EmailLogin" 
              component={EmailLoginScreen}
              options={{
                presentation: 'modal',
                animation: 'slide_from_bottom',
                gestureEnabled: true,
                gestureDirection: 'vertical',
              }}
            />
            <Stack.Screen 
              name="Search" 
              component={SearchScreen}
              options={{
                presentation: 'fullScreenModal',
                animation: 'fade',
                animationDuration: 200,
                gestureEnabled: true,
                gestureDirection: 'vertical',
                contentStyle: { backgroundColor: '#ffffff' }
              }}
            />
            <Stack.Screen 
              name="SearchResult" 
              component={SearchResultScreen}
              options={{
                animation: 'slide_from_right',
                gestureEnabled: true,
                gestureDirection: 'horizontal',
              }}
            />
            <Stack.Screen 
              name="ProductDetail" 
              component={ProductDetailScreen}
              options={{
                animation: 'slide_from_right',
                gestureEnabled: true,
                gestureDirection: 'horizontal',
              }}
            />
            <Stack.Screen 
              name="Balance" 
              component={BalanceScreen}
              options={{
                animation: 'slide_from_right',
                gestureEnabled: true,
                gestureDirection: 'horizontal',
              }}
            />
            <Stack.Screen 
              name="ShippingDetailsSection" 
              component={ShippingDetailsSection}
              options={{
                animation: 'slide_from_right',
                gestureEnabled: true,
                gestureDirection: 'horizontal',
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </AuthProvider>
    </GestureHandlerRootView>
  );
}