const ticketLines = (t, recipes) => { const n = Number(t.id); const up = t.ch === 'uber' || t.ch === 'dd' ? 1.15 : 1; return Array.from({ length: t.items }, (_, k) => { const r = recipes[(n * 7 + k * 5) % recipes.length]; return { r, p: Math.round(r.price * up * 20) / 20 }; }); };
const ticketTotal = (t, recipes) => Math.round(ticketLines(t, recipes).reduce((s, l) => s + l.p, 0) * 1.14975 * 100) / 100;

function TicketDrawer({ t, onClose }) {
  const { L, lang, fmt, O, recipes, toast } = useMizo();
  if (!t) return null;
  const lines = ticketLines(t, recipes), sub = lines.reduce((s, l) => s + l.p, 0);
  const ch = O.channels.find((c) => c.k === t.ch);
  return (
    <div className="dr">
      <div className="dr-head"><div><div className="card-kicker">{ch.name[lang]} · {t.t}</div><h2>#{t.id}</h2></div><button className="btn btn-icon btn-secondary" onClick={onClose} aria-label="Close"><Icon n="x" /></button></div>
      <div className="dr-sec">
        <div className="dr-row"><span className="muted">{L('Taken by', 'Pris par')}</span><b>{t.by}{t.table ? ' · ' + L('Table', 'Table') + ' ' + t.table : ''}</b></div>
        <div className="dr-row"><span className="muted">{L('Paid with', 'Payée par')}</span><b>{typeof t.tender === 'string' ? t.tender : t.tender[lang]}</b></div>
      </div>
      <div className="dr-sec">
        <div className="dr-label">{L('Items', 'Articles')}</div>
        {lines.map((l, i) => <div key={i} className="ln"><span>1 × {l.r.name[lang]}</span><b>{fmt.money(l.p)}</b></div>)}
        <div className="ln tot"><span>{L('Subtotal', 'Sous-total')}</span><b>{fmt.money(sub)}</b></div>
        <div className="ln"><span className="muted">TPS / GST 5 %</span><b>{fmt.money(sub * 0.05)}</b></div>
        <div className="ln"><span className="muted">TVQ / QST 9,975 %</span><b>{fmt.money(sub * 0.09975)}</b></div>
        <div className="ln tot"><span>{L('Total', 'Total')}</span><b>{fmt.money(sub * 1.14975)}</b></div>
      </div>
      <div className="dr-sec">
        {t.st === 'refunded' ? <div className="suggest warnbox"><Icon n="arrow-counter-clockwise" /><div>{L('Refunded — missing item reported through Uber Eats.', 'Remboursée — article manquant signalé par Uber Eats.')}</div></div> : t.st === 'void' ? <div className="suggest"><Icon n="prohibit" /><div>{L('Voided at the register — entered twice.', 'Annulée à la caisse — saisie en double.')}</div></div> : null}
        <span className="muted sm">{L('Refunds and voids are done on the POS. Once connected, they’ll appear here automatically.', 'Les remboursements et annulations se font au PDV. Une fois connecté, ils apparaîtront ici.')}</span>
      </div>
    </div>
  );
}

function Channels() {
  const { L, lang, fmt, O } = useMizo();
  const pack = { dine: 0, take: 0.35, uber: 0.39, dd: 0.26 };
  const rows = O.channels.map((c) => { const fees = (c.v * c.fee) / 100, food = c.v * (c.fee ? 0.256 : 0.294), pk = 4260 * pack[c.k], net = c.v - fees - food - pk; return { c, fees, food, pk, net, avg: c.v / c.tickets, per: net / c.tickets }; });
  const tot = rows.reduce((s, r) => s + r.c.v, 0);
  return (
    <div className="page">
      <PageHead sub={L('The same souvlaki earns different money depending on how it leaves the kitchen.', 'Le même souvlaki rapporte différemment selon le canal.')}><DemoTag /></PageHead>
      <section className="kpis">
        {rows.map((r) => (
          <div key={r.c.k} className={'kpi' + (r.c.k === 'dine' ? ' kpi-hero' : '')}><div className="kpi-label"><Icon n={{ dine: 'fork-knife', take: 'bag', uber: 'moped', dd: 'moped' }[r.c.k]} />{r.c.name[lang]}</div><div className="kpi-value">{fmt.money(r.per)}</div><div className="kpi-foot">{L('kept per order after food, fees and packaging', 'gardé par commande après aliments, frais et emballages')}</div></div>
        ))}
      </section>
      <div className="panel panel-flush">
        <div className="table-scroll">
          <table className="table mtable">
            <thead><tr><th>{L('Channel', 'Canal')}</th><th className="num">{L('Sales', 'Ventes')}</th><th className="num hide-sm">{L('Orders', 'Commandes')}</th><th className="num hide-sm">{L('Avg order', 'Moyenne')}</th><th className="num">{L('Commission', 'Commission')}</th><th className="num hide-md">{L('Food cost', 'Aliments')}</th><th className="num hide-md">{L('Packaging', 'Emballages')}</th><th className="num">{L('Kept', 'Gardé')}</th></tr></thead>
            <tbody>{rows.map((r) => (
              <tr key={r.c.k}><td><div className="cell-main">{r.c.name[lang]}</div><div className="cell-sub">{fmt.pct((r.c.v / tot) * 100)} {L('of sales', 'des ventes')}</div></td><td className="num tnum">{fmt.money0(r.c.v)}</td><td className="num tnum hide-sm">{fmt.num(r.c.tickets)}</td><td className="num tnum hide-sm">{fmt.money(r.avg)}</td>
                <td className="num tnum">{r.fees ? fmt.money0(r.fees) : '—'}{r.c.fee ? <div className="cell-sub">{fmt.pct(r.c.fee)}</div> : null}</td><td className="num tnum hide-md">{fmt.money0(r.food)}</td><td className="num tnum hide-md">{r.pk ? fmt.money0(r.pk) : '—'}</td>
                <td className="num"><span className="tnum">{fmt.money0(r.net)}</span><div className="cell-sub">{fmt.pct((r.net / r.c.v) * 100)}</div></td></tr>
            ))}</tbody>
          </table>
        </div>
      </div>
      <div className="suggest"><Icon n="sparkle" /><div>{L(`A dine-in order keeps ${fmt.money(rows[0].per)}; an Uber Eats order keeps ${fmt.money(rows[2].per)}, even with the 15% menu markup. Pushing pickup over delivery on your own website and bags is worth trying.`, `Une commande sur place garde ${fmt.money(rows[0].per)}; une commande Uber Eats ${fmt.money(rows[2].per)}, malgré la majoration de 15 %. Encourager les commandes à emporter vaut l’essai.`)}</div></div>
    </div>
  );
}

function DeliveryApps() {
  const { L, lang, fmt, O, recipes } = useMizo();
  const [p, setP] = React.useState('uber');
  const d = O.delivery[p], nm = p === 'uber' ? 'Uber Eats' : 'DoorDash';
  const comm = (d.gross * d.comm) / 100, net = d.gross - comm - d.mkt - d.refunds;
  const rn = Object.fromEntries(recipes.map((r) => [r.id, r]));
  const wk = ['Oct 5', 'Oct 12', 'Oct 19', 'Oct 26'].map((w, i) => ({ label: lang === 'fr' ? ['5 oct', '12 oct', '19 oct', '26 oct'][i] : w, a: O.delivery.uber.weeks[i], b: O.delivery.dd.weeks[i] }));
  return (
    <div className="page">
      <PageHead sub={L('What each delivery app really pays you after commission, promotions and refunds.', 'Ce que chaque appli vous verse vraiment après commission, promotions et remboursements.')}>
        <Seg size="sm" value={p} onChange={setP} options={[['uber', 'Uber Eats'], ['dd', 'DoorDash']]} /><DemoTag />
      </PageHead>
      <section className="stats">
        <Stat label={L('Orders this month', 'Commandes ce mois-ci')} value={fmt.num(d.orders)}>{L('Avg', 'Moy.')} {fmt.money(d.gross / d.orders)}</Stat>
        <Stat label={L('Gross sales', 'Ventes brutes')} value={fmt.money0(d.gross)}>{nm}</Stat>
        <Stat label={L('Net payout', 'Versement net')} value={fmt.money0(net)} tone="acc">{fmt.pct((net / d.gross) * 100)} {L('of gross', 'du brut')}</Stat>
        <Stat label={L('Rating', 'Note')} value={d.rating + ' / 5'} tone={d.rating >= 4.5 ? 'pos' : 'warn'}>{L('Avg prep', 'Prép. moy.')} {d.prep} min</Stat>
      </section>
      <section className="grid-1-2">
        <div className="panel">
          <h3>{L('Where the money goes', 'Où va l’argent')}</h3>
          {[[L('Gross sales', 'Ventes brutes'), d.gross], [L('Commission', 'Commission') + ' ' + fmt.pct(d.comm), -comm], [L('Promotions you funded', 'Promotions payées'), -d.mkt], [L('Refunds and errors', 'Remboursements et erreurs') + ` (${d.errors})`, -d.refunds]].map(([n, v]) => <div key={n} className="ln"><span>{n}</span><b className={v < 0 ? 'txt-neg' : ''}>{fmt.money(v)}</b></div>)}
          <div className="ln tot"><span>{L('Paid out to you', 'Versé')}</span><b>{fmt.money(net)}</b></div>
          <div className="dr-label" style={{ marginTop: '.6rem' }}>{L('Top items', 'Articles populaires')}</div>
          <div className="chips">{d.top.map((id) => <span key={id} className="chip">{rn[id].name[lang]}</span>)}</div>
        </div>
        <div className="panel">
          <div className="panel-head"><div><h3>{L('Weekly gross by app', 'Ventes brutes par semaine')}</h3></div><div className="legend"><span><i className="dot dot-a"></i>Uber Eats</span><span><i className="dot dot-b"></i>DoorDash</span></div></div>
          <BarChart data={wk} la="Uber Eats" lb="DoorDash" fmtv={(v, full) => (full ? fmt.money0(v) : fmt.kmoney(v))} height={200} highlightLast />
        </div>
      </section>
      <div className="panel panel-flush">
        <div className="panel-head pad"><h3>{L('Payouts', 'Versements')}</h3></div>
        <div className="table-scroll">
          <table className="table mtable">
            <thead><tr><th>{L('Date', 'Date')}</th><th>{L('App', 'Appli')}</th><th className="num">{L('Amount', 'Montant')}</th><th>{L('Status', 'État')}</th></tr></thead>
            <tbody>{O.payouts.slice().sort((a, b) => b.d.localeCompare(a.d)).map((x, i) => <tr key={i}><td className="tnum">{fmt.date(x.d, { weekday: 'short', month: 'short', day: 'numeric' })}</td><td>{x.p === 'uber' ? 'Uber Eats' : 'DoorDash'}</td><td className="num tnum">{fmt.money(x.v)}</td><td>{x.st === 'paid' ? <Pill tone="pos">{L('In the bank', 'Déposé')}</Pill> : <Pill tone="warn">{L('Expected', 'Prévu')}</Pill>}</td></tr>)}</tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function Reconciliation() {
  const { L, lang, fmt, ops, upd, toast } = useMizo();
  const [sel, setSel] = React.useState(ops.recon[0].d);
  const [note, setNote] = React.useState('');
  const diff = (r) => (r.bank.card - r.pos.card) + (r.bank.cash - r.pos.cash) + (r.bank.deliv == null ? 0 : r.bank.deliv - r.pos.deliv);
  const cur = ops.recon.find((r) => r.d === sel);
  const open = ops.recon.filter((r) => r.status === 'review');
  const row = (n, a, b) => { const d = b == null ? null : b - a; return <tr key={n}><td>{n}</td><td className="num tnum">{fmt.money(a)}</td><td className="num tnum">{b == null ? <Pill tone="warn">{L('Pending', 'En attente')}</Pill> : fmt.money(b)}</td><td className="num">{d == null ? '—' : Math.abs(d) < 0.005 ? <Pill tone="pos"><Icon n="check" /></Pill> : <span className={'tnum ' + (Math.abs(d) <= 5 ? 'txt-warn' : 'txt-neg')}>{d > 0 ? '+' : '−'}{fmt.money(Math.abs(d))}</span>}</td></tr>; };
  return (
    <div className="page">
      <PageHead sub={L('Does what the POS says you sold match what landed in the bank and the cash drawer? Check each day once.', 'Ce que le PDV dit avoir vendu correspond-il à la banque et au tiroir-caisse? Vérifiez chaque jour.')}><DemoTag /></PageHead>
      <section className="stats">
        <Stat label={L('Days to review', 'Jours à vérifier')} value={open.length} tone={open.length ? 'warn' : 'pos'}>{L('Last 5 days', '5 derniers jours')}</Stat>
        <Stat label={L('Unexplained difference', 'Écart inexpliqué')} value={fmt.money(open.reduce((s, r) => s + diff(r), 0))} tone="neg">{L('Across open days', 'Jours ouverts')}</Stat>
        <Stat label={L('Cash tolerance', 'Tolérance de caisse')} value={fmt.money(5)}>{L('Smaller gaps are auto-accepted', 'Les petits écarts sont acceptés')}</Stat>
      </section>
      <section className="grid-1-2">
        <div className="panel panel-flush">
          <ul className="opps" style={{ paddingTop: '.5rem' }}>{ops.recon.map((r) => <li key={r.d}><button className={'opp' + (r.d === sel ? ' on' : '')} onClick={() => { setSel(r.d); setNote(''); }}><span className="rlist-main">{fmt.date(r.d, { weekday: 'long', month: 'short', day: 'numeric' })}<span className="muted sm tnum">{fmt.money0(r.pos.card + r.pos.cash + r.pos.deliv)} · {L('diff.', 'écart')} {fmt.money(diff(r))}</span></span>{r.status === 'done' ? <Pill tone="pos">{L('Balanced', 'Équilibré')}</Pill> : <Pill tone="warn">{L('Review', 'À vérifier')}</Pill>}</button></li>)}</ul>
        </div>
        <div className="panel panel-flush">
          <div className="panel-head pad"><div><h3>{fmt.date(cur.d, { weekday: 'long', month: 'long', day: 'numeric' })}</h3>{cur.note ? <p className="muted">{cur.note[lang]}</p> : null}</div></div>
          <div className="table-scroll">
            <table className="table mtable">
              <thead><tr><th></th><th className="num">{L('POS says', 'Selon le PDV')}</th><th className="num">{L('Actually received', 'Reçu')}</th><th className="num">{L('Difference', 'Écart')}</th></tr></thead>
              <tbody>{row(L('Card batch', 'Lot de cartes'), cur.pos.card, cur.bank.card)}{row(L('Cash drawer', 'Tiroir-caisse'), cur.pos.cash, cur.bank.cash)}{row(L('Delivery apps', 'Applis de livraison'), cur.pos.deliv, cur.bank.deliv)}</tbody>
            </table>
          </div>
          {cur.status === 'review' ? (
            <div className="toolbar">
              <input className="input" style={{ flex: '1 1 240px' }} placeholder={L('What happened? (e.g. tip entered twice)', 'Qu’est-il arrivé? (ex. pourboire saisi deux fois)')} value={note} onChange={(e) => setNote(e.target.value)} />
              <button className="btn btn-primary" onClick={() => { upd('recon', (rs) => rs.map((x) => (x.d === cur.d ? { ...x, status: 'done', note: note ? { en: note, fr: note } : x.note } : x))); toast(L('Day marked as balanced', 'Journée marquée équilibrée')); }}><Icon n="check-circle" />{L('Mark balanced', 'Marquer équilibré')}</button>
            </div>
          ) : <div className="toolbar muted sm"><Icon n="check-circle" className="txt-pos" /> {L('Balanced — nothing to do.', 'Équilibré — rien à faire.')}</div>}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ticketLines, ticketTotal, TicketDrawer, Channels, DeliveryApps, Reconciliation });