"use client";
import { useMemo, useState } from "react";
import type { Product } from "@/lib/types";
import { addListItem } from "@/lib/actions";

export function ProductSearch({ products, listId }: { products: Product[]; listId: string }) {
  const [query,setQuery]=useState("");
  const filtered=useMemo(()=>products.filter(p=>`${p.name} ${p.article_number??""} ${p.supplier?.name??""}`.toLowerCase().includes(query.toLowerCase())).slice(0,12),[products,query]);
  return <div className="card"><div className="section-head" style={{marginTop:0}}><div><h2>Produkt hinzufügen</h2><span className="muted">Suche nach Name, Artikelnummer oder Lieferant</span></div></div>
    <input className="search" aria-label="Produkte suchen" placeholder="Produkt suchen …" value={query} onChange={e=>setQuery(e.target.value)}/>
    <div className="grid" style={{marginTop:12}}>{filtered.map(p=><form action={addListItem} className="product-picker" key={p.id}>
      <input type="hidden" name="list_id" value={listId}/><input type="hidden" name="product_id" value={p.id}/>
      <div><strong>{p.name}</strong><div className="muted">{[p.article_number,p.packaging_unit,p.supplier?.name].filter(Boolean).join(" · ")}</div></div>
      <input className="search qty" aria-label={`Menge für ${p.name}`} name="quantity" type="number" min="1" step="1" defaultValue="1" required/>
      <button className="button small">Hinzufügen</button></form>)}
      {!filtered.length&&<p className="muted">Kein aktives Produkt gefunden.</p>}
    </div></div>;
}