import React, { useEffect, useRef, useState, useCallback } from 'react';
import { Animated, StyleSheet, View } from 'react-native';
import { useNavigation, useIsFocused } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useSelector } from 'react-redux';
import { useStore } from 'react-redux';  // For hydration check

import { showToast } from '../../Constant/ShowDailog';
import { useRagistrationState } from '../../Services/BBPS/Hooks';
import NavigationString from '../../Constant/NavigationString';

// Navigation type
export type Navigation = {
  reset(arg0: {
    index: number;
    routes: { name: string; }[];
  }): unknown;
  navigate: (route: string, params?: { [key: string]: any }) => void;
  replace: (route: string, params?: { [key: string]: any }) => void;
};

const Splash: React.FC = () => {
  const navigation = useNavigation() as Navigation;
  const isFocused = useIsFocused();
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const reduxToken = useSelector((state: any) => state.token?.token);
  console.log("user Token",reduxToken)
  const store = useStore();
  const { mutateAsync: registrationStateMutate } = useRagistrationState();
  const [isHydrated, setIsHydrated] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    let unsubscribe: any;
    const checkHydration = () => {
      const token = (store.getState() as any).token?.token;
      if (token !== undefined) {
        setIsHydrated(true);
        unsubscribe?.();
      }
    };

    unsubscribe = store.subscribe(checkHydration);
    checkHydration();  // Check immediately

    return () => unsubscribe?.();
  }, []);



  const routeByOrgType = (params: { otherId: any; orgType: any }) => {
    const orgType = String(params.orgType);
    if (orgType === '4' || orgType === '5' || orgType === '6') {
      navigation.replace('StageThree', params);
      return;
    }

    if (orgType === '7') {
      navigation.replace(NavigationString.Partnership, params);
      return;
    }

    navigation.replace('Dashboard');
  };

  const handleGetData = async () => {
    try {
      const res = await registrationStateMutate();
      console.log("ragister",res)
      if (res?.statusCode === 404 || res?.statusCode === 401) {
        navigation.replace('Registration');
        return;
      }

      if (res?.statusCode === 200 && res?.data) {
        const { registrationStatus, contOtherId, contOrganization } = res.data;
        const params = { otherId: contOtherId, orgType: contOrganization };
        console.log('Registration status:', registrationStatus);

        switch (registrationStatus) {
          case null:
          case undefined:
            navigation.replace(NavigationString.Registration);
            break;
          case 'Pending':
            routeByOrgType(params);
            break;
          case 'Complete':
          case 'Completed':
            navigation.replace(NavigationString.Home);
            break;
          default:
            navigation.replace(NavigationString.Registration);
            break;
        }
        return;
      }
      console.error('API error:', res);
      showToast(res?.message || 'Something went wrong');
      navigation.replace('Registration');
    } catch (error: any) {
      console.error('Registration status error:', error);
      showToast(error?.message || 'Something went wrong');

      if (error?.response?.status === 404) {
        navigation.replace('Registration');
      } else {
        await AsyncStorage.removeItem('token');
        navigation.replace('Signin');
      }
    }
  };

  useEffect(() => {
    if (!isFocused || !isHydrated) return;

    const runSplash = async () => {
      try {
        setIsLoading(true);
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }).start();


        if (!reduxToken.token) {
          navigation.reset({
            index: 0,
            routes: [{ name: NavigationString.Login }],
          });
          return;
        }

        if (reduxToken.userType == 'tender') {
          await handleGetData();
        } else {
          navigation.reset({
            index: 0,
            routes: [{ name: NavigationString.Home }],
          });
        }

      } catch (error) {
        navigation.reset({
          index: 0,
          routes: [{ name: NavigationString.Login || 'Signin' }],
        });
      } finally {
        setIsLoading(false);
      }
    };

    const timeoutId = setTimeout(runSplash, 200);
    return () => clearTimeout(timeoutId);
  }, [isFocused, isHydrated]);

  if (!isHydrated) {
    return (
      <View style={styles.loadingContainer}>
        <Animated.Image
          source={require('../../Images/logo.png')}
          style={[styles.logo, { opacity: fadeAnim }]}
          resizeMode="contain"
        />
      </View>
    );
  }

  return (
    <View style={styles.appView}>
      <View style={styles.container}>
        <Animated.Image
          source={require('../../Images/logo.png')}
          style={[styles.logo, { opacity: fadeAnim }]}
          resizeMode="contain"
        />
        {isLoading && (
          <View style={{ marginTop: 20 }}>
            {/* Optional spinner */}
          </View>
        )}
      </View>
    </View>
  );
};

export default Splash;

const styles = StyleSheet.create({
  appView: {
    flex: 1,
    backgroundColor: '#fff',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 160,
    height: 160,
    marginBottom: 20,
  },
  loadingContainer: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
});