import React from "react";
import { useEffect } from "react";
import Toast from 'react-native-toast-message';
import { Alert } from "react-native";
import { userApi } from "./app/services/api/userApi";
import useUserStore from "./app/store/user";
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 { GoogleScreen } from "./app/screens/login/Google";
import "./app/i18n";
import { TabNavigator } from "./app/navigation/TabNavigator";
import { AuthProvider, useAuth } 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/banner/ShippingDetailsSection";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { InquiryScreen } from "./app/screens/banner/InquiryScreen";
import { Recipient } from "./app/screens/Recipient/Recipient";
import { AddRess } from "./app/screens/Recipient/Address";
import { SettingList } from "./app/screens/setting/SettingList";
import { CountrySetting } from "./app/screens/setting/CountrySetting";
import { MySetting } from "./app/services/api/setting";
import { MyAddress } from "./app/screens/setting/MyAddress";
import { CartScreen } from "./app/screens/CartScreen";
import { PaymentSuccessScreen } from "./app/screens/pay/PaySuccess";
import { MyAccount } from "./app/screens/MyAccount/myAccount";
import { ConfirmOrder } from "./app/screens/Recipient/ConfirmOrder";
import { Pay } from "./app/screens/pay/Pay";
import { Status } from "./app/screens/productStatus/Status";
import { OrderDetails } from "./app/screens/productStatus/OrderDatails";
import { TikTokScreen } from "./app/screens/banner/TikTokScreen";
import { BrowseHistoryScreen } from "./app/screens/function/BrowseHistoryScreen";
import { Collection } from "./app/screens/function/Collection";
import AsyncStorage from '@react-native-async-storage/async-storage';

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;
  InquiryScreen: undefined;
  Recipient: { items: { cart_item_id: number }[] };
  AddRess:undefined;
  SettingList:undefined;
  CountrySetting: { mySetting?: MySetting };
  MyAddress:undefined;
  CartScreen:undefined;
  PaymentSuccessScreen:undefined;
  MyAccount:undefined;
  Google: undefined;
  ConfirmOrder: undefined;
  Pay: undefined;
  Status: undefined;
  OrderDetails: undefined;
  TikTokScreen: undefined;
  BrowseHistoryScreen: undefined;
  Collection: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppContent() {
  const {setUser} = useUserStore();
  const { login, logout } = useAuth();

  const getUserInfo = async () => {
    const token = await AsyncStorage.getItem('token');
    if(token){
      try {
        const user = await userApi.getProfile();
        setUser(user);
        login();
      } catch (error) {
        logout();
      }
    }
  }

  useEffect(() => {
    getUserInfo()    
  }, []);

  return (
    <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.Screen
          name="InquiryScreen"
          component={InquiryScreen}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="Recipient"
          component={Recipient}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />

        <Stack.Screen
          name="AddRess"
          component={AddRess}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="SettingList"
          component={SettingList}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="CountrySetting"
          component={CountrySetting}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="MyAddress"
          component={MyAddress}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="CartScreen"
          component={CartScreen}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="PaymentSuccessScreen"
          component={PaymentSuccessScreen}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="MyAccount"
          component={MyAccount}
          options={{
            animation: "slide_from_right",  
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="Google"
          component={GoogleScreen}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="ConfirmOrder"
          component={ConfirmOrder}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="Pay"
          component={Pay}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="Status"
          component={Status}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="OrderDetails"
          component={OrderDetails}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="TikTokScreen"
          component={TikTokScreen}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="BrowseHistoryScreen"
          component={BrowseHistoryScreen}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="Collection"
          component={Collection}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <AuthProvider>
        <AppContent />
      </AuthProvider>
      <Toast />
    </GestureHandlerRootView>
  );
}