import React, { useCallback, useEffect, useRef, useState } from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import * as ImagePicker from "expo-image-picker";
import {
  Button,
  Colors,
  Image,
  Picker,
  Text,
  TextField,
  View,
} from "react-native-ui-lib";
import Ionicons from "@expo/vector-icons/Ionicons";
import * as tz from "tzdata";
import * as Localization from "expo-localization";
import debounce from "debounce";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
import { colorMap } from "@/constants/colorMap";
import DeleteProfileDialogs from "../user_components/DeleteProfileDialogs";
import { AntDesign } from "@expo/vector-icons";
import { useDeleteUser } from "@/hooks/firebase/useDeleteUser";
import { useUpdateHouseholdName } from "@/hooks/firebase/useUpdateHouseholdName";
import { useGetHouseholdName } from "@/hooks/firebase/useGetHouseholdName";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";

const MyProfile = () => {
  const { user, profileData } = useAuthContext();
  const { data: familyMembers } = useGetFamilyMembers();
  const [takenColors, setTakenColors] = useState<string[]>([]);

  const { data: hhName, refetch: refetchHHName } = useGetHouseholdName(
    profileData.familyId
  );
  const [householdName, setHouseholdName] = useState<string>("");
  const [timeZone, setTimeZone] = useState<string>(
    profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
  );
  const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
  const [firstName, setFirstName] = useState<string>(
    profileData?.firstName || ""
  );
  const [profileImage, setProfileImage] = useState<
    string | ImagePicker.ImagePickerAsset | null
  >(profileData?.pfp || null);

  const [selectedColor, setSelectedColor] = useState<string>(
    profileData?.eventColor ?? colorMap.pink
  );
  const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
    profileData?.eventColor ?? colorMap.pink
  );

  const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);

  const handleHideDeleteDialog = () => {
    setShowDeleteDialog(false);
  };
  const handleShowDeleteDialog = () => {
    setShowDeleteDialog(true);
  };

  const { mutateAsync: updateHouseholdName } = useUpdateHouseholdName();
  const { mutateAsync: updateUserData } = useUpdateUserData();
  const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
  const { mutateAsync: deleteAsync } = useDeleteUser();
  const isFirstRender = useRef(true);

  const handleUpdateUserData = async () => {
    await updateUserData({ newUserData: { firstName, lastName, timeZone } });
  };

  const handleUpdateHouseholdName = async () => {
    if (profileData?.familyId) {
      await updateHouseholdName({
        familyId: profileData.familyId,
        name: householdName,
      });
    }
  };

  const debouncedUserDataUpdate = debounce(handleUpdateUserData, 500);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    debouncedUserDataUpdate();
  }, [timeZone, lastName, firstName]);

  useEffect(() => {
    handleUpdateHouseholdName();
  }, [householdName]);

  useEffect(() => {
    if (familyMembers) {
      const colors = familyMembers
        .filter(member => member?.eventColor && member.uid !== user?.uid)
        .map(member => member.eventColor!);
      setTakenColors(colors);
    }
   }, [familyMembers]);

  useEffect(() => {
    if (profileData) {
      setFirstName(profileData.firstName || "");
      setLastName(profileData.lastName || "");
      setTimeZone(
        profileData.timeZone || Localization.getCalendars()[0].timeZone!
      );
    }
  }, [profileData]);

  useEffect(() => {
    if (profileData?.familyId) {
      refetchHHName();
    }
  }, [profileData?.familyId]);

  useEffect(() => {
    setHouseholdName(hhName);
  }, [hhName]);

  const pickImage = async () => {
    const permissionResult =
      await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permissionResult.granted) {
      alert("Permission to access camera roll is required!");
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });

    if (!result.canceled) {
      setProfileImage(result.assets[0].uri);
      await changeProfilePicture(result.assets[0]);
    }
  };

  const handleClearImage = async () => {
    await updateUserData({ newUserData: { pfp: null } });
    setProfileImage(null);
  };

  const pfpUri =
    profileImage && typeof profileImage === "object" && "uri" in profileImage
      ? profileImage.uri
      : profileImage;

  const handleChangeColor = (color: string) => {
    setPreviousSelectedColor(selectedColor);
    setSelectedColor(color);
    debouncedUpdateUserData(color);
  };

  const debouncedUpdateUserData = useCallback(
    debounce(async (color: string) => {
      try {
        await updateUserData({
          newUserData: {
            eventColor: color,
          },
        });
      } catch (error) {
        console.error("Failed to update color:", error);
        setSelectedColor(previousSelectedColor);
      }
    }, 500),
    []
  );

  return (
    <ScrollView style={{ paddingBottom: 20, flex: 1 }}>
      <View style={styles.card}>
        <Text style={styles.subTit}>Your Profile</Text>
        <View row spread paddingH-15 centerV marginV-15>
          <TouchableOpacity onPress={pickImage}>
            {pfpUri ? (
              <Image
                key={pfpUri}
                style={[
                  styles.pfp,
                  (profileData?.eventColor && {
                    borderWidth: 2,
                    borderColor: profileData.eventColor,
                  }) ||
                    undefined,
                ]}
                source={pfpUri ? { uri: pfpUri } : null}
              />
            ) : (
              <View
                center
                style={{
                  aspectRatio: 1,
                  width: 65.54,
                  backgroundColor: profileData?.eventColor ?? colorMap.pink,
                  borderRadius: 20,
                }}
              >
                <Text style={styles.pfpTxt}>
                  {profileData?.firstName?.at(0)}
                  {profileData?.lastName?.at(0)}
                </Text>
              </View>
            )}
          </TouchableOpacity>

          <TouchableOpacity onPress={pickImage}>
            <Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
              {profileData?.pfp ? "Change" : "Add"} Photo
            </Text>
          </TouchableOpacity>

          {profileData?.pfp && (
            <TouchableOpacity onPress={handleClearImage}>
              <Text style={styles.photoSet}>Remove Photo</Text>
            </TouchableOpacity>
          )}
        </View>
        <View paddingH-15>
          {profileData?.userType == ProfileType.PARENT && (
            <>
              <Text text80 marginT-10 marginB-7 style={styles.label}>
                Household
              </Text>
              <TextField
                text70
                placeholder="Household name"
                style={styles.txtBox}
                value={householdName}
                onChangeText={async (value) => {
                  setHouseholdName(value);
                }}
              />
            </>
          )}
          <Text text80 marginT-10 marginB-7 style={styles.label}>
            First name
          </Text>
          <TextField
            text70
            placeholder="First name"
            style={styles.txtBox}
            value={firstName}
            onChangeText={async (value) => {
              setFirstName(value);
            }}
          />
          <Text text80 marginT-10 marginB-7 style={styles.label}>
            Last name
          </Text>
          <TextField
            text70
            placeholder="Last name"
            style={styles.txtBox}
            value={lastName}
            onChangeText={async (value) => {
              setLastName(value);
            }}
          />
          <Text text80 marginT-10 marginB-7 style={styles.label}>
            Email address
          </Text>
          <TextField
            editable={false}
            text70
            placeholder="Email address"
            value={user?.email?.toString()}
            style={styles.txtBox}
          />
        </View>
      </View>
      <View style={styles.card}>
        <Text style={styles.cardTitle} marginB-14>
          Color Preference
        </Text>
        <View row spread>
          <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)} disabled={takenColors.includes(colorMap.pink)}>
            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.pink) ? 0.1 : 1}]} backgroundColor={colorMap.pink}>
              {selectedColor == colorMap.pink && (
                <AntDesign name="check" size={30} color="white" />
              )}
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightPink)} disabled={takenColors.includes(colorMap.lightPink)}>
            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightPink) ? 0.1 : 1}]} backgroundColor={colorMap.lightPink}>
              {selectedColor == colorMap.lightPink && (
                <AntDesign name="check" size={30} color="black" />
              )}
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)} disabled={takenColors.includes(colorMap.orange)}>
            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.orange) ? 0.1 : 1}]} backgroundColor={colorMap.orange}>
              {selectedColor == colorMap.orange && (
                <AntDesign name="check" size={30} color="white" />
              )}
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightOrange)} disabled={takenColors.includes(colorMap.lightOrange)}>
            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightOrange) ? 0.1 : 1}]} backgroundColor={colorMap.lightOrange}>
              {selectedColor == colorMap.lightOrange && (
                <AntDesign name="check" size={30} color="black" />
              )}
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}disabled={takenColors.includes(colorMap.green)}>
            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.green) ? 0.1 : 1}]} backgroundColor={colorMap.green}>
              {selectedColor == colorMap.green && (
                <AntDesign name="check" size={30} color="white" />
              )}
            </View>
          </TouchableOpacity>
        </View>
        <View row spread marginT-10>
          <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightGreen)} disabled={takenColors.includes(colorMap.lightGreen)}>
            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightGreen) ? 0.1 : 1}]} backgroundColor={colorMap.lightGreen}>
              {selectedColor == colorMap.lightGreen && (
                <AntDesign name="check" size={30} color="black" />
              )}
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)} disabled={takenColors.includes(colorMap.teal)}>
            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.teal) ? 0.1 : 1}]} backgroundColor={colorMap.teal}>
              {selectedColor == colorMap.teal && (
                <AntDesign name="check" size={30} color="white" />
              )}
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightTeal)} disabled={takenColors.includes(colorMap.lightTeal)}>
            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightTeal) ? 0.1 : 1}]} backgroundColor={colorMap.lightTeal}>
              {selectedColor == colorMap.lightTeal && (
                <AntDesign name="check" size={30} color="black" />
              )}
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)} disabled={takenColors.includes(colorMap.purple)}>
            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.purple) ? 0.1 : 1}]} backgroundColor={colorMap.purple}>
              {selectedColor == colorMap.purple && (
                <AntDesign name="check" size={30} color="white" />
              )}
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightPurple)} disabled={takenColors.includes(colorMap.lightPurple)}>
            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightPurple) ? 0.1 : 1}]} backgroundColor={colorMap.lightPurple}>
              {selectedColor == colorMap.lightPurple && (
                <AntDesign name="check" size={30} color="black" />
              )}
            </View>
          </TouchableOpacity>
        </View>
      </View>

      <View style={styles.card}>
        <Text style={styles.subTit}>Settings</Text>
        <Text style={styles.jakarta12}>Time Zone</Text>
        <View style={styles.viewPicker}>
          <Picker
            value={timeZone}
            onChange={(item) => setTimeZone(item as string)}
            showSearch
            floatingPlaceholder
            style={styles.inViewPicker}
            trailingAccessory={
              <View
                style={{
                  justifyContent: "center",
                  alignItems: "center",
                  height: "100%",
                  marginTop: -38,
                  paddingRight: 15,
                }}
              >
                <Ionicons
                  name={"chevron-down"}
                  style={{ alignSelf: "center" }}
                  size={20}
                  color={"#000000"}
                />
              </View>
            }
          >
            {timeZoneItems}
          </Picker>
        </View>
      </View>
      <TouchableOpacity
        onPress={handleShowDeleteDialog}
        style={{ marginTop: 10, alignSelf: "center" }}
      >
        <Text
          style={{
            color: "#ff1637",
            fontFamily: "PlusJakartaSans_500Medium",
            fontSize: 15,
          }}
        >
          Delete Profile
        </Text>
      </TouchableOpacity>
      <DeleteProfileDialogs
        onFirstYes={() => {
          setShowDeleteDialog(false);
        }}
        visible={showDeleteDialog}
        onDismiss={handleHideDeleteDialog}
        onConfirm={() => deleteAsync({})}
      />
    </ScrollView>
  );
};

const timeZoneItems = Object.keys(tz.zones)
  .sort()
  .map((zone) => (
    <Picker.Item
      key={zone}
      label={zone.replace("/", " / ").replace("_", " ")}
      value={zone}
    />
  ));

const styles = StyleSheet.create({
  cardTitle: {
    fontFamily: "Manrope_500Medium",
    fontSize: 15,
  },
  colorBox: {
    aspectRatio: 1,
    justifyContent: "center",
    alignItems: "center",
    width: 51,
    borderRadius: 12,
  },
  card: {
    marginVertical: 15,
    backgroundColor: "white",
    width: "100%",
    borderRadius: 12,
    paddingHorizontal: 20,
    paddingVertical: 21,
  },
  pfpTxt: {
    fontFamily: "Manrope_500Medium",
    fontSize: 30,
    color: "white",
  },
  pfp: {
    aspectRatio: 1,
    width: 65.54,
    backgroundColor: "gray",
    borderRadius: 20,
  },
  txtBox: {
    backgroundColor: "#fafafa",
    borderRadius: 50,
    borderWidth: 2,
    borderColor: "#cecece",
    padding: 15,
    height: 45,
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 13,
  },
  subTit: {
    fontFamily: "Manrope_500Medium",
    fontSize: 15,
  },
  label: {
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 12,
    color: "#a1a1a1",
  },
  photoSet: {
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 13.07,
  },
  jakarta12: {
    paddingVertical: 10,
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 12,
    color: "#a1a1a1",
  },
  viewPicker: {
    borderRadius: 50,
    backgroundColor: Colors.grey80,
    marginBottom: 16,
    borderColor: Colors.grey50,
    borderWidth: 1,
    marginTop: 0,
    height: 40,
    zIndex: 10,
  },
  inViewPicker: {
    borderRadius: 50,
    paddingVertical: 12,
    paddingHorizontal: 16,
    marginBottom: 16,
    marginTop: -20,
    height: 40,
    zIndex: 10,
  },
});

export default MyProfile;