function Inventory({ focus, startCount }) {
  const { L, lang, fmt, D, inv, setInv, recipes, toast, openExport } = useMizo();
  const [q, setQ] = React.useState('');
  const [cat, setCat] = React.useState('all');
  const [sel, setSel] = React.useState(focus || null);
  const [counting, setCounting] = React.useState(!!startCount);
  const [counts, setCounts] = React.useState({});
  const [adding, setAdding] = React.useState(false);
  React.useEffect(() => { if (focus) setSel(focus); }, [focus]);

  const rows = inv.filter((i) => (cat === 'all' || i.cat === cat) && i.name[lang].toLowerCase().includes(q.toLowerCase()));
  const value = inv.reduce((s, i) => s + i.onHand * i.cost, 0);
  const below = inv.filter((i) => stockState(i) !== 'ok').length;
  const changed = Object.keys(counts).filter((k) => counts[k] !== '' && Number(counts[k]) !== inv.find((i) => i.id === k).onHand);
  const supName = (id) => (D.suppliers.find((s) => s.id === id) || {}).name;
  const stTag = (i) => { const s = stockState(i); return s === 'low' ? <Pill tone="neg">{L('Low', 'Bas')}</Pill> : s === 'reorder' ? <Pill tone="warn">{L('Reorder soon', 'À commander')}</Pill> : <Pill tone="pos">{L('In stock', 'En stock')}</Pill>; };

  const saveCount = () => {
    setInv(inv.map((i) => (changed.includes(i.id) ? { ...i, onHand: Number(counts[i.id]) } : i)));
    toast(L(`Count saved · ${changed.length} items updated`, `Inventaire enregistré · ${changed.length} articles mis à jour`));
    setCounts({}); setCounting(false);
  };
  const item = inv.find((i) => i.id === sel);

  return (
    <div className="page">
      <PageHead title={L('Inventory', 'Inventaire')} sub={L('What you have, what it’s worth, and what to order.', 'Ce que vous avez, ce que ça vaut et quoi commander.')}>
        {counting ? <button className="btn btn-secondary" onClick={() => { setCounting(false); setCounts({}); }}>{L('Cancel count', 'Annuler')}</button> : <button className="btn btn-secondary" onClick={() => setCounting(true)}><Icon n="clipboard-text" />{L('Start a count', 'Faire un inventaire')}</button>}
        <button className="btn btn-secondary" onClick={() => openExport({ kind: 'stock' })}><Icon n="printer" />{L('Print / PDF', 'Imprimer / PDF')}</button>
        <button className="btn btn-primary" onClick={() => setAdding(true)}><Icon n="plus" />{L('Add item', 'Ajouter un article')}</button>
      </PageHead>

      <section className="stats">
        <Stat label={L('Stock value', 'Valeur du stock')} value={fmt.money0(value)}>{inv.length} {L('items tracked', 'articles suivis')}</Stat>
        <Stat label={L('Below par', 'Sous le niveau')} value={below} tone={below ? 'warn' : ''}>{L('Need ordering this week', 'À commander cette semaine')}</Stat>
        <Stat label={L('Waste this week', 'Pertes cette semaine')} value={fmt.money(186.4)} tone="neg"><Delta v={38} invert suffix={L(' vs avg', ' vs moy.')} /></Stat>
        <Stat label={L('Last full count', 'Dernier inventaire')} value={L('Sunday', 'Dimanche')}>{L('by Nikos · 42 min', 'par Nikos · 42 min')}</Stat>
      </section>

      <div className="panel panel-flush">
        <div className="toolbar">
          <label className="search"><Icon n="magnifying-glass" /><input className="input" placeholder={L('Search ingredients', 'Rechercher un ingrédient')} value={q} onChange={(e) => setQ(e.target.value)} /></label>
          <Seg value={cat} onChange={setCat} size="sm" options={[['all', L('All', 'Tout')], ...Object.entries(D.cats).map(([k, v]) => [k, v[lang]])]} />
        </div>
        <div className="table-scroll">
          <table className="table mtable">
            <thead><tr>
              <th>{L('Item', 'Article')}</th><th>{L('On hand', 'En stock')}</th>
              {counting ? <th className="count-col">{L('Counted', 'Compté')}</th> : null}
              <th className="num">{L('Unit cost', 'Coût unit.')}</th><th className="num hide-sm">{L('Value', 'Valeur')}</th><th>{L('Status', 'État')}</th>
            </tr></thead>
            <tbody>
              {rows.map((i) => (
                <tr key={i.id} className="clickable" onClick={() => !counting && setSel(i.id)}>
                  <td><div className="cell-main">{i.name[lang]}</div><div className="cell-sub">{D.cats[i.cat][lang]} · {supName(i.sup)}</div></td>
                  <td><div className="onhand"><span className="tnum">{fmt.num(i.onHand)} <span className="muted">{i.unit}</span></span><Level value={i.onHand} par={i.par} /></div><div className="cell-sub">{L('Par', 'Niveau')} {fmt.num(i.par)} {i.unit}</div></td>
                  {counting ? <td className="count-col" onClick={(e) => e.stopPropagation()}><input className="input count-input" type="number" min="0" step="0.1" placeholder={String(i.onHand)} value={counts[i.id] ?? ''} onChange={(e) => setCounts({ ...counts, [i.id]: e.target.value })} /></td> : null}
                  <td className="num"><span className="tnum">{fmt.money(i.cost)}</span>{i.trend ? <div className={'cell-sub ' + (i.trend > 0 ? 'txt-neg' : 'txt-pos')}>{i.trend > 0 ? '▲' : '▼'} {fmt.pct(Math.abs(i.trend))}</div> : null}</td>
                  <td className="num tnum hide-sm">{fmt.money(i.onHand * i.cost)}</td>
                  <td>{stTag(i)}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {!rows.length ? <div className="empty">{L('No ingredients match.', 'Aucun ingrédient trouvé.')}</div> : null}
        </div>
      </div>

      {counting ? (
        <div className="countbar">
          <Icon n="clipboard-text" s="1.3rem" />
          <span>{changed.length ? L(`${changed.length} items changed`, `${changed.length} articles modifiés`) : L('Type what you count on the shelf. Leave blank if unchanged.', 'Inscrivez ce que vous comptez. Laissez vide si inchangé.')}</span>
          <button className="btn btn-primary" disabled={!changed.length} onClick={saveCount}><Icon n="check" />{L('Save count', 'Enregistrer')}</button>
        </div>
      ) : null}

      <Drawer open={!!item} onClose={() => setSel(null)}>{item ? <ItemDetail item={item} onClose={() => setSel(null)} /> : null}</Drawer>
      <AddItemModal open={adding} onClose={() => setAdding(false)} />
    </div>
  );
}

function ItemDetail({ item, onClose }) {
  const { L, lang, fmt, D, inv, setInv, recipes, toast } = useMizo();
  const [qty, setQty] = React.useState(item.onHand);
  const [waste, setWaste] = React.useState('');
  const [reason, setReason] = React.useState('spoiled');
  React.useEffect(() => setQty(item.onHand), [item.id]);
  const sup = D.suppliers.find((s) => s.id === item.sup);
  const usedIn = recipes.filter((r) => r.lines.some((l) => l.ing === item.id));
  const step = item.unit === 'ea' ? 10 : 1;
  const need = Math.max(0, Math.ceil(item.par - item.onHand));
  const update = (patch) => setInv(inv.map((i) => (i.id === item.id ? { ...i, ...patch } : i)));
  const months = lang === 'fr' ? ['mai', 'juin', 'juil', 'août', 'sept', 'oct'] : ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'];

  return (
    <div className="dr">
      <div className="dr-head">
        <div><div className="card-kicker">{D.cats[item.cat][lang]}</div><h2>{item.name[lang]}</h2></div>
        <button className="btn btn-icon btn-secondary" onClick={onClose} aria-label="Close"><Icon n="x" s="1.1rem" /></button>
      </div>
      <div className="dr-sec">
        <div className="dr-label">{L('On hand', 'En stock')}</div>
        <div className="stepper">
          <button className="btn btn-secondary btn-icon" onClick={() => setQty(Math.max(0, +(qty - step).toFixed(2)))} aria-label="−"><Icon n="minus" /></button>
          <input className="input stepper-val" type="number" value={qty} onChange={(e) => setQty(Number(e.target.value))} />
          <span className="stepper-unit">{item.unit}</span>
          <button className="btn btn-secondary btn-icon" onClick={() => setQty(+(qty + step).toFixed(2))} aria-label="+"><Icon n="plus" /></button>
        </div>
        <Level value={qty} par={item.par} />
        <div className="dr-row muted sm"><span>{L('Par level', 'Niveau cible')} {fmt.num(item.par)} {item.unit}</span><span>{fmt.money(qty * item.cost)}</span></div>
        <button className="btn btn-primary" disabled={qty === item.onHand} onClick={() => { update({ onHand: qty }); toast(L('Stock updated', 'Stock mis à jour')); }}>{L('Save', 'Enregistrer')}</button>
      </div>
      {need > 0 ? (
        <div className="dr-sec dr-reorder">
          <div><div>{L(`Order ${need} ${item.unit} to reach par`, `Commander ${need} ${item.unit} pour atteindre le niveau`)}</div><div className="muted sm">{sup.name} · {L('next delivery', 'prochaine livraison')} {sup.next[lang]} · ≈ {fmt.money(need * item.cost)}</div></div>
          <button className="btn btn-primary" onClick={() => toast(L(`Order sent to ${sup.name}`, `Commande envoyée à ${sup.name}`))}><Icon n="paper-plane-tilt" />{L('Send order', 'Envoyer')}</button>
        </div>
      ) : null}
      <div className="dr-sec">
        <div className="dr-label">{L('Log waste', 'Noter une perte')}</div>
        <div className="waste-row">
          <input className="input" type="number" min="0" placeholder={'0 ' + item.unit} value={waste} onChange={(e) => setWaste(e.target.value)} />
          <select className="input" value={reason} onChange={(e) => setReason(e.target.value)}>
            <option value="spoiled">{L('Spoiled', 'Gâté')}</option><option value="expired">{L('Expired', 'Périmé')}</option><option value="prep">{L('Prep mistake', 'Erreur de prép.')}</option><option value="dropped">{L('Dropped', 'Échappé')}</option>
          </select>
          <button className="btn btn-secondary" disabled={!(Number(waste) > 0)} onClick={() => { update({ onHand: Math.max(0, +(item.onHand - Number(waste)).toFixed(2)) }); setQty(Math.max(0, +(item.onHand - Number(waste)).toFixed(2))); toast(L(`Waste logged · ${fmt.money(Number(waste) * item.cost)}`, `Perte notée · ${fmt.money(Number(waste) * item.cost)}`)); setWaste(''); }}>{L('Log', 'Noter')}</button>
        </div>
      </div>
      <div className="dr-sec">
        <div className="dr-row"><div className="dr-label">{L('Price, last 6 months', 'Prix, 6 derniers mois')}</div><span className="tnum">{fmt.money(item.cost)}/{item.unit}</span></div>
        <div className="pricehist">
          {item.hist.map((v, i) => <div key={i} className="ph-col"><div className="ph-bar" style={{ height: (v / Math.max(...item.hist)) * 100 + '%' }}></div><span>{months[i]}</span></div>)}
        </div>
      </div>
      <div className="dr-sec">
        <div className="dr-label">{L('Used in', 'Utilisé dans')}</div>
        <div className="chips">{usedIn.length ? usedIn.map((r) => <span key={r.id} className="tag tag-neutral">{r.name[lang]}</span>) : <span className="muted">—</span>}</div>
      </div>
    </div>
  );
}

function AddItemModal({ open, onClose }) {
  const { L, lang, D, inv, setInv, toast } = useMizo();
  const blank = { name: '', cat: 'produce', unit: 'kg', par: '', cost: '', sup: 's2' };
  const [f, setF] = React.useState(blank);
  const ok = f.name.trim() && Number(f.par) > 0 && Number(f.cost) > 0;
  const save = () => {
    const id = 'x' + Date.now();
    setInv([...inv, { id, name: { en: f.name, fr: f.name }, cat: f.cat, unit: f.unit, onHand: 0, par: Number(f.par), cost: Number(f.cost), sup: f.sup, trend: 0, hist: Array(6).fill(Number(f.cost)) }]);
    toast(L(`${f.name} added`, `${f.name} ajouté`)); setF(blank); onClose();
  };
  return (
    <Modal open={open} onClose={onClose} title={L('Add an ingredient', 'Ajouter un ingrédient')} actions={<><button className="btn btn-secondary" onClick={onClose}>{L('Cancel', 'Annuler')}</button><button className="btn btn-primary" disabled={!ok} onClick={save}>{L('Add item', 'Ajouter')}</button></>}>
      <div className="form-grid">
        <div className="field span-2"><label>{L('Name', 'Nom')}</label><input className="input" autoFocus value={f.name} placeholder={L('e.g. Halloumi', 'ex. Halloumi')} onChange={(e) => setF({ ...f, name: e.target.value })} /></div>
        <div className="field"><label>{L('Category', 'Catégorie')}</label><select className="input" value={f.cat} onChange={(e) => setF({ ...f, cat: e.target.value })}>{Object.entries(D.cats).map(([k, v]) => <option key={k} value={k}>{v[lang]}</option>)}</select></div>
        <div className="field"><label>{L('Unit', 'Unité')}</label><select className="input" value={f.unit} onChange={(e) => setF({ ...f, unit: e.target.value })}><option>kg</option><option>L</option><option value="ea">{L('each', 'unité')}</option></select></div>
        <div className="field"><label>{L('Par level', 'Niveau cible')}</label><input className="input" type="number" value={f.par} onChange={(e) => setF({ ...f, par: e.target.value })} /></div>
        <div className="field"><label>{L('Cost per unit (CAD)', 'Coût unitaire (CAD)')}</label><input className="input" type="number" step="0.01" value={f.cost} onChange={(e) => setF({ ...f, cost: e.target.value })} /></div>
        <div className="field span-2"><label>{L('Supplier', 'Fournisseur')}</label><select className="input" value={f.sup} onChange={(e) => setF({ ...f, sup: e.target.value })}>{D.suppliers.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}</select></div>
      </div>
    </Modal>
  );
}
window.Inventory = Inventory;