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';


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

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <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.Navigator>
      </NavigationContainer>
    </AuthProvider>
  );
}
