// Order detail + editor, Container detail + editor
const SplitBox = ({ t, locked, dark }) => <div className={`split${dark ? ' split-dark' : ''}`}>
  <div className="split-row"><span>Client pays</span><Money v={t.total} strong></Money></div>
  <div className="split-bar"><i style={{ width: t.total ? (t.supplier / t.total * 100) + '%' : '0%' }}></i></div>
  <div className="split-row"><span>→ Pay supplier</span><Money v={t.supplier} strong></Money></div>
  <div className="split-row"><span>→ Margin {t.total ? <span className="mute">({Math.round(t.margin / t.total * 100)}%)</span> : null}</span><Money v={t.margin} strong></Money></div>
  <div className="split-foot">{locked ? <>{I.lock} Locked {fdateY(locked)}</> : 'Locks when the order is confirmed'}</div>
</div>;

const OrderDetail = ({ st, id, nav, act, user }) => {
  const o = st.orders.find(x => x.id === id); if (!o) return <Empty>Order not found.</Empty>;
  const c = st.clients.find(x => x.id === o.clientId), s = st.suppliers.find(x => x.id === o.supplierId), cont = st.containers.find(x => x.id === o.containerId);
  const t = o.split || orderTotals(o); const valid = orderValid(o); const canEdit = user.role === 'manager';
  const idx = STATUSES.indexOf(o.status); const next = o.status === 'Draft' ? 'Confirmed' : idx >= 1 && idx < 7 ? STATUSES[idx + 1] : null;
  const flow = STATUSES.slice(0, 8);
  return <div className="page">
    <PageHead back={() => nav('orders')} kicker={c.name} title={<>{o.id} {o.priority === 'Rush' && <Pill tone="rush">Rush</Pill>}</>}>
      {canEdit && <>
        {o.status === 'Draft' && <Btn onClick={() => nav('order-edit', { id })}>Edit</Btn>}
        {o.status === 'Draft' && <Btn v="primary" disabled={!valid} title={valid ? '' : 'Fill all mandatory fields first'} onClick={() => act.setStatus(id, 'Confirmed')}>Confirm order</Btn>}
        {o.status !== 'Draft' && !o.paid && !CLOSED.includes(o.status) && <Btn v="dark" icon={I.dollar} onClick={() => act.markPaid(id)}>Mark paid by client</Btn>}
        {next && o.status !== 'Draft' && <Btn v="primary" onClick={() => act.setStatus(id, next)}>Mark {next.toLowerCase()}</Btn>}
      </>}
    </PageHead>
    {o.status === 'Draft' && !valid && <div className="note note-warn">{I.alert} Mandatory fields missing: every line needs description, quantity, unit, supplier cost and selling price; client, supplier and requested date are required.</div>}
    <div className="flow">{flow.map((f, i) => <span key={f} className={`flow-s${i < idx + 1 && idx < 8 ? ' 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="Line 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">Supplier cost</th><th className="num">Sell price</th><th className="num">Line 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.cost)}</td><td className="num mono">{fmt(i.price)}</td><td className="num mono strong">{fmt(i.qty * i.price)}</td></tr>)}
          </tbody></table></div>
        </Card>
        <Card title="Details"><dl className="dl">
          <dt>Client</dt><dd>{c.name} <span className="mute">· {c.contact}</span></dd>
          <dt>Supplier</dt><dd>{s.name} <span className="mute">· {s.country}</span></dd>
          <dt>Requested delivery</dt><dd className={orderOverdue(o) ? 'red' : ''}>{fdateY(o.requestedDate)}{orderOverdue(o) && ` · ${-daysUntil(o.requestedDate)}d late`}</dd>
          <dt>Priority</dt><dd>{o.priority}</dd>
          <dt>Container</dt><dd>{cont ? <button className="lnk" onClick={() => nav('container', { id: cont.id })}><span className="mono">{cont.id}</span> · <Status s={cont.status}></Status></button> : <span className="mute">Not linked</span>}
            {canEdit && <span className="inline-sel"><Select value={o.containerId || ''} onChange={v => act.linkContainer(id, v || null)} options={st.containers} placeholder="Link container…"></Select></span>}</dd>
          <dt>Last update</dt><dd>{fdateY(o.updatedAt)}</dd>
        </dl></Card>
        <Card title="History"><Timeline items={o.history}></Timeline></Card>
      </div>
      <div className="stack">
        <Card title="Payment split" className="card-split" tour="split-card">
          <SplitBox t={t} locked={o.split?.lockedAt}></SplitBox>
          <div className="pay-state">{o.paid ? <><Pill tone="green">Paid by client</Pill><span className="mute">{fdateY(o.paidAt)} · {fmt(o.split.supplier)} queued for {s.name}</span></> : o.status === 'Draft' ? <span className="mute">Awaiting confirmation</span> : <><Pill>Unpaid</Pill><span className="mute">Client invoice outstanding</span></>}</div>
        </Card>
        {canEdit && !CLOSED.includes(o.status) && o.status !== 'Draft' && <Card title="Set status"><div className="chips">{STATUSES.slice(1).map(x => <button key={x} className={`chip${x === o.status ? ' on' : ''}`} onClick={() => x !== o.status && act.setStatus(id, x)}>{x}</button>)}</div></Card>}
      </div>
    </div>
  </div>;
};

const blankItem = () => ({ desc: '', qty: 0, unit: 'pc', cost: 0, price: 0 });
const OrderEdit = ({ st, id, nav, act }) => {
  const base = id ? st.orders.find(x => x.id === id) : { clientId: '', supplierId: '', priority: 'Normal', requestedDate: '', containerId: null, items: [blankItem()] };
  const [o, setO] = useState(JSON.parse(JSON.stringify(base)));
  const [tried, setTried] = useState(false);
  const t = orderTotals(o); const valid = orderValid(o);
  const up = (k, v) => setO({ ...o, [k]: v });
  const upItem = (k, f, v) => { const items = o.items.map((it, i) => i === k ? { ...it, [f]: v } : it); setO({ ...o, items }); };
  const miss = (cond) => tried && !cond ? ' bad' : '';
  const save = (confirm) => { if (confirm && !valid) { setTried(true); return; } const nid = act.saveOrder(o, confirm); nav('order', { id: nid }); };
  return <div className="page">
    <PageHead back={() => id ? nav('order', { id }) : nav('orders')} kicker={id ? 'Edit' : 'New order'} title={id || 'Draft order'}>
      <Btn onClick={() => save(false)}>Save draft</Btn>
      <Btn v="primary" onClick={() => save(true)}>{valid ? 'Confirm order' : 'Confirm order'}</Btn>
    </PageHead>
    {tried && !valid && <div className="note note-warn">{I.alert} Fill the highlighted fields before confirming. You can still save as draft.</div>}
    <div className="two two-detail">
      <div className="stack">
        <Card title="Order">
          <div className="form-grid">
            <Field label="Client" req><Select className={miss(o.clientId)} value={o.clientId} onChange={v => up('clientId', v)} options={st.clients} placeholder="Choose client"></Select></Field>
            <Field label="Supplier" req><Select className={miss(o.supplierId)} value={o.supplierId} onChange={v => up('supplierId', v)} options={st.suppliers} placeholder="Choose supplier"></Select></Field>
            <Field label="Requested delivery" req><input type="date" className={`inp${miss(o.requestedDate)}`} value={o.requestedDate} onChange={e => up('requestedDate', e.target.value)}></input></Field>
            <Field label="Priority"><div className="seg">{['Normal','Rush'].map(p => <button key={p} className={o.priority === p ? 'on' : ''} onClick={() => up('priority', p)}>{p}</button>)}</div></Field>
            <Field label="Container" hint="Optional"><Select value={o.containerId || ''} onChange={v => up('containerId', v || null)} options={st.containers} placeholder="Not linked"></Select></Field>
          </div>
        </Card>
        <Card title="Line items" action={<Btn sm icon={I.plus} onClick={() => setO({ ...o, items: [...o.items, blankItem()] })}>Add line</Btn>} pad={false}>
          <div className="tw"><table className="t t-edit"><thead><tr><th>Description *</th><th>Qty *</th><th>Unit *</th><th>Supplier cost *</th><th>Sell price *</th><th className="num">Margin</th><th></th></tr></thead><tbody>
            {o.items.map((it, k) => <tr key={k}>
              <td><input className={`inp${miss(it.desc)}`} placeholder="e.g. Porcelain tile 60×60" value={it.desc} onChange={e => upItem(k, 'desc', e.target.value)}></input></td>
              <td><input className={`inp inp-n${miss(it.qty > 0)}`} type="number" min="0" value={it.qty || ''} onChange={e => upItem(k, 'qty', +e.target.value)}></input></td>
              <td><Select className={miss(it.unit)} value={it.unit} onChange={v => upItem(k, 'unit', v)} options={['pc','set','m²','lm','bag','sheet','kg','box']}></Select></td>
              <td><input className={`inp inp-n${miss(it.cost > 0)}`} type="number" min="0" step="0.01" value={it.cost || ''} onChange={e => upItem(k, 'cost', +e.target.value)}></input></td>
              <td><input className={`inp inp-n${miss(it.price > 0)}`} type="number" min="0" step="0.01" value={it.price || ''} onChange={e => upItem(k, 'price', +e.target.value)}></input></td>
              <td className={`num mono${it.price && it.price < it.cost ? ' red' : ''}`}>{fmt(it.qty * (it.price - it.cost))}</td>
              <td><button className="btn btn-icon" disabled={o.items.length === 1} onClick={() => setO({ ...o, items: o.items.filter((_, i) => i !== k) })} aria-label="Remove">{I.trash}</button></td>
            </tr>)}
          </tbody></table></div>
        </Card>
      </div>
      <div className="stack"><Card title="Payment split preview" tour="split-preview"><SplitBox t={t}></SplitBox>{t.margin < 0 && <div className="note note-warn">{I.alert} Selling below supplier cost.</div>}</Card></div>
    </div>
  </div>;
};

const ContainerDetail = ({ st, id, nav, act, user }) => {
  const c = st.containers.find(x => x.id === id); if (!c) return <Empty>Container not found.</Empty>;
  const [note, setNote] = useState(''); const [status, setStatus] = useState(c.status);
  const linked = st.orders.filter(o => o.containerId === c.id); const r = containerRisk(c); const canEdit = user.role === 'manager';
  const submit = () => { if (!note.trim() && status === c.status) return; act.updateContainer(id, status, note.trim()); setNote(''); };
  return <div className="page">
    <PageHead back={() => nav('containers')} kicker={`${c.origin} → ${c.destination}`} title={<span className="mono">{c.id}</span>}>
      {canEdit && <Btn onClick={() => nav('container-edit', { id })}>Edit</Btn>}
    </PageHead>
    {r && <div className={`note note-${r.level === 'high' ? 'red' : 'warn'}`}>{I.alert} {r.label} — {r.level === 'high' ? 'clients on this container will be asking. Update them with a note below.' : 'add a note so clients see fresh information.'}</div>}
    <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>Arrival (est.)</dt><dd className={isPast(c.eta) && c.status !== 'Delivered' ? 'red' : ''}>{fdateY(c.eta)}{isPast(c.eta) && c.status !== 'Delivered' && ` · ${-daysUntil(c.eta)}d overdue`}</dd>
          <dt>Last update</dt><dd>{fdateY(c.updatedAt)} · {daysSince(c.updatedAt)}d ago</dd>
        </dl></Card>
        <Card title={`Linked orders · ${linked.length}`} pad={false}>
          <OrdersTable orders={linked} st={st} onOpen={oid => nav('order', { id: oid })}></OrdersTable>
          {canEdit && <div className="card-b"><span className="inline-sel"><Select value="" onChange={v => v && act.linkContainer(v, c.id)} options={st.orders.filter(o => o.containerId !== c.id && !CLOSED.includes(o.status)).map(o => ({ id: o.id, name: `${o.id} · ${st.clients.find(x => x.id === o.clientId).name}` }))} placeholder="Link an order…"></Select></span></div>}
        </Card>
      </div>
      <div className="stack">
        {canEdit && <Card title="Post an update" tour="post-update">
          <Field label="Status"><Select value={status} onChange={setStatus} options={CONTAINER_STATUSES}></Select></Field>
          <Field label="Note"><textarea className="inp" rows="3" placeholder="e.g. Stuck in port, customs exam requested" value={note} onChange={e => setNote(e.target.value)}></textarea></Field>
          <Btn v="primary" onClick={submit} disabled={!note.trim() && status === c.status}>Post update</Btn>
        </Card>}
        <Card title="Notes & history"><Timeline items={c.notes}></Timeline></Card>
      </div>
    </div>
  </div>;
};

const ContainerEdit = ({ st, id, nav, act }) => {
  const base = id ? st.containers.find(x => x.id === id) : { id: '', origin: '', destination: '', etd: '', eta: '', status: 'Booked', notes: [] };
  const [c, setC] = useState({ ...base }); const up = (k, v) => setC({ ...c, [k]: v });
  const valid = c.id.trim() && c.origin && c.destination && c.etd && c.eta;
  return <div className="page">
    <PageHead back={() => id ? nav('container', { id }) : nav('containers')} kicker={id ? 'Edit' : 'New container'} title={id || 'Container'}>
      <Btn v="primary" disabled={!valid} onClick={() => { const nid = act.saveContainer(c, id); nav('container', { id: nid }); }}>Save</Btn>
    </PageHead>
    <Card title="Container"><div className="form-grid">
      <Field label="Container number" req><input className="inp mono" placeholder="MSKU1234567" value={c.id} disabled={!!id} onChange={e => up('id', e.target.value.toUpperCase())}></input></Field>
      <Field label="Status"><Select value={c.status} onChange={v => up('status', v)} options={CONTAINER_STATUSES}></Select></Field>
      <Field label="Origin" req><input className="inp" placeholder="Shenzhen, CN" value={c.origin} onChange={e => up('origin', e.target.value)}></input></Field>
      <Field label="Destination" req><input className="inp" placeholder="Port Miami, US" value={c.destination} onChange={e => up('destination', e.target.value)}></input></Field>
      <Field label="Estimated departure" req><input type="date" className="inp" value={c.etd} onChange={e => up('etd', e.target.value)}></input></Field>
      <Field label="Estimated arrival" req><input type="date" className="inp" value={c.eta} onChange={e => up('eta', e.target.value)}></input></Field>
    </div></Card>
  </div>;
};

Object.assign(window, { SplitBox, OrderDetail, OrderEdit, ContainerDetail, ContainerEdit });