eCourt-note/components/UploadFileForm.tsx

"use client";

// N4 — ฟอร์มอัปโหลดไฟล์เอกสารแบบง่ายบนหน้ารายการ (PDF/รูป รับพร้อมกัน)
// เสร็จแล้วรายการโผล่เองจาก revalidatePath("/") ของ action
import { useState, useTransition } from "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="mt-3 flex flex-wrap items-center gap-2 rounded-xl border border-dashed border-slate-300 bg-white/60 p-4"
    >
      <input
        type="file"
        name="file"
        accept={ACCEPT}
        required
        disabled={pending}
        className="block w-full max-w-xs text-sm text-slate-600 file:mr-3 file:cursor-pointer file:rounded-md file:border-0 file:bg-primary/10 file:px-4 file:py-2 file:text-sm file:font-medium file:text-primary"
      />
      <button
        type="submit"
        disabled={pending}
        className="ml-auto shrink-0 rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-90 disabled:opacity-50"
      >
        {pending ? "กำลังอัปโหลด…" : "อัปโหลด"}
      </button>
      <p className="w-full text-xs text-slate-500">
        รองรับ PDF, JPG, PNG, TIFF — ไม่เกิน 100MB ต่อไฟล์
      </p>
      {error && <p className="w-full text-xs text-red-600">{error}</p>}
    </form>
  );
}