"use client";

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

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

/**
 * ฟอร์ม "จำลอง e-Court" บนหน้า /note/dev สำหรับตอน mint อัตโนมัติปิด
 * (production เสมอตาม devMintEnabled) — ผู้ทดสอบใส่ DOCVER_API_KEY แล้วยิง
 * POST /api/note/auth/token (เส้นเดียวกับที่ backend e-Court ใช้จริง) ได้
 * access_token มาแล้วพาเข้า /note?fileUrl=…&t=… ให้ NoteHome แลกเป็น session
 * ต่อ — ไม่เป็นประตูหลังเพราะต้องถือ key ที่ถูกต้องอยู่แล้ว
 * (คำขอผู้ใช้ 2026-11-02: กดเข้าเอกสารจากหน้า /note/dev บน production ให้ได้)
 */
export default function MockEcourtForm({ files }: { files: string[] }) {
  const [apiKey, setApiKey] = useState("");
  const [userid, setUserid] = useState("oom");
  const [username, setUsername] = useState("สรวิชญ์");
  const [file, setFile] = useState(files[0] ?? "");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setError(null);
    try {
      const res = await fetch(withBasePath("/api/note/auth/token"), {
        method: "POST",
        headers: { "x-api-key": apiKey, "content-type": "application/json" },
        // fid ผูกไฟล์ที่เลือกแบบเดียวกับ dev-link (dev-<file>) — แต่ละไฟล์
        // ตัวอย่างมี row ecourt: ของตัวเอง ไม่ปนกัน
        body: JSON.stringify({
          userid: userid.trim(),
          username: username.trim(),
          fid: `dev-${file}`,
          ttl_seconds: 600,
        }),
      });
      const data = (await res.json().catch(() => null)) as
        | { access_token?: string; error?: string }
        | null;
      if (!res.ok || data?.access_token === undefined) {
        throw new Error(data?.error ?? `ขอ token ไม่สำเร็จ (HTTP ${res.status})`);
      }
      // withBasePath("") = /docedit/note — ห้ามส่ง "/note" เข้า withBasePath (D11)
      const params = new URLSearchParams({ fileUrl: `/samples/${file}`, t: data.access_token });
      window.location.href = `${withBasePath("")}?${params.toString()}`;
    } catch (err) {
      setError(err instanceof Error ? err.message : "ขอ token ไม่สำเร็จ");
      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 sm:col-span-2">
        <label className={labelCls} htmlFor="mock-key">
          API key (env DOCVER_API_KEY ของเครื่องนี้)
        </label>
        <input
          id="mock-key"
          type="password"
          value={apiKey}
          onChange={(e) => setApiKey(e.target.value)}
          className={inputCls}
          autoComplete="off"
          required
        />
      </div>
      <div className="flex flex-col gap-1.5">
        <label className={labelCls} htmlFor="mock-uid">userid</label>
        <input id="mock-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="mock-uname">username</label>
        <input id="mock-uname" value={username} onChange={(e) => setUsername(e.target.value)} className={inputCls} required />
      </div>
      <div className="flex flex-col gap-1.5 sm:col-span-2">
        <label className={labelCls} htmlFor="mock-file">เอกสารตัวอย่าง</label>
        <select
          id="mock-file"
          value={file}
          onChange={(e) => setFile(e.target.value)}
          className={inputCls}
        >
          {files.map((f) => (
            <option key={f} value={f}>{f}</option>
          ))}
        </select>
      </div>

      <div className="sm:col-span-2">
        <button
          type="submit"
          disabled={busy}
          className="focus-ring inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-50"
        >
          {busy ? "กำลังเข้าระบบ…" : "ขอ token และเปิดเอกสาร"}
        </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>
      )}
    </form>
  );
}