import type { ShoppingList, ShoppingListItem } from "@/lib/types";
import { formatDate, groupItems } from "@/lib/utils";

export function Report({ list, items }: { list: ShoppingList; items: ShoppingListItem[] }) {
  const groups=groupItems(items);
  return <><header className="report-header"><div className="topline">Bestellbericht</div><h1>{list.name}</h1><div className="report-meta muted"><span>Erstellt: {formatDate(list.created_at)}</span><span>Abgeschlossen: {formatDate(list.completed_at)}</span><span>{items.length} Positionen</span></div></header>
    <div className="grid">{groups.map(group=>{const first=group.items[0]; return <section className="card supplier-group" key={group.supplier}><div className="section-head" style={{marginTop:0}}><div><div className="topline">Lieferant</div><h2>{group.supplier}</h2></div><div className="muted">{[first.supplier_contact_person,first.supplier_email,first.supplier_phone].filter(Boolean).join(" · ")}</div></div>
      <div className="table-wrap"><table className="table"><thead><tr><th>Produkt</th><th>Artikel-Nr.</th><th>Einheit</th><th>Anzahl</th></tr></thead><tbody>{group.items.map(i=><tr key={i.id}><td><strong>{i.product_name}</strong></td><td>{i.article_number||"–"}</td><td>{i.packaging_unit||"–"}</td><td><strong>{i.quantity}</strong></td></tr>)}</tbody></table></div></section>})}</div>
    {!groups.length&&<div className="empty">Dieser Bericht enthält keine Positionen.</div>}<p className="footer-note">Erstellt mit Einkauf Großhandel</p></>;
}