// src/components/auth/OtpSection.jsx
import React, { useEffect, useMemo, useRef, useState } from "react";

function cn(...a) {
  return a.filter(Boolean).join(" ");
}

const OTP_LEN = 6;

// تبدیل اعداد فارسی/عربی به انگلیسی (خیلی مهم!)
const normalizeDigits = (s = "") =>
  String(s)
    .replace(/[۰-۹]/g, (d) => "۰۱۲۳۴۵۶۷۸۹".indexOf(d))
    .replace(/[٠-٩]/g, (d) => "٠١٢٣٤٥٦٧٨٩".indexOf(d));

export default function OtpSection({
  register,
  errors,
  secondsLeft,
  canResend,
  onResend,
  formatTime,
  setValue,     // ✅ از useForm پاس بده
  trigger,      // ✅ از useForm پاس بده (اختیاری ولی بهتر)
  focusFirst,   // ✅ وقتی رفتی مرحله کد، فوکوس روی اولین باکس
}) {
  const inputsRef = useRef([]);
  const [values, setValues] = useState(Array(OTP_LEN).fill(""));

  const code = useMemo(() => values.join(""), [values]);

  // فقط برای validate rules در RHF (خود مقدار رو با setValue ست می‌کنیم)
  register("code", {
    required: "کد الزامی است",
    minLength: { value: OTP_LEN, message: "کد باید ۶ رقم باشد" },
    maxLength: { value: OTP_LEN, message: "کد باید ۶ رقم باشد" },
    pattern: { value: /^\d{6}$/, message: "کد باید ۶ رقم عددی باشد" },
  });

  const focusIndex = (i) => inputsRef.current[i]?.focus();

  useEffect(() => {
    if (focusFirst) setTimeout(() => focusIndex(0), 0);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [focusFirst]);

  // ✅ هر بار کد تغییر کرد => setValue واقعی در RHF
  useEffect(() => {
    setValue?.("code", code, { shouldValidate: true, shouldDirty: true });
    trigger?.("code");
  }, [code, setValue, trigger]);

  const handleChange = (i, e) => {
    const v = normalizeDigits(e.target.value).replace(/\D/g, "");
    if (!v) return;

    setValues((prev) => {
      const next = [...prev];
      next[i] = v[0];
      return next;
    });

    if (i < OTP_LEN - 1) focusIndex(i + 1);
  };

  const handleKeyDown = (i, e) => {
    if (e.key === "Backspace") {
      e.preventDefault();
      setValues((prev) => {
        const next = [...prev];
        if (next[i]) next[i] = "";
        else if (i > 0) {
          next[i - 1] = "";
          focusIndex(i - 1);
        }
        return next;
      });
    }
    if (e.key === "ArrowLeft" && i > 0) focusIndex(i - 1);
    if (e.key === "ArrowRight" && i < OTP_LEN - 1) focusIndex(i + 1);
  };

  const handlePaste = (e) => {
    e.preventDefault();
    const pasted = normalizeDigits(e.clipboardData.getData("text"))
      .replace(/\D/g, "")
      .slice(0, OTP_LEN);

    if (!pasted) return;

    const arr = pasted.split("");
    setValues((prev) => prev.map((_, i) => arr[i] ?? ""));
    focusIndex(Math.min(pasted.length, OTP_LEN) - 1);
  };

  return (
    <div className="mt-6">
      <div className="flex justify-between gap-2" dir="ltr">
        {Array.from({ length: OTP_LEN }).map((_, i) => (
          <input
            key={i}
            ref={(el) => (inputsRef.current[i] = el)}
            type="text"
            inputMode="numeric"
            maxLength={1}
            value={values[i]}
            onChange={(e) => handleChange(i, e)}
            onKeyDown={(e) => handleKeyDown(i, e)}
            onPaste={handlePaste}
            autoComplete={i === 0 ? "one-time-code" : "off"}
            className={cn(
              "h-14 w-12 rounded-md bg-[#A1E3F919] text-white text-center text-xl font-bold",
              "outline-0 focus:ring-2 focus:ring-white/40"
            )}
          />
        ))}
      </div>

      {errors?.code && (
        <span className="text-red-600 font-bold text-sm mt-3 block">
          {errors.code?.message || "کد تایید را به‌درستی وارد کنید"}
        </span>
      )}

      <div className="mt-4 text-sm text-white flex items-center justify-between">
        <span>
          {secondsLeft > 0
            ? `ارسال مجدد کد تا ${formatTime(secondsLeft)} دیگر غیرفعال است`
            : "می‌توانید کد را دوباره ارسال کنید."}
        </span>

        <button
          type="button"
          onClick={onResend}
          disabled={!canResend}
          className={cn(
            "underline",
            canResend ? "cursor-pointer" : "cursor-not-allowed opacity-50"
          )}
        >
          ارسال مجدد کد
        </button>
      </div>
    </div>
  );
}
