// v2 views: translated tables, client portal with inbox, admin actions on order detail
const OrdersTable2 = ({ orders, st, onOpen, showClient }) => orders.length === 0 ? <Empty>{t('No orders match.')}</Empty> :
  <div className="tw"><table className="t"><thead><tr><th>{t('Order')}</th>{showClient !== false && <th>{t('Client')}</th>}<th>{t('Items')}</th><th>{t('Status')}</th><th>{t('Requested')}</th><th>{t('Container')}</th><th className="num">{t('Client total')}</th><th>{t('Payment')}</th></tr></thead>
  <tbody>{orders.map(o => { const tt = o.split || orderTotals(o); const c = st.clients.find(x => x.id === o.clientId); const ov = orderOverdue(o);
    return <tr key={o.id} className={`row${ov ? ' row-warn' : ''}`} onClick={() => onOpen(o.id)}>
      <td><span className="mono strong">{o.id}</span>{o.priority === 'Rush' && <Pill tone="rush">Rush</Pill>}</td>
      {showClient !== false && <td>{c?.name}</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 className={ov ? 'red' : ''}>{fdate(o.requestedDate)}{ov && <span className="mute"> · {-daysUntil(o.requestedDate)}d</span>}</td>
      <td>{o.containerId ? <span className="mono">{o.containerId}</span> : <span className="mute">—</span>}</td>
      <td className="num"><Money v={tt.total}></Money></td>
      <td>{o.paid ? <Pill tone="green">Paid</Pill> : o.status === 'Draft' ? <span className="mute">—</span> : <Pill>Unpaid</Pill>}</td></tr>; })}</tbody></table></div>;

const ContainersTable2 = ({ containers, st, onOpen }) => containers.length === 0 ? <Empty>{t('No containers.')}</Empty> :
  <div className="tw"><table className="t"><thead><tr><th>{t('Container')}</th><th>{t('Route')}</th><th>{t('Status')}</th><th>ETD → ETA</th><th>{t('Linked')}</th><th>{t('Last update')}</th><th>{t('Risk')}</th></tr></thead>
  <tbody>{containers.map(c => { const r = containerRisk(c); const linked = st.orders.filter(o => o.containerId === c.id);
    return <tr key={c.id} className={`row${r ? ' row-' + r.level : ''}`} onClick={() => onOpen(c.id)}>
      <td><span className="mono strong">{c.id}</span></td><td>{c.origin} <span className="mute">→</span> {c.destination}</td><td><Status s={c.status}></Status></td>
      <td>{fdate(c.etd)} <span className="mute">→</span> <span className={isPast(c.eta) && c.status !== 'Delivered' ? 'red' : ''}>{fdate(c.eta)}</span></td>
      <td>{linked.length}</td><td>{daysSince(c.updatedAt)}d</td><td>{r ? <Pill tone={r.level === 'high' ? 'red' : 'amber'}>{r.label}</Pill> : <span className="mute">—</span>}</td></tr>; })}</tbody></table></div>;

// Admin controls appended to order detail
const OrderDetailBase = window.OrderDetail;
const OrderDetail2 = (p) => {
  const { st, id, act, user, nav } = p; const o = st.orders.find(x => x.id === id);
  const [editSplit, setEditSplit] = useState(false); const [sup, setSup] = useState(o?.split?.supplier || 0); const [reason, setReason] = useState('');
  if (!o) return <Empty>Order not found.</Empty>;
  const isAdmin = user.role === 'admin';
  return <>
    <OrderDetailBase {...p} user={{ ...user, role: isAdmin ? 'manager' : user.role }}></OrderDetailBase>
    {isAdmin && <div className="page page-tail"><Card title="Admin controls" className="card-admin" tour="admin-controls">
      <div className="admin-row">
        {o.split && !CLOSED.includes(o.status) && <Btn v="outline" onClick={() => { setSup(o.split.supplier); setEditSplit(true); }} tour="edit-split">Edit locked split</Btn>}
        {!CLOSED.includes(o.status) && <Btn v="outline" onClick={() => { if (confirm(`Cancel ${o.id}?`)) act.cancelOrder(id); }}>Cancel order</Btn>}
        <Btn v="outline" className="btn btn-outline btn-danger" onClick={() => { if (confirm(`Permanently delete ${o.id}? This is recorded in the audit log.`)) { act.deleteOrder(id); nav('orders'); } }}>Delete order</Btn>
      </div>
      <p className="mute small">Every admin action is written to the audit log with your name, the previous value and the reason.</p>
    </Card></div>}
    {editSplit && <Modal title={`Edit locked split · ${o.id}`} onClose={() => setEditSplit(false)}>
      <div className="split-edit">
        <div className="split-row"><span>Client pays (fixed)</span><Money v={o.split.total} strong></Money></div>
        <Field label="Amount to supplier" req><input className="inp inp-n wide" type="number" step="0.01" value={sup} onChange={e => setSup(+e.target.value)}></input></Field>
        <div className="split-row"><span>New margin</span><Money v={o.split.total - sup} strong></Money></div>
        <Field label="Reason" req><input className="inp" placeholder="e.g. supplier invoice came in lower" value={reason} onChange={e => setReason(e.target.value)}></input></Field>
        <div className="admin-row"><Btn v="primary" disabled={!reason.trim() || sup <= 0 || sup > o.split.total} onClick={() => { act.editSplit(id, sup, reason.trim()); setEditSplit(false); setReason(''); }}>Save and log</Btn><Btn onClick={() => setEditSplit(false)}>Cancel</Btn></div>
      </div>
    </Modal>}
  </>;
};

// Client portal (bilingual) + inbox
const ClientPortalBase = window.ClientPortal;
const Inbox = ({ st, client, act, nav }) => {
  const notes = clientNotifications(st, client.id); const unread = notes.filter(n => !st.readNotes[n.id]);
  return <div className="page"><PageHead title="Notifications" kicker={client.name}>{unread.length > 0 && <Btn onClick={() => act.markRead(notes.map(n => n.id))}>Mark all read</Btn>}</PageHead>
    <Card pad={false} tour="client-inbox-list">{notes.length === 0 ? <Empty>{t('No updates yet.')}</Empty> : <ul className="inbox">{notes.map(n => <li key={n.id} className={st.readNotes[n.id] ? '' : 'unread'} onClick={() => { act.markRead([n.id]); nav(n.ref.view, { id: n.ref.id }); }}>
      <span className={`al-i ${n.kind === 'container' ? '' : 'ink'}`}>{n.kind === 'container' ? I.ship : I.orders}</span>
      <span className="inbox-t"><span className="inbox-h"><b className="mono">{n.title}</b>{!st.readNotes[n.id] && <Pill tone="purple">New</Pill>}<span className="mute">{fdateY(n.at)}</span></span><span>{n.kind === 'order' ? t(n.text) : n.text}</span></span>{I.right}</li>)}</ul>}</Card></div>;
};
const ClientPortal2 = (p) => {
  const { st, client, view, params, nav } = p;
  if (view === 'inbox') return <Inbox {...p}></Inbox>;
  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));
  const unread = clientNotifications(st, client.id).filter(n => !st.readNotes[n.id]).length;
  const CC = ({ c, compact }) => <button className="ccard" onClick={() => nav('container', { id: c.id })}><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">{t('Updated')} {fdate(c.updatedAt)}</span></span>{!compact && c.notes[0] && <span className="ccard-n">“{c.notes[0].text}”</span>}</button>;
  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'} 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' : ''}`}>{t(f)}</span>)}{['Stuck','Cancelled'].includes(o.status) && <span className="flow-s cur bad">{t(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>{t('Description')}</th><th className="num">{t('Qty')}</th><th>{t('Unit')}</th><th className="num">{t('Unit price')}</th><th className="num">{t('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">{t('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, event: t(h.event.replace(/ · .*$/, '')), by: 'SofloLG' }))}></Timeline></Card>
      </div><div className="stack">
        <Card title="Payment" tour="client-payment"><dl className="dl"><dt>{t('Status')}</dt><dd>{o.paid ? <Pill tone="green">Paid</Pill> : <Pill>Invoice open</Pill>}</dd><dt>{t('Amount')}</dt><dd className="mono strong">{fmt(o.split.total)}</dd>{o.paid && <><dt>{t('Received')}</dt><dd>{fdateY(o.paidAt)}</dd></>}<dt>{t('Requested delivery')}</dt><dd>{fdateY(o.requestedDate)}</dd><dt>{t('Last update')}</dt><dd>{fdateY(o.updatedAt)}</dd></dl></Card>
        {cont ? <CC c={cont}></CC> : <Card title="Container"><Empty>{t('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>{t('Current')}</dt><dd><Status s={c.status}></Status></dd><dt>{t('Departure')}</dt><dd>{fdateY(c.etd)}</dd><dt>{t('Estimated arrival')}</dt><dd>{fdateY(c.eta)}</dd><dt>{t('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" tour="client-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)}>{t('Show delivered')}</button><Btn icon={I.bell} onClick={() => nav('inbox')} tour="client-inbox">{t('Inbox')}{unread > 0 && <span className="cnt">{unread}</span>}</Btn></PageHead>
    <div className="stats" data-tour="client-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} tour="client-orders"><div className="tw"><table className="t"><thead><tr><th>{t('Order')}</th><th>{t('Items')}</th><th>{t('Status')}</th><th>{t('Requested')}</th><th>{t('Container')}</th><th className="num">{t('Amount')}</th><th>{t('Payment')}</th><th>{t('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">· {t(c.status)}</span></> : <span className="mute">{t('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" tour="client-containers"><div className="cgrid">{containers.length === 0 ? <Empty>{t('No containers yet.')}</Empty> : containers.map(c => <CC key={c.id} c={c} compact></CC>)}</div></Card>
  </div>;
};

Object.assign(window, { OrdersTable: OrdersTable2, ContainersTable: ContainersTable2, OrderDetail: OrderDetail2, ClientPortal: ClientPortal2, Inbox });