import React from "react";
import { Button, Input, Modal } from "../ui";
import { maskEmail, maskPhone, toFaDigits } from "../../utils/account";

export default function VerifyCodeModal({
  open,
  onClose,

  verifyType, // "email" | "phone"
  email,
  phone,

  code,
  setCode,

  timer,
  sendingCode,
  verifyingCode,

  onResend,
  onConfirm,
}) {
  return (
    <Modal open={open} onClose={onClose} className="max-w-md">
      <div className="relative w-full rounded-2xl border border-black/10 dark:border-white/10 bg-white dark:bg-[#16325b] shadow-2xl overflow-hidden">
        <div className="p-5 border-b border-black/10 dark:border-white/10 bg-[#A1E3F919] dark:bg-[#A1E3F910]">
          <div className="flex items-start justify-between gap-3">
            <div>
              <div className="text-sm font-bold text-black dark:text-white">
                تایید {verifyType === "email" ? "ایمیل" : "موبایل"}
              </div>
              <div className="text-xs text-black/60 dark:text-white/70 mt-1">
                کد تایید به{" "}
                <b>{verifyType === "email" ? maskEmail(email) : maskPhone(phone)}</b>{" "}
                ارسال می‌شود.
              </div>
            </div>

            <Button variant="soft" size="sm" onClick={onClose}>
              بستن
            </Button>
          </div>
        </div>

        <div className="p-5 space-y-4">
          <Input
            label="کد تایید"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            inputClassName="text-center font-mono tracking-widest"
          />

          <div className="flex items-center justify-between text-xs text-black/60 dark:text-white/70">
            <span>
              زمان باقی‌مانده:{" "}
              <b className={timer > 0 ? "" : "text-red-500"}>{toFaDigits(timer)}s</b>
            </span>

            <Button
              variant="soft"
              size="sm"
              disabled={sendingCode || timer > 0}
              onClick={onResend}
            >
              {sendingCode ? "در حال ارسال..." : "ارسال مجدد"}
            </Button>
          </div>

          <Button
            variant="primary"
            size="full"
            onClick={onConfirm}
            disabled={verifyingCode || !String(code || "").trim()}
          >
            {verifyingCode ? "در حال تایید..." : "تایید کد"}
          </Button>
        </div>
      </div>
    </Modal>
  );
}
