"use client";

import { useEffect, useMemo, useState } from "react";
import { BarChart3, Boxes, ExternalLink, Image as ImageIcon, Inbox, LayoutDashboard, LogOut, Menu, Plus, Save, Settings, ShieldCheck, Trash2, Upload, Wrench, X } from "lucide-react";

type Inquiry = { id: number; name: string; phone: string; email: string; type: string; message: string; attachmentKey: string | null; status: string; createdAt: string };
type Slide = { titleAr:string;titleEn:string;textAr:string;textEn:string;image:string;active:boolean };
type Bi = { ar:string; en:string };
type ProductCms = { slug:string; category:"compressors"|"treatment"|"parts"; code:string; name:Bi; summary:Bi; overview:Bi; specs:Bi[]; applications:Bi[]; image:string; active?:boolean; sortOrder?:number; draft?:boolean };
type ServiceCms = { slug:string; name:Bi; summary:Bi; steps:Bi[]; active?:boolean; sortOrder?:number; draft?:boolean };
type CompanySettings={facebook:string;instagram:string;phone:string;whatsapp:string;email:string;addressAr:string;addressEn:string;footerAr:string;footerEn:string};
type Props = { user: { name: string; email: string }; inquiries: Inquiry[]; totals: Record<string, number>; products: ProductCms[]; services: ServiceCms[]; company:CompanySettings; slides: Slide[] };
type Tab = "overview" | "inquiries" | "products" | "services" | "content" | "settings";

export default function AdminDashboard(props: Props) {
  const [tab, setTab] = useState<Tab>("overview"); const [menu, setMenu] = useState(false); const [records, setRecords] = useState(props.inquiries); const [company, setCompany] = useState(props.company); const [slides, setSlides] = useState(props.slides); const [productItems, setProductItems] = useState(props.products); const [serviceItems, setServiceItems] = useState(props.services); const [newProductSlug, setNewProductSlug] = useState(""); const [saving, setSaving] = useState(false); const [notice, setNotice] = useState("");
  const stats = useMemo(() => ({ all: records.length, new: records.filter(r => r.status === "new").length, progress: records.filter(r => r.status === "in_progress").length, done: records.filter(r => r.status === "done").length }), [records]);
  useEffect(()=>{if(!notice)return;const id=window.setTimeout(()=>setNotice(""),5000);return()=>window.clearTimeout(id);},[notice]);
  useEffect(()=>{if(!productItems.some(item=>item.draft)&&!serviceItems.some(item=>item.draft)&&notice.startsWith("New "))setNotice("");},[productItems,serviceItems,notice]);
  const nav: [Tab, string, typeof LayoutDashboard][] = [["overview","Dashboard",LayoutDashboard],["inquiries","Customer inquiries",Inbox],["products","Products",Boxes],["services","Services",Wrench],["content","Homepage & slider",ImageIcon],["settings","Site settings",Settings]];
  async function updateStatus(id: number, status: string) { const old = records; setRecords(items => items.map(item => item.id === id ? {...item,status} : item)); const response = await fetch(`/api/admin/inquiries/${id}`, { method: "PATCH", headers: {"content-type":"application/json"}, body: JSON.stringify({status}) }); if (!response.ok) { setRecords(old); setNotice("Could not update the inquiry."); } }
  async function saveSettings() { const badProduct=productItems.find(p=>p.draft&&(!p.slug||!p.code||!p.name.ar.trim()||!p.name.en.trim()||!p.summary.ar.trim()||!p.summary.en.trim()||!p.overview.ar.trim()||!p.overview.en.trim()||!p.image)); const badService=serviceItems.find(s=>s.draft&&(!s.slug||!s.name.ar.trim()||!s.name.en.trim()||!s.summary.ar.trim()||!s.summary.en.trim()||!s.steps.length||s.steps.some(step=>!step.ar.trim()||!step.en.trim()))); if(badProduct||badService){setNotice(`Complete all required Arabic and English fields for the new ${badProduct?"product":"service"} before saving.`);return;} const cleanProducts=productItems.map(({draft,...item})=>item); const cleanServices=serviceItems.map(({draft,...item})=>item); setSaving(true); setNotice(""); const response = await fetch("/api/admin/settings", { method: "PUT", headers: {"content-type":"application/json"}, body: JSON.stringify({...company,slides,products:cleanProducts,services:cleanServices}) }); setSaving(false); if(response.ok){setProductItems(cleanProducts);setServiceItems(cleanServices);} setNotice(response.ok ? "Changes published successfully." : "Could not save changes."); }
  function updateSlide(index:number, patch:Partial<Slide>) { setSlides(items => items.map((item,i) => i === index ? {...item,...patch} : item)); }
  async function uploadSlideImage(index:number, file:File) { setNotice("Uploading image..."); const data = new FormData(); data.append("file",file); const response = await fetch("/api/admin/media",{method:"POST",body:data}); const result = await response.json(); if (response.ok) { updateSlide(index,{image:result.url}); setNotice("Image uploaded. Save and publish the slider to apply it."); } else setNotice(result.error || "Image upload failed."); }
  function updateProduct(index:number, patch:Partial<ProductCms>) { setProductItems(items => items.map((item,i) => i === index ? {...item,...patch} : item)); }
  function updateBi(index:number, field:"name"|"summary"|"overview", lang:"ar"|"en", value:string) { setProductItems(items => items.map((item,i) => i === index ? {...item,[field]:{...item[field],[lang]:value}} : item)); }
  function updateList(index:number, field:"specs"|"applications", row:number, lang:"ar"|"en", value:string) { setProductItems(items => items.map((item,i) => i === index ? {...item,[field]:item[field].map((entry,j) => j === row ? {...entry,[lang]:value} : entry)} : item)); }
  function addProduct() { const next=productItems.length+1; const slug=`new-product-${Date.now()}`; setNewProductSlug(slug); setProductItems(items => [{slug,category:"parts",code:`PRD-${String(next).padStart(2,"0")}`,name:{ar:"",en:""},summary:{ar:"",en:""},overview:{ar:"",en:""},specs:[],applications:[],image:"/assets/hero-spare-parts.png",active:false,draft:true,sortOrder:items.length},...items]); setNotice("New product draft created. Complete the required fields, then activate and publish it."); window.requestAnimationFrame(()=>window.scrollTo({top:0,behavior:"smooth"})); }
  async function uploadProductImage(index:number,file:File) { setNotice("Uploading product image..."); const data=new FormData(); data.append("file",file); const response=await fetch("/api/admin/media",{method:"POST",body:data}); const result=await response.json(); if(response.ok){updateProduct(index,{image:result.url});setNotice("Image uploaded. Save products to publish it.");}else setNotice(result.error||"Image upload failed."); }
  function updateService(index:number,patch:Partial<ServiceCms>){setServiceItems(items=>items.map((item,i)=>i===index?{...item,...patch}:item));}
  function updateServiceBi(index:number,field:"name"|"summary",lang:"ar"|"en",value:string){setServiceItems(items=>items.map((item,i)=>i===index?{...item,[field]:{...item[field],[lang]:value}}:item));}
  function updateServiceStep(index:number,row:number,lang:"ar"|"en",value:string){setServiceItems(items=>items.map((item,i)=>i===index?{...item,steps:item.steps.map((step,j)=>j===row?{...step,[lang]:value}:step)}:item));}
  function addService(){const slug=`new-service-${Date.now()}`;setServiceItems(items=>[{slug,name:{ar:"",en:""},summary:{ar:"",en:""},steps:[],active:false,draft:true,sortOrder:items.length},...items]);setNotice("New service draft created. Complete the required fields, then activate and publish it.");window.requestAnimationFrame(()=>window.scrollTo({top:0,behavior:"smooth"}));}
  return <main className="admin-shell">
    <aside className={menu ? "admin-sidebar open" : "admin-sidebar"}><div className="admin-brand"><img src="/assets/poland-egypt-logo.png" alt="Poland Egypt"/><div><strong>POLAND EGYPT</strong><span>Administration</span></div><button onClick={() => setMenu(false)}><X/></button></div><nav>{nav.map(([key,label,Icon]) => <button key={key} className={tab === key ? "active" : ""} onClick={() => {setTab(key);setMenu(false)}}><Icon/>{label}</button>)}</nav><div className="admin-user"><span>{props.user.name}</span><small>{props.user.email}</small><a href="/signout-with-chatgpt?return_to=/"><LogOut/> Sign out</a></div></aside>
    <section className="admin-main"><header><button className="admin-menu" onClick={() => setMenu(true)}><Menu/></button><div><span>ADMIN CONTROL PANEL</span><h1>{nav.find(item => item[0] === tab)?.[1]}</h1></div><a className="view-site" href="/" target="_blank">View website <ExternalLink/></a></header>
      {notice && <div className="admin-notice"><span>{notice}</span><button type="button" onClick={()=>setNotice("")} aria-label="Dismiss"><X/></button></div>}
      {tab === "overview" && <><div className="admin-stats"><Stat label="Total inquiries" value={stats.all} icon={Inbox}/><Stat label="New requests" value={stats.new} icon={BarChart3}/><Stat label="Products" value={props.products.length} icon={Boxes}/><Stat label="Services" value={props.services.length} icon={Wrench}/></div><div className="admin-panel"><div className="panel-head"><div><span>LATEST ACTIVITY</span><h2>Recent customer inquiries</h2></div><button onClick={() => setTab("inquiries")}>View all</button></div><InquiryTable records={records.slice(0,6)} updateStatus={updateStatus}/></div></>}
      {tab === "inquiries" && <div className="admin-panel"><div className="panel-head"><div><span>LEADS & REQUESTS</span><h2>Customer inquiries</h2></div><div className="status-summary"><b>{stats.new}</b> new · <b>{stats.progress}</b> in progress · <b>{stats.done}</b> completed</div></div><InquiryTable records={records} updateStatus={updateStatus}/></div>}
      {tab === "products" && <div className="admin-panel"><div className="panel-head"><div><span>CATALOG CMS</span><h2>Products</h2></div><button className="admin-add" onClick={addProduct}><Plus/> Add product</button></div><div className="product-cms-list">{productItems.map((item,index) => <details className="product-editor" key={`${item.slug}-${index}`}><summary><div><strong>{item.name.en || "Untitled product"}</strong><span>{item.name.ar} · {item.code}</span></div><small>{item.active !== false ? "Active" : "Hidden"}</small></summary><div className="product-editor-body"><div className="field-pair"><label>English name<input value={item.name.en} onChange={e=>updateBi(index,"name","en",e.target.value)}/></label><label>الاسم العربي<input dir="rtl" value={item.name.ar} onChange={e=>updateBi(index,"name","ar",e.target.value)}/></label></div><div className="field-triple"><label>URL slug<input value={item.slug} onChange={e=>updateProduct(index,{slug:e.target.value.toLowerCase().replace(/[^a-z0-9-]+/g,"-")})}/></label><label>Code<input value={item.code} onChange={e=>updateProduct(index,{code:e.target.value})}/></label><label>Category<select value={item.category} onChange={e=>updateProduct(index,{category:e.target.value as ProductCms["category"]})}><option value="compressors">Compressors</option><option value="treatment">Air treatment</option><option value="parts">Parts</option></select></label></div><div className="field-pair"><label>English summary<textarea value={item.summary.en} onChange={e=>updateBi(index,"summary","en",e.target.value)}/></label><label>الملخص العربي<textarea dir="rtl" value={item.summary.ar} onChange={e=>updateBi(index,"summary","ar",e.target.value)}/></label></div><div className="field-pair"><label>English overview<textarea value={item.overview.en} onChange={e=>updateBi(index,"overview","en",e.target.value)}/></label><label>النظرة العامة بالعربية<textarea dir="rtl" value={item.overview.ar} onChange={e=>updateBi(index,"overview","ar",e.target.value)}/></label></div><div className="cms-image-row"><label>Product image<input value={item.image} onChange={e=>updateProduct(index,{image:e.target.value})}/></label><label className="upload-control"><Upload/> Upload image<input type="file" accept="image/jpeg,image/png,image/webp,image/avif" onChange={e=>{const file=e.target.files?.[0];if(file)uploadProductImage(index,file);e.currentTarget.value="";}}/></label></div><ListEditor title="Specifications" items={item.specs} onChange={(row,lang,value)=>updateList(index,"specs",row,lang,value)} onAdd={()=>updateProduct(index,{specs:[...item.specs,{ar:"",en:""}]})} onDelete={row=>updateProduct(index,{specs:item.specs.filter((_,i)=>i!==row)})}/><ListEditor title="Applications" items={item.applications} onChange={(row,lang,value)=>updateList(index,"applications",row,lang,value)} onAdd={()=>updateProduct(index,{applications:[...item.applications,{ar:"",en:""}]})} onDelete={row=>updateProduct(index,{applications:item.applications.filter((_,i)=>i!==row)})}/><div className="cms-actions"><label className="cms-toggle"><input type="checkbox" checked={item.active !== false} onChange={e=>updateProduct(index,{active:e.target.checked})}/> Active on website</label><div className="editor-buttons"><a href={`/products/${item.slug}?lang=en`} target="_blank"><ExternalLink/> Preview</a><button onClick={()=>{if(confirm("Delete this product?"))setProductItems(items=>items.filter((_,i)=>i!==index));}}><Trash2/> Delete</button></div></div></div></details>)}</div><button className="admin-primary" disabled={saving} onClick={saveSettings}><Save/>{saving?"Publishing...":"Save & publish products"}</button></div>}
      {tab === "services" && <div className="admin-panel"><div className="panel-head"><div><span>SERVICES CMS</span><h2>Services</h2></div><button className="admin-add" onClick={addService}><Plus/> Add service</button></div><div className="product-cms-list">{serviceItems.map((item,index)=><details className="product-editor" key={`${item.slug}-${index}`}><summary><div><strong>{item.name.en||"Untitled service"}</strong><span>{item.name.ar}</span></div><small>{item.active!==false?"Active":"Hidden"}</small></summary><div className="product-editor-body"><div className="field-pair"><label>English name<input value={item.name.en} onChange={e=>updateServiceBi(index,"name","en",e.target.value)}/></label><label>الاسم العربي<input dir="rtl" value={item.name.ar} onChange={e=>updateServiceBi(index,"name","ar",e.target.value)}/></label></div><label>URL slug<input value={item.slug} onChange={e=>updateService(index,{slug:e.target.value.toLowerCase().replace(/[^a-z0-9-]+/g,"-")})}/></label><div className="field-pair"><label>English summary<textarea value={item.summary.en} onChange={e=>updateServiceBi(index,"summary","en",e.target.value)}/></label><label>الملخص العربي<textarea dir="rtl" value={item.summary.ar} onChange={e=>updateServiceBi(index,"summary","ar",e.target.value)}/></label></div><ListEditor title="Service steps" items={item.steps} onChange={(row,lang,value)=>updateServiceStep(index,row,lang,value)} onAdd={()=>updateService(index,{steps:[...item.steps,{ar:"",en:""}]})} onDelete={row=>updateService(index,{steps:item.steps.filter((_,i)=>i!==row)})}/><div className="cms-actions"><label className="cms-toggle"><input type="checkbox" checked={item.active!==false} onChange={e=>updateService(index,{active:e.target.checked})}/> Active on website</label><div className="editor-buttons"><a href={`/services/${item.slug}?lang=en`} target="_blank"><ExternalLink/> Preview</a><button onClick={()=>{if(confirm("Delete this service?"))setServiceItems(items=>items.filter((_,i)=>i!==index));}}><Trash2/> Delete</button></div></div></div></details>)}</div><button className="admin-primary" disabled={saving} onClick={saveSettings}><Save/>{saving?"Publishing...":"Save & publish services"}</button></div>}
      {tab === "content" && <div className="admin-panel"><div className="panel-head"><div><span>HOMEPAGE CMS</span><h2>Hero slider</h2></div><button className="admin-add" onClick={() => setSlides(items => [...items,{titleAr:"",titleEn:"",textAr:"",textEn:"",image:"/assets/hero-compressor.png",active:true}])}><Plus/> Add slide</button></div><div className="cms-slides">{slides.map((item,index) => <article className="cms-slide" key={index}><div className="cms-slide-preview" style={{backgroundImage:`url(${item.image})`}}><span>Slide {index+1}</span></div><div className="cms-fields"><div className="field-pair"><label>العنوان العربي<input dir="rtl" value={item.titleAr} onChange={e => updateSlide(index,{titleAr:e.target.value})}/></label><label>English title<input value={item.titleEn} onChange={e => updateSlide(index,{titleEn:e.target.value})}/></label></div><div className="field-pair"><label>النص العربي<textarea dir="rtl" value={item.textAr} onChange={e => updateSlide(index,{textAr:e.target.value})}/></label><label>English text<textarea value={item.textEn} onChange={e => updateSlide(index,{textEn:e.target.value})}/></label></div><div className="cms-image-row"><label>Image path or HTTPS URL<input value={item.image} onChange={e => updateSlide(index,{image:e.target.value})}/></label><label className="upload-control"><Upload/> Upload image<input type="file" accept="image/jpeg,image/png,image/webp,image/avif" onChange={e => { const file=e.target.files?.[0]; if(file) uploadSlideImage(index,file); e.currentTarget.value=""; }}/></label></div><div className="cms-actions"><label className="cms-toggle"><input type="checkbox" checked={item.active} onChange={e => updateSlide(index,{active:e.target.checked})}/> Active</label><button onClick={() => setSlides(items => items.filter((_,i) => i !== index))}><Trash2/> Delete</button></div></div></article>)}</div><button className="admin-primary" disabled={saving || !slides.length} onClick={saveSettings}><Save/>{saving ? "Publishing..." : "Save & publish slider"}</button></div>}
      {tab === "settings" && <div className="admin-panel settings-panel"><div className="panel-head"><div><span>COMPANY SETTINGS</span><h2>Contact, social & footer</h2></div><ShieldCheck/></div><div className="field-pair"><label>Phone<input value={company.phone} onChange={e=>setCompany({...company,phone:e.target.value})}/></label><label>WhatsApp number<input value={company.whatsapp} onChange={e=>setCompany({...company,whatsapp:e.target.value.replace(/\D/g,"")})}/></label></div><label>Email<input type="email" value={company.email} onChange={e=>setCompany({...company,email:e.target.value})}/></label><div className="field-pair"><label>العنوان العربي<input dir="rtl" value={company.addressAr} onChange={e=>setCompany({...company,addressAr:e.target.value})}/></label><label>English address<input value={company.addressEn} onChange={e=>setCompany({...company,addressEn:e.target.value})}/></label></div><div className="field-pair"><label>وصف الشركة بالعربية<textarea dir="rtl" value={company.footerAr} onChange={e=>setCompany({...company,footerAr:e.target.value})}/></label><label>English company description<textarea value={company.footerEn} onChange={e=>setCompany({...company,footerEn:e.target.value})}/></label></div><label>Facebook URL<input value={company.facebook} onChange={e=>setCompany({...company,facebook:e.target.value})}/></label><label>Instagram URL<input value={company.instagram} onChange={e=>setCompany({...company,instagram:e.target.value})}/></label><button className="admin-primary" disabled={saving} onClick={saveSettings}><Save/>{saving ? "Saving..." : "Save company settings"}</button></div>}
      <footer className="admin-credit">Developed by <a href="https://abicegypt.com" target="_blank" rel="noopener noreferrer">ABIC</a></footer>
    </section>
  </main>;
}

function Stat({label,value,icon:Icon}:{label:string;value:number;icon:typeof Inbox}) { return <article className="admin-stat"><div><span>{label}</span><strong>{value}</strong></div><Icon/></article> }
function ListEditor({title,items,onChange,onAdd,onDelete}:{title:string;items:Bi[];onChange:(row:number,lang:"ar"|"en",value:string)=>void;onAdd:()=>void;onDelete:(row:number)=>void}) { return <div className="list-editor"><div><h3>{title}</h3><button onClick={onAdd}><Plus/> Add item</button></div>{items.map((item,row)=><div className="list-editor-row" key={row}><input value={item.en} placeholder="English" onChange={e=>onChange(row,"en",e.target.value)}/><input dir="rtl" value={item.ar} placeholder="العربية" onChange={e=>onChange(row,"ar",e.target.value)}/><button onClick={()=>onDelete(row)} aria-label="Delete"><Trash2/></button></div>)}</div> }
function InquiryTable({records,updateStatus}:{records:Inquiry[];updateStatus:(id:number,status:string)=>void}) { return <div className="admin-table-wrap"><table className="admin-table"><thead><tr><th>Customer</th><th>Request</th><th>Contact</th><th>Date</th><th>Status</th></tr></thead><tbody>{records.length ? records.map(item => <tr key={item.id}><td><strong>{item.name}</strong><small>{item.email || "No email"}</small></td><td><span>{item.type}</span><p>{item.message}</p></td><td dir="ltr">{item.phone}</td><td>{new Date(item.createdAt).toLocaleDateString("en-GB")}</td><td><select value={item.status} onChange={e => updateStatus(item.id,e.target.value)}><option value="new">New</option><option value="in_progress">In progress</option><option value="done">Completed</option><option value="archived">Archived</option></select></td></tr>) : <tr><td colSpan={5} className="empty-cell">No inquiries received yet.</td></tr>}</tbody></table></div> }