import React, { useState, useEffect, useCallback } from "react";
import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  Image,
  TouchableOpacity,
  Alert,
  ActivityIndicator,
  StatusBar,
  TextInput,
  KeyboardAvoidingView,
  Platform,
  RefreshControl,
} from "react-native";
import * as Keychain from "react-native-keychain";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import { launchImageLibrary } from "react-native-image-picker";
import { CustomButton, CustomInput } from "../../components/common/Custom";
import colors from "../../components/colors";
import SwitchNavigator from "./SwitchNavigator";
import { useFocusEffect, useNavigation } from "@react-navigation/native";
import { ApiResponse } from "../home/UserProfileStatus";
import { BASE_URL, PUT_USER_PROFILE, PUT_USER_PROFILE_IMG, PUT_USER_STATUS } from "../../utils/ApiUrls";
import AppView from "../../components/AppView";
import { useDispatch } from "react-redux";
import { clearUser, setUserData } from "../../redux/userSlice";
import { StackNavigationProp } from "@react-navigation/stack";
import { RootStackParamList } from "../../navigation/AppNavigator";
import { firebase } from "@react-native-firebase/messaging";
import FirebaseService from "../../utils/firebase/firebaseServices";


type UserProfile = {
  id: string;
  userId: number;
  firstName: string | null;
  lastName: string | null;
  mobile: string | null;
  gender: string | null;
  email: string | null;
  username: string | null;
  address: string | null;
  bankName: string | null;
  branchCode: string | null;
  filePath: string | null;
  bankAccountNumber: string | null;
  imageBlob: string | null;
  organizerStatus?: string;
  role?: string;
};


const Profile = () => {
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const dispatch = useDispatch()
  const [user, setUser] = useState<UserProfile | null | any>(null);
  const [fetching, setFetching] = useState(true);
  const [editing, setEditing] = useState(false);
  const [imageUpdating, setImageUpdating] = useState(false);
  const [loading, setLoading] = useState(false);
  const [statusData, setStatusData] = useState<null | { profileStatus: boolean; organizerStatus: string; role: string }>(null);
  const [error, setError] = useState<string | null>(null);
  const [refreshing, setRefreshing] = useState(false);


  const fetchUserProfile = async () => {
    try {
      const credentials = await Keychain.getGenericPassword();
      if (!credentials) {
        Alert.alert("Error", "You are not logged in");
        return;
      }
      const token = credentials.password;


      setFetching(true);
      const response = await fetch(
        `${BASE_URL}user/profile/view`,
        {
          method: "GET",
          headers: {
            Accept: "*/*",
            Authorization: `Bearer ${token}`,
          },
        }
      );


      const result = await response.json();
      console.log("👤 Profile Response:", result);
      if (result.status === "success") {
        setUser(result.data);
        dispatch(setUserData({
          id: result?.data.id,
          userId: result?.data.userId,
          username: result?.data.username,
          firstName: result?.data.firstName,
          lastName: result?.data.lastName,
          gender: result?.data.gender,
          mobile: result?.data.mobile,
          email: result?.data.email,
          address: result?.data.address,
          bankAccountNumber: result?.data.bankAccountNumber,
          bankName: result?.data.bankName,
          branchCode: result?.data.branchCode,
          profilePicture: result?.data.filePath,   // or keep as `filePath`
          filePath: result?.data.filePath,
          imageBlob: result?.data.imageBlob,
          role: result?.data.role,
          organizerId: result?.data.organizerId,
          organizerStatus: result?.data.organizerStatus,
          profileStatus: true, // set true once profile is fetched
        }));
      } else {
        Alert.alert("Error", "Failed to fetch user profile");
      }
    } catch (error) {
      console.error("❌ Error fetching profile:", error);
      // Alert.alert("Error", "Could not connect to server");
    } finally {
      setFetching(false);
    }
  };


  const updateProfile = 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_PROFILE,
        {
          method: "PUT",
          headers: {
            Accept: "*/*",
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify({
            address: user?.address || null,
            email: user?.email || null,
            firstName: user?.firstName || null,
            gender: user?.gender || null,
            lastName: user?.lastName || null,
            username: user?.username || null,
          }),
        }
      );


      const result = await response.json();
      if (result.status === "success") {
        Alert.alert("Success", "Profile updated successfully");
        setEditing(false);
        fetchUserProfile(); // reload updated data
      } else {
        Alert.alert("Error", "Failed to update profile");
      }
    } catch (error) {
      console.error("❌ Error updating profile:", error);
      // Alert.alert("Error", "Could not update profile");
    }
  };


  const pickImage = () => {
    launchImageLibrary({ mediaType: "photo", quality: 0.5 }, (response) => {
      if (response.didCancel) return;
      if (response.errorCode) {
        Alert.alert("Error", response.errorMessage || "Something went wrong");
      } else if (response.assets && response.assets.length > 0) {
        const selectedImage = response.assets[0];
        setUser((prev: any) =>
          prev ? { ...prev, filePath: selectedImage.uri ?? null } : prev
        );
      }
    });
  };


  const handleUpdateImage = async () => {
    try {
      const credentials = await Keychain.getGenericPassword();
      if (!credentials) {
        Alert.alert("Error", "You are not logged in");
        return;
      }
      const token = credentials.password;


      if (!user?.filePath) {
        Alert.alert("Error", "Please select an image first");
        return;
      }


      setImageUpdating(true);


      const formData = new FormData();
      formData.append("file", {
        uri: user?.filePath,
        type: "image/jpeg",
        name: "profile.jpg",
      } as any);


      const response = await fetch(
        PUT_USER_PROFILE_IMG,
        {
          method: "PUT",
          headers: {
            Accept: "application/json",
            Authorization: `Bearer ${token}`,
          },
          body: formData,
        }
      );


      const result = await response.json();
      if (result.status === "success") {
        Alert.alert("Success", "Profile image updated successfully");


        // If API returns updated image, set it
        if (result.data?.imageBlob) {
          setUser((prev: any) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
        } else {
          // Otherwise, keep the local filePath until next fetch
          setUser((prev: any) => prev ? { ...prev, filePath: user?.filePath } : prev);
        }


        // Refresh profile from API as well
        fetchUserProfile();
      } else {
        Alert.alert("Error", result.message || "Failed to update profile image");
      }
    } catch (error) {
      console.error("❌ Error updating profile image:", error);
      // Alert.alert("Error", "Could not update profile image");
    } finally {
      setImageUpdating(false);
    }
  };


  const userStatus = async () => {
    try {
      const credentials = await Keychain.getGenericPassword();
      if (!credentials) {
        Alert.alert("Error", "You are not logged in");
        return;
      }
      const token = credentials.password;


      setLoading(true);
      setError(null);
      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") {
        setStatusData(json.data);
        console.log("statusData response :", json);


      } else {
        setError(json.message || "Failed to fetch status");
      }
    } catch (err) {
      setError("Something went wrong. Please try again.");
    } finally {
      setLoading(false);
    }
  };


  const logout = async (navigation: any) => {
    try {
      const credentials = await Keychain.getGenericPassword();


      if (!credentials) {
        Alert.alert("Info", "No user is currently logged in");
        return;
      }

      await FirebaseService.deleteFcmToken();

      // Clear stored credentials
      await Keychain.resetGenericPassword();
      dispatch(clearUser())
      Alert.alert("Success", "You have been logged out");
      navigation.replace("Login");
    } catch (error) {
      console.error("Logout error:", error);
      // Alert.alert("Error", "Failed to log out. Please try again.");
    }
  };


  const confirmLogout = (navigation: any) => {
    Alert.alert(
      "Logout",
      "Are you sure you want to log out?",
      [
        { text: "Cancel", style: "cancel" },
        { text: "Yes, Logout", style: "destructive", onPress: () => logout(navigation) },
      ]
    );
  };

  console.log("statusData?.role :", statusData?.role);
  console.log("statusData?.organizerStatus :", statusData?.organizerStatus);

  useFocusEffect(
    useCallback(() => {
      userStatus();
    }, [])
  );


  useEffect(() => {
    userStatus();
    fetchUserProfile();
  }, []);


  const onRefresh = () => {
    setRefreshing(true);
    // Simulate a network request or data fetching
    fetchUserProfile()
    setTimeout(() => {
      setRefreshing(false);
    }, 2000); // 2 seconds delay
  };


  console.log("user image :", user?.filePath);
  const getProfileImage = () => {
    if (user?.imageBlob) {
      return `data:image/jpeg;base64,${user?.imageBlob}`;
    }
    if (user?.filePath) {
      return user?.filePath;
    }
    return "https://randomuser?.me/api/portraits/men/1.jpg";
  };





  return (
    <AppView paddingHorizontal={5} >
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.headerTitle}>User Profile</Text>
        <TouchableOpacity onPress={() => confirmLogout(navigation)} style={styles.refreshButton}>
          <Ionicons name="log-out-outline" size={24} color={colors.primary} />
        </TouchableOpacity>
      </View>
      {/* if (fetching || !user) {
    return ( */}
      {fetching || !user &&
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color={colors.pastelBlue} />
          <Text style={styles.loadingText}>Loading profile...</Text>
        </View>


      }
      <KeyboardAvoidingView
        // style={{ flex: 1 }}
        behavior={Platform.OS === "ios" ? "padding" : undefined}
      >
        <ScrollView
          contentContainerStyle={{ flexGrow: 1 }}
          keyboardShouldPersistTaps="handled"
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
          }
        >


          {/* Profile Card */}
          <View style={styles.profileCard}>
            {/* Profile Image Section */}
            {
              statusData?.role === "USER" && statusData?.organizerStatus !== "NOT_APPLIED" ? (
                <Text
                  style={{
                    color: "#64748b",
                    marginBottom: 16,
                    textAlign: "center",
                    fontSize: 18,
                  }}
                >
                  Your Role: {statusData.role} | Organizer Status: {statusData.organizerStatus}
                </Text>
              ) : (
                statusData?.role !== "ORGANIZER" && (
                  <SwitchNavigator
                    role={statusData?.role || ""}
                    status={statusData?.organizerStatus || ""}
                  />
                )
              )
            }

            <View style={styles.profileImageSection}>
              <View style={styles.avatarContainer}>
                <Image
                  source={{ uri: getProfileImage() }}
                  style={styles.avatar}
                  onError={() => console.log("Error loading image")}
                />
                <TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
                  <Ionicons name="camera" size={18} color="#000" />
                </TouchableOpacity>
              </View>


              <CustomButton
                title={imageUpdating ? "Updating..." : "Update Image"}
                onPress={handleUpdateImage}
                icon={imageUpdating ? undefined : "cloud-upload"}
                style={styles.updateImageButton}
                buttonBackground={colors.pastelBlue}
              />
            </View>


            {!editing ? (
              <>
                {/* Profile Details */}
                <View style={styles.detailsSection}>
                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    <View>
                      <Text style={styles.sectionTitle}>Personal Information</Text>
                      <Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
                      {/* <View style={{ marginBottom: 16 }}>


                                            
                                        </View> */}
                    </View>
                    <View>
                      <TouchableOpacity onPress={() => navigation.navigate('Transaction')}>
                        <Text>View Transaction</Text>
                      </TouchableOpacity>
                      <CustomButton
                        title="Edit Profile"
                        onPress={() => setEditing(true)}
                        icon="create"
                        style={styles.editButton}
                        buttonBackground={colors.white}
                      />
                    </View>
                  </View>
                  <View style ={{backgroundColor:colors.pastelBlue,borderRadius:20,elevation:5,paddingVertical:10}}>
                  <View style={styles.detailRow}>
                    <Ionicons name="person" size={20} color={colors.black} style={styles.detailIcon} />
                    <View>
                      <Text style={styles.detailLabel}>Name</Text>
                      <Text style={styles.detailText}>{user?.firstName} {user?.lastName}</Text>
                    </View>
                  </View>


                  <View style={styles.detailRow}>
                    <Ionicons name="mail" size={20} color={colors.black} style={styles.detailIcon} />
                    <View>
                      <Text style={styles.detailLabel}>Email</Text>
                      <Text style={styles.detailText}>{user?.email || "Not provided"}</Text>
                    </View>
                  </View>


                  <View style={styles.detailRow}>
                    <Ionicons name="call" size={20} color={colors.black} style={styles.detailIcon} />
                    <View>
                      <Text style={styles.detailLabel}>Mobile</Text>
                      <Text style={styles.detailText}>{user?.mobile || "Not provided"}</Text>
                    </View>
                  </View>


                  <View style={styles.detailRow}>
                    <Ionicons name="at-circle" size={20} color={colors.black} style={styles.detailIcon} />
                    <View>
                      <Text style={styles.detailLabel}>Usernames</Text>
                      <Text style={styles.detailText}>{user?.username}</Text>
                    </View>
                  </View>


                  <View style={styles.detailRow}>
                    <Ionicons name="location" size={20} color={colors.black} style={styles.detailIcon} />
                    <View>
                      <Text style={styles.detailLabel}>Address</Text>
                      <Text style={styles.detailText}>{user?.address || "Not provided"}</Text>
                    </View>
                  </View>


                  <View style={styles.detailRow}>
                    <Ionicons name="male-female" size={20} color={colors.black} style={styles.detailIcon} />
                    <View>
                      <Text style={styles.detailLabel}>Gender</Text>
                      <Text style={styles.detailText}>{user?.gender || "Not specified"}</Text>
                    </View>
                  </View>


                  <View style={styles.detailRow}>
                    <Ionicons name="key" size={20} color={colors.black} style={styles.detailIcon} />
                    <View>
                      <Text style={styles.detailLabel}>Role</Text>
                      <Text style={styles.detailText}>{user?.role || "User"}</Text>
                    </View>
                  </View>
</View>
                  {/* BANK DETAILS SECTION */}
                  <View style={{ marginTop: 20 }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                      <Text style={styles.sectionTitle}>Bank Information</Text>
                      {/* Navigate to a screen you will create for editing bank details */}
                      
                      <CustomButton
                        title="Edit Bank Details"
                        onPress={() =>{ navigation.navigate("EditBankDetails", {
                          currentBankName: user?.bankName,
                          currentAccountNumber: user?.bankAccountNumber,
                          currentBranchCode: user?.branchCode,
                        })}}

                        icon="create-outline"
                        style={styles.editButton}
                         buttonBackground={colors.white}
                      />
                    </View>
                                     <View style ={{backgroundColor:colors.pastelBlue,borderRadius:20,elevation:5,paddingVertical:10}}>
                    <View style={styles.detailRow}>
                      <Ionicons name="business" size={20} color={colors.black}style={styles.detailIcon} />
                      <View>
                        <Text style={styles.detailLabel}>Bank Name</Text>
                        <Text style={styles.detailText}>{user?.bankName || "Not provided"}</Text>
                      </View>
                    </View>
                    <View style={styles.detailRow}>
                      <Ionicons name="barcode" size={20} color={colors.black} style={styles.detailIcon} />
                      <View>
                        <Text style={styles.detailLabel}>Branch Code</Text>
                        <Text style={styles.detailText}>{user?.branchCode || "Not provided"}</Text>
                      </View>
                    </View>
                    <View style={styles.detailRow}>
                      <Ionicons name="card" size={20} color={colors.black} style={styles.detailIcon} />
                      <View>
                        <Text style={styles.detailLabel}>Account Number</Text>
                        <Text style={styles.detailText}>{user?.bankAccountNumber || "Not provided"}</Text>
                      </View>
                    </View>
                    </View>
                  </View>
                </View>
              </>
            ) : (
   <>
  {/* Edit Form */}
  <View style={styles.editSection}>
    <Text style={styles.sectionTitle}>Edit Profile</Text>

    <CustomInput
      error=""
      label="First Name"
      placeholder="Enter first name"
      value={user?.firstName ?? ""}
      onChangeText={(text) => setUser({ ...user, firstName: text })}
      icon="person"
    />

    <CustomInput
      error=""
      label="Last Name"
      placeholder="Enter last name"
      value={user?.lastName ?? ""}
      onChangeText={(text) => setUser({ ...user, lastName: text })}
      icon="person"
    />

    <CustomInput
      error=""
      label="Email"
      placeholder="Enter email"
      value={user?.email ?? ""}
      onChangeText={(text) => setUser({ ...user, email: text })}
      icon="mail"
      keyboardType="email-address"
    />

    <CustomInput
      error=""
      label="Username"
      placeholder="Enter username"
      value={user?.username ?? ""}
      onChangeText={(text) => setUser({ ...user, username: text })}
      icon="at"
    />

    <CustomInput
      error=""
      label="Address"
      placeholder="Enter address"
      value={user?.address ?? ""}
      onChangeText={(text) => setUser({ ...user, address: text })}
      icon="location"
      multiline
    />

    <CustomInput
      error=""
      label="Gender"
      placeholder="Enter gender"
      value={user?.gender ?? ""}
      onChangeText={(text) => setUser({ ...user, gender: text })}
      icon="male-female"
    />

    <View style={styles.editButtons}>
      <CustomButton
        title="Save Changes"
        onPress={updateProfile}
        icon="save"
        style={styles.saveButton}
        buttonBackground={colors.pastelBlue}
      />
      <CustomButton
        title="Cancel"
        onPress={() => setEditing(false)}
        icon="close"
        style={styles.cancelButton}
        buttonBackground={colors.white}
      />
    </View>
  </View>
</>
            )}
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </AppView>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: colors.pastelBlue,
    paddingBottom: '30%',
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f8fafc"
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16,
    color: "#64748b"
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
  headerTitle: {
    fontSize: 22, fontWeight: "600", color: colors.primary
  },
  refreshButton: {
    padding: 4,
  },


  profileCard: {
    borderRadius: 20,
    margin: 16,
    // backgroundColor: "#fff",
    // padding: 20,
    // shadowColor: "#000",
    // shadowOpacity: 0.1,
    // shadowRadius: 10,
    // shadowOffset: { width: 0, height: 4 },
    // elevation: 5,
  },
  profileImageSection: {
    alignItems: "center",
    marginBottom: 24,
    paddingBottom: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#f1f5f9",
  },
  avatarContainer: {
    position: "relative",
    marginBottom: 16,
  },
  avatar: {
    width: 120,
    height: 120,
    borderRadius: 60,
    borderWidth: 4,
    borderColor: "#e2e8f0",
  },
  cameraIcon: {
    position: "absolute",
    right: 0,
    bottom: 0,
    backgroundColor: colors.pastelBlue,
    borderRadius: 20,
    width: 40,
    height: 40,
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 3,
    borderColor: "#fff",
    elevation: 2,
  },
  updateImageButton: {
    width: "80%",
    paddingHorizontal: 10,
    borderRadius: 25,
    elevation: 5,

  },
  detailsSection: {
    marginBottom: "40%",
  },
  sectionTitle: {
    fontSize: 18, 
    fontWeight: "700",
    color: "#1e293b",
    // marginBottom: 16,
    paddingBottom: 8,
    borderBottomWidth: 1,
    borderBottomColor: "#f1f5f9",
  },
  detailRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 16,
    paddingHorizontal: 12,
  },
  detailIcon: {
    marginRight: 20,
    elevation:5 
  },
  detailLabel: {
    fontSize: 12,
    color: "#64748b",
    marginBottom: 2,
  },
  detailText: {
    fontSize: 16,
    color: "#334155",
    fontWeight: "500",
  },
  editButton: {
    elevation:5,
    paddingHorizontal: 10,
    paddingVertical:4,
    borderRadius: 15,
    borderWidth:2,
    borderColor:colors.pastelBlue
  },
  editSection: {
    marginBottom: '100%',
    flex: 1,
  },
  editButtons: {
    gap: 12,
  },
  saveButton: {
    marginTop: 8,
  },
  cancelButton: {
    marginTop: 4,
    borderWidth: 1,
    borderColor: "#cbd5e1",
  },
  inputContainer: {
    marginBottom: 16,
  },
  inputLabel: {
    fontSize: 14,
    fontWeight: "600",
    color: "#374151",
    marginBottom: 6,
  },
  inputWrapper: {
    flexDirection: "row",
    alignItems: "center",
    position: "relative",
  },
  inputIcon: {
    position: "absolute",
    left: 12,
    zIndex: 1,
  },
  input: {
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 12,
    padding: 12,
    backgroundColor: "#fff",
    color: "#1f2937",
    fontSize: 16,
    flex: 1,
  },
  inputWithIcon: {
    paddingLeft: 40,
  },
  buttonSecondary: {
    backgroundColor: "#f1f5f9",
  },
  buttonDanger: {
    backgroundColor: "#ef4444",
  },
  buttonOutline: {
    backgroundColor: "transparent",
    borderWidth: 1,
    borderColor: "#6366f1",
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
  },
  buttonTextSecondary: {
    color: "#334155",
  },
  buttonTextDanger: {
    color: "#fff",
  },
  buttonTextOutline: {
    color: "#6366f1",
  },
  buttonIcon: {
    marginRight: 8,
  },
});


export default Profile;