const addDays = (iso, n) => { const d = new Date(iso + 'T12:00'); d.setDate(d.getDate() + n); return d.toISOString().slice(0, 10); };

function CashFlow() {
  const { L, lang, fmt, O, D, P, employees, punches, now, invoices, go } = useMizo();
  const today = '2026-10-28';
  const pay = P.calc(employees, punches, now);
  const net = pay.reduce((s, r) => s + r.net + r.tips, 0), das = pay.reduce((s, r) => s + r.dedT + r.erT, 0);
  const sup = (id) => D.suppliers.find((s) => s.id === id).name;
  const bills = [
    ...invoices.filter((v) => v.status !== 'paid').map((v) => ({ d: v.status === 'overdue' ? today : addDays(today, v.dueIn), name: `${sup(v.sup)} — ${v.id}`, v: v.amount, ic: 'receipt', kind: L('Supplier', 'Fournisseur'), over: v.status === 'overdue' })),
    ...O.fixedBills.map((b) => ({ ...b, name: b.name[lang], kind: L('Fixed', 'Fixe') })),
    { d: '2026-11-06', name: L('Payroll — Oct 19 to Nov 1', 'Paie — 19 oct. au 1 nov.'), v: net, ic: 'users-three', kind: L('Payroll', 'Paie') },
    { d: '2026-11-15', name: L('Source deductions (DAS)', 'Déductions à la source (DAS)'), v: das, ic: 'bank', kind: L('Tax', 'Impôt') },
    { d: '2026-11-20', name: L('Payroll — Nov 2 to 15 (est.)', 'Paie — 2 au 15 nov. (est.)'), v: net, ic: 'users-three', kind: L('Payroll', 'Paie') },
  ].sort((a, b) => a.d.localeCompare(b.d));
  let bal = O.bank;
  const weeks = O.cashWeeks.map((w, i) => { const out = bills.filter((b) => b.d <= w.e && (i === 0 ? true : b.d >= w.s)).reduce((s, b) => s + b.v, 0); const open = bal; bal = bal + w.inflow - out; return { ...w, out, open, close: bal }; });
  const low = Math.min(...weeks.map((w) => w.close));
  const next7 = bills.filter((b) => b.d <= addDays(today, 7)).reduce((s, b) => s + b.v, 0);
  const d = (x) => fmt.date(x, { month: 'short', day: 'numeric' });
  return (
    <div className="page">
      <PageHead sub={L('Money in the bank today, what’s coming in, and every bill due over the next four weeks.', 'L’argent en banque aujourd’hui, les entrées prévues et chaque facture des quatre prochaines semaines.')} />
      <section className="stats">
        <Stat label={L('Bank balance', 'Solde bancaire')} value={fmt.money0(O.bank)}>{L('Desjardins · entered manually', 'Desjardins · saisi manuellement')}</Stat>
        <Stat label={L('Due in the next 7 days', 'À payer d’ici 7 jours')} value={fmt.money0(next7)} tone="warn">{bills.filter((b) => b.d <= addDays(today, 7)).length} {L('payments', 'paiements')}</Stat>
        <Stat label={L('Lowest projected balance', 'Solde projeté le plus bas')} value={fmt.money0(low)} tone={low < 10000 ? 'neg' : 'pos'}>{L('Over the next 4 weeks', 'Sur 4 semaines')}</Stat>
      </section>
      <section className="grid-2-1">
        <div className="panel">
          <div className="panel-head"><div><h3>{L('Money in vs. money out', 'Entrées et sorties')}</h3><p className="muted">{L('By week · inflows are forecast card and delivery deposits', 'Par semaine · entrées = dépôts prévus des cartes et livraisons')}</p></div>
            <div className="legend"><span><i className="dot dot-a"></i>{L('In', 'Entrées')}</span><span><i className="dot dot-b"></i>{L('Out', 'Sorties')}</span></div></div>
          <BarChart data={weeks.map((w) => ({ label: d(w.s), a: w.inflow, b: w.out }))} la={L('In', 'Entrées')} lb={L('Out', 'Sorties')} fmtv={(v, full) => (full ? fmt.money0(v) : fmt.kmoney(v))} height={200} />
          <div className="margins">{weeks.map((w) => <div key={w.s}><span className="muted sm">{L('Closing', 'Fin')}</span><b className="tnum">{fmt.kmoney(w.close)}</b></div>)}</div>
        </div>
        <div className="panel">
          <h3>{L('Heads-up', 'À prévoir')}</h3>
          <div className="suggest"><Icon n="sparkle" /><div>{L(`GST/QST and November rent land in the same four days — ${fmt.money0(24000)} out before the weekend’s deposits clear. You stay above ${fmt.money0(low)}.`, `TPS/TVQ et loyer de novembre tombent en quatre jours — ${fmt.money0(24000)} avant les dépôts du week-end. Vous restez au-dessus de ${fmt.money0(low)}.`)}</div></div>
          <button className="btn btn-secondary" onClick={() => go('purchasing', { tab: 'invoices' })}><Icon n="receipt" />{L('Supplier invoices', 'Factures fournisseurs')}</button>
        </div>
      </section>
      <div className="panel panel-flush">
        <div className="panel-head pad"><h3>{L('Upcoming payments', 'Paiements à venir')}</h3></div>
        <div className="table-scroll">
          <table className="table mtable">
            <thead><tr><th>{L('Date', 'Date')}</th><th>{L('Payee', 'Bénéficiaire')}</th><th className="hide-sm">{L('Type', 'Type')}</th><th className="num">{L('Amount', 'Montant')}</th></tr></thead>
            <tbody>{bills.map((b, i) => (
              <tr key={i}><td className="tnum">{b.over ? <Pill tone="neg">{L('Overdue', 'En retard')}</Pill> : fmt.date(b.d, { weekday: 'short', month: 'short', day: 'numeric' })}</td><td><div className="emp-cell"><span className="alert-ic acc"><Icon n={b.ic} /></span><span className="cell-main">{b.name}</span></div></td><td className="hide-sm">{b.kind}</td><td className="num tnum">{fmt.money(b.v)}</td></tr>
            ))}</tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function Budget() {
  const { L, lang, fmt, O, toast } = useMizo();
  const [bud, setBud] = React.useState(() => Object.fromEntries(O.pnl.map((r) => [r.k, r.bud])));
  const [base, setBase] = React.useState(() => Object.fromEntries(O.pnl.map((r) => [r.k, r.bud])));
  const [conf, setConf] = React.useState(false), [savedAt, setSavedAt] = React.useState(null);
  const changes = O.pnl.filter((r) => Number(bud[r.k]) !== Number(base[r.k]));
  const prog = 28 / 31;
  const groups = [['rev', L('Revenue', 'Revenus')], ['cost', L('Costs', 'Coûts')]];
  const rows = (g) => O.pnl.filter((r) => (g === 'rev' ? r.grp === 'rev' : r.grp !== 'rev'));
  const totB = (g) => rows(g).reduce((s, r) => s + Number(bud[r.k] || 0), 0), totA = (g) => rows(g).reduce((s, r) => s + r.oct, 0);
  return (
    <div className="page">
      <PageHead sub={L('Your monthly plan for October. Day 28 of 31 — 90% of the month is behind you.', 'Votre plan mensuel d’octobre. Jour 28 sur 31 — 90 % du mois est écoulé.')}>
        {savedAt && !changes.length ? <span className="save-ok"><Icon n="check-circle" />{L(`Saved ${savedAt} · this session only (demo)`, `Enregistré ${savedAt} · cette session seulement (démo)`)}</span> : null}<button className="btn btn-primary" disabled={!changes.length} onClick={() => setConf(true)}><Icon n="floppy-disk" />{changes.length ? L(`Review ${changes.length} change${changes.length > 1 ? 's' : ''}`, `Vérifier ${changes.length} modification(s)`) : L('No changes', 'Aucune modification')}</button>
      </PageHead>
      <section className="stats">
        <Stat label={L('Revenue pace', 'Rythme des ventes')} value={fmt.money0(totA('rev') / prog)}>{L('Projected month-end · budget', 'Projection fin de mois · budget')} {fmt.money0(totB('rev'))}</Stat>
        <Stat label={L('Cost pace', 'Rythme des coûts')} value={fmt.money0(totA('cost') / prog)} tone={totA('cost') / prog > totB('cost') ? 'warn' : 'pos'}>{L('Budget', 'Budget')} {fmt.money0(totB('cost'))}</Stat>
        <Stat label={L('Projected profit', 'Profit projeté')} value={fmt.money0((totA('rev') - totA('cost')) / prog)} tone="acc">{L('Budget', 'Budget')} {fmt.money0(totB('rev') - totB('cost'))}</Stat>
      </section>
      <Modal open={conf} onClose={() => setConf(false)} title={L('Save budget changes?', 'Enregistrer les modifications?')} actions={<><button className="btn btn-secondary" onClick={() => setConf(false)}>{L('Keep editing', 'Continuer')}</button><button className="btn btn-primary" onClick={() => { setBase({ ...bud }); setSavedAt(new Date().toLocaleTimeString(lang === 'fr' ? 'fr-CA' : 'en-CA', { hour: 'numeric', minute: '2-digit' })); setConf(false); }}><Icon n="check" />{L('Save changes', 'Enregistrer')}</button></>}>
        <div className="table-scroll"><table className="table mtable calc-table"><thead><tr><th>{L('Line', 'Poste')}</th><th className="num">{L('Before', 'Avant')}</th><th className="num">{L('After', 'Après')}</th><th className="num">{L('Change', 'Écart')}</th></tr></thead><tbody>{changes.map((r) => { const d = Number(bud[r.k]) - Number(base[r.k]); return <tr key={r.k}><td className="cell-main">{r.name[lang]}</td><td className="num tnum">{fmt.money0(Number(base[r.k]))}</td><td className="num tnum">{fmt.money0(Number(bud[r.k]))}</td><td className={'num tnum ' + (d > 0 ? 'txt-warn' : 'txt-pos')}>{d >= 0 ? '+' : '−'}{fmt.money0(Math.abs(d))}</td></tr>; })}</tbody></table></div>
        <p className="muted sm" style={{ margin: 0 }}><Icon n="flask" /> {L('Demo: the budget is kept until you reload. Saving to your account comes in Phase 2.', 'Démo : le budget est conservé jusqu’au rechargement. L’enregistrement au compte arrive en phase 2.')}</p>
      </Modal>
      {groups.map(([g, t]) => (
        <div key={g} className="panel panel-flush">
          <div className="panel-head pad"><h3>{t}</h3></div>
          <div className="table-scroll">
            <table className="table mtable">
              <thead><tr><th>{L('Line', 'Poste')}</th><th>{L('Monthly budget', 'Budget mensuel')}</th><th className="num">{L('Actual to date', 'Réel à ce jour')}</th><th className="hide-sm">{L('Used', 'Utilisé')}</th><th className="num">{L('Projected', 'Projeté')}</th></tr></thead>
              <tbody>{rows(g).map((r) => { const b = Number(bud[r.k] || 0), used = b ? r.oct / b : 0, proj = r.oct / prog, bad = g === 'rev' ? proj < b : proj > b * 1.01; return (
                <tr key={r.k}>
                  <td className="cell-main">{r.name[lang]}</td>
                  <td><div className="money-input sm-money"><span>$</span><input className="input" type="number" value={bud[r.k]} onChange={(e) => setBud({ ...bud, [r.k]: e.target.value })} /></div></td>
                  <td className="num tnum">{fmt.money0(r.oct)}</td>
                  <td className="hide-sm"><div className="budbar"><div className={'budbar-fill' + (used > prog + 0.02 && g !== 'rev' ? ' over' : '')} style={{ width: Math.min(used, 1.1) / 1.1 * 100 + '%' }}></div><i style={{ left: (prog / 1.1) * 100 + '%' }}></i></div><div className="cell-sub">{fmt.pct(used * 100)}</div></td>
                  <td className="num"><span className={'tnum ' + (bad ? 'txt-neg' : 'txt-pos')}>{fmt.money0(proj)}</span><div className="cell-sub">{proj - b >= 0 ? '+' : '−'}{fmt.money0(Math.abs(proj - b))}</div></td>
                </tr>
              ); })}</tbody>
            </table>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { CashFlow, Budget, addDays });