// Finance view + Client portal
const Finance = ({ st, nav, q }) => {
  const [tab, setTab] = useState('due');
  const [toast, show] = useToast();
  const splits = st.orders.filter(o => o.split).map(o => ({ o, c: st.clients.find(x => x.id === o.clientId), s: st.suppliers.find(x => x.id === o.supplierId), ...o.split }))
    .filter(r => !q || (r.o.id + r.c.name + r.s.name).toLowerCase().includes(q.toLowerCase()));
  const due = splits.filter(r => r.o.paid && !CLOSED.includes(r.o.status) || r.o.paid && r.o.status === 'Delivered');
  const payable = splits.filter(r => r.o.paid);
  const unpaid = splits.filter(r => !r.o.paid && r.o.status !== 'Cancelled');
  const sum = (arr, k) => arr.reduce((a, r) => a + r[k], 0);
  const bySupplier = st.suppliers.map(s => { const rs = payable.filter(r => r.s.id === s.id); return { s, n: rs.length, amt: sum(rs, 'supplier') }; }).filter(x => x.n);
  const byClient = st.clients.map(c => { const rs = splits.filter(r => r.c.id === c.id); return { c, n: rs.length, tot: sum(rs, 'total'), m: sum(rs, 'margin'), paid: sum(rs.filter(r => r.o.paid), 'total') }; }).sort((a, b) => b.m - a.m);
  const exportCSV = () => {
    const rows = [['Order','Client','Supplier','Status','Client paid on','Client total','Pay supplier','Margin','Split locked']];
    payable.forEach(r => rows.push([r.o.id, r.c.name, r.s.name, r.o.status, fdateY(r.o.paidAt), r.total.toFixed(2), r.supplier.toFixed(2), r.margin.toFixed(2), fdateY(r.lockedAt)]));
    rows.push([], ['Supplier totals'], ...bySupplier.map(b => [b.s.name, '', '', '', '', '', b.amt.toFixed(2)]));
    download(`soflolg-supplier-payments-${fdateY(TODAY).replace(/[ ,]+/g, '-')}.csv`, toCSV(rows)); show('CSV exported');
  };
  const SplitTable = ({ rows }) => rows.length === 0 ? <Empty>Nothing here.</Empty> : <div className="tw"><table className="t"><thead><tr><th>Order</th><th>Client</th><th>Supplier</th><th>Status</th><th>Paid on</th><th className="num">Client total</th><th className="num">Pay supplier</th><th className="num">Margin</th></tr></thead><tbody>
    {rows.map(r => <tr key={r.o.id} className="row" onClick={() => nav('order', { id: r.o.id })}><td><span className="mono strong">{r.o.id}</span></td><td>{r.c.name}</td><td>{r.s.name}</td><td><Status s={r.o.status}></Status></td><td>{r.o.paid ? fdate(r.o.paidAt) : <Pill>Unpaid</Pill>}</td><td className="num mono">{fmt(r.total)}</td><td className="num mono strong">{fmt(r.supplier)}</td><td className="num mono">{fmt(r.margin)} <span className="mute">{Math.round(r.margin / r.total * 100)}%</span></td></tr>)}
    </tbody><tfoot><tr><td colSpan="5">Total</td><td className="num mono">{fmt(sum(rows, 'total'))}</td><td className="num mono strong">{fmt(sum(rows, 'supplier'))}</td><td className="num mono">{fmt(sum(rows, 'margin'))}</td></tr></tfoot></table></div>;
  return <div className="page">
    <Toast msg={toast}></Toast>
    <PageHead title="Finance" kicker="Payment splits"><Btn v="dark" icon={I.download} onClick={exportCSV} tour="export-csv">Export supplier payments (CSV)</Btn></PageHead>
    <div className="stats" data-tour="fin-stats">
      <Stat label="To pay suppliers" value={fmt0(sum(payable, 'supplier'))} sub={`${payable.length} paid orders`} onClick={() => setTab('due')}></Stat>
      <Stat label="Margin retained" value={fmt0(sum(payable, 'margin'))} sub="on paid orders" onClick={() => setTab('client')}></Stat>
      <Stat label="Awaiting client payment" value={fmt0(sum(unpaid, 'total'))} sub={`${unpaid.length} orders`} tone={unpaid.length ? 'warn' : ''} onClick={() => setTab('unpaid')}></Stat>
      <Stat label="Locked splits" value={splits.length} sub="full history" onClick={() => setTab('all')}></Stat>
    </div>
    <div className="filters">{[['due','Pay suppliers'],['unpaid','Awaiting client'],['all','All splits'],['client','Margin by client']].map(([k, l]) => <button key={k} className={`chip${tab === k ? ' on' : ''}`} onClick={() => setTab(k)}>{l}</button>)}</div>
    {tab === 'due' && <div className="two two-split">
      <Card title="Paid by client → owed to supplier" pad={false} tour="fin-table"><SplitTable rows={payable}></SplitTable></Card>
      <Card title="By supplier"><ul className="sl">{bySupplier.map(b => <li key={b.s.id}><span><b>{b.s.name}</b><span className="mute"> · {b.n} orders</span></span><span className="mono strong">{fmt(b.amt)}</span></li>)}</ul></Card>
    </div>}
    {tab === 'unpaid' && <Card title="Confirmed, client has not paid" pad={false}><SplitTable rows={unpaid}></SplitTable></Card>}
    {tab === 'all' && <Card title="Every locked split" pad={false}><SplitTable rows={splits}></SplitTable></Card>}
    {tab === 'client' && <Card title="Margin by client" pad={false}><div className="tw"><table className="t"><thead><tr><th>Client</th><th className="num">Orders</th><th className="num">Billed</th><th className="num">Collected</th><th className="num">Margin</th><th className="num">Margin %</th></tr></thead><tbody>
      {byClient.map(r => <tr key={r.c.id} className="row" onClick={() => nav('orders', { client: r.c.id })}><td>{r.c.name}</td><td className="num">{r.n}</td><td className="num mono">{fmt(r.tot)}</td><td className="num mono">{fmt(r.paid)}</td><td className="num mono strong">{fmt(r.m)}</td><td className="num">{r.tot ? Math.round(r.m / r.tot * 100) : 0}%</td></tr>)}
    </tbody></table></div></Card>}
  </div>;
};

// ---------- Client portal ----------
const ClientPortal = ({ st, client, view, params, nav }) => {
  const orders = st.orders.filter(o => o.clientId === client.id && o.status !== 'Draft').sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
  const cids = [...new Set(orders.map(o => o.containerId).filter(Boolean))];
  const containers = st.containers.filter(c => cids.includes(c.id));
  const [showClosed, setShowClosed] = useState(false);
  const list = orders.filter(o => showClosed || !CLOSED.includes(o.status));
  if (view === 'order' && params?.id) {
    const o = orders.find(x => x.id === params.id); if (!o) return <Empty>Not found.</Empty>;
    const cont = st.containers.find(c => c.id === o.containerId);
    return <div className="page"><PageHead back={() => nav('home')} kicker={o.priority === 'Rush' ? 'Rush order' : 'Order'} title={o.id}></PageHead>
      <div className="flow">{STATUSES.slice(1, 8).map((f, i) => <span key={f} className={`flow-s${i < STATUSES.indexOf(o.status) ? ' done' : ''}${f === o.status ? ' cur' : ''}`}>{f}</span>)}{['Stuck','Cancelled'].includes(o.status) && <span className="flow-s cur bad">{o.status}</span>}</div>
      <div className="two two-detail"><div className="stack">
        <Card title="Items" pad={false}><div className="tw"><table className="t"><thead><tr><th>Description</th><th className="num">Qty</th><th>Unit</th><th className="num">Unit price</th><th className="num">Total</th></tr></thead><tbody>
          {o.items.map((i, k) => <tr key={k}><td>{i.desc}</td><td className="num mono">{i.qty.toLocaleString()}</td><td>{i.unit}</td><td className="num mono">{fmt(i.price)}</td><td className="num mono strong">{fmt(i.qty * i.price)}</td></tr>)}
        </tbody><tfoot><tr><td colSpan="4">Order total</td><td className="num mono strong">{fmt(o.split.total)}</td></tr></tfoot></table></div></Card>
        <Card title="Updates"><Timeline items={o.history.filter(h => !/split|purchased/i.test(h.event)).map(h => ({ ...h, by: 'SofloLG' }))}></Timeline></Card>
      </div><div className="stack">
        <Card title="Payment"><dl className="dl"><dt>Status</dt><dd>{o.paid ? <Pill tone="green">Paid</Pill> : <Pill>Invoice open</Pill>}</dd><dt>Amount</dt><dd className="mono strong">{fmt(o.split.total)}</dd>{o.paid && <><dt>Received</dt><dd>{fdateY(o.paidAt)}</dd></>}<dt>Requested delivery</dt><dd>{fdateY(o.requestedDate)}</dd><dt>Last update</dt><dd>{fdateY(o.updatedAt)}</dd></dl></Card>
        {cont ? <ContainerCard c={cont} onOpen={() => nav('container', { id: cont.id })}></ContainerCard> : <Card title="Container"><Empty>Not yet assigned to a container.</Empty></Card>}
      </div></div></div>;
  }
  if (view === 'container' && params?.id) {
    const c = containers.find(x => x.id === params.id); if (!c) return <Empty>Not found.</Empty>;
    const mine = orders.filter(o => o.containerId === c.id);
    return <div className="page"><PageHead back={() => nav('home')} kicker={`${c.origin} → ${c.destination}`} title={<span className="mono">{c.id}</span>}></PageHead>
      <div className="two two-detail"><div className="stack">
        <Card title="Status"><dl className="dl"><dt>Current</dt><dd><Status s={c.status}></Status></dd><dt>Departure</dt><dd>{fdateY(c.etd)}</dd><dt>Estimated arrival</dt><dd>{fdateY(c.eta)}</dd><dt>Last update</dt><dd>{fdateY(c.updatedAt)}</dd></dl></Card>
        <Card title="Your orders on this container"><ul className="sl">{mine.map(o => <li key={o.id} className="row" onClick={() => nav('order', { id: o.id })}><span><b className="mono">{o.id}</b><span className="mute"> · {o.items[0].desc}</span></span><Status s={o.status}></Status></li>)}</ul></Card>
      </div><div className="stack"><Card title="Shipping updates"><Timeline items={c.notes.map(n => ({ ...n, by: 'SofloLG' }))}></Timeline></Card></div></div></div>;
  }
  return <div className="page">
    <PageHead kicker={client.name} title="Your orders"><button className={`chip${showClosed ? ' on' : ''}`} onClick={() => setShowClosed(!showClosed)}>Show delivered</button></PageHead>
    <div className="stats">
      <Stat label="Open orders" value={list.filter(o => !CLOSED.includes(o.status)).length}></Stat>
      <Stat label="Containers in motion" value={containers.filter(c => c.status !== 'Delivered').length}></Stat>
      <Stat label="Invoices open" value={orders.filter(o => !o.paid && !CLOSED.includes(o.status)).length} sub={fmt0(orders.filter(o => !o.paid && !CLOSED.includes(o.status)).reduce((s, o) => s + o.split.total, 0))}></Stat>
    </div>
    <Card pad={false}><div className="tw"><table className="t"><thead><tr><th>Order</th><th>Items</th><th>Status</th><th>Requested</th><th>Container</th><th className="num">Amount</th><th>Payment</th><th>Updated</th></tr></thead><tbody>
      {list.map(o => { const c = st.containers.find(x => x.id === o.containerId); return <tr key={o.id} className="row" onClick={() => nav('order', { id: o.id })}>
        <td><span className="mono strong">{o.id}</span>{o.priority === 'Rush' && <Pill tone="rush">Rush</Pill>}</td><td className="td-desc">{o.items[0].desc}{o.items.length > 1 && <span className="mute"> +{o.items.length - 1}</span>}</td><td><Status s={o.status}></Status></td><td>{fdate(o.requestedDate)}</td>
        <td>{c ? <><span className="mono">{c.id}</span> <span className="mute">· {c.status}</span></> : <span className="mute">Pending</span>}</td><td className="num mono">{fmt(o.split.total)}</td><td>{o.paid ? <Pill tone="green">Paid</Pill> : <Pill>Open</Pill>}</td><td className="mute">{fdate(o.updatedAt)}</td></tr>; })}
    </tbody></table></div></Card>
    <Card title="Your containers"><div className="cgrid">{containers.length === 0 ? <Empty>No containers yet.</Empty> : containers.map(c => <ContainerCard key={c.id} c={c} compact onOpen={() => nav('container', { id: c.id })}></ContainerCard>)}</div></Card>
  </div>;
};

const ContainerCard = ({ c, onOpen, compact }) => <button className="ccard" onClick={onOpen}>
  <span className="ccard-h"><span className="mono strong">{c.id}</span><Status s={c.status}></Status></span>
  <span className="ccard-r">{c.origin} → {c.destination}</span>
  <span className="ccard-m"><span>ETA <b>{fdateY(c.eta)}</b></span><span className="mute">Updated {fdate(c.updatedAt)}</span></span>
  {!compact && c.notes[0] && <span className="ccard-n">“{c.notes[0].text}”</span>}
</button>;

Object.assign(window, { Finance, ClientPortal, ContainerCard });