import "react-native-gesture-handler";
import React from "react";
import { useEffect, useState } from "react";
import Toast from "react-native-toast-message";
import { Alert, ActivityIndicator, View } 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";
import { MemberIntroduction } from "./app/screens/MemberScreen/MemberIntroduction";
import { CompanyScreen } from "./app/screens/MemberScreen/CompanyScreen";
import { PreviewAddress } from "./app/screens/previewOrder/PreviewAddress";
import { AddressList } from "./app/screens/address/AddressList";
import { AddAddress } from "./app/screens/address/AddAddress";
import { EditAddress } from "./app/screens/address/EditAddress";
import { PaymentMethod } from "./app/screens/previewOrder/PaymentMethod";
import { ShippingFee } from "./app/screens/previewOrder/ShippingFee";
import { PreviewOrder } from "./app/screens/previewOrder/perviewOrder";

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;
  MemberIntroduction: undefined;
  CompanyScreen: undefined;
  PreviewAddress: undefined;
  AddressList: undefined;
  AddAddress: undefined;
  EditAddress: undefined;
  PaymentMethod: undefined;
  ShippingFee: undefined;
  PreviewOrder: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppContent() {
  const { setUser } = useUserStore();
  const { login, logout } = useAuth();
  const [isLoading, setIsLoading] = useState(true);

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

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

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#0066FF" />
      </View>
    );
  }

  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.Screen
          name="MemberIntroduction"
          component={MemberIntroduction}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="CompanyScreen"
          component={CompanyScreen}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="PreviewAddress"
          component={PreviewAddress}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="AddressList"
          component={AddressList}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="AddAddress"
          component={AddAddress}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="EditAddress"
          component={EditAddress}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="PaymentMethod"
          component={PaymentMethod}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="ShippingFee"
          component={ShippingFee}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
        <Stack.Screen
          name="PreviewOrder"
          component={PreviewOrder}
          options={{
            animation: "slide_from_right",
            gestureEnabled: true,
            gestureDirection: "horizontal",
          }}
        />
      </Stack.Navigator>
      <Toast />
    </NavigationContainer>
  );
}

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