"use client";
import React, { useState, useRef, useEffect } from "react";
import Button from "@/components/common/Button";
import MiddleDrawer from "@/components/common/MiddleDrawer";
import {
  updateAccountSettings,
  resend2FAVerificationOtp,
} from "@/lib/actions/accountSettingsActions";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { useRouter } from "next/navigation";
import { useDispatch } from "react-redux";
import { useTranslations } from "next-intl";
import { IoIosArrowDown, IoIosArrowForward } from "react-icons/io";
import { toast } from "react-toastify";

interface TwoFactorAuthProps {
  twofa?: {
    whatsapp?: boolean;
    email?: boolean;
    phone_number?: boolean;
  };
  token?: string;
}

export default function TwoFactorAuth({ twofa, token }: TwoFactorAuthProps) {
  const t = useTranslations();
  const methods = [
    {
      key: "whatsapp",
      name: t("account_settings.two_factor_auth.whatsapp"),
      description: t("account_settings.two_factor_auth.whatsapp_description"),
      icon: "/whatsapp-icon.svg",
    },
    {
      key: "email",
      name: t("account_settings.two_factor_auth.email"),
      description: t("account_settings.two_factor_auth.email_description"),
      icon: "/mail-icon.svg",
    },
  ];
  const router = useRouter();
  const dispatch = useDispatch();
  const [activeDrawer, setActiveDrawer] = useState<null | "verifyOtp">(null);
  const [selected, setSelected] = useState<string | null>(null);
  const [otp, setOtp] = useState(["", "", "", "", "", ""]);
  const inputsRef = useRef<Array<HTMLInputElement | null>>([]);
  const [resendTimer, setResendTimer] = useState(120);
  const [resendAvailable, setResendAvailable] = useState(false);
  const [localTwofa, setLocalTwofa] = useState({
    whatsapp: false,
    email: false,
    phone_number: false,
  });
  const [isLoading, setIsLoading] = useState<{ [key: string]: boolean }>({});
  const [enabled, setEnabled] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [showConfirmModal, setShowConfirmModal] = useState<
    null | "on" | "off" | "change"
  >(null);
  const [pendingMethod, setPendingMethod] = useState<string | null>(null);
  const [pendingSelected, setPendingSelected] = useState<string | null>(null);
  const [isSendingOtp, setIsSendingOtp] = useState(false);

  useEffect(() => {
    if (twofa) {
      setLocalTwofa({
        whatsapp: twofa.whatsapp ?? false,
        email: twofa.email ?? false,
        phone_number: twofa.phone_number ?? false,
      });
      const enabledMethod = methods.find(
        (m) => twofa[m.key as keyof typeof twofa]
      );
      setSelected(enabledMethod ? enabledMethod.key : null);
      setEnabled(!!enabledMethod);
    }
  }, [twofa]);

  const handleUpdate2FA = async (enable: boolean, payload: any = null) => {
    const loadingKey = "toggle";
    setIsLoading((prev) => ({ ...prev, [loadingKey]: true }));
    setError(null);
    setSuccess(null);

    try {
      const defaultPayload = {
        whatsapp: false,
        email: false,
        phone_number: false,
      };
      await updateAccountSettings(
        { two_factor_authentication: payload || defaultPayload },
        token
      );

      if (enable) {
        setActiveDrawer("verifyOtp");
        setOtp(Array(6).fill(""));
        setResendTimer(120);
        setResendAvailable(false);
      } else {
        setShowConfirmModal(null);
        setSuccess("account_settings.two_factor_auth.disabled");
      }

      setEnabled(enable);
      setLocalTwofa(payload || defaultPayload);
    } catch (err: any) {
      if (!checkAuthErrorGet(err, dispatch, router)) {
        const errorMessage = enable
          ? "account_settings.two_factor_auth.failed_to_enable_2fa"
          : "account_settings.two_factor_auth.failed_to_disable_2fa";
        setError(err?.response?.data?.message || errorMessage);
      }
      return
    } finally {
      setIsLoading((prev) => ({ ...prev, [loadingKey]: false }));
    }
  };

  const handleToggleSwitch = async () => {
    if (!enabled) {
      const payload: any = {
        whatsapp: false,
        email: false,
        phone_number: false,
      };
      payload[selected!] = true;
      await handleUpdate2FA(true, payload);
    } else {
      await handleUpdate2FA(false);
    }
  };

  const handleOtpChange = (index: number, value: string) => {
    if (!/^\d?$/.test(value)) return;
    const newOtp = [...otp];
    newOtp[index] = value;
    setOtp(newOtp);
    if (value && index < 5) {
      inputsRef.current[index + 1]?.focus();
    }
  };

  const handleKeyDown = (
    index: number,
    e: React.KeyboardEvent<HTMLInputElement>
  ) => {
    if (e.key === "Backspace" && !otp[index] && index > 0) {
      inputsRef.current[index - 1]?.focus();
    }
  };

  const handleVerifyOTP = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setSuccess(null);
    const code = otp.join("");

    if (code.length !== 6) {
      setError("account_settings.two_factor_auth.enter_all_digits");
      return;
    }

    setIsLoading((prev) => ({ ...prev, verify: true }));

    try {
      const payload: any = {
        two_factor_authentication: {
          whatsapp: pendingSelected === "whatsapp",
          email: pendingSelected === "email",
          phone_number: false,
        },
        otp: code,
      };

      const result = await updateAccountSettings(payload, token);

      if (result.success) {
        setSelected(pendingSelected);
        setLocalTwofa(payload.two_factor_authentication);
        setEnabled(true);
        setSuccess("account_settings.two_factor_auth.enabled");
        setActiveDrawer(null);
        setPendingSelected(null);
        toast.success(t("account_settings.two_factor_auth.enabled"));
      } else if (result.error === "OTP_INVALID_OR_EXPIRED") {
        setError("account_settings.two_factor_auth.invalid_otp");
        toast.error(t("account_settings.two_factor_auth.invalid_otp"));
      } else {
        setError(
          result.message ||
            "account_settings.two_factor_auth.failed_to_enable_2fa"
        );
        toast.error(t("account_settings.two_factor_auth.failed_to_enable_2fa"));
      }
    } catch (err: any) {
      if (checkAuthErrorGet(err, dispatch, router)) return;
      setError(
        err?.response?.data?.message ||
          "account_settings.two_factor_auth.failed_to_enable_2fa"
      );
    } finally {
      setIsLoading((prev) => ({ ...prev, verify: false }));
    }
  };

  useEffect(() => {
    if (resendTimer > 0) {
      const timer = setInterval(() => {
        setResendTimer((prev) => prev - 1);
      }, 1000);
      return () => clearInterval(timer);
    } else {
      setResendAvailable(true);
    }
  }, [resendTimer]);

  const handleResend = async () => {
    if (!pendingSelected) return;

    setError(null);
    setSuccess(null);
    setIsLoading((prev) => ({ ...prev, resend: true }));

    try {
      const result = await resend2FAVerificationOtp(
        {
          whatsapp: pendingSelected === "whatsapp",
          email: pendingSelected === "email",
          phone_number: false,
        },
        token
      );

      if (result.success) {
        setResendTimer(120);
        setResendAvailable(false);
        setSuccess("account_settings.two_factor_auth.otp_resent");
        toast.success(t("account_settings.two_factor_auth.otp_resent"));
      } else {
        setError(
          result.message ||
            "account_settings.two_factor_auth.failed_to_resend_otp"
        );
        toast.error(t("account_settings.two_factor_auth.failed_to_resend_otp"));
      }
    } catch (err: any) {
      if (checkAuthErrorGet(err, dispatch, router)) return;
      setError(
        err?.response?.data?.message ||
          "account_settings.two_factor_auth.failed_to_resend_otp"
      );
    } finally {
      setIsLoading((prev) => ({ ...prev, resend: false }));
    }
  };

  const handleToggleClick = (isOpen:any) => {
    if (enabled) {
      if (selected) {
        if(isOpen == "Yes"){
          setShowConfirmModal("off");
        }
      } else {
        handleUpdate2FA(false);
      }
    } else {
      setEnabled(true);
      setLocalTwofa({ whatsapp: false, email: false, phone_number: false });
      setSelected(null);
      setPendingSelected(null);
      setActiveDrawer(null);
      setOtp(Array(6).fill(""));
      setResendTimer(120);
      setResendAvailable(false);
      setError(null);
      setSuccess(null);
    }
  };

  const handleConfirmToggle = async () => {
    const modalType = showConfirmModal;

    if (modalType === "change" && pendingMethod) {
      setIsSendingOtp(true);
      setError(null);
      setSuccess(null);

      try {
        const result = await resend2FAVerificationOtp(
          {
            whatsapp: pendingMethod === "whatsapp",
            email: pendingMethod === "email",
            phone_number: false,
          },
          token
        );
        setPendingSelected(pendingMethod);
        setOtp(Array(6).fill(""));
        setResendTimer(120);
        setResendAvailable(false);
        setShowConfirmModal(null);
        // toast.success(t("account_settings.two_factor_auth.otp_sent_to", {
        //   method: t(`account_settings.two_factor_auth.${pendingMethod}`)
        // }));
        toast.success(t("account_settings.two_factor_auth.otp_sent_to"));
        setActiveDrawer("verifyOtp");
      } catch (err: any) {
        let errorMessage = t("account_settings.two_factor_auth.failed_to_send_otp");
        if (err?.response?.data?.message) {
          errorMessage = err.response.data.message;
        } 
        else if (err?.message) {
          errorMessage = err.message;
        }
        else if (err?.result?.message) {
          errorMessage = err.result.message;
        }
        
        setError(errorMessage);
        
        if (!errorMessage.toLowerCase().includes('otp sent') && 
            !errorMessage.toLowerCase().includes('sent to')) {
          toast.error(errorMessage);
        }
        
        if (checkAuthErrorGet(err, dispatch, router)) return;
      } finally {
        setIsSendingOtp(false);
      }
    } else if (modalType === "off") {
      await handleToggleSwitch();
    } else if (modalType === "on") {
      setEnabled(true);
      setLocalTwofa({ whatsapp: false, email: false, phone_number: false });
      setSelected(null);
      setPendingSelected(null);
      setActiveDrawer(null);
      setOtp(Array(6).fill(""));
      setResendTimer(120);
      setResendAvailable(false);
      setError(null);
      setSuccess(null);
    }
  };

  const handleCancelToggle = () => {
    const currentModal = showConfirmModal;
    setShowConfirmModal(null);

    if (currentModal === "change") {
      setPendingSelected(selected);
    }

    setPendingMethod(null);
    setIsSendingOtp(false);
  };

  return (
    <>
      <div className={`mb-5 ${enabled ? "shadow-Shadow3" : ""}`}>
        <div
          className={`flex items-center justify-between px-4 py-3 border-b border-neutrals100 text-left font-semibold dark:border-darkborder ${
            enabled
              ? "bg-neutrals100 text-primary500 dark:bg-cardfooter dark:text-white"
              : "bg-white text-neutrals800 dark:bg-cardfooter dark:border-darkborder dark:text-neutrals400"
          }`}
          style={{ cursor: "pointer" }}
          onClick={()=>handleToggleClick('No')}
        >
          <span>{t("account_settings.two_factor_auth.title")}</span>
          <div
            className="flex items-center gap-2"
            onClick={(e) => e.stopPropagation()}
          >
            <button
              type="button"
              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300 ${
                enabled && selected
                  ? "bg-primary500 dark:bg-primary400"
                  : enabled
                  ? "bg-gray-400 dark:bg-gray-600"
                  : "bg-gray-200 dark:bg-background"
              }`}
              aria-pressed={enabled && !!selected}
              disabled={isLoading.toggle || (enabled && !selected)}
              onClick={()=>handleToggleClick('Yes')}
              aria-label="TwoFactor"
            >
              <span
                className={`inline-block h-4 w-4 transform rounded-full bg-white transition duration-300 translate-x-1 rtl:-translate-x-1 ${
                  enabled && selected ? "translate-x-6 rtl:-translate-x-6" : ""
                }`}
              />
            </button>
            <span
              className={` ${enabled ? "text-primary500 dark:text-primary400" : "text-neutrals500 dark:text-primary400"}`}
              onClick={()=>handleToggleClick('No')}
            >
              {enabled ? <IoIosArrowDown /> : <IoIosArrowForward className="rtl:rotate-180"/>}
            </span>
          </div>
        </div>
        {enabled && (
          <div className="py-2.5 bg-white dark:bg-darkbg px-10 max-md:px-4">
            <p className="text-sm text-neutrals500 mb-4 dark:text-neutrals400">
              {t("account_settings.two_factor_auth.description")}
            </p>
            <div key={selected}>
              {methods.map((method) => (
                <div
                  key={method.key}
                  className={`flex items-center justify-between py-4 border-b border-neutrals100 last:border-b-0 dark:border-darkborder ${
                    selected === method.key ? "" : "border-gray-200"
                  }`}
                >
                  <div className="flex items-center gap-4">
                    <img src={method.icon} alt={method.name} />
                    <div>
                      <p className="text-sm font-semibold text-neutrals800 dark:text-neutrals300">
                        {method.name}
                      </p>
                      <p className="text-sm text-neutrals500 dark:text-neutrals400">
                        {method.description}
                      </p>
                    </div>
                  </div>
                  <label className="flex items-center justify-end min-w-[40px] cursor-pointer relative">
                    <input
                      type="radio"
                      name="verification"
                      value={method.key}
                      checked={selected === method.key}
                      onChange={() => {}}
                      onClick={(e) => {
                        e.preventDefault();
                        if (selected === method.key) return;
                        setPendingMethod(method.key);
                        setShowConfirmModal("change");
                      }}
                      className="absolute opacity-0 pointer-events-none"
                      disabled={!enabled}
                    />
                    <div
                      className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                        selected === method.key ||
                        (pendingSelected === method.key &&
                          twofa?.[method.key as keyof typeof twofa])
                          ? "border-primary500 bg-primary500 dark:border-primary400 dark:bg-primary400"
                          : "border-neutrals200 dark:border-gray-600"
                      }`}
                    >
                      {(selected === method.key ||
                        (pendingSelected === method.key &&
                          twofa?.[method.key as keyof typeof twofa])) && (
                        <div className="w-2.5 h-2.5 rounded-full bg-white" />
                      )}
                    </div>
                  </label>
                </div>
              ))}
            </div>
          </div>
        )}
        <MiddleDrawer
          isOpen={Boolean(activeDrawer === "verifyOtp" && pendingSelected)}
          title={t("account_settings.two_factor_auth.verify_otp")}
          onClose={() => setActiveDrawer(null)}

          footer={
            <div className="flex justify-end gap-2">
              <Button
                label={t("button.cancel")}
                onClick={() => {
                  setActiveDrawer(null);
                  setOtp(Array(6).fill(""));
                  setError(null);
                  setSuccess(null);
                }}
                variant="fadoutline"
                className="dark:text-white"
              />
              <button
                type="button"
                disabled={isLoading.verify || otp.join("").length !== 6}
                onClick={() =>
                  handleVerifyOTP({
                    preventDefault: () => {},
                  } as React.FormEvent)
                }
                className={`inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-white ${
                  isLoading.verify || otp.join("").length !== 6
                    ? "bg-primary500 cursor-not-allowed dark:bg-primary400"
                    : "bg-primary400 hover:bg-primary600"
                } transition-colors duration-200`}
              >
                {isLoading.verify ? (
                  <>
                    <svg
                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    {t("button.verifying")}
                  </>
                ) : (
                  t("button.verify")
                )}
              </button>
            </div>
          }
        >
          <form onSubmit={handleVerifyOTP} className="text-center">
            <div className="text-base text-neutrals800 dark:text-neutrals300">
              {/* {t("account_settings.two_factor_auth.otp_sent_to", {
                method: pendingSelected === "whatsapp" ? "Whatsapp" : "Email",
              })} */}
              {t("account_settings.two_factor_auth.otp_sent_to")}
            </div>
            <div className="flex gap-3 mt-5 justify-center ">
              {otp.map((digit, i) => (
                <input
                  key={i}
                  ref={(el) => {
                    inputsRef.current[i] = el;
                  }}
                  type="text"
                  inputMode="numeric"
                  maxLength={1}
                  value={digit}
                  onChange={(e) => handleOtpChange(i, e.target.value)}
                  onKeyDown={(e) => handleKeyDown(i, e)}
                  onPaste={(e) => {
                    e.preventDefault();
                    const paste = e.clipboardData
                      .getData("text")
                      .trim()
                      .slice(0, 6);
                    if (/^\d+$/.test(paste)) {
                      const newOtp = [...otp];
                      paste.split("").forEach((char, index) => {
                        if (index < 6) {
                          newOtp[index] = char;
                        }
                      });
                      setOtp(newOtp);
                      const nextInput = Math.min(paste.length, 5);
                      inputsRef.current[nextInput]?.focus();
                    }
                  }}
                  className="w-11 h-11 min-w-[44px] min-h-[44px] text-center text-base rounded-lg bg-white text-neutrals600 outline-none border border-neutrals200 dark:bg-darkbg dark:border-darkborder dark:text-white focus:border-primary800"
                  disabled={isLoading.verify}
                />
              ))}
            </div>
            {error && (
              <div className="text-red-500 mt-3 text-sm">{t(error)}</div>
            )}
            {success && (
              <div className="text-green-600 mt-3 text-sm">{t(success)}</div>
            )}
            <div className="text-sm text-neutrals500 font-normal mt-5 dark:text-neutrals400">
              {t("account_settings.two_factor_auth.didnt_receive_otp")}
              {resendAvailable ? (
                <button
                  type="button"
                  className="underline text-sm ml-2 text-primary500 font-medium"
                  onClick={handleResend}
                  disabled={isLoading.resend}
                >
                  {isLoading.resend
                    ? t("account_settings.two_factor_auth.resending")
                    : t("account_settings.two_factor_auth.resend")}
                </button>
              ) : (
                <span className="ml-2">
                  {t("account_settings.two_factor_auth.resend_in", {
                    seconds: resendTimer,
                  })}
                </span>
              )}
            </div>
          </form>
        </MiddleDrawer>
      </div>
      {/* Confirmation Modal */}
      {showConfirmModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30">
          <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-sm dark:bg-darkbg">
            <div className="mb-4 text-lg font-semibold text-neutrals800 dark:text-neutrals300">
              {showConfirmModal === "on"
                ? t("account_settings.two_factor_auth.confirm_on")
                : showConfirmModal === "off"
                ? t("account_settings.two_factor_auth.confirm_off")
                : t("account_settings.two_factor_auth.confirm_change")}
            </div>
            {showConfirmModal === "change" && (
              <p className="mb-4 text-sm text-neutrals600 dark:text-neutrals400">
                {t("account_settings.two_factor_auth.confirm_change_message")}
              </p>
            )}
            <div className="flex justify-end gap-2 mt-6">
              <Button
                label={t("account_settings.two_factor_auth.cancel")}
                onClick={handleCancelToggle}
                variant="fadoutline"
                className="dark:text-white"
              />
              <Button
                onClick={handleConfirmToggle}
                variant="secondary"
                label={
                  isSendingOtp && showConfirmModal === "change"
                    ? `${t("account_settings.two_factor_auth.sending_otp")}`
                    : showConfirmModal === "change"
                    ? t("account_settings.two_factor_auth.confirm_sendOtp")
                    : t("account_settings.two_factor_auth.confirm")
                }
                disabled={isSendingOtp}
              >
                {isSendingOtp ? (
                  <div className="flex items-center justify-center">
                    <svg
                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    <span className="sr-only">{t("button.loading")}</span>
                  </div>
                ) : null}
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}