// src/components/security/ChangePasswordFormCard.jsx
import React, { useEffect, useMemo, useRef, useState } from "react";
import { Button, Card, Input, cn } from "../ui";
import { LuKey } from "react-icons/lu";
import { TbEye, TbEyeOff } from "react-icons/tb";

import PasswordRulesTooltip from "../auth/PasswordRulesTooltip";
import PasswordStrengthBar from "../auth/PasswordStrengthBar";

// ✅ قوانین و استرنگ (ساده و سریع)
function getPasswordRules(pw) {
  const s = String(pw || "");
  return {
    minLen: s.length >= 8,
    upper: /[A-Z]/.test(s),
    symbol: /[^A-Za-z0-9]/.test(s),
  };
}

function getPasswordStrength(pw) {
  const s = String(pw || "");
  if (!s) return { level: 0, label: "—", percent: 0 };

  const rules = getPasswordRules(s);
  let score = 0;
  if (rules.minLen) score += 1;
  if (rules.upper) score += 1;
  if (rules.symbol) score += 1;
  if (s.length >= 12) score += 1;

  if (score <= 1) return { level: 1, label: "ضعیف", percent: 33 };
  if (score === 2) return { level: 2, label: "متوسط", percent: 66 };
  return { level: 3, label: "قوی", percent: 100 };
}

function PasswordRow({
  label,
  value,
  onChange,
  disabled,
  show,
  setShow,
  autoComplete,
  onFocus,
  onBlur,
}) {
  return (
    <div className="grid gap-2">
      <Input
        label={label}
        type={show ? "text" : "password"}
        value={value}
        onChange={onChange}
        disabled={disabled}
        autoComplete={autoComplete}
        onFocus={onFocus}
        onBlur={onBlur}
        rightSlot={
          <button
            type="button"
            onClick={() => setShow((s) => !s)}
            className="p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition disabled:opacity-60"
            disabled={disabled}
            aria-label="toggle password"
          >
            {show ? (
              <TbEyeOff className="w-5 h-5" />
            ) : (
              <TbEye className="w-5 h-5" />
            )}
          </button>
        }
      />
    </div>
  );
}

export default function ChangePasswordFormCard({
  oldPassword,
  newPassword,
  confirmNew,
  setOldPassword,
  setNewPassword,
  setConfirmNew,

  saving,
  onSubmit,
  disabled,
  leftMs,
  validationError,
}) {
  const [showOld, setShowOld] = useState(false);
  const [showNew, setShowNew] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);

  // ✅ Tooltip state برای رمز جدید
  const [showTip, setShowTip] = useState(false);

  // ✅ wrapper برای outside click
  const newPassWrapRef = useRef(null);

  // ✅ بستن تولتیپ با کلیک بیرون
  useEffect(() => {
    if (!showTip) return;

    const onPointerDown = (e) => {
      const wrap = newPassWrapRef.current;
      if (!wrap) return;

      // اگر کلیک خارج از محدوده‌ی رمز جدید بود => ببند
      if (!wrap.contains(e.target)) {
        setShowTip(false);
      }
    };

    // pointerdown هم موس هم تاچ رو پوشش میده
    document.addEventListener("pointerdown", onPointerDown, true);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown, true);
    };
  }, [showTip]);

  const rules = useMemo(() => getPasswordRules(newPassword), [newPassword]);
  const strength = useMemo(() => getPasswordStrength(newPassword), [newPassword]);

  const mismatch = useMemo(
    () => !!newPassword && !!confirmNew && newPassword !== confirmNew,
    [newPassword, confirmNew]
  );

  return (
    <Card className="sm:w-1/2 w-full">
      <p className="w-full pb-4 text-center text-sm font-bold text-black dark:text-white">
        تغییر رمز عبور
      </p>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          onSubmit?.();
        }}
        className="grid gap-5"
      >
        {/* رمز فعلی */}
        <PasswordRow
          label="رمز عبور فعلی"
          value={oldPassword}
          onChange={(e) => setOldPassword(e.target.value)}
          disabled={saving}
          show={showOld}
          setShow={setShowOld}
          autoComplete="current-password"
        />

        <div className="text-[11px] text-black/50 dark:text-white/60 -mt-3">
          برای امنیت، رمز فعلی را وارد کنید.
        </div>

        {/* رمز جدید + Tooltip + Strength */}
        <div ref={newPassWrapRef} className="relative">
          <PasswordRow
            label="رمز عبور جدید"
            value={newPassword}
            onChange={(e) => {
              setNewPassword(e.target.value);
              if (!showTip) setShowTip(true);
            }}
            disabled={saving}
            show={showNew}
            setShow={setShowNew}
            autoComplete="new-password"
            onFocus={() => setShowTip(true)}
            onBlur={() => {
              // NOTE: اگر روی tooltip کلیک بشه blur میاد؛ برای اینکه سریع بسته نشه،
              // یه تاخیر کوچیک میدیم (ولی outside click هم داریم)
              setTimeout(() => setShowTip(false), 120);
            }}
          />

          <PasswordRulesTooltip
            open={showTip}
            rules={rules}
            // ✅ جلوی بسته شدن با کلیک داخل tooltip رو می‌گیره
            onPointerDown={(e) => e.stopPropagation()}
          />

          <PasswordStrengthBar strength={strength} />
        </div>

        <div className="text-[11px] text-black/50 dark:text-white/60 -mt-3 leading-5">
          حداقل ۸ کاراکتر، بهتره شامل حروف بزرگ و علامت هم باشد.
        </div>

        {/* تکرار رمز جدید */}
        <PasswordRow
          label="تکرار رمز جدید"
          value={confirmNew}
          onChange={(e) => setConfirmNew(e.target.value)}
          disabled={saving}
          show={showConfirm}
          setShow={setShowConfirm}
          autoComplete="new-password"
        />

        {mismatch ? (
          <div className="text-[11px] text-red-600 dark:text-red-300 -mt-3">
            رمز جدید با تکرار آن یکسان نیست.
          </div>
        ) : null}

        {validationError ? (
          <div className="text-[11px] text-black/60 dark:text-white/70">
            {validationError}
          </div>
        ) : null}

        <div className="flex items-center justify-end gap-3">
          <Button
            type="submit"
            variant="outline"
            size="lg"
            className={cn(
              "sm:w-fit w-full dark:bg-[#001F3F] bg-[#f2f2f2] hover:bg-[#e2e2e2] dark:hover:bg-[#A1E3F919]"
            )}
            disabled={disabled}
            title={
              leftMs > 0
                ? `تا ${Math.ceil(leftMs / 1000)} ثانیه دیگر`
                : "تغییر رمز"
            }
            leftIcon={<LuKey className="w-4 h-4 text-[#43BEFF] dark:text-white" />}
          >
            {saving ? "در حال تغییر..." : "تغییر رمز"}
          </Button>
        </div>
      </form>
    </Card>
  );
}
