/* Viamar Ops — Shipments pipeline board + drawer */

const STAGE_TONE = { Booked: T.red, Pickup: T.amber, Warehouse: T.navy3, Loaded: '#7A5AA8', Sailing: T.amber, Customs: '#7A5AA8', Delivered: T.green };

function BoardCard({ s, onClick }) {
  return (
    <div onClick={onClick} style={{ background: '#fff', borderRadius: 13, border: '1px solid ' + T.line2, padding: 13, cursor: 'pointer', boxShadow: '0 1px 2px rgba(10,27,46,0.04)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 9 }}>
        <div style={{ width: 32, height: 32, borderRadius: 9, background: T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Icon name={s.cargoType} size={17} color={T.navy} stroke={1.9} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 12.5, color: T.ink, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.cargo}</div>
          <div style={{ fontFamily: FM, fontSize: 9.5, color: T.muted }}>{s.id}</div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: FM, fontSize: 10, color: T.muted }}>{s.to}</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <span style={{ width: 18, height: 18, borderRadius: '50%', background: T.navy, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FD, fontWeight: 800, fontSize: 9 }}>{s.agent[0]}</span>
          <span style={{ fontFamily: FM, fontSize: 9.5, color: T.faint }}>{s.eta}</span>
        </div>
      </div>
    </div>
  );
}

function ShipDrawer({ s, stage, onClose, onAdvance, onToast }) {
  const idx = OPS_STAGES.indexOf(stage);
  const nextStage = OPS_STAGES[idx + 1];
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 80, background: 'rgba(6,16,28,0.4)', display: 'flex', justifyContent: 'flex-end' }}>
      <div className="drawer vscroll" onClick={e => e.stopPropagation()} style={{ width: 420, background: T.paper, height: '100%', overflowY: 'auto', boxShadow: '-20px 0 50px rgba(0,0,0,0.25)' }}>
        {/* header */}
        <div style={{ background: T.navy, padding: '24px 24px 22px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <span style={{ fontFamily: FM, fontSize: 11, color: 'rgba(255,255,255,0.55)' }}>{s.id}</span>
            <div onClick={onClose} style={{ width: 32, height: 32, borderRadius: 9, background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
              <span style={{ display: 'flex', transform: 'rotate(45deg)' }}><Icon name="plus" size={18} color="#fff" stroke={2.2} /></span>
            </div>
          </div>
          <Display size={21} color="#fff">{s.cargo}</Display>
          <div style={{ fontFamily: FB, fontSize: 13, color: 'rgba(255,255,255,0.6)', marginTop: 5 }}>{s.customer} · {s.to}</div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 14, background: 'rgba(255,255,255,0.08)', borderRadius: 999, padding: '6px 12px' }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: STAGE_TONE[stage] || T.red }} />
            <span style={{ fontFamily: FM, fontSize: 10.5, fontWeight: 700, color: '#fff', letterSpacing: 0.5, textTransform: 'uppercase' }}>{stage}</span>
          </div>
        </div>

        <div style={{ padding: '20px 24px 40px' }}>
          {/* facts */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 22 }}>
            {[['Agent', s.agent], ['ETA', s.eta], ['Vessel', s.vessel], ['Seal #', s.seal]].map(([l, v], i) => (
              <div key={i} style={{ background: '#fff', borderRadius: 12, border: '1px solid ' + T.line2, padding: '11px 13px' }}>
                <div style={{ fontFamily: FM, fontSize: 8.5, letterSpacing: 0.8, color: T.faint, textTransform: 'uppercase' }}>{l}</div>
                <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 13, color: T.ink, marginTop: 3 }}>{v}</div>
              </div>
            ))}
          </div>

          {/* loading photos uploader */}
          <SectionHead title="Loading photos" action={s.photos > 0 ? s.photos + ' uploaded' : 'Upload'} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 22 }}>
            {['Vehicle secured', 'Wheel straps & blocking', 'Container seal', 'Pre-load inspection'].map((cap, i) => (
              <AssetImage key={i} src={[ASSETS.container, ASSETS.warehouse, ASSETS.truck, ASSETS.aiScan][i]} alt={cap} style={{ width: '100%', height: 96, borderRadius: 12 }} />
            ))}
          </div>

          {/* actions */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {nextStage
              ? <Btn full variant="primary" icon="arrowR" onClick={() => { onAdvance(s.id, nextStage); onToast(s.id + ' advanced to ' + nextStage); }}>Advance to {nextStage}</Btn>
              : <div style={{ textAlign: 'center', fontFamily: FB, fontWeight: 700, fontSize: 13, color: T.green, padding: 10 }}>✓ Delivered — shipment closed</div>}
            <div style={{ display: 'flex', gap: 10 }}>
              <Btn variant="ghost" icon="doc" onClick={() => onToast('Bill of lading generated · ' + s.id)} style={{ flex: 1 }}>Generate BL</Btn>
              <Btn variant="ghost" icon="phone" onClick={() => onToast('Update sent to ' + s.customer)} style={{ flex: 1 }}>Notify customer</Btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ShipmentsBoardScreen({ onToast }) {
  const [overrides, setOverrides] = React.useState({});
  const [open, setOpen] = React.useState(null);
  const stageOf = (s) => overrides[s.id] || s.stage;
  const advance = (id, ns) => setOverrides(o => ({ ...o, [id]: ns }));
  const openShip = open ? OPS_PIPELINE.find(s => s.id === open) : null;

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <div style={{ padding: '24px 36px 14px', flexShrink: 0 }}>
        <Display size={22} color={T.ink}>Shipments board</Display>
        <div style={{ fontFamily: FM, fontSize: 11.5, color: T.muted, marginTop: 4 }}>{OPS_PIPELINE.length} active · drag-free kanban · click a card to manage</div>
      </div>
      <div className="vscroll" style={{ flex: 1, overflowX: 'auto', overflowY: 'hidden', padding: '6px 36px 30px' }}>
        <div style={{ display: 'flex', gap: 16, height: '100%', minWidth: 'min-content' }}>
          {OPS_STAGES.map(st => {
            const cards = OPS_PIPELINE.filter(s => stageOf(s) === st);
            return (
              <div key={st} style={{ width: 226, flexShrink: 0, display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, padding: '0 2px' }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: STAGE_TONE[st] || T.navy3 }} />
                  <span style={{ fontFamily: FD, fontWeight: 800, fontSize: 13, color: T.ink, fontStretch: '110%', flex: 1 }}>{st}</span>
                  <span style={{ fontFamily: FM, fontSize: 11, color: T.faint }}>{cards.length}</span>
                </div>
                <div className="vscroll" style={{ flex: 1, overflowY: 'auto', background: '#F4F5F7', borderRadius: 14, padding: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {cards.map(s => <BoardCard key={s.id} s={s} onClick={() => setOpen(s.id)} />)}
                  {cards.length === 0 && <div style={{ fontFamily: FM, fontSize: 10.5, color: T.faint, textAlign: 'center', padding: '16px 0' }}>—</div>}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      {openShip && <ShipDrawer s={openShip} stage={stageOf(openShip)} onClose={() => setOpen(null)} onAdvance={advance} onToast={onToast} />}
    </div>
  );
}

Object.assign(window, { ShipmentsBoardScreen });