"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";

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);
    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-3 file:py-1.5 file:text-sm file:font-medium file:text-primary"
      />
      <button
        type="submit"
        disabled={pending}
        className="ml-auto shrink-0 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white transition hover:opacity-90 disabled:opacity-50"
      >
        {pending ? "กำลังอัปโหลด…" : "อัปโหลด"}
      </button>
      {error && <p className="w-full text-xs text-red-600">{error}</p>}
    </form>
  );
}