import Link from "next/link";
import { ArrowRight, Boxes, ClipboardList, Plus, Truck } from "lucide-react";
import { getLists, getProducts, getSuppliers } from "@/lib/data";
import type { ShoppingList } from "@/lib/types";
import { formatDate } from "@/lib/utils";
import { Empty, PageHead } from "@/components/ui";

export const dynamic="force-dynamic";
export default async function Dashboard(){
  const [allProducts,allSuppliers,allLists]=await Promise.all([getProducts(),getSuppliers(),getLists()]);
  const products=allProducts.filter((p)=>p.active).length,suppliers=allSuppliers.length;
  const rows=allLists.slice(0,5) as ShoppingList[];
  return <><PageHead eyebrow="Zentrale" title="Was wird gebraucht?" text="Produkte verwalten, Bedarf sammeln und Bestellungen klar nach Lieferanten aufteilen."><Link className="button" href="/listen/neu"><Plus size={18}/>Neue Liste</Link></PageHead>
    <section className="grid grid-3"><Stat icon={<Boxes/>} label="Aktive Produkte" value={products} href="/produkte"/><Stat icon={<Truck/>} label="Lieferanten" value={suppliers} href="/lieferanten"/><Stat icon={<ClipboardList/>} label="Einkaufslisten" value={allLists.length} href="/listen"/></section>
    <div className="section-head"><h2>Zuletzt bearbeitet</h2><Link className="button ghost small" href="/listen">Alle Listen <ArrowRight size={15}/></Link></div>
    <div className="grid">{rows.map(l=><Link className="card list-card" href={`/listen/${l.id}`} key={l.id}><div><span className={`badge ${l.status==="completed"?"gray":""}`}>{l.status==="draft"?"Entwurf":"Abgeschlossen"}</span><h3>{l.name}</h3><span className="muted">Erstellt am {formatDate(l.created_at)}</span></div><ArrowRight/></Link>)}{!rows.length&&<div className="card"><Empty title="Noch keine Einkaufslisten" text="Erstellen Sie die erste Liste und fügen Sie Produkte hinzu." href="/listen/neu" action="Liste erstellen"/></div>}</div>
  </>;
}
function Stat({icon,label,value,href}:{icon:React.ReactNode;label:string;value:number;href:string}){return <Link href={href} className="card"><div className="actions muted">{icon}<span>{label}</span></div><div className="stat">{value}</div></Link>}