// App.tsx
import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { toastConfig } from 'components/CustomAlertModal';
import i18n from 'i18n/i18n';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { I18nextProvider } from 'react-i18next';
import {
  Animated,
  Dimensions,
  LogBox,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
import { enableScreens } from 'react-native-screens';
import Toast from 'react-native-toast-message';
import Login from 'screens/auth/login/ui';
import Register from 'screens/auth/registeration/ui';
import TermsAndConditions from 'screens/auth/registeration/ui/TermsAndConditions';
import SelectAuth from 'screens/auth/select-auth/SelectAuth';
import Branches from 'screens/home/branches/ui/Branches';
import CargoPrices from 'screens/home/cargoPrices/ui/CargoPrices';

// Ignore specific warnings that might affect performance
LogBox.ignoreLogs([
  'Non-serializable values were found in the navigation state',
  'ViewPropTypes will be removed',
]);

enableScreens();

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { navigationRef } from 'components/NavigationRef';
import SplashScreen from 'components/SplashScreen';
import Confirm from 'screens/auth/login/ui/Confirm';
import SecondStep from 'screens/auth/registeration/ui/SecondStep';
import ListBranches from 'screens/home/branches/ui/ListBranches';
import Home from 'screens/home/home/ui/Home';
import RestrictedProduct from 'screens/home/restrictedProduct/ui/RestrictedProduct';
import CreatePassword from 'screens/passport/createPassport/ui/CreatePassword';
import Passport from 'screens/passport/myPassport/ui/Passport';
import Profile from 'screens/profile/myProfile/ui/Profile';
import Notifications from 'screens/profile/notifications/ui/Notifications';
import AddedLock from 'screens/profile/settings/ui/AddedLock';
import Settings from 'screens/profile/settings/ui/Settings';
import SettingsLock from 'screens/profile/settings/ui/SettingsLock';
import Support from 'screens/profile/support/ui/Support';
import Warehouses from 'screens/profile/warehouses/ui/Warehouses';
import Status from 'screens/status/ui/Status';
import EnterCard from 'screens/wallet/enterCard/ui/EnterCard';
import Wallet from 'screens/wallet/payment/ui/Wallet';
import PaymentMethod from 'screens/wallet/paymentMethod/ui/PaymentMethod';
import PaymentQrCode from 'screens/wallet/successPayment/ui/PaymentQrCode';
import Onboarding from 'screens/welcome/Onboarding';

const Stack = createNativeStackNavigator();
const screenWidth = Dimensions.get('window').width;
const queryClient = new QueryClient();

export default function App() {
  const [initialRoute, setInitialRoute] = useState<string | null>(null);
  const slideAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const initializeApp = async () => {
      try {
        const [seen, token, lang] = await Promise.all([
          AsyncStorage.getItem('hasSeenOnboarding'),
          AsyncStorage.getItem('token'),
          AsyncStorage.getItem('language'),
        ]);

        if (lang) {
          await i18n.changeLanguage(lang);
        }

        const initialRouteName = !seen
          ? 'Onboarding'
          : token
          ? 'Home'
          : 'select-auth';
        setInitialRoute(initialRouteName);
      } catch (error) {
        console.error('App initialization error:', error);
        setInitialRoute('select-auth');
      }
    };

    initializeApp();
  }, []);

  const [isSplashVisible, setIsSplashVisible] = useState(true);

  const handleSplashFinish = useMemo(
    () => () => {
      Animated.timing(slideAnim, {
        toValue: -screenWidth,
        duration: 600,
        useNativeDriver: true,
      }).start(() => setIsSplashVisible(false));
    },
    [slideAnim],
  );

  const handleOnboardingFinish = useMemo(
    () => async (navigation: any) => {
      await AsyncStorage.setItem('hasSeenOnboarding', 'true');
      navigation.replace('select-auth');
    },
    [],
  );

  if (!initialRoute) return null;

  return (
    <QueryClientProvider client={queryClient}>
      <I18nextProvider i18n={i18n}>
        <View style={{ flex: 1 }}>
          <StatusBar barStyle="dark-content" backgroundColor="#fff" />
          <NavigationContainer ref={navigationRef}>
            <Stack.Navigator
              screenOptions={{
                headerShown: false,
                animation: 'none',
                gestureEnabled: false,
              }}
              initialRouteName={initialRoute}
            >
              <Stack.Screen
                name="Onboarding"
                options={{
                  gestureEnabled: false,
                  animation: 'none',
                }}
              >
                {props => (
                  <Onboarding
                    {...props}
                    onFinish={() => handleOnboardingFinish(props.navigation)}
                  />
                )}
              </Stack.Screen>

              {/* <Stack.Screen name="select-lang" component={SelectLangPage} /> */}
              <Stack.Screen name="select-auth" component={SelectAuth} />
              <Stack.Screen name="Login" component={Login} />
              <Stack.Screen name="Login-Confirm" component={Confirm} />
              <Stack.Screen name="Register" component={Register} />
              <Stack.Screen name="Confirm" component={SecondStep} />
              <Stack.Screen name="SettingsLock" component={SettingsLock} />
              <Stack.Screen name="AddLock" component={AddedLock} />

              <Stack.Screen
                name="Home"
                component={Home}
                options={{
                  gestureEnabled: false,
                  animation: 'none',
                }}
              />
              <Stack.Screen
                name="Status"
                component={Status}
                options={{
                  animation: 'none',
                }}
              />
              <Stack.Screen name="Passports" component={Passport} />
              <Stack.Screen name="CargoPrices" component={CargoPrices} />

              <Stack.Screen name="create-password" component={CreatePassword} />

              <Stack.Screen name="Wallet" component={Wallet} />
              <Stack.Screen name="PaymentMethod" component={PaymentMethod} />
              <Stack.Screen name="EnterCard" component={EnterCard} />
              <Stack.Screen name="PaymentQrCode" component={PaymentQrCode} />

              <Stack.Screen name="Profile" component={Profile} />
              <Stack.Screen name="Settings" component={Settings} />
              <Stack.Screen name="Notifications" component={Notifications} />
              <Stack.Screen name="Warehouses" component={Warehouses} />
              <Stack.Screen name="Support" component={Support} />
              <Stack.Screen name="ListBranches" component={ListBranches} />
              <Stack.Screen name="Branches" component={Branches} />
              <Stack.Screen
                name="RestrictedProduct"
                component={RestrictedProduct}
              />
              <Stack.Screen
                name="TermsAndConditions"
                component={TermsAndConditions}
              />
            </Stack.Navigator>
          </NavigationContainer>

          {/* Splash transition */}
          {isSplashVisible && (
            <Animated.View
              style={{
                ...StyleSheet.absoluteFillObject,
                transform: [{ translateX: slideAnim }],
                zIndex: 10,
              }}
            >
              <SplashScreen onFinish={handleSplashFinish} />
            </Animated.View>
          )}

          <Toast config={toastConfig} />
        </View>
      </I18nextProvider>
    </QueryClientProvider>
  );
}

const styles = StyleSheet.create({
  headerWrap: { flex: 1 },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#28A7E8',
    height: 60,
    paddingHorizontal: 12,
  },
  headerTitle: {
    color: '#fff',
    fontSize: 20,
    fontWeight: '600',
    marginLeft: 8,
  },
});