function DemoTag() {
  const { L, go } = useMizo();
  return <button className="tag tag-outline demo-tag" onClick={() => go('sales', { tab: 'pos' })}><Icon n="plugs" />{L('Sample data · POS not connected', 'Données exemples · PDV non connecté')}</button>;
}

function SalesSummary() {
  const { L, lang, fmt, O } = useMizo();
  const today = O.week[O.week.length - 1];
  const data = O.week.map(([en, fr, a, , b]) => ({ label: lang === 'fr' ? fr : en, a, b }));
  const wkRev = O.week.reduce((s, d) => s + d[2], 0), wkTk = O.week.reduce((s, d) => s + d[3], 0), wkPrev = O.week.reduce((s, d) => s + d[4], 0);
  const maxCell = Math.max(...O.dowRev) * Math.max(...O.hourShape);
  const chTot = O.channels.reduce((s, c) => s + c.v, 0);
  return (
    <div className="page">
      <PageHead sub={L('What sold, when, and through which door.', 'Ce qui s’est vendu, quand, et par quel canal.')}><DemoTag /></PageHead>
      <section className="kpis">
        <div className="kpi kpi-hero"><div className="kpi-label"><Icon n="cash-register" />{L('Sales today', 'Ventes aujourd’hui')}</div><div className="kpi-value">{fmt.money0(today[2])}</div><div className="kpi-foot"><Delta v={((today[2] - today[4]) / today[4]) * 100} /><span>{L('vs last Wednesday', 'vs mercredi dernier')}</span></div></div>
        <div className="kpi"><div className="kpi-label"><Icon n="receipt" />{L('Tickets today', 'Additions aujourd’hui')}</div><div className="kpi-value">{today[3]}</div><div className="kpi-foot">{L('Avg ticket', 'Addition moy.')} {fmt.money(today[2] / today[3])}</div></div>
        <div className="kpi"><div className="kpi-label"><Icon n="calendar-blank" />{L('Last 7 days', '7 derniers jours')}</div><div className="kpi-value">{fmt.money0(wkRev)}</div><div className="kpi-foot"><Delta v={((wkRev - wkPrev) / wkPrev) * 100} /><span>{fmt.num(wkTk)} {L('tickets', 'additions')}</span></div></div>
        <div className="kpi"><div className="kpi-label"><Icon n="moped" />{L('Delivery share', 'Part livraison')}</div><div className="kpi-value">{fmt.pct(((O.channels[2].v + O.channels[3].v) / chTot) * 100)}</div><div className="kpi-foot">{L('This month', 'Ce mois-ci')}</div></div>
      </section>
      <section className="grid-2-1">
        <div className="panel">
          <div className="panel-head"><div><h3>{L('Daily sales', 'Ventes par jour')}</h3><p className="muted">{L('This week vs. the same day last week', 'Cette semaine vs la semaine dernière')}</p></div>
            <div className="legend"><span><i className="dot dot-a"></i>{L('This week', 'Cette semaine')}</span><span><i className="dot dot-b"></i>{L('Last week', 'Semaine dernière')}</span></div></div>
          <BarChart data={data} la={L('This week', 'Cette semaine')} lb={L('Last week', 'Semaine dernière')} fmtv={(v, full) => (full ? fmt.money0(v) : fmt.kmoney(v))} height={220} highlightLast />
        </div>
        <div className="panel">
          <div className="panel-head"><div><h3>{L('By channel', 'Par canal')}</h3><p className="muted">{L('This month', 'Ce mois-ci')} · {fmt.money0(chTot)}</p></div></div>
          <HBars items={O.channels.map((c) => ({ label: c.name[lang], v: c.v, sub: `${fmt.pct((c.v / chTot) * 100)} · ${fmt.num(c.tickets)} ${L('tickets', 'additions')}${c.fee ? ' · ' + L('commission', 'commission') + ' ' + fmt.pct(c.fee) : ''}` }))} fmtv={fmt.money0} />
        </div>
      </section>
      <section className="grid-2-1">
        <div className="panel">
          <div className="panel-head"><div><h3>{L('Busiest hours', 'Heures de pointe')}</h3><p className="muted">{L('Average sales by day and hour, last 4 weeks', 'Ventes moyennes par jour et heure, 4 dernières semaines')}</p></div></div>
          <div className="heat-wrap">
            <div className="heat">
              <span></span>{O.hours.map((h) => <span key={h} className="heat-h">{h}</span>)}
              {O.dow.map((d, di) => (
                <React.Fragment key={di}>
                  <span className="heat-d">{d[lang]}</span>
                  {O.hourShape.map((s, hi) => { const v = O.dowRev[di] * s; return <span key={hi} className="heat-c" title={`${d[lang]} ${O.hours[hi]} h · ${fmt.money0(v)}`} style={{ background: `color-mix(in srgb, var(--color-accent) ${Math.round((v / maxCell) * 92 + 4)}%, transparent)` }}></span>; })}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
        <div className="panel">
          <div className="panel-head"><div><h3>{L('By time of day', 'Par moment de la journée')}</h3><p className="muted">{L('This month', 'Ce mois-ci')}</p></div></div>
          <HBars items={O.dayparts.map((d) => ({ label: d.name[lang], v: d.v }))} fmtv={fmt.money0} />
        </div>
      </section>
    </div>
  );
}

function ProductMix() {
  const { L, lang, fmt, D, recipes, invMap, go } = useMizo();
  const [cat, setCat] = React.useState('all');
  const all = recipes.map((r) => ({ r, c: recipeCost(r, invMap), sales: r.price * r.sold }));
  const tot = all.reduce((s, x) => s + x.sales, 0), units = all.reduce((s, x) => s + x.r.sold, 0);
  const rows = all.filter((x) => cat === 'all' || x.r.cat === cat).sort((a, b) => b.sales - a.sales);
  const maxS = Math.max(...all.map((x) => x.sales));
  return (
    <div className="page">
      <PageHead sub={L('Every menu item ranked by sales over the last 30 days.', 'Chaque article classé par ventes, 30 derniers jours.')}><DemoTag /></PageHead>
      <section className="stats">
        <Stat label={L('Items sold', 'Articles vendus')} value={fmt.num(units)}>{L('Last 30 days', '30 derniers jours')}</Stat>
        <Stat label={L('Food sales', 'Ventes d’aliments')} value={fmt.money0(tot)}>{L('Menu prices × units', 'Prix × unités')}</Stat>
        <Stat label={L('Top item', 'Article vedette')} value={all.slice().sort((a, b) => b.sales - a.sales)[0].r.name[lang]}>{fmt.pct((Math.max(...all.map((x) => x.sales)) / tot) * 100)} {L('of sales', 'des ventes')}</Stat>
      </section>
      <section className="grid-1-1">
        <div className="panel"><div className="panel-head"><div><h3>{L('Sales by category', 'Ventes par catégorie')}</h3><p className="muted">{L('Last 30 days', '30 derniers jours')}</p></div></div><HBars items={Object.keys(D.recipeCats).map((k) => ({ label: D.recipeCats[k][lang], v: all.filter((x) => x.r.cat === k).reduce((s, x) => s + x.sales, 0), sub: `${fmt.num(all.filter((x) => x.r.cat === k).reduce((s, x) => s + x.r.sold, 0))} ${L('sold', 'vendus')}` })).sort((a, b) => b.v - a.v)} fmtv={fmt.money0} /></div>
        <div className="panel"><div className="panel-head"><div><h3>{L('Profit by category', 'Profit par catégorie')}</h3><p className="muted">{L('After food cost', 'Après coût des aliments')}</p></div></div><HBars items={Object.keys(D.recipeCats).map((k) => ({ label: D.recipeCats[k][lang], v: all.filter((x) => x.r.cat === k).reduce((s, x) => s + x.c.monthly, 0) })).sort((a, b) => b.v - a.v)} fmtv={fmt.money0} /></div>
      </section>
      <div className="panel panel-flush">
        <div className="toolbar"><Seg size="sm" value={cat} onChange={setCat} options={[['all', L('All', 'Tout')], ...Object.entries(D.recipeCats).map(([k, v]) => [k, v[lang]])]} /></div>
        <div className="table-scroll">
          <table className="table mtable">
            <thead><tr><th>{L('Item', 'Article')}</th><th className="num">{L('Sold', 'Vendus')}</th><th className="num">{L('Sales', 'Ventes')}</th><th className="hide-sm">{L('Share of sales', 'Part des ventes')}</th><th className="num hide-sm">{L('Profit', 'Profit')}</th></tr></thead>
            <tbody>{rows.map((x) => (
              <tr key={x.r.id} className="clickable" onClick={() => go('menu', { recipe: x.r.id })}>
                <td><div className="cell-main">{x.r.name[lang]}</div><div className="cell-sub">{D.recipeCats[x.r.cat][lang]} · {fmt.money(x.r.price)}</div></td>
                <td className="num tnum">{fmt.num(x.r.sold)}</td><td className="num tnum">{fmt.money0(x.sales)}</td>
                <td className="hide-sm"><div className="mixbar"><div className="hbar-track"><div className="hbar-fill" style={{ width: (x.sales / maxS) * 100 + '%' }}></div></div><span className="tnum muted sm">{fmt.pct((x.sales / tot) * 100)}</span></div></td>
                <td className="num tnum hide-sm">{fmt.money0(x.c.monthly)}</td>
              </tr>
            ))}</tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function Tickets() {
  const { L, lang, fmt, O } = useMizo();
  const [st, setSt] = React.useState('all');
  const [q, setQ] = React.useState('');
  const [sel, setSel] = React.useState(null);
  const { recipes } = useMizo();
  const chName = Object.fromEntries(O.channels.map((c) => [c.k, c.name[lang]]));
  const tone = { open: 'warn', paid: 'pos', void: 'neutral', refunded: 'neg' };
  const lab = { open: L('Open', 'Ouverte'), paid: L('Paid', 'Payée'), void: L('Void', 'Annulée'), refunded: L('Refunded', 'Remboursée') };
  const rows = O.tickets.filter((t) => (st === 'all' || t.st === st) && (('#' + t.id + t.by).toLowerCase().includes(q.toLowerCase())));
  return (
    <div className="page">
      <PageHead sub={L('Today’s tickets as they come in from the register and delivery apps.', 'Les additions du jour, de la caisse et des applis de livraison.')}><DemoTag /></PageHead>
      <div className="panel panel-flush">
        <div className="toolbar">
          <label className="search"><Icon n="magnifying-glass" /><input className="input" placeholder={L('Ticket # or staff', 'No d’addition ou employé')} value={q} onChange={(e) => setQ(e.target.value)} /></label>
          <Seg size="sm" value={st} onChange={setSt} options={[['all', L('All', 'Toutes')], ['open', lab.open], ['paid', lab.paid], ['void', lab.void], ['refunded', lab.refunded]]} />
        </div>
        <div className="table-scroll">
          <table className="table mtable">
            <thead><tr><th>{L('Ticket', 'Addition')}</th><th>{L('Time', 'Heure')}</th><th>{L('Channel', 'Canal')}</th><th className="hide-sm">{L('Taken by', 'Pris par')}</th><th className="num hide-sm">{L('Items', 'Articles')}</th><th className="hide-sm">{L('Paid with', 'Payée par')}</th><th className="num">{L('Total', 'Total')}</th><th>{L('Status', 'État')}</th></tr></thead>
            <tbody>{rows.map((t) => (
              <tr key={t.id} className="clickable" onClick={() => setSel(t.id)}><td className="cell-main tnum">#{t.id}{t.table ? <div className="cell-sub">{L('Table', 'Table')} {t.table}</div> : null}</td><td className="tnum">{t.t}</td><td>{chName[t.ch]}</td><td className="hide-sm">{t.by}</td><td className="num tnum hide-sm">{t.items}</td><td className="hide-sm">{typeof t.tender === 'string' ? t.tender : t.tender[lang]}</td><td className="num tnum">{fmt.money(ticketTotal(t, recipes))}</td><td><Pill tone={tone[t.st]}>{lab[t.st]}</Pill></td></tr>
            ))}</tbody>
          </table>
          {!rows.length ? <div className="empty">{L('No tickets match.', 'Aucune addition.')}</div> : null}
        </div>
      </div>
      <Drawer open={!!sel} onClose={() => setSel(null)}><TicketDrawer t={O.tickets.find((x) => x.id === sel)} onClose={() => setSel(null)} /></Drawer>
    </div>
  );
}

function Payments() {
  const { L, lang, fmt, O } = useMizo();
  const n = (x) => (typeof x === 'string' ? x : x[lang]);
  const tot = O.tenders.reduce((s, t) => s + t.v, 0), fees = O.tenders.reduce((s, t) => s + (t.v * t.fee) / 100, 0);
  const adjTot = O.adjust.reduce((s, a) => s + a.v, 0);
  const adjName = Object.fromEntries(O.adjust.map((a) => [a.k, a.name[lang]]));
  return (
    <div className="page">
      <PageHead sub={L('How guests paid, what it cost you to accept it, and every discount, comp and void.', 'Comment les clients ont payé, ce que ça vous coûte, et chaque rabais, offert et annulation.')}><DemoTag /></PageHead>
      <section className="stats">
        <Stat label={L('In-house payments', 'Paiements en salle')} value={fmt.money0(tot)}>{L('This month', 'Ce mois-ci')}</Stat>
        <Stat label={L('Processing fees (est.)', 'Frais de traitement (est.)')} value={fmt.money0(fees)} tone="neg">{fmt.pct((fees / tot) * 100)} {L('effective rate', 'taux effectif')}</Stat>
        <Stat label={L('Tips collected', 'Pourboires')} value={fmt.money0(O.tips.card + O.tips.cash)}>{L('Pooled · paid with payroll', 'Mis en commun · versés avec la paie')}</Stat>
        <Stat label={L('Discounts, comps & voids', 'Rabais, offerts et annulations')} value={fmt.money0(adjTot)} tone="warn">{fmt.pct((adjTot / 112860) * 100)} {L('of sales', 'des ventes')}</Stat>
      </section>
      <section className="grid-1-1">
        <div className="panel panel-flush">
          <div className="panel-head pad"><h3>{L('Payment methods', 'Modes de paiement')}</h3></div>
          <div className="table-scroll">
            <table className="table mtable">
              <thead><tr><th>{L('Method', 'Mode')}</th><th className="num">{L('Amount', 'Montant')}</th><th className="num hide-sm">{L('Share', 'Part')}</th><th className="num">{L('Fee', 'Frais')}</th></tr></thead>
              <tbody>{O.tenders.map((t) => <tr key={t.k}><td className="cell-main">{n(t.n)}</td><td className="num tnum">{fmt.money0(t.v)}</td><td className="num tnum hide-sm">{fmt.pct((t.v / tot) * 100)}</td><td className="num tnum">{t.fee ? fmt.money0((t.v * t.fee) / 100) : '—'}<div className="cell-sub">{t.fee ? fmt.pct(t.fee) : ''}</div></td></tr>)}</tbody>
            </table>
          </div>
        </div>
        <div className="panel">
          <div className="panel-head"><div><h3>{L('Adjustments', 'Ajustements')}</h3><p className="muted">{L('This month', 'Ce mois-ci')}</p></div></div>
          <HBars items={O.adjust.map((a) => ({ label: a.name[lang], v: a.v, sub: `${a.n} ${L('times', 'fois')}` }))} fmtv={fmt.money0} />
        </div>
      </section>
      <div className="panel panel-flush">
        <div className="panel-head pad"><div><h3>{L('Today’s adjustments', 'Ajustements du jour')}</h3><p className="muted">{L('Each one needs a reason in the POS', 'Chacun exige une raison au PDV')}</p></div></div>
        <div className="table-scroll">
          <table className="table mtable">
            <thead><tr><th>{L('Time', 'Heure')}</th><th>{L('Type', 'Type')}</th><th>{L('Item', 'Article')}</th><th className="hide-sm">{L('Reason', 'Raison')}</th><th className="hide-sm">{L('By', 'Par')}</th><th className="num">{L('Amount', 'Montant')}</th></tr></thead>
            <tbody>{O.adjLog.map((a, i) => <tr key={i}><td className="tnum">{a.t}</td><td><Pill tone={a.k === 'refund' ? 'neg' : a.k === 'void' ? 'neutral' : 'warn'}>{adjName[a.k]}</Pill></td><td className="cell-main">{a.item[lang]}</td><td className="hide-sm">{a.why[lang]}</td><td className="hide-sm">{a.by}</td><td className="num tnum">{fmt.money(a.amt)}</td></tr>)}</tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function PosSetup() {
  const { L, lang, fmt, O, recipes, toast } = useMizo();
  const [map, setMap] = React.useState(() => Object.fromEntries(O.posItems));
  const [opt, setOpt] = React.useState({ nightly: true, prices: false, mods: true, tips: true });
  const mapped = Object.values(map).filter(Boolean).length;
  const [savedMap, setSavedMap] = React.useState(null);
  const prov = [['Lightspeed Restaurant', 'cash-register', L('Most common in Québec restaurants', 'Le plus répandu au Québec')], ['Square', 'square', L('Counter service and takeout', 'Comptoir et à emporter')], ['Clover', 'device-tablet', L('Bank-provided terminals', 'Terminaux bancaires')], ['Maitre’D', 'storefront', L('Full-service dining rooms', 'Salles à manger')]];
  return (
    <div className="page">
      <PageHead sub={L('Connect your register so sales, items and payments flow in automatically.', 'Connectez votre caisse pour que ventes, articles et paiements arrivent automatiquement.')} />
      <div className="suggest"><Icon n="plugs" s="1.4rem" /><div><b>{L('Not connected yet.', 'Pas encore connecté.')}</b> {L('Sales screens are showing sample data. POS connections are planned for the next phase — the item mapping below is ready for it.', 'Les écrans de ventes montrent des données exemples. La connexion PDV viendra à la prochaine phase — le jumelage ci-dessous est prêt.')}</div></div>
      <section className="integ">
        {prov.map(([n, ic, d]) => (
          <div key={n} className="integ-item"><span className="integ-ic"><Icon n={ic} s="1.4rem" /></span><div className="integ-text"><div>{n}</div><div className="muted sm">{d}</div></div><button className="btn btn-secondary" disabled>{L('Connect', 'Connecter')}</button></div>
        ))}
      </section>
      <section className="grid-1-2">
        <div className="panel">
          <h3>{L('Sync settings', 'Synchronisation')}</h3>
          {[['nightly', L('Import sales every night', 'Importer les ventes chaque nuit'), L('Closes the day at 4 am', 'Ferme la journée à 4 h')], ['prices', L('Push price changes to the POS', 'Envoyer les prix au PDV'), L('From Recipe costing and Channel pricing', 'Depuis Coût des recettes et Prix par canal')], ['mods', L('Track modifiers as ingredients', 'Suivre les options comme ingrédients'), L('e.g. Extra feta draws down feta stock', 'ex. Extra feta réduit le stock de feta')], ['tips', L('Send tips to payroll', 'Envoyer les pourboires à la paie'), L('Pooled by hours worked', 'Partagés selon les heures')]].map(([k, t, d]) => (
            <div key={k} className="set-row"><div><div>{t}</div><div className="muted sm">{d}</div></div><Toggle on={opt[k]} onChange={(v) => setOpt({ ...opt, [k]: v })} label={t} /></div>
          ))}
        </div>
        <div className="panel panel-flush">
          <div className="panel-head pad"><div><h3>{L('Item mapping', 'Jumelage des articles')}</h3><p className="muted">{mapped} / {O.posItems.length} {L('POS buttons linked to a recipe', 'boutons PDV liés à une recette')}</p></div>
            <div className="itools">{savedMap ? <span className="save-ok"><Icon n="check-circle" />{O.posItems.length - mapped ? L(`Saved · ${O.posItems.length - mapped} still unlinked`, `Enregistré · ${O.posItems.length - mapped} non liés`) : L('Saved · all linked', 'Enregistré · tout est lié')}</span> : null}<button className="btn btn-secondary" onClick={() => setSavedMap(Date.now())}>{L('Save mapping', 'Enregistrer')}</button></div></div>
          <div className="table-scroll">
            <table className="table mtable">
              <thead><tr><th>{L('POS button', 'Bouton PDV')}</th><th>{L('MIZO recipe', 'Recette MIZO')}</th><th></th></tr></thead>
              <tbody>{O.posItems.map(([p]) => (
                <tr key={p}><td><span className="map-src">{p}</span></td>
                  <td><select className="input" value={map[p] || ''} onChange={(e) => setMap({ ...map, [p]: e.target.value || null })} style={{ maxWidth: 280 }}><option value="">{L('— Not a recipe (resale / modifier)', '— Pas une recette (revente / option)')}</option>{recipes.map((r) => <option key={r.id} value={r.id}>{r.name[lang]}</option>)}</select></td>
                  <td>{map[p] ? <Pill tone="pos"><Icon n="link" /></Pill> : <Pill tone="warn">{L('Unmapped', 'Non lié')}</Pill>}</td></tr>
              ))}</tbody>
            </table>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { DemoTag, SalesSummary, ProductMix, Tickets, Payments, PosSetup });