function Suppliers({ focus, tab: ctlTab }) {
  const { L, lang, fmt, D, inv, setInv, invMap, invoices, setInvoices, toast, openImport } = useMizo();
  const [tabS, setTab] = React.useState((focus && focus.tab) || 'suppliers');
  const tab = ctlTab || tabS;
  const [ing, setIng] = React.useState((focus && focus.ing) || 'feta');
  const [filter, setFilter] = React.useState('open');
  React.useEffect(() => { if (focus) { focus.tab && setTab(focus.tab); focus.ing && setIng(focus.ing); } }, [focus]);
  const sup = (id) => D.suppliers.find((s) => s.id === id);
  const sum = (st) => invoices.filter((i) => st.includes(i.status)).reduce((s, i) => s + i.amount, 0);
  const dateFmt = (d) => new Date(d + 'T12:00').toLocaleDateString(lang === 'fr' ? 'fr-CA' : 'en-CA', { month: 'short', day: 'numeric' });
  const shown = invoices.filter((i) => filter === 'all' || (filter === 'open' ? i.status !== 'paid' : i.status === 'paid'));

  const opps = Object.entries(D.quotes).map(([k, qs]) => {
    const it = invMap[k]; const best = qs.reduce((a, b) => (b.p < a.p ? b : a));
    return { k, it, best, save: Math.max(0, (it.cost - best.p) * D.monthlyUse[k]) };
  }).sort((a, b) => b.save - a.save);
  const cur = opps.find((o) => o.k === ing);
  const qs = D.quotes[ing].map((q) => (q.sup === cur.it.sup ? { ...q, p: cur.it.cost } : q));
  const maxP = Math.max(...qs.map((q) => q.p));

  return (
    <div className="page">
      <PageHead title={L('Suppliers & purchases', 'Fournisseurs et achats')} sub={L('Who you buy from, what you owe, and where you could pay less.', 'À qui vous achetez, ce que vous devez et où payer moins.')}>
        <button className="btn btn-primary" onClick={() => openImport('invoices')}><Icon n="upload-simple" />{L('Upload invoice', 'Téléverser une facture')}</button>
      </PageHead>
      {ctlTab ? null : <div className="tabs-row"><Seg value={tab} onChange={setTab} options={[['suppliers', L('Suppliers', 'Fournisseurs')], ['invoices', L('Invoices', 'Factures')], ['prices', L('Compare prices', 'Comparer les prix')]]} /></div>}

      {tab === 'suppliers' ? (
        <div className="sup-grid">
          {D.suppliers.map((s) => {
            const n = inv.filter((i) => i.sup === s.id).length;
            return (
              <article key={s.id} className="panel sup-card">
                <div className="sup-top"><div className="sup-mono">{s.name.split(' ').slice(0, 2).map((w) => w[0]).join('')}</div><div><h3>{s.name}</h3><div className="muted sm">{s.cat[lang]} · {s.city}</div></div></div>
                <div className="sup-stats">
                  <div><span className="muted sm">{L('This month', 'Ce mois-ci')}</span><b className="tnum">{fmt.money0(s.spend)}</b></div>
                  <div><span className="muted sm">{L('On time', 'À temps')}</span><b className="tnum">{s.onTime}%</b></div>
                  <div><span className="muted sm">{L('Items', 'Articles')}</span><b className="tnum">{n}</b></div>
                </div>
                <div className="sup-foot"><span><Icon n="truck" /> {s.next[lang]}</span><a href={'tel:' + s.phone} className="sup-phone"><Icon n="phone" /> {s.phone}</a></div>
              </article>
            );
          })}
        </div>
      ) : null}

      {tab === 'invoices' ? (
        <>
          <section className="stats">
            <Stat label={L('Due in the next 2 weeks', 'À payer sous 2 semaines')} value={fmt.money(sum(['due']))} />
            <Stat label={L('Overdue', 'En retard')} value={fmt.money(sum(['overdue']))} tone={sum(['overdue']) ? 'neg' : ''} />
            <Stat label={L('Paid in October', 'Payé en octobre')} value={fmt.money(sum(['paid']))} />
          </section>
          <div className="panel panel-flush">
            <div className="toolbar"><Seg size="sm" value={filter} onChange={setFilter} options={[['open', L('To pay', 'À payer')], ['paid', L('Paid', 'Payées')], ['all', L('All', 'Toutes')]]} /></div>
            <div className="table-scroll">
              <table className="table mtable">
                <thead><tr><th>{L('Supplier', 'Fournisseur')}</th><th className="hide-sm">{L('Invoice', 'Facture')}</th><th>{L('Date', 'Date')}</th><th className="num">{L('Amount', 'Montant')}</th><th>{L('Status', 'État')}</th><th></th></tr></thead>
                <tbody>
                  {shown.map((v) => (
                    <tr key={v.id}>
                      <td><div className="cell-main">{sup(v.sup).name}</div><div className="cell-sub">{v.lines} {L('lines', 'lignes')}</div></td>
                      <td className="hide-sm tnum muted">{v.id}</td>
                      <td className="tnum">{dateFmt(v.date)}</td>
                      <td className="num tnum">{fmt.money(v.amount)}</td>
                      <td>{v.status === 'paid' ? <Pill tone="pos">{L('Paid', 'Payée')}</Pill> : v.status === 'overdue' ? <Pill tone="neg">{L('Overdue', 'En retard')}</Pill> : <Pill tone="neutral">{L(`Due in ${v.dueIn} days`, `Dans ${v.dueIn} jours`)}</Pill>}</td>
                      <td className="num">{v.status !== 'paid' ? <button className="btn btn-secondary" onClick={() => { setInvoices(invoices.map((x) => (x.id === v.id ? { ...x, status: 'paid' } : x))); toast(L(`${v.id} marked as paid`, `${v.id} marquée payée`)); }}>{L('Mark paid', 'Marquer payée')}</button> : null}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              {!shown.length ? <div className="empty">{L('Nothing to pay. Nice.', 'Rien à payer.')}</div> : null}
            </div>
          </div>
        </>
      ) : null}

      {tab === 'prices' ? (
        <div className="grid-1-2">
          <div className="panel panel-flush">
            <div className="panel-head pad"><div><h3>{L('Savings found', 'Économies trouvées')}</h3><p className="muted">{L('Same product, lower price', 'Même produit, meilleur prix')}</p></div></div>
            <ul className="opps">
              {opps.map((o) => (
                <li key={o.k}><button className={'opp' + (o.k === ing ? ' on' : '')} onClick={() => setIng(o.k)}>
                  <span>{o.it.name[lang]}</span>
                  {o.save > 0 ? <span className="txt-pos tnum">{fmt.money0(o.save)}{L('/mo', '/mois')}</span> : <span className="muted sm">{L('Best price', 'Meilleur prix')}</span>}
                </button></li>
              ))}
            </ul>
          </div>
          <div className="panel">
            <div className="panel-head"><div><h3>{cur.it.name[lang]}</h3><p className="muted">{L(`About ${fmt.num(D.monthlyUse[ing])} ${cur.it.unit} a month`, `Environ ${fmt.num(D.monthlyUse[ing])} ${cur.it.unit} par mois`)}</p></div></div>
            <div className="cmp">
              {qs.sort((a, b) => a.p - b.p).map((q, i) => (
                <div key={q.sup} className="cmp-row">
                  <div className="cmp-name">{sup(q.sup).name}{q.sup === cur.it.sup ? <span className="tag tag-outline">{L('Current', 'Actuel')}</span> : null}{i === 0 ? <span className="tag tag-accent">{L('Cheapest', 'Moins cher')}</span> : null}</div>
                  <div className="cmp-track"><div className={'cmp-fill' + (i === 0 ? ' best' : '')} style={{ width: (q.p / maxP) * 100 + '%' }}></div></div>
                  <div className="cmp-price tnum">{fmt.money(q.p)}<span className="muted">/{cur.it.unit}</span></div>
                </div>
              ))}
            </div>
            {cur.save > 0 ? (
              <div className="suggest">
                <Icon n="piggy-bank" s="1.3rem" />
                <div>{L(<>Switching to <b>{sup(cur.best.sup).name}</b> saves about <b>{fmt.money0(cur.save)} a month</b> — {fmt.money0(cur.save * 12)} a year.</>, <>Passer à <b>{sup(cur.best.sup).name}</b> économise environ <b>{fmt.money0(cur.save)} par mois</b> — {fmt.money0(cur.save * 12)} par an.</>)}</div>
                <button className="btn btn-primary" onClick={() => { setInv(inv.map((i) => (i.id === ing ? { ...i, sup: cur.best.sup, cost: cur.best.p, trend: 0 } : i))); toast(L('Supplier switched · recipes updated', 'Fournisseur changé · recettes à jour')); }}>{L('Switch supplier', 'Changer')}</button>
              </div>
            ) : <p className="muted">{L('You already pay the best price we know of.', 'Vous payez déjà le meilleur prix connu.')}</p>}
          </div>
        </div>
      ) : null}
    </div>
  );
}
window.Suppliers = Suppliers;