eCourt-note/components/UploadFileForm.tsx

"use client";

// N4 — ฟอร์มอัปโหลดไฟล์เอกสารแบบง่ายบนหน้ารายการ (PDF/รูป รับพร้อมกัน)
// เสร็จแล้วรายการโผล่เองจาก revalidatePath("/") ของ action
// Genesis: หน้าตาเป็นการ์ด surface 12px radius ขอบ line (ใต้หัวข้อของ section
// "เอกสาร" — ไฟล์ที่อัปโหลดเข้ารายการนั้น) + ปุ่ม primary เดียวของ section
import { useState, useTransition } from "react";
import { Upload } from "lucide-react";

import { uploadFile } from "@/app/actions/files";

const ACCEPT = ".pdf,.jpg,.jpeg,.png,.tif,.tiff";

/** ขนาดสูงสุดตาม validator ของ uploadFile (app/actions/files.ts) — เช็คฝั่ง client
 *  ก่อนอัปโหลด (M5, UX audit 2026-09-16): ไฟล์สแกนคดีที่เกินไม่ต้องรอส่งจนจบ
 *  บนเน็ตช้าก่อนเจอ error ของ server */
const MAX_BYTES = 100 * 1024 * 1024;

export default function UploadFileForm() {
  const [error, setError] = useState<string | null>(null);
  const [pending, startTransition] = useTransition();

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    setError(null);
    const input = form.elements.namedItem("file") as HTMLInputElement | null;
    const file = input?.files?.[0];
    if (file && file.size > MAX_BYTES) {
      setError("ไฟล์ใหญ่เกิน 100MB — เลือกไฟล์เล็กกว่า");
      return;
    }
    startTransition(async () => {
      try {
        const result = await uploadFile(new FormData(form));
        if (result.ok) {
          form.reset();
        } else {
          setError(result.error);
        }
      } catch {
        // action fail ที่ระดับ transport (เช่น body ใหญ่เกิน bodySizeLimit ของ next.config)
        setError("อัปโหลดไม่สำเร็จ — ลองใหม่อีกครั้ง");
      }
    });
  };

  return (
    <form onSubmit={onSubmit} className="flex flex-col rounded-xl border border-line bg-white p-5">
      <div className="flex items-center gap-2">
        <Upload aria-hidden className="h-4 w-4 shrink-0 text-ink-faint" />
        <p className="text-sm font-semibold text-ink">อัปโหลดไฟล์</p>
      </div>
      <input
        type="file"
        name="file"
        accept={ACCEPT}
        required
        disabled={pending}
        className="mt-4 block w-full text-sm text-ink-soft file:mr-3 file:cursor-pointer file:rounded-md file:border-0 file:bg-ink/[0.05] file:px-4 file:py-2 file:text-sm file:font-medium file:text-ink"
      />
      {/* กลุ่ม typeId ทางเลือก (N9) — ช่องเดียวกับลิงก์ e-Court, ไม่กรอก = "ไม่มีกลุ่ม";
          uncontrolled ส่งไปกับ FormData เหมือนช่องไฟล์ (normalize ที่ action) */}
      <label htmlFor="upload-type-id" className="mt-3 block text-sm font-medium text-ink">
        กลุ่ม typeId
      </label>
      <input
        type="text"
        id="upload-type-id"
        name="typeId"
        disabled={pending}
        placeholder="ไม่กรอก = ไม่มีกลุ่ม"
        className="genesis-input mt-1 w-full text-base"
      />
      <button
        type="submit"
        disabled={pending}
        className="focus-ring mt-4 w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow disabled:pointer-events-none disabled:opacity-50"
      >
        {pending ? "กำลังอัปโหลด…" : "อัปโหลด"}
      </button>
      <p className="mt-3 text-xs leading-relaxed text-ink-soft">
        รองรับ PDF, JPG, PNG, TIFF — ไม่เกิน 100MB ต่อไฟล์
      </p>
      {error && <p className="mt-2 text-xs text-error-ink">{error}</p>}
    </form>
  );
}