"use client";
import {useMemo,useState} from "react";
import {Camera,Check,ChevronLeft,ClipboardCheck,Eye,Filter,Loader2,Search,ShieldCheck,X} from "lucide-react";
import {Button} from "@/components/ui/button";
import {Input} from "@/components/ui/input";
import {Textarea} from "@/components/ui/textarea";
import {INSPECTION_GROUPS,INSPECTION_PHOTOS} from "@/lib/inspection-config";
type Row=Record<string,any>;
const faDate=(v:string)=>new Date(v).toLocaleString("fa-IR",{year:"numeric",month:"long",day:"numeric",hour:"2-digit",minute:"2-digit"});
const faStatus=(v:string)=>v==="approved"?"تأیید شده":v==="rejected"?"عدم تأیید":"در انتظار مدیریت";
export function InspectionPage({data,role,onRefresh}:{data:any;role:string;onRefresh:()=>Promise<void>}){
 const [wizard,setWizard]=useState(false),[step,setStep]=useState(1),[form,setForm]=useState<Row>({items:{},technicalCertificateValid:true,driverLicenseValid:true,inspectedAt:new Date().toISOString().slice(0,16)}),[photos,setPhotos]=useState<Record<string,File>>({}),[busy,setBusy]=useState(false),[error,setError]=useState(""),[search,setSearch]=useState(""),[status,setStatus]=useState("all"),[from,setFrom]=useState(""),[to,setTo]=useState(""),[detail,setDetail]=useState<Row|null>(null),[managerNote,setManagerNote]=useState("");
 const held=data.assignments?.filter((a:Row)=>["active","pending_return"].includes(a.status))||[];
 const selected=data.vehicles.find((v:Row)=>v.id===Number(form.vehicleId)),holder=selected?.currentAssignment||held.find((a:Row)=>a.vehicleId===selected?.id);
 const allItems=(INSPECTION_GROUPS as unknown as {items:readonly (readonly [string,string])[]}[]).flatMap(g=>g.items),answered=allItems.filter(([key])=>form.items[key]?.status).length,defects=allItems.filter(([key])=>form.items[key]?.status==="defect").length;
 const rows=useMemo(()=>(data.inspections||[]).filter((r:Row)=>{const hay=`${r.code} ${r.vehicle} ${r.plate} ${r.driver} ${r.inspectorName}`;const d=new Date(r.inspectedAt);return (!search||hay.includes(search))&&(status==="all"||r.supervisorStatus===status||r.managerStatus===status)&&(!from||d>=new Date(from))&&(!to||d<=new Date(to+"T23:59:59"))}),[data.inspections,search,status,from,to]);
 const setItem=(key:string,value:Row)=>setForm({...form,items:{...form.items,[key]:{...form.items[key],...value}}});
 async function submit(){setBusy(true);setError("");try{const fd=new FormData();fd.set("payload",JSON.stringify(form));Object.entries(photos).forEach(([k,v])=>fd.set(`photo_${k}`,v));const r=await fetch("/api/inspections",{method:"POST",body:fd}),j=await r.json();if(!r.ok)throw Error(j.error);setWizard(false);setStep(1);setForm({items:{},technicalCertificateValid:true,driverLicenseValid:true,inspectedAt:new Date().toISOString().slice(0,16)});setPhotos({});await onRefresh()}catch(e:any){setError(e.message)}finally{setBusy(false)}}
 async function approve(approved:boolean){if(!detail)return;setBusy(true);setError("");try{const r=await fetch("/api/inspections",{method:"PATCH",headers:{"content-type":"application/json"},body:JSON.stringify({id:detail.id,approved,note:managerNote})}),j=await r.json();if(!r.ok)throw Error(j.error);setDetail(null);await onRefresh()}catch(e:any){setError(e.message)}finally{setBusy(false)}}
 if(wizard)return <div className="inspection-shell"><div className="inspection-title"><div><span><ClipboardCheck/></span><div><small>فرآیند کنترل دوره‌ای</small><h2>ثبت بازرسی خودرو</h2><p>چک‌لیست، تصاویر و مدارک در یک پرونده دائمی ذخیره می‌شوند.</p></div></div><Button variant="outline" onClick={()=>setWizard(false)}><X/>انصراف</Button></div><div className="inspection-steps"><button className={step===1?"active":step>1?"done":""}><b>{step>1?<Check/>:"۱"}</b><span>اطلاعات و ایمنی</span></button><i/><button className={step===2?"active":step>2?"done":""}><b>{step>2?<Check/>:"۲"}</b><span>عکس بدنه و کابین</span></button><i/><button className={step===3?"active":""}><b>۳</b><span>تأیید نهایی</span></button></div>{error?<div className="inspection-error">{error}</div>:null}
 {step===1?<><section className="inspect-card vehicle-pick"><div><h3>انتخاب خودرو و اطلاعات راننده</h3><p>تحویل‌گیرنده فعال به‌صورت خودکار از تخصیص بلندمدت خوانده می‌شود.</p></div><div className="inspect-fields"><label><span>خودرو و پلاک</span><select value={form.vehicleId||""} onChange={e=>setForm({...form,vehicleId:Number(e.target.value),odometer:data.vehicles.find((v:Row)=>v.id===Number(e.target.value))?.mileage||0})}><option value="">انتخاب کنید</option>{data.vehicles.map((v:Row)=><option key={v.id} value={v.id}>{v.title} — {v.plate}</option>)}</select></label><label><span>کارکرد جدید (کیلومتر)</span><Input type="number" value={form.odometer||""} onChange={e=>setForm({...form,odometer:e.target.value})}/></label><label><span>تاریخ و ساعت بازرسی</span><Input type="datetime-local" value={form.inspectedAt} onChange={e=>setForm({...form,inspectedAt:e.target.value})}/></label></div>{selected?<div className="holder-strip"><img src={selected.imageUrl||"/favicon.svg"} alt=""/><div><small>خودروی انتخاب‌شده</small><b>{selected.title} · {selected.plate}</b></div><div><small>در اختیار</small><b>{holder?.driver||"بدون راننده"}</b></div><div><small>از تاریخ</small><b>{holder?new Date(holder.startAt).toLocaleDateString("fa-IR"):"—"}</b></div></div>:null}</section>{INSPECTION_GROUPS.map(group=><section className={`inspect-card checklist ${group.color}`} key={group.key}><div className="check-head"><div><small>گروه کنترلی</small><h3>{group.title}</h3></div><span>{group.items.filter(([k])=>form.items[k]?.status).length.toLocaleString("fa-IR")} از {group.items.length.toLocaleString("fa-IR")}</span></div>{group.items.map(([key,label],i)=><article key={key}><div className="check-copy"><b>{label}</b><small>مورد {Number(i+1).toLocaleString("fa-IR")} · ثبت نتیجه الزامی</small></div><div className="check-actions"><button className={form.items[key]?.status==="ok"?"ok active":"ok"} onClick={()=>setItem(key,{status:"ok"})}><Check/>سالم / تأیید</button><button className={form.items[key]?.status==="defect"?"defect active":"defect"} onClick={()=>setItem(key,{status:"defect"})}><X/>دارای نقص</button></div>{form.items[key]?.status==="defect"?<Input placeholder="شرح دقیق نقص، محل و شدت آن..." value={form.items[key]?.note||""} onChange={e=>setItem(key,{note:e.target.value})}/>:null}</article>)}</section>)}<div className="wizard-actions"><span>{answered.toLocaleString("fa-IR")} از {allItems.length.toLocaleString("fa-IR")} مورد تکمیل شده</span><Button disabled={!form.vehicleId||!form.odometer||answered!==allItems.length} onClick={()=>setStep(2)}>مرحله بعد: ثبت تصاویر<ChevronLeft/></Button></div></>
 :step===2?<><section className="inspect-card"><div className="check-head"><div><small>هشت نمای الزامی</small><h3>تصاویر بدنه، کابین و موتور</h3></div><span>{Object.keys(photos).length.toLocaleString("fa-IR")} از ۸</span></div><p className="photo-note">روی موبایل می‌توانید مستقیماً دوربین را باز کنید. فرمت JPG، PNG یا WEBP و حداکثر حجم هر فایل ۱۰ مگابایت است.</p><div className="photo-grid">{INSPECTION_PHOTOS.map(([key,label])=><label className={photos[key]?"photo-slot filled":"photo-slot"} key={key}>{photos[key]?<img src={URL.createObjectURL(photos[key])} alt=""/>:<Camera/>}<b>{label}</b><span>{photos[key]?photos[key].name:"انتخاب یا گرفتن عکس"}</span><input type="file" accept="image/jpeg,image/png,image/webp" capture="environment" onChange={e=>{const f=e.target.files?.[0];if(f)setPhotos({...photos,[key]:f})}}/></label>)}</div></section><section className="inspect-card documents"><div><h3>بررسی مدارک و مجوزهای تردد</h3><p>اعتبار معاینه فنی خودرو و مجوز راننده را مشخص کنید.</p></div><article><div><b>کارت معاینه فنی معتبر مسافربری</b><small>دارای اعتبار زمانی کافی تا پایان شیفت کاری</small></div><Toggle value={form.technicalCertificateValid} onChange={(v:boolean)=>setForm({...form,technicalCertificateValid:v})}/></article><article><div><b>کارت سلامت و گواهینامه مجاز راننده</b><small>اصل گواهینامه و مجوز فعالیت رؤیت شده باشد</small></div><Toggle value={form.driverLicenseValid} onChange={(v:boolean)=>setForm({...form,driverLicenseValid:v})}/></article></section><div className="wizard-actions"><Button variant="outline" onClick={()=>setStep(1)}>مرحله قبل</Button><Button disabled={Object.keys(photos).length!==8} onClick={()=>setStep(3)}>مرور و تأیید نهایی<ChevronLeft/></Button></div></>
 :<section className="inspect-card final-review"><div className={defects||!form.technicalCertificateValid||!form.driverLicenseValid?"review-icon warning":"review-icon"}><ShieldCheck/></div><h3>پرونده بازرسی آماده ثبت است</h3><p>{defects?`${defects.toLocaleString("fa-IR")} مورد نقص ثبت شده و پس از ذخیره، تیکت پیگیری خودکار ایجاد می‌شود.`:"تمام موارد سالم اعلام شده‌اند؛ پرونده برای تأیید نهایی مدیر کل ارسال می‌شود."}</p><div className="review-grid"><span><small>خودرو</small><b>{selected?.title}</b></span><span><small>تحویل‌گیرنده فعلی</small><b>{holder?.driver||"بدون راننده"}</b></span><span><small>موارد بررسی‌شده</small><b>{allItems.length.toLocaleString("fa-IR")} پارامتر</b></span><span><small>تصاویر</small><b>۸ نمای کامل</b></span></div><label><span>یادداشت نهایی سوپروایزر</span><Textarea value={form.notes||""} onChange={e=>setForm({...form,notes:e.target.value})}/></label><div className="wizard-actions"><Button variant="outline" onClick={()=>setStep(2)}>مرحله قبل</Button><Button disabled={busy} onClick={submit}>{busy?<Loader2 className="spin"/>:<Check/>}ثبت قطعی و ارسال برای مدیریت</Button></div></section>}</div>;
 return <><div className="pagebar"><div><h2>بازرسی دوره‌ای خودروها</h2><p>ثبت چک‌لیست ۳۷ پارامتری، هشت نمای تصویری و آرشیو تأییدیه‌های فنی</p></div>{role==="supervisor"?<Button onClick={()=>setWizard(true)}><ClipboardCheck/>ثبت بازرسی جدید</Button>:null}</div><section className="panel inspection-list"><div className="inspection-filters"><label><Search/><Input placeholder="شماره بازرسی، خودرو، راننده یا پلاک..." value={search} onChange={e=>setSearch(e.target.value)}/></label><label><Filter/><select value={status} onChange={e=>setStatus(e.target.value)}><option value="all">همه وضعیت‌ها</option><option value="approved">تأیید شده</option><option value="pending">در انتظار تأیید</option><option value="rejected">عدم تأیید</option></select></label><Input type="date" value={from} onChange={e=>setFrom(e.target.value)} title="از تاریخ"/><Input type="date" value={to} onChange={e=>setTo(e.target.value)} title="تا تاریخ"/></div><div className="inspection-table"><div className="inspection-row head"><span>شماره بازرسی</span><span>خودرو و پلاک</span><span>تحویل‌گیرنده</span><span>تاریخ و ساعت</span><span>ارزیابی ناظر</span><span>تأیید مدیریت</span><span/></div>{rows.map((r:Row)=><div className="inspection-row" key={r.id}><b>{r.code}</b><span><b>{r.vehicle}</b><small>{r.plate}</small></span><span>{r.driver||"بدون راننده"}</span><span><b>{new Date(r.inspectedAt).toLocaleDateString("fa-IR")}</b><small>{new Date(r.inspectedAt).toLocaleTimeString("fa-IR",{hour:"2-digit",minute:"2-digit"})}</small></span><i className={`state ${r.supervisorStatus}`}>{faStatus(r.supervisorStatus)}</i><i className={`state ${r.managerStatus}`}>{faStatus(r.managerStatus)}</i><Button size="sm" variant="outline" onClick={()=>setDetail(r)}><Eye/>مشاهده</Button></div>)}{!rows.length?<div className="inspection-empty">بازرسی مطابق فیلتر انتخاب‌شده پیدا نشد.</div>:null}</div></section>{detail?<div className="inspection-detail-backdrop" onClick={()=>setDetail(null)}><aside className="inspection-detail" onClick={e=>e.stopPropagation()}><button className="close-detail" onClick={()=>setDetail(null)}><X/></button><small>{detail.code}</small><h2>{detail.vehicle}</h2><p>{detail.plate} · {detail.driver||"بدون راننده"}</p><div className="detail-meta"><span><small>تاریخ دقیق</small><b>{faDate(detail.inspectedAt)}</b></span><span><small>بازرس</small><b>{detail.inspectorName}</b></span><span><small>کارکرد</small><b>{Number(detail.odometer).toLocaleString("fa-IR")} کیلومتر</b></span><span><small>موعد بعدی</small><b>{new Date(detail.nextDueAt).toLocaleDateString("fa-IR")}</b></span></div><h3>نتیجه چک‌لیست</h3><div className="detail-items">{detail.items?.map((i:Row)=><article key={i.id}><i className={i.status}/><div><b>{i.label}</b>{i.note?<small>{i.note}</small>:null}</div></article>)}</div><h3>تصاویر ثبت‌شده</h3><div className="detail-photos">{detail.photos?.length?detail.photos.map((p:Row)=><img key={p.id} src={p.url} alt={p.kind}/>):<p>این رکورد نمایشی تصویر آرشیوی ندارد.</p>}</div>{detail.managerNote?<div className="manager-note">یادداشت مدیریت: {detail.managerNote}</div>:null}{role==="general_manager"&&detail.managerStatus==="pending"?<><label><span>یادداشت تصمیم مدیریت</span><Textarea value={managerNote} onChange={e=>setManagerNote(e.target.value)}/></label>{error?<div className="inspection-error">{error}</div>:null}<div className="manager-actions"><Button variant="destructive" disabled={busy} onClick={()=>approve(false)}>رد بازرسی</Button><Button disabled={busy} onClick={()=>approve(true)}>تأیید نهایی</Button></div></>:null}</aside></div>:null}</>;
}
function Toggle({value,onChange}:{value:boolean;onChange:(v:boolean)=>void}){return <div className="doc-toggle"><button className={value?"active":""} onClick={()=>onChange(true)}><Check/>معتبر و کامل</button><button className={!value?"invalid active":"invalid"} onClick={()=>onChange(false)}><X/>فاقد اعتبار</button></div>}
