"use client";
 import React from "react";
 import { useRouter } from "next/navigation";
 import { api } from "@/lib/api";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";

 export default function RfaNew() {
   const router = useRouter();
   const [draftId, setDraftId] = React.useState(null);
   const [saving, setSaving] = React.useState(false);
   const [savedAt, setSavedAt] = React.useState(null);
   const [error, setError] = React.useState("");
   const [form, setForm] = React.useState({
     title: "", code: "", discipline: "", due_date: "", description: ""
   });
   const [errs, setErrs] = React.useState({});

   // simple validate (client)
   const validate = (f) => {
     const e = {};
     if (!f.title?.trim()) e.title = "กรุณากรอกชื่อเรื่อง";
     if (!f.due_date) e.due_date = "กรุณากำหนดวันที่ครบกำหนด";
     return e;
   };

   // debounce autosave
   const tRef = React.useRef(0);
   React.useEffect(() => {
     clearTimeout(tRef.current);
     tRef.current = window.setTimeout(async () => {
       const e = validate(form);
       setErrs(e); // แสดง error ทันที (soft)
       try {
         setSaving(true);
         if (!draftId) {
           // create draft
           const res = await api("/rfas", { method: "POST", body: { ...form, status: "draft" } });
           setDraftId(res.id);
         } else {
           // update draft
           await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "draft" } });
         }
         setSavedAt(new Date());
       } catch (err) {
         setError(err.message || "บันทึกฉบับร่างไม่สำเร็จ");
       } finally {
         setSaving(false);
       }
     }, 800);
     return () => clearTimeout(tRef.current);
   }, [form, draftId]);

   const onSubmit = async (e) => {
     e.preventDefault();
     const eobj = validate(form);
     setErrs(eobj);
     if (Object.keys(eobj).length) return;
     try {
       setSaving(true);
       const id = draftId
         ? (await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
         : (await api("/rfas", { method: "POST", body: { ...form, status: "submitted" } })).id;
       router.replace(`/rfas`); // หรือไปหน้า detail `/rfas/${id}`
     } catch (err) {
       setError(err.message || "ส่งคำขอไม่สำเร็จ");
     } finally {
       setSaving(false);
     }
   };

   return (
     <form onSubmit={onSubmit} className="p-5 space-y-4 bg-white rounded-2xl">
       <div className="text-lg font-semibold">สร้าง RFA</div>
       {error && <div className="text-sm text-red-600">{error}</div>}
       <div className="grid gap-3 md:grid-cols-2">
         <div>
           <label className="text-sm">ชื่อเรื่อง *</label>
           <Input value={form.title} onChange={(e)=>setForm(f=>({...f, title:e.target.value}))}/>
           {errs.title && <div className="mt-1 text-xs text-red-600">{errs.title}</div>}
         </div>
         <div>
           <label className="text-sm">รหัส (ถ้ามี)</label>
           <Input value={form.code} onChange={(e)=>setForm(f=>({...f, code:e.target.value}))}/>
         </div>
         <div>
           <label className="text-sm">สาขา/หมวด (Discipline)</label>
           <Input value={form.discipline} onChange={(e)=>setForm(f=>({...f, discipline:e.target.value}))}/>
         </div>
         <div>
           <label className="text-sm">กำหนดส่ง *</label>
           <input type="date" className="w-full p-2 border rounded-xl" value={form.due_date}
                  onChange={(e)=>setForm(f=>({...f, due_date:e.target.value}))}/>
           {errs.due_date && <div className="mt-1 text-xs text-red-600">{errs.due_date}</div>}
         </div>
       </div>
       <div>
         <label className="text-sm">รายละเอียด</label>
         <textarea rows={5} className="w-full p-2 border rounded-xl"
                   value={form.description} onChange={(e)=>setForm(f=>({...f, description:e.target.value}))}/>
       </div>
       <div className="flex items-center gap-3">
         <Button type="submit" disabled={saving}>ส่งเพื่อพิจารณา</Button>
         <span className="text-sm opacity-70">
           {saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
         </span>
       </div>
     </form>
   );
 }