// Manager views: Dashboard, Orders list, Order detail/edit, Containers
const useStore = () => window.__store;

const OrderRow = ({ o, st, onOpen, showClient = true }) => {
  const t = o.split || orderTotals(o); const c = st.clients.find(x => x.id === o.clientId); const ov = orderOverdue(o);
  return <tr 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 && <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 late</span>}</td>
    <td>{o.containerId ? <span className="mono">{o.containerId}</span> : <span className="mute">—</span>}</td>
    <td className="num"><Money v={t.total}></Money></td>
    <td>{o.paid ? <Pill tone="green">Paid</Pill> : o.status === 'Draft' ? <span className="mute">—</span> : <Pill>Unpaid</Pill>}</td>
  </tr>;
};

const OrdersTable = ({ orders, st, onOpen, showClient }) => orders.length === 0 ? <Empty>No orders match.</Empty> :
  <div className="tw"><table className="t"><thead><tr><th>Order</th>{showClient !== false && <th>Client</th>}<th>Items</th><th>Status</th><th>Requested</th><th>Container</th><th className="num">Client total</th><th>Payment</th></tr></thead>
  <tbody>{orders.map(o => <OrderRow key={o.id} o={o} st={st} onOpen={onOpen} showClient={showClient !== false}></OrderRow>)}</tbody></table></div>;

const ContainerRow = ({ c, st, onOpen }) => {
  const r = containerRisk(c); const linked = st.orders.filter(o => o.containerId === c.id);
  return <tr 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} <span className="mute">{linked.length === 1 ? 'order' : 'orders'}</span></td>
    <td>{daysSince(c.updatedAt)}d ago</td>
    <td>{r ? <Pill tone={r.level === 'high' ? 'red' : 'amber'}>{r.label}</Pill> : <span className="mute">—</span>}</td>
  </tr>;
};
const ContainersTable = ({ containers, st, onOpen }) => containers.length === 0 ? <Empty>No containers.</Empty> :
  <div className="tw"><table className="t"><thead><tr><th>Container</th><th>Route</th><th>Status</th><th>ETD → ETA</th><th>Linked</th><th>Last update</th><th>Risk</th></tr></thead>
  <tbody>{containers.map(c => <ContainerRow key={c.id} c={c} st={st} onOpen={onOpen}></ContainerRow>)}</tbody></table></div>;

// ---------- Dashboard ----------
const Dashboard = ({ st, nav, q }) => {
  const active = st.orders.filter(o => !CLOSED.includes(o.status));
  const needPurchase = active.filter(o => o.status === 'Confirmed');
  const overdue = active.filter(orderOverdue);
  const risky = st.containers.filter(c => containerRisk(c));
  const unpaidArrived = active.filter(o => !o.paid && ['Arrived','In Transit','Shipped'].includes(o.status));
  const filt = (arr, f) => q ? arr.filter(f) : arr;
  const qo = filt(active, o => (o.id + st.clients.find(c => c.id === o.clientId).name + (o.containerId || '')).toLowerCase().includes(q.toLowerCase()));
  const qc = filt(st.containers, c => c.id.toLowerCase().includes(q.toLowerCase()));
  const margin = st.clients.map(c => { const os = st.orders.filter(o => o.clientId === c.id && o.split); const tot = os.reduce((s, o) => s + o.split.total, 0); const m = os.reduce((s, o) => s + o.split.margin, 0); return { c, tot, m, n: os.length }; }).sort((a, b) => b.m - a.m);
  return <div className="page">
    <PageHead kicker={fdateY(TODAY)} title="Dashboard"><Btn v="primary" icon={I.plus} onClick={() => nav('order-new')} tour="new-order">New order</Btn></PageHead>
    <div className="stats">
      <Stat label="Active orders" value={active.length} sub={`${st.orders.filter(o => o.status === 'Draft').length} draft`} onClick={() => nav('orders')}></Stat>
      <Stat label="Not yet purchased" value={needPurchase.length} tone={needPurchase.length ? 'warn' : ''} onClick={() => nav('orders', { status: 'Confirmed' })}></Stat>
      <Stat label="Containers at risk" value={risky.length} tone={risky.length ? 'red' : ''} onClick={() => nav('containers', { risk: true })}></Stat>
      <Stat label="Overdue orders" value={overdue.length} tone={overdue.length ? 'red' : ''} onClick={() => nav('orders', { overdue: true })}></Stat>
    </div>
    {q ? <>
      <Card title={`Orders matching “${q}”`}><OrdersTable orders={qo} st={st} onOpen={id => nav('order', { id })}></OrdersTable></Card>
      <Card title={`Containers matching “${q}”`}><ContainersTable containers={qc} st={st} onOpen={id => nav('container', { id })}></ContainersTable></Card>
    </> : <>
    <Card title="Needs action" className="card-action" tour="needs-action">
      {needPurchase.length + risky.length + overdue.length === 0 ? <Empty>Nothing waiting on you.</Empty> : <ul className="al">
        {needPurchase.map(o => <li key={o.id} onClick={() => nav('order', { id: o.id })}><span className="al-i warn">{I.orders}</span><span className="al-t"><b>{o.id}</b> confirmed {daysSince(o.history.at(-1).at)}d ago, not purchased yet <span className="mute">· {st.clients.find(c => c.id === o.clientId).name}</span></span><span className="al-a">Pay supplier {fmt0(o.split.supplier)}{I.right}</span></li>)}
        {risky.map(c => <li key={c.id} onClick={() => nav('container', { id: c.id })}><span className={`al-i ${containerRisk(c).level === 'high' ? 'red' : 'warn'}`}>{I.ship}</span><span className="al-t"><b className="mono">{c.id}</b> {containerRisk(c).label.toLowerCase()} <span className="mute">· {c.status} · {st.orders.filter(o => o.containerId === c.id).length} orders</span></span><span className="al-a">Update{I.right}</span></li>)}
        {overdue.filter(o => !needPurchase.includes(o)).map(o => <li key={o.id} onClick={() => nav('order', { id: o.id })}><span className="al-i red">{I.alert}</span><span className="al-t"><b>{o.id}</b> requested {fdate(o.requestedDate)}, {-daysUntil(o.requestedDate)}d late <span className="mute">· {o.status}</span></span><span className="al-a">Review{I.right}</span></li>)}
      </ul>}
    </Card>
    <div className="two">
      <Card title="Active orders" action={<Btn sm onClick={() => nav('orders')}>All orders</Btn>}><OrdersTable orders={active.slice(0, 7)} st={st} onOpen={id => nav('order', { id })}></OrdersTable></Card>
    </div>
    <div className="two two-split">
      <Card title="Containers" action={<Btn sm onClick={() => nav('containers')}>All containers</Btn>}><ContainersTable containers={st.containers.filter(c => c.status !== 'Delivered')} st={st} onOpen={id => nav('container', { id })}></ContainersTable></Card>
      <Card title="Margin by client">
        <table className="t t-tight"><thead><tr><th>Client</th><th className="num">Orders</th><th className="num">Billed</th><th className="num">Margin</th></tr></thead><tbody>
          {margin.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">{fmt0(r.tot)}</td><td className="num"><span className="mono strong">{fmt0(r.m)}</span> <span className="mute">{r.tot ? Math.round(r.m / r.tot * 100) : 0}%</span></td></tr>)}
        </tbody></table>
      </Card>
    </div></>}
  </div>;
};

// ---------- Orders list ----------
const Orders = ({ st, nav, params = {}, q }) => {
  const [f, setF] = useState({ client: params.client || '', status: params.status || '', overdue: !!params.overdue, closed: false });
  const list = st.orders.filter(o => (f.closed || !CLOSED.includes(o.status)) && (!f.client || o.clientId === f.client) && (!f.status || o.status === f.status) && (!f.overdue || orderOverdue(o)) && (!q || (o.id + st.clients.find(c => c.id === o.clientId).name + (o.containerId || '')).toLowerCase().includes(q.toLowerCase())))
    .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
  return <div className="page">
    <PageHead title="Orders" kicker={`${list.length} shown`}><Btn v="primary" icon={I.plus} onClick={() => nav('order-new')}>New order</Btn></PageHead>
    <div className="filters">
      <Select value={f.client} onChange={v => setF({ ...f, client: v })} options={st.clients} placeholder="All clients"></Select>
      <Select value={f.status} onChange={v => setF({ ...f, status: v })} options={STATUSES} placeholder="All statuses"></Select>
      <button className={`chip${f.overdue ? ' on' : ''}`} onClick={() => setF({ ...f, overdue: !f.overdue })}>Overdue</button>
      <button className={`chip${f.closed ? ' on' : ''}`} onClick={() => setF({ ...f, closed: !f.closed })}>Include closed</button>
      {(f.client || f.status || f.overdue) && <button className="chip-x" onClick={() => setF({ client: '', status: '', overdue: false, closed: f.closed })}>Clear</button>}
    </div>
    <Card pad={false}><OrdersTable orders={list} st={st} onOpen={id => nav('order', { id })}></OrdersTable></Card>
  </div>;
};

// ---------- Containers list ----------
const Containers = ({ st, nav, params = {}, q }) => {
  const [risk, setRisk] = useState(!!params.risk); const [del, setDel] = useState(false);
  const list = st.containers.filter(c => (del || c.status !== 'Delivered') && (!risk || containerRisk(c)) && (!q || c.id.toLowerCase().includes(q.toLowerCase()))).sort((a, b) => (containerRisk(b) ? 1 : 0) - (containerRisk(a) ? 1 : 0));
  return <div className="page">
    <PageHead title="Containers" kicker={`${list.length} shown`}><Btn v="primary" icon={I.plus} onClick={() => nav('container-new')}>New container</Btn></PageHead>
    <div className="filters">
      <button className={`chip${risk ? ' on' : ''}`} onClick={() => setRisk(!risk)}>At risk only</button>
      <button className={`chip${del ? ' on' : ''}`} onClick={() => setDel(!del)}>Include delivered</button>
    </div>
    <Card pad={false}><ContainersTable containers={list} st={st} onOpen={id => nav('container', { id })}></ContainersTable></Card>
  </div>;
};

Object.assign(window, { OrdersTable, ContainersTable, Dashboard, Orders, Containers });