import { deleteProduct, saveProduct, setProductActive } from "@/lib/actions";
import { ConfirmButton } from "@/components/confirm-button";
import { Empty, PageHead } from "@/components/ui";
import { getProduct, getProducts, getSuppliers } from "@/lib/data";
import type { Product } from "@/lib/types";

export const dynamic="force-dynamic";
export default async function ProductsPage({searchParams}:{searchParams:Promise<{q?:string;edit?:string;status?:string}>}){
 const {q="",edit,status="active"}=await searchParams;const [allProducts,suppliers,current]=await Promise.all([getProducts(),getSuppliers(),edit?getProduct(edit):null]);const needle=q.toLowerCase();const products=allProducts.filter((p)=>(status==="all"||p.active===(status==="active"))&&`${p.name} ${p.article_number??""}`.toLowerCase().includes(needle))as Product[];
 return <><PageHead eyebrow="Stammdaten" title="Produkte" text="Alles, was regelmäßig bestellt wird – mit Einheit, Artikelnummer und festem Lieferanten."/>
 <section className="card"><h2>{current?"Produkt bearbeiten":"Neues Produkt"}</h2>{!suppliers.length?<div className="notice">Legen Sie zuerst einen Lieferanten an.</div>:<form action={saveProduct} className="form-grid">{current&&<input type="hidden" name="id" value={current.id}/>}<Field name="name" label="Produktname *" value={current?.name} required/><Field name="article_number" label="Artikelnummer" value={current?.article_number}/><Field name="packaging_unit" label="Verpackungseinheit" value={current?.packaging_unit} placeholder="z. B. Karton à 12 Stück"/><div className="field"><label htmlFor="supplier_id">Lieferant *</label><select id="supplier_id" name="supplier_id" defaultValue={current?.supplier_id??""} required><option value="" disabled>Bitte auswählen</option>{suppliers.map(s=><option value={s.id} key={s.id}>{s.name}</option>)}</select></div><div className="actions full"><button className="button">{current?"Änderungen speichern":"Produkt anlegen"}</button>{current&&<a className="button ghost" href="/produkte">Abbrechen</a>}</div></form>}</section>
 <div className="section-head"><h2>Produktkatalog</h2><form className="actions"><input className="search" name="q" placeholder="Name oder Artikelnummer …" defaultValue={q}/><select className="search" name="status" defaultValue={status}><option value="active">Aktiv</option><option value="inactive">Inaktiv</option><option value="all">Alle</option></select><button className="button ghost small">Filtern</button></form></div>
 <div className="table-wrap product-table-wrap"><table className="table product-table"><thead><tr><th>Produkt</th><th>Artikel-Nr.</th><th>Einheit</th><th>Lieferant</th><th></th></tr></thead><tbody>{products.map(p=><tr key={p.id}><td data-label="Produkt"><strong>{p.name}</strong> {!p.active&&<span className="badge gray">Inaktiv</span>}</td><td data-label="Artikel-Nr.">{p.article_number||"–"}</td><td data-label="Einheit">{p.packaging_unit||"–"}</td><td data-label="Lieferant">{p.supplier?.name}</td><td className="product-actions"><div className="actions"><a className="button ghost small" href={`/produkte?edit=${p.id}&status=${status}`}>Bearbeiten</a><form action={setProductActive}><input type="hidden" name="id" value={p.id}/><input type="hidden" name="active" value={String(!p.active)}/><button className="button secondary small">{p.active?"Deaktivieren":"Aktivieren"}</button></form><form action={deleteProduct}><input type="hidden" name="id" value={p.id}/><ConfirmButton label="Löschen" question={`${p.name} wirklich dauerhaft löschen?`}/></form></div></td></tr>)}</tbody></table>{!products.length&&<Empty title="Keine Produkte gefunden" text="Passen Sie den Filter an oder legen Sie ein Produkt an."/>}</div></>;
}
function Field({name,label,value,placeholder,required=false}:{name:string;label:string;value?:string|null;placeholder?:string;required?:boolean}){return <div className="field"><label htmlFor={name}>{label}</label><input id={name} name={name} defaultValue={value??""} placeholder={placeholder} required={required}/></div>}