"use client";
import React, { useEffect, useMemo, useRef, useState } from "react";
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/shared/ui/form";
import { useFormContext } from "react-hook-form";
import PhoneInput, { PhoneInputProps } from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { useTranslations } from "next-intl";
import { cn } from "@/utils/helpers";
import { Skeleton } from "../ui/skeleton";
import axiosInstanceClient from "@/utils/axiosClient";
import UseSession from "../../hooks/UseSession";

interface Country {
  name: string;
  shortName: string;
  dialCode: string;
  phoneLimit: number;
  flag: string;
}
interface FormPhoneNumberProps {
  label?: string;
  showRequired?: boolean;
  country?: string;
  disabled?: boolean;
  className?: string;
  name: string;
  PhoneNumberProps?: PhoneInputProps;
}

const FormPhoneNumber: React.FC<FormPhoneNumberProps> = ({
  label,
  name,
  showRequired = true,
  disabled = false,
  className = "",
  PhoneNumberProps,
}) => {
  const form = useFormContext();
  const t = useTranslations("LABELS");
  const inputRef = useRef<HTMLInputElement>(null);
  const session = UseSession();
  const phone_code = name + "_code";
  const phone_limit = name + "_limit";

  const {
    setValue,
    getValues,
    formState: { errors },
    trigger,
  } = form;
  const [countries, setCountries] = useState<Country[]>([]);
  const [loading, setLoading] = useState(false);
  const [dialCode, setDialCode] = useState<string>("");
  const [phone, setPhone] = useState(``);
  useEffect(() => {
    const fetchCountries = async () => {
      try {
        setLoading(true);
        const { data } = await axiosInstanceClient.get(
          "guest/countries?paginate=0",
        );

        const saCountryFromApi = data?.data?.find(
          (item: any) =>
            String(item.phone_code) === "966" ||
            String(item.short_name)?.toLowerCase() === "sa",
        );

        const saCountry: Country = saCountryFromApi
          ? {
              name: saCountryFromApi.name,
              shortName: "sa",
              dialCode: String(saCountryFromApi.phone_code || "966"),
              flag: saCountryFromApi.flag?.media,
              phoneLimit: Number(saCountryFromApi.phone_length) || 9,
            }
          : {
              name: "Saudi Arabia",
              shortName: "sa",
              dialCode: "966",
              flag: "",
              phoneLimit: 9,
            };

        setCountries([saCountry]);
        setDialCode(`+${saCountry.dialCode}`);
        setPhone(`+${saCountry.dialCode}${getValues(name) || ""}`);
        setValue(phone_code, saCountry.dialCode);
        setValue(phone_limit, saCountry.phoneLimit);
      } catch (error) {
        console.error("Error fetching countries:", error);
        setCountries([
          {
            name: "Saudi Arabia",
            shortName: "sa",
            dialCode: "966",
            flag: "",
            phoneLimit: 9,
          },
        ]);
        setDialCode("+966");
        setPhone("+966");
        setValue(phone_code, "966");
        setValue(phone_limit, 9);
      } finally {
        setLoading(false);
      }
    };

    fetchCountries();
  }, [session]);

  // ✅ Build localization map for country names (ISO2 -> name)
  const localization = useMemo(() => {
    const map: Record<string, string> = {};
    for (const c of countries) {
      if (c.shortName) {
        map[c.shortName] = c.name;
      }
    }
    return map;
  }, [countries]);

  // ✅ Handle phone number change
  const handlePhoneChange = (value: string) => {
    const saDial = countries[0]?.dialCode || "966";
    const newDial = saDial;
    setDialCode(`+${saDial}`);

    let currentValue = value;
    if (!currentValue.startsWith(newDial)) {
      currentValue = newDial + currentValue.replace(/^\+?\d+/, "");
    }

    const numberOnly = currentValue.slice(newDial.length).trim();
    setValue(name, numberOnly, { shouldValidate: true });
    setValue(phone_code, saDial, { shouldValidate: true });
    setValue(phone_limit, countries[0]?.phoneLimit || 9, {
      shouldValidate: true,
    });
    trigger(name);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    const input = inputRef.current;
    if (!input) return;

    const selectionStart = input.selectionStart ?? 0;
    const selectionEnd = input.selectionEnd ?? 0;
    const codeLength = dialCode.length;

    const isBackspaceAtCode =
      e.key === "Backspace" && selectionStart <= codeLength;
    const isDeleteAtCode = e.key === "Delete" && selectionStart < codeLength;
    const isSelectingCode =
      selectionStart < codeLength || selectionEnd < codeLength;

    if (isBackspaceAtCode || isDeleteAtCode || isSelectingCode) {
      e.preventDefault();
      setTimeout(() => input.setSelectionRange(codeLength, codeLength), 0);
    }
  };

  const handleClick = () => {
    const input = inputRef.current;
    if (input) {
      const cursorPos = input.selectionStart ?? 0;
      if (cursorPos < dialCode.length) {
        input.setSelectionRange(dialCode.length, dialCode.length);
      }
    }
  };

  useEffect(() => {
    if (!phone.startsWith(dialCode)) {
      setPhone(dialCode);
    } else if (phone === dialCode) {
      setPhone(dialCode);
    }
  }, [phone, dialCode]);

  useEffect(() => {
    if (!getValues(name)) setPhone(`+${dialCode}`);
  }, [getValues(name)]);

  useEffect(() => {
    const currentPhone = getValues(name);
    const currentCode = getValues(phone_code);

    if (currentPhone) {
      const saDial = countries[0]?.dialCode || currentCode || "966";
      setDialCode(`+${saDial}`);
      setPhone(`+${saDial}${currentPhone}`);
    }
  }, [getValues(name), getValues(phone_code)]);

  return (
    <FormField
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem className={cn("w-full", className)}>
          <div className="flex items-center gap-2">
            {label && (
              <FormLabel className=" text-text-primary font-medium text-sm leading-6 px-4 ">
                {t(label)}
                {showRequired && (
                  <span className="text-error mx-1 text-lg translate-y-1 inline-block">
                    *
                  </span>
                )}
              </FormLabel>
            )}
          </div>

          <FormControl>
            <div dir="ltr" className="relative">
              {loading ? (
                <Skeleton className="w-full h-12 rounded-xl" />
              ) : (
                <PhoneInput
                  disabled={disabled || loading}
                  localization={localization}
                  buttonClass="hover:bg-[green]"
                  containerStyle={{ borderRadius: "12px" }}
                  inputStyle={{
                    width: "100%",
                    borderRadius: "12px",
                    height: "48px",
                    paddingLeft: "60px",
                    borderColor: (errors as any)[name] ? "#ef233c" : "#EAEDF0",
                  }}
                  buttonStyle={{
                    marginLeft: "10px",
                    height: "40px",
                    width: "40px",
                    marginTop: "5px",
                    borderRadius: "50%",
                    border: "none",
                    background: "transparent",
                  }}
                  {...PhoneNumberProps}
                  country="sa"
                  onlyCountries={["sa"]}
                  disableDropdown
                  countryCodeEditable={false}
                  value={phone}
                  onChange={handlePhoneChange}
                  inputProps={{
                    ref: inputRef,
                    onKeyDown: handleKeyDown,
                    onClick: handleClick,
                    disabled: disabled || loading,
                  }}
                />
              )}
            </div>
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  );
};

export default FormPhoneNumber;