// admin/pages/erp-ops.jsx — Phase 10 operational surfaces

function LocationsPage() {
  const [tick, setTick] = React.useState(0);
  const locs = OwnerErpOps.listLocations();
  const [name, setName] = React.useState('');
  const [kind, setKind] = React.useState('store');
  return (
    <div>
      <p className="muted" style={{ marginBottom: 12 }}>Multi-location inventory. Ambady seeds Main Store + Damaged Area.</p>
      <div className="toolbar">
        <input className="inp" placeholder="Location name" value={name} onChange={(e) => setName(e.target.value)} />
        <select className="inp" value={kind} onChange={(e) => setKind(e.target.value)}>
          {['store', 'warehouse', 'yard', 'display', 'damaged', 'transit', 'reserved'].map((k) => (
            <option key={k} value={k}>{k}</option>
          ))}
        </select>
        <button className="btn btn-primary" onClick={() => {
          if (!name.trim()) return;
          OwnerErpOps.upsertLocation({ name: name.trim(), kind });
          setName('');
          setTick((t) => t + 1);
        }}>Add location</button>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>Name</th><th>Kind</th><th>Status</th><th>Id</th></tr></thead>
          <tbody>
            {locs.map((l) => (
              <tr key={l.id + tick}><td><b>{l.name}</b></td><td>{l.kind}</td><td>{l.status}</td><td className="muted">{l.id}</td></tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function MovementsPage() {
  const [q, setQ] = React.useState('');
  const mov = OwnerErpOps.listMovements().filter((m) => {
    if (!q) return true;
    const hay = [m.variantId, m.reason, m.note, m.reference, m.actorId].join(' ').toLowerCase();
    return hay.includes(q.toLowerCase());
  }).slice(0, 200);
  return (
    <div>
      <div className="toolbar">
        <div className="search-box"><AIcon name="search" /><input className="inp" placeholder="Filter movements…" value={q} onChange={(e) => setQ(e.target.value)} /></div>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>When</th><th>Variant</th><th>Bucket</th><th className="num">Δ</th><th>Reason</th><th>Actor</th><th>Ref</th></tr></thead>
          <tbody>
            {mov.length === 0 ? (
              <tr><td colSpan={7} className="muted">No ledger movements yet — adjust stock to create an auditable row.</td></tr>
            ) : mov.map((m) => (
              <tr key={m.id}>
                <td className="muted" style={{ fontSize: '.78rem' }}>{new Date(m.at).toLocaleString('en-IN')}</td>
                <td>{m.variantId}</td>
                <td>{m.bucket}</td>
                <td className="num">{m.delta > 0 ? '+' : ''}{m.delta}</td>
                <td>{m.reason}</td>
                <td className="muted">{m.actorId}</td>
                <td className="muted">{m.reference || m.note || '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function InventoryHubPage(props) {
  const [tab, setTab] = React.useState((props.params && props.params.tab) || 'stock');
  return (
    <div>
      <div className="toolbar" style={{ marginBottom: 14 }}>
        {[['stock', 'Stock'], ['movements', 'Movements'], ['locations', 'Locations']].map(([k, l]) => (
          <button key={k} className={'chip' + (tab === k ? ' active' : '')} onClick={() => setTab(k)}>{l}</button>
        ))}
      </div>
      {tab === 'stock' && <InventoryPage />}
      {tab === 'movements' && <MovementsPage />}
      {tab === 'locations' && <LocationsPage />}
    </div>
  );
}

function SuppliersPage() {
  const [tick, setTick] = React.useState(0);
  const list = OwnerErpOps.listSuppliers();
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', gstin: '' });
  return (
    <div>
      <div className="card" style={{ padding: 14, marginBottom: 14 }}>
        <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
          <input className="inp" placeholder="Supplier name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
          <input className="inp" placeholder="Phone" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
          <input className="inp" placeholder="Email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
          <input className="inp" placeholder="GSTIN" value={form.gstin} onChange={(e) => setForm({ ...form, gstin: e.target.value })} />
          <button className="btn btn-primary" onClick={() => {
            if (!form.name.trim()) return;
            OwnerErpOps.upsertSupplier(form);
            setForm({ name: '', phone: '', email: '', gstin: '' });
            setTick((t) => t + 1);
          }}>Save supplier</button>
        </div>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>Name</th><th>Contact</th><th>GSTIN</th><th>Status</th></tr></thead>
          <tbody>
            {list.length === 0 ? <tr><td colSpan={4} className="muted">No suppliers yet.</td></tr> :
              list.map((s) => (
                <tr key={s.id + tick}><td><b>{s.name}</b></td><td className="muted">{s.phone || s.email || '—'}</td><td>{s.gstin || '—'}</td><td>{s.status}</td></tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function PurchaseOrdersPage() {
  const [tick, setTick] = React.useState(0);
  const pos = OwnerErpOps.listPurchaseOrders();
  const suppliers = OwnerErpOps.listSuppliers();
  const products = HAP.PRODUCTS;
  const [supplierId, setSupplierId] = React.useState('');
  const [variantId, setVariantId] = React.useState(products[0] ? products[0].id : '');
  const [qty, setQty] = React.useState(10);
  const [cost, setCost] = React.useState(100);

  const createDraft = () => {
    if (!supplierId || !variantId) return alert('Supplier and variant required');
    OwnerErpOps.upsertPurchaseOrder({
      supplierId,
      status: 'draft',
      lines: [{ id: 'pol_1', variantId, quantity: Number(qty), receivedQuantity: 0, unitCost: Number(cost) }],
    });
    setTick((t) => t + 1);
  };

  return (
    <div>
      <div className="card" style={{ padding: 14, marginBottom: 14 }}>
        <div className="row" style={{ gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
          <select className="inp" value={supplierId} onChange={(e) => setSupplierId(e.target.value)}>
            <option value="">Supplier…</option>
            {suppliers.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
          </select>
          <select className="inp" value={variantId} onChange={(e) => setVariantId(e.target.value)}>
            {products.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
          <input className="inp" type="number" style={{ width: 80 }} value={qty} onChange={(e) => setQty(e.target.value)} />
          <input className="inp" type="number" style={{ width: 100 }} value={cost} onChange={(e) => setCost(e.target.value)} />
          <button className="btn btn-primary" onClick={createDraft}>Create draft PO</button>
          <a className="btn btn-soft" href="#/suppliers">Suppliers</a>
        </div>
        <p className="muted" style={{ marginTop: 8, fontSize: '.8rem' }}>
          Approval threshold: ₹{OwnerErpOps.approvalRules().ownerApprovalThreshold.toLocaleString('en-IN')} (settings LS — not hardcoded in UI logic beyond display).
        </p>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>Doc</th><th>Status</th><th>Supplier</th><th>Lines</th><th></th></tr></thead>
          <tbody>
            {pos.length === 0 ? <tr><td colSpan={5} className="muted">No purchase orders.</td></tr> :
              pos.map((po) => {
                const sup = suppliers.find((s) => s.id === po.supplierId);
                return (
                  <tr key={po.id + tick}>
                    <td><b>{po.documentNumber}</b><br /><span className="muted" style={{ fontSize: '.72rem' }}>{po.id}</span></td>
                    <td><span className="badge b-new">{po.status}</span></td>
                    <td>{(sup && sup.name) || po.supplierId}</td>
                    <td className="num">{(po.lines || []).length}</td>
                    <td>
                      <div className="row" style={{ justifyContent: 'flex-end', gap: 4, flexWrap: 'wrap' }}>
                        {po.status === 'draft' && <button className="btn btn-sm btn-soft" onClick={() => { OwnerErpOps.transitionPO(po.id, 'submitted'); setTick((t) => t + 1); }}>Submit</button>}
                        {po.status === 'submitted' && <button className="btn btn-sm btn-primary" onClick={() => { OwnerErpOps.transitionPO(po.id, 'approved'); setTick((t) => t + 1); }}>Approve</button>}
                        {po.status === 'approved' && <button className="btn btn-sm btn-soft" onClick={() => { OwnerErpOps.transitionPO(po.id, 'ordered'); setTick((t) => t + 1); }}>Mark ordered</button>}
                        {['ordered', 'partially_received'].includes(po.status) && (
                          <button className="btn btn-sm btn-primary" onClick={() => {
                            const line = po.lines[0];
                            if (!line) return;
                            const pending = line.quantity - (line.receivedQuantity || 0);
                            const accept = Math.min(pending, Math.ceil(pending / 2) || pending);
                            try {
                              OwnerErpOps.receiveGoods(po.id, [{
                                variantId: line.variantId,
                                orderedQuantity: line.quantity,
                                receivedQuantity: accept,
                                acceptedQuantity: accept,
                                damagedQuantity: 0,
                                shortQuantity: 0,
                              }]);
                              setTick((t) => t + 1);
                            } catch (e) { alert(e.message); }
                          }}>Receive partial</button>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function TransfersPage() {
  const [tick, setTick] = React.useState(0);
  const locs = OwnerErpOps.listLocations();
  const list = OwnerErpOps.listTransfers();
  const products = HAP.PRODUCTS;
  const [fromId, setFromId] = React.useState('loc_main');
  const [toId, setToId] = React.useState(locs[1] ? locs[1].id : 'loc_damaged');
  const [variantId, setVariantId] = React.useState(products[0] ? products[0].id : '');
  const [qty, setQty] = React.useState(1);

  return (
    <div>
      <div className="card" style={{ padding: 14, marginBottom: 14 }}>
        <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
          <select className="inp" value={fromId} onChange={(e) => setFromId(e.target.value)}>{locs.map((l) => <option key={l.id} value={l.id}>{l.name}</option>)}</select>
          <span className="muted">→</span>
          <select className="inp" value={toId} onChange={(e) => setToId(e.target.value)}>{locs.map((l) => <option key={l.id} value={l.id}>{l.name}</option>)}</select>
          <select className="inp" value={variantId} onChange={(e) => setVariantId(e.target.value)}>{products.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</select>
          <input className="inp" type="number" style={{ width: 70 }} value={qty} onChange={(e) => setQty(e.target.value)} />
          <button className="btn btn-primary" onClick={() => {
            OwnerErpOps.upsertTransfer({
              fromLocationId: fromId,
              toLocationId: toId,
              lines: [{ variantId, quantity: Number(qty) }],
              status: 'draft',
            });
            setTick((t) => t + 1);
          }}>Create transfer</button>
        </div>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>Id</th><th>Route</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {list.length === 0 ? <tr><td colSpan={4} className="muted">No transfers.</td></tr> :
              list.map((t) => (
                <tr key={t.id + tick}>
                  <td>{t.id}</td>
                  <td className="muted">{t.fromLocationId} → {t.toLocationId}</td>
                  <td><span className="badge b-new">{t.status}</span></td>
                  <td>
                    <div className="row" style={{ justifyContent: 'flex-end', gap: 4, flexWrap: 'wrap' }}>
                      {t.status === 'draft' && <button className="btn btn-sm btn-soft" onClick={() => { OwnerErpOps.transitionTransfer(t.id, 'requested'); setTick((x) => x + 1); }}>Request</button>}
                      {t.status === 'requested' && <button className="btn btn-sm btn-primary" onClick={() => { OwnerErpOps.transitionTransfer(t.id, 'approved'); setTick((x) => x + 1); }}>Approve</button>}
                      {t.status === 'approved' && <button className="btn btn-sm btn-soft" onClick={() => { try { OwnerErpOps.transitionTransfer(t.id, 'dispatched'); setTick((x) => x + 1); } catch (e) { alert(e.message); } }}>Dispatch</button>}
                      {t.status === 'dispatched' && <button className="btn btn-sm btn-soft" onClick={() => { OwnerErpOps.transitionTransfer(t.id, 'in_transit'); setTick((x) => x + 1); }}>In transit</button>}
                      {['dispatched', 'in_transit'].includes(t.status) && <button className="btn btn-sm btn-primary" onClick={() => { try { OwnerErpOps.transitionTransfer(t.id, 'received'); setTick((x) => x + 1); } catch (e) { alert(e.message); } }}>Receive</button>}
                    </div>
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function OpsFulfilmentPage({ go }) {
  const [tick, setTick] = React.useState(0);
  const [tab, setTab] = React.useState('pick');
  const pick = OwnerErpOps.buildPickList();
  const fulfilments = OwnerErpOps.listFulfilments();
  const toPack = fulfilments.filter((f) => ['picked', 'packing'].includes(f.status));
  const packed = fulfilments.filter((f) => f.status === 'packed');
  const shipments = OwnerErpOps.listShipments();

  return (
    <div>
      <div className="toolbar">
        {[['pick', 'To pick'], ['pack', 'To pack'], ['ship', 'Shipments'], ['scan', 'Scan']].map(([k, l]) => (
          <button key={k} className={'chip' + (tab === k ? ' active' : '')} onClick={() => setTab(k)}>{l}</button>
        ))}
      </div>
      {tab === 'pick' && (
        <div className="card">
          <table className="tbl">
            <thead><tr><th>Order</th><th>SKU</th><th>Product</th><th className="num">Qty</th><th>Location</th><th></th></tr></thead>
            <tbody>
              {pick.length === 0 ? <tr><td colSpan={6} className="muted">Nothing to pick.</td></tr> :
                pick.map((line, i) => (
                  <tr key={line.orderId + line.variantId + i}>
                    <td><button className="btn btn-sm btn-ghost" onClick={() => go && go('orders', { orderId: line.orderId })}>{line.orderId}</button></td>
                    <td className="muted">{line.sku || '—'}</td>
                    <td>{line.productName}</td>
                    <td className="num">{line.quantity}</td>
                    <td className="muted">{line.locationId}</td>
                    <td>
                      <button className="btn btn-sm btn-primary" onClick={() => {
                        try {
                          OwnerErpOps.transitionFulfilment(line.fulfilmentId, 'picking');
                          OwnerErpOps.transitionFulfilment(line.fulfilmentId, 'picked');
                          setTick((t) => t + 1);
                        } catch (e) { alert(e.message); }
                      }}>Mark picked</button>
                    </td>
                  </tr>
                ))}
            </tbody>
          </table>
        </div>
      )}
      {tab === 'pack' && (
        <div className="card">
          <table className="tbl">
            <thead><tr><th>Fulfilment</th><th>Order</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {toPack.length === 0 ? <tr><td colSpan={4} className="muted">Nothing to pack.</td></tr> :
                toPack.map((f) => (
                  <tr key={f.id + tick}>
                    <td>{f.id}</td>
                    <td>{f.orderId}</td>
                    <td>{f.status}</td>
                    <td>
                      <button className="btn btn-sm btn-primary" onClick={() => {
                        try {
                          if (f.status === 'picked') OwnerErpOps.transitionFulfilment(f.id, 'packing');
                          OwnerErpOps.transitionFulfilment(f.id, 'packed');
                          OwnerErpOps.createPackage(f.orderId, f.id, { weight: 1, packageType: 'box' });
                          setTick((t) => t + 1);
                        } catch (e) { alert(e.message); }
                      }}>Pack</button>
                    </td>
                  </tr>
                ))}
            </tbody>
          </table>
        </div>
      )}
      {tab === 'ship' && (
        <div>
          <div className="card" style={{ marginBottom: 12 }}>
            <table className="tbl">
              <thead><tr><th>Packed order</th><th>Packages</th><th></th></tr></thead>
              <tbody>
                {packed.length === 0 ? <tr><td colSpan={3} className="muted">No packed fulfilments.</td></tr> :
                  packed.map((f) => {
                    const pkgs = OwnerErpOps.listPackages(f.orderId);
                    return (
                      <tr key={f.id}>
                        <td>{f.orderId}</td>
                        <td>{pkgs.length}</td>
                        <td>
                          <button className="btn btn-sm btn-primary" disabled={!pkgs[0]} onClick={() => {
                            try {
                              OwnerErpOps.createManualShipment(f.orderId, pkgs[0].id, { carrier: 'manual' });
                              setTick((t) => t + 1);
                            } catch (e) { alert(e.message); }
                          }}>Create manual shipment</button>
                        </td>
                      </tr>
                    );
                  })}
              </tbody>
            </table>
          </div>
          <div className="card">
            <h3 className="serif" style={{ fontSize: '1.1rem', margin: '8px 12px' }}>Shipments</h3>
            <table className="tbl">
              <thead><tr><th>AWB</th><th>Order</th><th>Carrier</th><th>Status</th></tr></thead>
              <tbody>
                {shipments.length === 0 ? <tr><td colSpan={4} className="muted">No shipments.</td></tr> :
                  shipments.map((s) => (
                    <tr key={s.id}><td><b>{s.awb}</b></td><td>{s.orderId}</td><td>{s.carrier}</td><td>{s.status}</td></tr>
                  ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
      {tab === 'scan' && <ScanOpsPanel />}
    </div>
  );
}

function ScanOpsPanel() {
  const [code, setCode] = React.useState('');
  const [hit, setHit] = React.useState(null);
  return (
    <div className="card" style={{ padding: 16 }}>
      <p className="muted">Barcode foundation — manual SKU / order / AWB lookup. Camera scanning is blocked without device permission wiring.</p>
      <div className="row" style={{ gap: 8, marginTop: 10 }}>
        <input className="inp" placeholder="Scan or type SKU / barcode / order / AWB" value={code} onChange={(e) => setCode(e.target.value)} />
        <button className="btn btn-primary" onClick={() => setHit(OwnerErpOps.scanLookup(code))}>Lookup</button>
      </div>
      {hit && (
        <pre style={{ marginTop: 12, fontSize: '.8rem', whiteSpace: 'pre-wrap' }}>{JSON.stringify(hit, null, 2)}</pre>
      )}
      {!hit && code && <p className="muted" style={{ marginTop: 8 }}>No match.</p>}
    </div>
  );
}

function ReturnsPage() {
  const [tick, setTick] = React.useState(0);
  const returns = OwnerErpOps.listReturns();
  const orders = APG.getOrders();
  const [orderId, setOrderId] = React.useState(orders[0] ? orders[0].id : '');
  const [refundAmt, setRefundAmt] = React.useState('');

  return (
    <div>
      <div className="card" style={{ padding: 14, marginBottom: 14 }}>
        <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
          <select className="inp" value={orderId} onChange={(e) => setOrderId(e.target.value)}>
            {orders.map((o) => <option key={o.id} value={o.id}>{o.id} · {o.status}</option>)}
          </select>
          <button className="btn btn-primary" onClick={() => {
            const o = orders.find((x) => x.id === orderId);
            const item = (o && o.items && o.items[0]) || {};
            OwnerErpOps.createReturn(orderId, [{
              variantId: item.variantId || item.id || item.productId,
              quantity: 1,
              reason: 'damaged',
            }]);
            setTick((t) => t + 1);
          }}>Request return</button>
        </div>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>Return</th><th>Order</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {returns.length === 0 ? <tr><td colSpan={4} className="muted">No returns.</td></tr> :
              returns.map((r) => (
                <tr key={r.id + tick}>
                  <td>{r.id}</td>
                  <td>{r.orderId}</td>
                  <td><span className="badge b-new">{r.status}</span></td>
                  <td>
                    <div className="row" style={{ justifyContent: 'flex-end', gap: 4, flexWrap: 'wrap' }}>
                      {r.status === 'requested' && <button className="btn btn-sm btn-primary" onClick={() => { OwnerErpOps.transitionReturn(r.id, 'approved'); setTick((t) => t + 1); }}>Approve</button>}
                      {r.status === 'approved' && <button className="btn btn-sm btn-soft" onClick={() => { OwnerErpOps.transitionReturn(r.id, 'received'); setTick((t) => t + 1); }}>Receive</button>}
                      {r.status === 'received' && <button className="btn btn-sm btn-soft" onClick={() => {
                        (r.lines || []).forEach((l) => OwnerErpOps.setReturnLineResolution(r.id, l.id, 'sellable'));
                        OwnerErpOps.transitionReturn(r.id, 'inspected');
                        setTick((t) => t + 1);
                      }}>Inspect (sellable)</button>}
                      {r.status === 'inspected' && (
                        <>
                          <input className="inp" style={{ width: 90 }} placeholder="₹ refund" value={refundAmt} onChange={(e) => setRefundAmt(e.target.value)} />
                          <button className="btn btn-sm btn-primary" onClick={() => {
                            try {
                              const major = Number(refundAmt);
                              if (!(major > 0)) return alert('Enter refund amount');
                              if (!confirm('Confirm refund of ₹' + major + '? PSP reverse stays blocked.')) return;
                              OwnerOps.confirmRefund(r.orderId, Math.round(major * 100));
                              OwnerErpOps.transitionReturn(r.id, 'refunded');
                              OwnerErpOps.transitionReturn(r.id, 'completed');
                              setTick((t) => t + 1);
                            } catch (e) { alert(e.message); }
                          }}>Confirm refund</button>
                        </>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function TasksPage() {
  const [tick, setTick] = React.useState(0);
  const tasks = OwnerErpOps.listStaffTasks();
  const [title, setTitle] = React.useState('');
  return (
    <div>
      <div className="toolbar">
        <input className="inp" placeholder="Task title" value={title} onChange={(e) => setTitle(e.target.value)} />
        <button className="btn btn-primary" onClick={() => {
          if (!title.trim()) return;
          OwnerErpOps.upsertStaffTask({ title: title.trim(), entityType: 'general', status: 'todo', priority: 'normal' });
          setTitle('');
          setTick((t) => t + 1);
        }}>Add task</button>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>Title</th><th>Status</th><th>Priority</th><th></th></tr></thead>
          <tbody>
            {tasks.length === 0 ? <tr><td colSpan={4} className="muted">No staff tasks.</td></tr> :
              tasks.map((t) => (
                <tr key={t.id + tick}>
                  <td>{t.title}</td>
                  <td>{t.status}</td>
                  <td>{t.priority}</td>
                  <td>
                    {t.status !== 'completed' && (
                      <button className="btn btn-sm btn-soft" onClick={() => {
                        OwnerErpOps.upsertStaffTask({ ...t, status: 'completed' });
                        setTick((x) => x + 1);
                      }}>Complete</button>
                    )}
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function WorkQueuePage({ go }) {
  const queue = OwnerErpOps.buildWorkQueue();
  const brief = OwnerErpOps.dailyBriefing();
  return (
    <div>
      <div className="kpi-grid" style={{ marginBottom: 18 }}>
        <div className="kpi"><div className="kpi__label">Today sales</div><div className="kpi__value">{money(brief.sales)}</div></div>
        <div className="kpi"><div className="kpi__label">Orders today</div><div className="kpi__value">{brief.orders}</div></div>
        <div className="kpi"><div className="kpi__label">Low stock</div><div className="kpi__value">{brief.lowStock}</div></div>
        <div className="kpi"><div className="kpi__label">Fulfilment</div><div className="kpi__value">{brief.pendingFulfilment}</div></div>
        <div className="kpi"><div className="kpi__label">Returns</div><div className="kpi__value">{brief.returns}</div></div>
        <div className="kpi"><div className="kpi__label">PO open</div><div className="kpi__value">{brief.pendingPurchaseOrders}</div></div>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>Priority</th><th>Kind</th><th>Title</th><th className="num">Score</th><th></th></tr></thead>
          <tbody>
            {queue.length === 0 ? <tr><td colSpan={5} className="muted">Queue clear.</td></tr> :
              queue.slice(0, 40).map((q) => (
                <tr key={q.id}>
                  <td><span className="badge b-new">{q.priority}</span></td>
                  <td className="muted">{q.kind}</td>
                  <td>{q.title}</td>
                  <td className="num">{q.score}</td>
                  <td>
                    {q.kind === 'fulfilment_pick' || q.kind === 'fulfilment_pack' ? (
                      <button className="btn btn-sm btn-ghost" onClick={() => go && go('fulfilment')}>Open</button>
                    ) : q.kind === 'return' ? (
                      <button className="btn btn-sm btn-ghost" onClick={() => go && go('returns')}>Open</button>
                    ) : q.kind === 'purchase_approval' ? (
                      <button className="btn btn-sm btn-ghost" onClick={() => go && go('purchase-orders')}>Open</button>
                    ) : q.kind === 'low_stock' ? (
                      <button className="btn btn-sm btn-ghost" onClick={() => go && go('inventory')}>Open</button>
                    ) : null}
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}