"use client";

import { useState, type FormEvent } from "react";

import { withBasePath } from "@/utils/base-path";

/**
 * ฟอร์ม mint ลิงก์ SSO ทดสอบบนหน้า /note/dev (dev-only — route เปิดด้วย env
 * NOTE_SSO_DEV_MINT=1 เท่านั้น, คำขอผู้ใช้ 2026-10-29 "ใช้ได้ใน note") — server
 * คำนวณ token/ticket ด้วย secret ของตัวเองแล้วคืน URL เต็ม ค่าลับไม่ผ่านหน้า
 * เบราว์เซอร์ · ได้ลิงก์มา = คลิกเข้าจริงตาม flow ของทางนั้น (A/B)
 */
export default function DevLoginLinkForm() {
  const [mode, setMode] = useState<"jwt" | "ticket">("jwt");
  const [userid, setUserid] = useState("oom");
  const [username, setUsername] = useState("สรวิชญ์");
  const [fid, setFid] = useState("F123");
  const [ttl, setTtl] = useState(300);
  const [fileUrl, setFileUrl] = useState("/samples/01012-672427-1f-690609-0000840223.pdf");
  const [typeId, setTypeId] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [url, setUrl] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setError(null);
    setUrl(null);
    setCopied(false);
    try {
      const res = await fetch(withBasePath("/api/note/auth/dev-link"), {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          mode,
          userid,
          username,
          fid,
          ttl_seconds: ttl,
          ...(fileUrl.trim() !== "" ? { fileUrl: fileUrl.trim() } : {}),
          ...(typeId.trim() !== "" ? { typeId: typeId.trim() } : {}),
        }),
      });
      if (!res.ok) {
        const data = (await res.json().catch(() => null)) as { error?: string } | null;
        throw new Error(data?.error ?? `HTTP ${res.status}`);
      }
      const data = (await res.json()) as { url: string };
      setUrl(data.url);
    } catch (err) {
      setError(err instanceof Error ? err.message : "สร้างลิงก์ไม่สำเร็จ");
    } finally {
      setBusy(false);
    }
  };

  const inputCls =
    "genesis-input h-9 px-3 py-1.5 disabled:bg-canvas disabled:text-ink-faint";
  const labelCls = "text-xs font-medium text-ink-soft";

  return (
    <form onSubmit={onSubmit} className="grid gap-3 sm:grid-cols-2">
      <div className="flex flex-col gap-1.5">
        <label className={labelCls} htmlFor="devlink-mode">ทางเข้า</label>
        <select
          id="devlink-mode"
          value={mode}
          onChange={(e) => setMode(e.target.value === "ticket" ? "ticket" : "jwt")}
          className={inputCls}
        >
          <option value="jwt">ทาง A — JWT</option>
          <option value="ticket">ทาง B — ticket</option>
        </select>
      </div>
      <div className="flex flex-col gap-1.5">
        <label className={labelCls} htmlFor="devlink-ttl">อายุ (วินาที 60–600)</label>
        <input
          id="devlink-ttl"
          type="number"
          min={60}
          max={600}
          value={ttl}
          onChange={(e) => setTtl(Number(e.target.value))}
          className={inputCls}
        />
      </div>
      <div className="flex flex-col gap-1.5">
        <label className={labelCls} htmlFor="devlink-uid">userid / uid</label>
        <input id="devlink-uid" value={userid} onChange={(e) => setUserid(e.target.value)} className={inputCls} required />
      </div>
      <div className="flex flex-col gap-1.5">
        <label className={labelCls} htmlFor="devlink-uname">username / uname</label>
        <input id="devlink-uname" value={username} onChange={(e) => setUsername(e.target.value)} className={inputCls} required />
      </div>
      <div className="flex flex-col gap-1.5">
        <label className={labelCls} htmlFor="devlink-fid">fid (fileId ของ e-Court)</label>
        <input id="devlink-fid" value={fid} onChange={(e) => setFid(e.target.value)} className={inputCls} required />
      </div>
      <div className="flex flex-col gap-1.5">
        <label className={labelCls} htmlFor="devlink-typeid">typeId (ทางเลือก)</label>
        <input id="devlink-typeid" value={typeId} onChange={(e) => setTypeId(e.target.value)} className={inputCls} placeholder="ไม่กรอก = ไม่มี" />
      </div>
      <div className="flex flex-col gap-1.5 sm:col-span-2">
        <label className={labelCls} htmlFor="devlink-fileurl">fileUrl (ไม่กรอกก็ได้ — ไฟล์ตัวอย่าง /samples/… หรือลิงก์ https ที่อนุญาต)</label>
        <input id="devlink-fileurl" value={fileUrl} onChange={(e) => setFileUrl(e.target.value)} className={inputCls} placeholder="ไม่กรอก = เข้าหน้าแรกอย่างเดียว" />
      </div>

      <div className="sm:col-span-2">
        <button
          type="submit"
          disabled={busy}
          className="focus-ring inline-flex h-9 items-center rounded-md border border-line bg-white px-4 text-sm font-medium text-ink transition hover:-translate-y-px hover:border-ink-faint disabled:pointer-events-none disabled:opacity-50"
        >
          {busy ? "กำลังสร้าง…" : "สร้างลิงก์ทดสอบ"}
        </button>
      </div>

      {error && (
        <p role="alert" className="sm:col-span-2 rounded-lg border border-error/25 bg-error/5 p-3 text-sm text-error-ink">
          {error}
        </p>
      )}

      {url && (
        <div className="sm:col-span-2 rounded-lg border border-line bg-canvas p-3">
          <p className="text-xs font-medium text-ink-soft">
            ลิงก์พร้อมใช้ (อายุ {ttl} วินาที) — กดเพื่อทดสอบเข้าจริง:
          </p>
          <div className="mt-2 flex flex-wrap items-center gap-2">
            <a
              href={url}
              className="focus-ring inline-flex h-8 items-center rounded-md bg-primary px-3 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover"
            >
              เปิดลิงก์
            </a>
            <button
              type="button"
              onClick={async () => {
                try {
                  await navigator.clipboard.writeText(url);
                  setCopied(true);
                } catch {
                  /* clipboard โดน block — คัดลอกจากกล่องข้อความด้านล่างเอง */
                }
              }}
              className="focus-ring inline-flex h-8 items-center rounded-md border border-line bg-white px-3 text-xs font-medium text-ink-soft transition hover:border-ink-faint"
            >
              {copied ? "คัดลอกแล้ว" : "คัดลอก URL"}
            </button>
          </div>
          <p className="mt-2 break-all rounded border border-line bg-white px-2.5 py-2 text-[12px] leading-relaxed text-ink-soft">
            {url}
          </p>
        </div>
      )}
    </form>
  );
}