"use client";
import { useState, type ReactNode, type SubmitEvent } from "react";
import Link from "next/link";
import {
  useForm,
  type FieldErrors,
  type UseFormRegister,
} from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { object, string } from "yup";
import { useValidation } from "@/hooks/useValidation";
import { useResendCountdown } from "@/hooks/useResendCountdown";
import { apiFetch, formatApiMsg } from "@/lib/api";
import AuthLayout from "@/components/auth/AuthLayout";
import AuthPasswordInput from "@/components/auth/AuthPasswordInput";
import {
  STRENGTH_BAR_COLORS,
  STRENGTH_LABELS,
  getPasswordRequirements,
  getPasswordStrength,
  getStrengthTextColor,
} from "@/lib/password/strength";

interface ForgotData {
  email: string;
  code: string;
  password: string;
  password_confirmation: string;
}

type ForgotStep = 1 | 2 | 3 | 4;
type ActiveStep = 1 | 2 | 3;

const STEP_LABELS = ["البريد الإلكتروني", "رمز التحقق", "كلمة المرور الجديدة"];

function fieldBorderClass(hasError: boolean | undefined): string {
  return hasError
    ? "border-red-500/60 focus:border-red-500"
    : "border-white/10 focus:border-[#FCD704]/50";
}

function getSubmitButtonLabel(step: ActiveStep): string {
  if (step === 1) {
    return "إرسال رمز التحقق";
  }
  if (step === 2) {
    return "التحقق والمتابعة";
  }
  return "تغيير كلمة المرور";
}

function ForgotPasswordSuccess() {
  return (
    <div className="flex flex-col items-center text-center py-8">
      <div className="w-20 h-20 bg-[#FCD704]/15 border-2 border-[#FCD704]/40 rounded-full flex items-center justify-center mb-6">
        <i className="ri-checkbox-circle-fill text-[#FCD704] text-4xl" />
      </div>
      <h2 className="text-white font-bold text-2xl mb-2">تم استعادة الحساب!</h2>
      <p className="text-gray-400 text-sm mb-6">
        تم تعيين كلمة المرور الجديدة بنجاح، يمكنك الآن تسجيل الدخول.
      </p>
      <Link
        href="/login"
        className="w-full bg-[#FCD704] text-[#13151A] font-bold text-base py-4 rounded-xl cursor-pointer text-center block"
      >
        تسجيل الدخول
      </Link>
    </div>
  );
}

function ForgotPasswordStepper({ step }: Readonly<{ step: ActiveStep }>) {
  return (
    <div className="flex items-center justify-between gap-4 mb-8 w-full select-none">
      <div className="flex items-center justify-between gap-2 grow" dir="rtl">
        {[1, 2, 3].map((s) => (
          <div key={s} className="flex items-center grow gap-2 last:grow-0">
            <div
              className={`w-7 h-7 shrink-0 rounded-full flex items-center justify-center text-xs font-bold transition-all ${
                step >= s
                  ? "bg-[#FCD704]/20 border border-[#FCD704] text-[#FCD704]"
                  : "bg-white/5 border border-white/10 text-gray-500"
              }`}
            >
              {step > s ? <i className="ri-check-line text-xs" /> : s}
            </div>
            {s !== 3 && (
              <div
                className={`h-1 grow rounded-full transition-all ${
                  step > s ? "bg-[#FCD704]" : "bg-white/10"
                }`}
              />
            )}
          </div>
        ))}
      </div>
      <span className="text-gray-400 text-xs font-semibold shrink-0">
        {STEP_LABELS[step - 1]}
      </span>
    </div>
  );
}

function EmailStepField({
  register,
  errors,
}: Readonly<{
  register: UseFormRegister<ForgotData>;
  errors: FieldErrors<ForgotData>;
}>) {
  return (
    <div>
      <label
        htmlFor="forgot-email"
        className="text-gray-400 text-xs text-right block mb-2"
      >
        البريد الإلكتروني
      </label>
      <div className="relative">
        <input
          id="forgot-email"
          type="email"
          {...register("email")}
          placeholder="أدخل بريدك الإلكتروني"
          className={`w-full bg-[#13151A] border text-white text-sm rounded-xl px-4 py-3.5 pr-12 outline-none transition-colors text-right placeholder-gray-600 ${fieldBorderClass(!!errors.email)}`}
          dir="rtl"
        />
        <div className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center pointer-events-none">
          <i className="ri-mail-line text-gray-500" />
        </div>
      </div>
      {errors.email && (
        <p className="text-red-400 text-xs mt-1.5 text-right">
          {errors.email.message}
        </p>
      )}
    </div>
  );
}

function CodeStepField({
  register,
  errors,
  onResend,
  resendLoading,
  resendSecondsLeft,
  canResend,
}: Readonly<{
  register: UseFormRegister<ForgotData>;
  errors: FieldErrors<ForgotData>;
  onResend: () => void;
  resendLoading: boolean;
  resendSecondsLeft: number;
  canResend: boolean;
}>) {
  return (
    <div>
      <label
        htmlFor="forgot-code"
        className="text-gray-400 text-xs text-right block mb-2"
      >
        رمز التحقق (6 أرقام)
      </label>
      <div className="relative">
        <input
          id="forgot-code"
          type="text"
          {...register("code")}
          placeholder="123456"
          maxLength={6}
          className={`w-full bg-[#13151A] border text-white text-sm rounded-xl px-4 py-3.5 pr-12 outline-none transition-colors placeholder-gray-600 tracking-widest ${fieldBorderClass(!!errors.code)}`}
          dir="ltr"
        />
        <div className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center pointer-events-none">
          <i className="ri-shield-keyhole-line text-gray-500" />
        </div>
      </div>
      {errors.code && (
        <p className="text-red-400 text-xs mt-1.5 text-right">
          {errors.code.message}
        </p>
      )}
      <div className="mt-3 text-right">
        {canResend ? (
          <button
            type="button"
            onClick={onResend}
            disabled={resendLoading}
            className="text-[#FCD704] text-xs hover:underline cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
          >
            {resendLoading ? "جاري الإرسال..." : "إعادة إرسال الكود"}
          </button>
        ) : (
          <p className="text-gray-500 text-xs">
            إعادة الإرسال خلال{" "}
            <span className="text-[#FCD704] font-semibold">
              {resendSecondsLeft}
            </span>{" "}
            ثانية
          </p>
        )}
      </div>
    </div>
  );
}

function PasswordStepFields({
  register,
  errors,
  newPass,
  show,
  showConfirm,
  onToggleShow,
  onToggleShowConfirm,
  strength,
}: Readonly<{
  register: UseFormRegister<ForgotData>;
  errors: FieldErrors<ForgotData>;
  newPass: string;
  show: boolean;
  showConfirm: boolean;
  onToggleShow: () => void;
  onToggleShowConfirm: () => void;
  strength: number;
}>) {
  const requirements = getPasswordRequirements(newPass || "");

  return (
    <>
      <div>
        <label
          htmlFor="forgot-password"
          className="text-gray-400 text-xs text-right block mb-2"
        >
          كلمة المرور الجديدة
        </label>
        <AuthPasswordInput
          id="forgot-password"
          show={show}
          onToggleShow={onToggleShow}
          registration={register("password")}
          hasError={!!errors.password}
          errorMessage={errors.password?.message}
          placeholder="8 أحرف على الأقل"
        />
        {newPass?.length > 0 && (
          <div className="mt-2">
            <div className="flex gap-1 mb-1">
              {[1, 2, 3, 4].map((i) => (
                <div
                  key={i}
                  className={`flex-1 h-1 rounded-full transition-all ${i <= strength ? STRENGTH_BAR_COLORS[strength] : "bg-white/10"}`}
                />
              ))}
            </div>
            <p
              className={`text-xs text-right ${getStrengthTextColor(strength)}`}
            >
              قوة كلمة المرور: {STRENGTH_LABELS[strength]}
            </p>
          </div>
        )}
      </div>

      <div>
        <label
          htmlFor="forgot-password-confirmation"
          className="text-gray-400 text-xs text-right block mb-2"
        >
          تأكيد كلمة المرور الجديدة
        </label>
        <AuthPasswordInput
          id="forgot-password-confirmation"
          show={showConfirm}
          onToggleShow={onToggleShowConfirm}
          registration={register("password_confirmation")}
          hasError={!!errors.password_confirmation}
          errorMessage={errors.password_confirmation?.message}
          placeholder="أعد إدخال كلمة المرور"
        />
      </div>

      <div className="bg-[#1E2128] rounded-xl p-4 flex flex-col gap-2 mt-2">
        <p className="text-gray-400 text-xs font-semibold mb-1 text-right">
          متطلبات كلمة المرور:
        </p>
        {requirements.map((r) => (
          <div key={r.text} className="flex items-center justify-end gap-2" dir="ltr">
            <span className={`text-xs ${r.ok ? "text-gray-300" : "text-gray-500"}`}>
              {r.text}
            </span>
            <div
              className={`w-4 h-4 flex items-center justify-center rounded-full ${r.ok ? "bg-[#FCD704]/20" : "bg-white/5"}`}
            >
              <i
                className={`text-xs ${r.ok ? "ri-check-line text-[#FCD704]" : "ri-close-line text-gray-600"}`}
              />
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function renderStepFields(
  step: ActiveStep,
  props: {
    register: UseFormRegister<ForgotData>;
    errors: FieldErrors<ForgotData>;
    newPass: string;
    show: boolean;
    showConfirm: boolean;
    onToggleShow: () => void;
    onToggleShowConfirm: () => void;
    onResend: () => void;
    resendLoading: boolean;
    resendSecondsLeft: number;
    canResend: boolean;
    strength: number;
  },
): ReactNode {
  if (step === 1) {
    return <EmailStepField register={props.register} errors={props.errors} />;
  }
  if (step === 2) {
    return (
      <CodeStepField
        register={props.register}
        errors={props.errors}
        onResend={props.onResend}
        resendLoading={props.resendLoading}
        resendSecondsLeft={props.resendSecondsLeft}
        canResend={props.canResend}
      />
    );
  }
  return (
    <PasswordStepFields
      register={props.register}
      errors={props.errors}
      newPass={props.newPass}
      show={props.show}
      showConfirm={props.showConfirm}
      onToggleShow={props.onToggleShow}
      onToggleShowConfirm={props.onToggleShowConfirm}
      strength={props.strength}
    />
  );
}

function renderSubmitButtonContent(
  loading: boolean,
  step: ActiveStep,
): ReactNode {
  if (loading) {
    return (
      <>
        <i className="ri-loader-4-line animate-spin text-lg" />
        <span>جاري المعالجة...</span>
      </>
    );
  }
  return <span>{getSubmitButtonLabel(step)}</span>;
}

export default function ForgotPasswordPage() {
  const { validation } = useValidation();

  const [step, setStep] = useState<ForgotStep>(1);
  const [loading, setLoading] = useState(false);
  const [resendLoading, setResendLoading] = useState(false);
  const [error, setError] = useState("");
  const [show, setShow] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const { secondsLeft, canResend, startCountdown } = useResendCountdown();

  const schema = object({
    email: validation.email(),
    code: string().when("$step", {
      is: (s: number) => s >= 2,
      then: () =>
        string()
          .required("الكود مطلوب")
          .matches(/^\d{6}$/, "الكود يجب أن يكون 6 أرقام"),
    }),
    password: string().when("$step", {
      is: 3,
      then: () => validation.strict_password(),
    }),
    password_confirmation: string().when("$step", {
      is: 3,
      then: () => validation.strict_password_confirmation(),
    }),
  });

  const {
    register,
    trigger,
    watch,
    formState: { errors },
  } = useForm<ForgotData>({
    resolver: yupResolver(schema) as any,
    context: { step },
    defaultValues: {
      email: "",
      code: "",
      password: "",
      password_confirmation: "",
    },
  });

  const emailVal = watch("email");
  const codeVal = watch("code");
  const newPass = watch("password");
  const confirm = watch("password_confirmation");

  const requirements = getPasswordRequirements(newPass || "");
  const allRulesPass = requirements.every((r) => r.ok);
  const hasUpper = requirements[1].ok;
  const hasNumber = requirements[2].ok;
  const hasSymbol = requirements[3].ok;
  const strength = getPasswordStrength(
    newPass || "",
    hasUpper,
    hasNumber,
    hasSymbol,
  );

  const handleStep1 = async () => {
    setError("");
    const ok = await trigger("email");
    if (!ok) return;

    setLoading(true);
    await apiFetch("/provider/password/forget", {
      method: "POST",
      body: JSON.stringify({ email: emailVal }),
      successCase: () => {
        startCountdown();
        setStep(2);
      },
      errorCase: (res) => {
        setError(
          formatApiMsg(res.msg) || "تعذّر إرسال الكود، تأكد من البريد الإلكتروني",
        );
      },
    });
    setLoading(false);
  };

  const handleStep2 = async () => {
    setError("");
    const ok = await trigger("code");
    if (!ok) return;

    setLoading(true);
    await apiFetch("/provider/password/check-code", {
      method: "POST",
      body: JSON.stringify({ email: emailVal, code: codeVal }),
      successCase: () => {
        setStep(3);
      },
      errorCase: (res) => {
        setError(formatApiMsg(res.msg) || "الكود غير صحيح أو منتهي الصلاحية");
      },
    });
    setLoading(false);
  };

  const handleStep3 = async () => {
    setError("");
    const ok = await trigger(["password", "password_confirmation"]);
    if (!ok || !allRulesPass) return;

    setLoading(true);
    await apiFetch("/provider/password/reset", {
      method: "POST",
      body: JSON.stringify({
        email: emailVal,
        code: codeVal,
        password: newPass,
        password_confirmation: confirm,
      }),
      successCase: () => {
        setStep(4);
      },
      errorCase: (res) => {
        setError(formatApiMsg(res.msg) || "تعذّر تعيين كلمة المرور الجديدة");
      },
    });
    setLoading(false);
  };

  const resendCode = async () => {
    if (!canResend || resendLoading) {
      return;
    }

    setError("");
    setResendLoading(true);
    await apiFetch("/provider/password/forget", {
      method: "POST",
      body: JSON.stringify({ email: emailVal }),
      successCase: () => {
        startCountdown();
        alert("تم إعادة إرسال الكود إلى بريدك الإلكتروني");
      },
      errorCase: (res) => {
        setError(formatApiMsg(res.msg) || "تعذّر إعادة إرسال الكود");
      },
    });
    setResendLoading(false);
  };

  const handleFormSubmit = (e: SubmitEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (step === 1) {
      handleStep1();
      return;
    }
    if (step === 2) {
      handleStep2();
      return;
    }
    handleStep3();
  };

  const goToPreviousStep = () => {
    setStep((current) => (current - 1) as 1 | 2);
    setError("");
  };

  if (step === 4) {
    return (
      <AuthLayout activeTab="forgot">
        <div className="flex flex-col w-full">
          <ForgotPasswordSuccess />
        </div>
      </AuthLayout>
    );
  }

  const activeStep: ActiveStep = step;

  return (
    <AuthLayout activeTab="forgot">
      <div className="flex flex-col w-full">
        <div className="text-right mb-6">
          <h2 className="text-white font-bold text-[30px] leading-9 mb-2">
            استعادة كلمة المرور
          </h2>
          <p className="text-gray-400 text-sm">
            اتبع الخطوات لاستعادة حسابك بأمان
          </p>
        </div>

        <ForgotPasswordStepper step={activeStep} />

        <form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
          {renderStepFields(activeStep, {
            register,
            errors,
            newPass,
            show,
            showConfirm,
            onToggleShow: () => setShow((value) => !value),
            onToggleShowConfirm: () => setShowConfirm((value) => !value),
            onResend: resendCode,
            resendLoading,
            resendSecondsLeft: secondsLeft,
            canResend,
            strength,
          })}

          {error && (
            <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-3 text-center">
              <p className="text-red-400 text-sm">{error}</p>
            </div>
          )}

          <button
            type="submit"
            disabled={loading || (step === 3 && !allRulesPass)}
            className="w-full bg-[#FCD704] text-[#13151A] font-bold text-base py-4 rounded-xl cursor-pointer whitespace-nowrap mt-2 flex items-center justify-center gap-2 hover:bg-[#FCD704]/90 disabled:opacity-70 transition-opacity"
          >
            {renderSubmitButtonContent(loading, activeStep)}
          </button>

          <div className="flex flex-col items-center gap-2 mt-2">
            {step > 1 && (
              <button
                type="button"
                onClick={goToPreviousStep}
                className="text-gray-400 text-sm cursor-pointer hover:text-white transition-colors"
              >
                → العودة للخطوة السابقة
              </button>
            )}

            <Link
              href="/login"
              className="text-gray-400 text-sm hover:text-white transition-colors"
            >
              العودة لتسجيل الدخول
            </Link>
          </div>
        </form>
      </div>
    </AuthLayout>
  );
}