import React, { useEffect, useRef } from "react";
import { View, Text, StyleSheet, ActivityIndicator, Animated, Alert } from "react-native";
import * as Keychain from "react-native-keychain";
import { StackNavigationProp } from "@react-navigation/stack";
import { useNavigation } from "@react-navigation/native";
import { RootStackParamList } from "../navigation/AppNavigator"; // adjust path
import { BASE_URL, PUT_USER_STATUS } from "../utils/ApiUrls";
import { useDispatch, useSelector } from "react-redux";
import { setUserData } from "../redux/userSlice";
import colors from "../components/colors";
import { ApiResponse } from "./home/UserProfileStatus";
import { fetchUserProfile } from "../utils/HelperFunction";

const SplashScreen = () => {

  const user = useSelector((state: any) => state.user);
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const fadeAnim = useRef(new Animated.Value(1)).current;





  const userStatus = async () => {
      try {
        const credentials = await Keychain.getGenericPassword();
        if (!credentials) {
          Alert.alert("Error", "You are not logged in");
          return;
        }
        const token = credentials.password;
  
        const response = await fetch(PUT_USER_STATUS, {
          method: "GET",
          headers: {
            Accept: "*/*",
            Authorization: `Bearer ${token}`,
          },
        });
  
        const json: ApiResponse = await response.json();
  
        console.log("👤 Profile Status Response:", json);
        if (json.status === "success") {
  
        } else {
          // setError(json.message || "Failed to fetch status");
        }
      } catch (err) {
        // setError("Something went wrong. Please try again.");
      } 
    };
  

  console.log("redux user", user);

  useEffect(() => {
    const checkLogin = async () => {
      try {
        const creds = await Keychain.getGenericPassword();
        if (creds) {
          console.log("🔑 Found token:", creds.password);
          navigation.replace("Home"); // go to bottom tabs if logged in
        } else {
          navigation.replace("Login");
        }
      } catch (error) {
        console.error("Error checking login:", error);
        navigation.replace("Login");
      }
    };

    // Start fade out animation
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 1500, // fade out in 1.5s
      useNativeDriver: true,
      delay: 1500, // wait before fading
    }).start(() => {
      checkLogin(); // only navigate after animation
    });
  }, [navigation, fadeAnim]);

  useEffect(() => {
    const fetchProfile = async () => {
      await fetchUserProfile();
    };
    fetchProfile();
  }, [])

  return (
    <View style={styles.container}>
      <Animated.Text style={[styles.title, { opacity: fadeAnim }]}>
        Circle Collect
      </Animated.Text>
      <ActivityIndicator size="large" color={colors.Home} style={{ marginTop: 20 }} />
    </View>
  );
};

export default SplashScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFFFFF", // white background
  },
  title: {
    fontSize: 28,
    fontWeight: "800",
    color: colors.Home,
    letterSpacing: 1,
  },
});