import React, { useCallback, useEffect, useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  UIManager,
  Platform,
  Image,
} from "react-native";
import AppView from "../../components/AppView";
import UserProfileStatus from "./UserProfileStatus";
import colors from "../../components/colors";
import GroupsTabs from "./GroupsTabs";
import { useSelector } from "react-redux";
import { useFocusEffect, useNavigation, useRoute } from "@react-navigation/native";
import UserHome from "./user-home/UserHome";
import { PROFILE_URL } from "../../utils/ApiUrls";
import *as Keychain from "react-native-keychain"
// Enable animation for Android
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

type UserProfile = {
  id: string;
  userId: number;
  firstName: string | null;
  lastName: string | null;
  imageBlob: string | null;
  role?: string;
}
const Home = () => {
  const user = useSelector((state: any) => state.user);
  const navigation = useNavigation();
  const route = useRoute();

  console.log("route asf : ", route?.params)
  const [apiUser, setApiUser] = useState<UserProfile | null | any>(null)

  const fetchUserProfile = async () => {
    try {
      const credentials = await Keychain.getGenericPassword();
      if (!credentials) {
        return;
      }
      const token = credentials.password;
      const response = await fetch(
        PROFILE_URL,
        {
          method: "GET",
          headers: {
            Accept: "*/*",
            Authorization: `Bearer ${token}`,
          },
        }
      );

      const result = await response.json();
      console.log("👤 Profile Response:", result);
      if (result.status === "success") {
        setApiUser(result.data);

      }
    } catch (error) {
      console.error("❌ Error fetching profile:", error);
    }
  };

  useEffect(() => {
    if (route.params) {
      fetchUserProfile(); 
    }
  }, [route.params]);

  return (
    <AppView barStyle="dark-content" style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.greeting}>Hello, {user.firstName || apiUser?.firstName} {user.lastName || apiUser?.lastName}👋</Text>
        <TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>

          <Image
            source={
              user.imageBlob
              && { uri: user.imageBlob || apiUser?.imageBlob ? `data:image/jpeg;base64,${user.imageBlob || apiUser?.imageBlob}` : user.profilePicture || apiUser?.imageBlob }
            }
            style={{ width: 40, height: 40, borderRadius: 20, borderColor: colors.primary, borderWidth: 2 }}
          />
        </TouchableOpacity>
      </View>
      {/* Status */}
      <UserProfileStatus />
      {user?.role === "USER" || apiUser?.role === "USER" ? <UserHome /> :
        <GroupsTabs />}
    </AppView>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    paddingBottom: '25%',
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  greeting: { fontSize: 22, fontWeight: "600", color: colors.Home },


});