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

export default function TwoFactorModal({
  open,
  onClose,

  is2faEnabled,
  twoFAStatusChannel,

  channel,
  setChannel,

  code,
  setCode,

  timer, // seconds (2min resend)
  enabling,
  confirming,

  twofaLeftMs,

  onSend,
  onConfirm,
}) {
  const enableBtnDisabled = enabling || confirming || twofaLeftMs > 0 || timer > 0;

  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">
                فعالسازی ورود دو مرحله‌ای
              </div>
              <div className="text-xs text-black/60 dark:text-white/70 mt-1">
                مرحله ۱: ارسال کد • مرحله ۲: وارد کردن کد و تایید
              </div>
            </div>

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

        <div className="p-5 space-y-4">
          {/* Channel */}
          <div className="grid gap-2">
            <div className="text-xs text-black/60 dark:text-white/70">
              انتخاب روش دریافت کد
            </div>

            <div className="grid grid-cols-2 gap-2">
              <button
                type="button"
                onClick={() => setChannel("sms")}
                className={cn(
                  "h-11 rounded-xl shadow border text-sm transition",
                  channel === "sms"
                    ? "bg-[#43BEFF] text-white border-transparent"
                    : "bg-[#A1E3F980] dark:bg-[#A1E3F919] border-black/10 dark:border-white/10 text-black dark:text-white hover:bg-[#43BEFF40]"
                )}
              >
                SMS
              </button>

              <button
                type="button"
                disabled
                className={cn(
                  "h-11 rounded-xl shadow border text-sm transition opacity-60 cursor-not-allowed",
                  "bg-[#A1E3F980] dark:bg-[#A1E3F919] border-black/10 dark:border-white/10 text-black dark:text-white"
                )}
                title="فعلاً غیرفعال است تا بک‌اند آماده شود"
              >
                Email (غیرفعال)
              </button>
            </div>
          </div>

          {/* Send */}
          <Button
            variant="dark"
            size="full"
            onClick={onSend}
            disabled={enableBtnDisabled}
            title={
              timer > 0
                ? `ارسال مجدد تا ${toFaDigits(timer)} ثانیه دیگر`
                : twofaLeftMs > 0
                ? `تا ${Math.ceil(twofaLeftMs / 1000)} ثانیه دیگر`
                : "ارسال کد"
            }
          >
            {enabling
              ? "در حال ارسال کد..."
              : timer > 0
              ? `ارسال مجدد تا ${toFaDigits(timer)} ثانیه`
              : twofaLeftMs > 0
              ? `چند ثانیه صبر کن...`
              : "ارسال کد فعالسازی"}
          </Button>

          <div className="text-xs text-black/50 dark:text-white/60 flex items-center justify-between">
            <span>ارسال مجدد کد:</span>
            <b className={timer > 0 ? "" : "text-emerald-600 dark:text-emerald-300"}>
              {timer > 0 ? `${toFaDigits(timer)}s` : "آزاد"}
            </b>
          </div>

          {/* Code */}
          <Input
            label="کد فعالسازی"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            disabled={enabling || confirming}
            inputClassName="text-center font-mono tracking-widest"
          />

          {/* Confirm */}
          <Button
            variant="primary"
            size="full"
            onClick={onConfirm}
            disabled={confirming || !String(code || "").trim() || twofaLeftMs > 0}
            title={
              twofaLeftMs > 0
                ? `تا ${Math.ceil(twofaLeftMs / 1000)} ثانیه دیگر`
                : "تایید"
            }
          >
            {confirming ? "در حال تایید..." : "تایید و فعالسازی"}
          </Button>

          <div className="text-[11px] text-black/55 dark:text-white/60">
            وضعیت فعلی:{" "}
            <b
              className={
                is2faEnabled
                  ? "text-emerald-600 dark:text-emerald-300"
                  : "text-red-600 dark:text-red-300"
              }
            >
              {is2faEnabled
                ? `فعال${twoFAStatusChannel ? ` (${twoFAStatusChannel})` : ""}`
                : "غیرفعال"}
            </b>
          </div>
        </div>
      </div>
    </Modal>
  );
}
