/* Viamar Ops — Overview */

function KpiCard({ k }) {
  const tone = { red: T.red, navy: T.navy3, green: T.green, amber: T.amber }[k.tone] || T.navy3;
  return (
    <div style={{ flex: 1, background: '#fff', borderRadius: 16, border: '1px solid ' + T.line2, padding: '16px 18px', boxShadow: '0 1px 2px rgba(10,27,46,0.04)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <div style={{ width: 34, height: 34, borderRadius: 10, background: T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={k.icon} size={18} color={tone} stroke={2} />
        </div>
      </div>
      <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 28, color: T.ink, fontStretch: '115%', lineHeight: 1 }}>{k.value}</div>
      <div style={{ fontFamily: FB, fontWeight: 600, fontSize: 12.5, color: T.body, marginTop: 6 }}>{k.label}</div>
      <div style={{ fontFamily: FM, fontSize: 10.5, color: tone, marginTop: 3 }}>{k.sub}</div>
    </div>
  );
}

function ActionItem({ icon, title, sub, tag, tone, onClick, last }) {
  const c = tone === 'red' ? T.red : tone === 'amber' ? T.amber : T.navy3;
  return (
    <div onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 16px', cursor: 'pointer', borderTop: last ? 'none' : '1px solid ' + T.line2 }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={icon} size={18} color={c} stroke={1.9} /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 13.5, color: T.ink }}>{title}</div>
        <div style={{ fontFamily: FB, fontSize: 11.5, color: T.muted }}>{sub}</div>
      </div>
      {tag && <span style={{ fontFamily: FM, fontSize: 10, fontWeight: 700, color: c, background: tone === 'red' ? 'rgba(221,28,36,0.1)' : tone === 'amber' ? 'rgba(224,146,47,0.12)' : 'rgba(27,58,87,0.1)', padding: '4px 9px', borderRadius: 999, letterSpacing: 0.3, textTransform: 'uppercase' }}>{tag}</span>}
      <Icon name="chevR" size={16} color={T.faint} stroke={2.2} />
    </div>
  );
}

function OverviewScreen({ onNav }) {
  const stageCount = {};
  OPS_PIPELINE.forEach(s => { stageCount[s.stage] = (stageCount[s.stage] || 0) + 1; });
  const maxC = Math.max(...OPS_STAGES.map(s => stageCount[s] || 0), 1);
  return (
    <div className="vscroll" style={{ height: '100%', overflowY: 'auto' }}>
      <div style={{ padding: '28px 36px 44px', display: 'flex', flexDirection: 'column', gap: 24 }}>
        {/* KPIs */}
        <div style={{ display: 'flex', gap: 14 }}>
          {OPS_KPIS.map((k, i) => <KpiCard key={i} k={k} />)}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 24, alignItems: 'start' }}>
          {/* action queue */}
          <div>
            <SectionHead title="Action queue" action="Open quotes" onAction={() => onNav('quotes')} />
            <Card pad={0} style={{ overflow: 'hidden' }}>
              <ActionItem icon="spark" title="Review quote — Aisha Nasser" sub="Vancouver → Calgary · domestic · 25m ago" tag="New" tone="navy" onClick={() => onNav('quotes')} />
              <ActionItem icon="spark" title="Confirm price — Klajdi Hoxha" sub="Calgary → Lisbon · LCL · AI est. $1,320" tag="SLA 1h" tone="red" onClick={() => onNav('quotes')} />
              <ActionItem icon="doc" title="Verify bill of sale — Daniel Owusu" sub="Toyota Tacoma · Toronto → Tema" tag="Docs" tone="navy" onClick={() => onNav('quotes')} />
              <ActionItem icon="clock" title="Demurrage risk — Range Rover" sub="CN rail congestion · Lagos · monitor" tag="Alert" tone="amber" onClick={() => onNav('shipments')} />
              <ActionItem icon="anchor" title="EU sailing cutoff — today 3:00 PM" sub="MV Atlantic Crown · Bremerhaven" tag="Today" tone="navy" onClick={() => onNav('shipments')} last />
            </Card>

            <div style={{ marginTop: 24 }}>
              <SectionHead title="Pipeline" action="Open board" onAction={() => onNav('shipments')} />
              <Card>
                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, height: 130 }}>
                  {OPS_STAGES.map((st, i) => {
                    const n = stageCount[st] || 0;
                    return (
                      <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                        <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 15, color: n ? T.ink : T.faint }}>{n}</div>
                        <div style={{ width: '100%', height: Math.max(6, (n / maxC) * 86), background: n ? T.red : T.line, borderRadius: 6, transition: 'height .4s', transformOrigin: 'bottom' }} />
                        <div style={{ fontFamily: FM, fontSize: 8.5, color: T.muted, letterSpacing: 0.2, textAlign: 'center' }}>{st}</div>
                      </div>
                    );
                  })}
                </div>
              </Card>
            </div>
          </div>

          {/* right: inbox + activity */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div>
              <SectionHead title="Support inbox" action="Open inbox" onAction={() => onNav('inbox')} />
              <Card pad={0} style={{ overflow: 'hidden' }}>
                {OPS_THREADS.slice(0, 3).map((t, i) => (
                  <div key={t.id} onClick={() => onNav('inbox')} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '13px 16px', cursor: 'pointer', borderTop: i ? '1px solid ' + T.line2 : 'none' }}>
                    <div style={{ width: 34, height: 34, borderRadius: '50%', background: T.navy, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FD, fontWeight: 800, fontSize: 13, flexShrink: 0 }}>{t.avatar}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 13, color: T.ink }}>{t.customer}</div>
                      <div style={{ fontFamily: FB, fontSize: 11.5, color: T.muted, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.last}</div>
                    </div>
                    {t.unread && <span style={{ width: 8, height: 8, borderRadius: '50%', background: T.red, flexShrink: 0 }} />}
                    <span style={{ fontFamily: FM, fontSize: 10, color: T.faint, flexShrink: 0 }}>{t.time}</span>
                  </div>
                ))}
              </Card>
            </div>
            <div>
              <SectionHead title="Live activity" action="Insights" onAction={() => onNav('insights')} />
              <Card pad={0} style={{ overflow: 'hidden' }}>
                {PH_EVENTS.slice(0, 5).map((e, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 16px', borderTop: i ? '1px solid ' + T.line2 : 'none' }}>
                    <span style={{ width: 7, height: 7, borderRadius: '50%', background: e.ev === 'quote_abandoned' ? T.amber : T.green, flexShrink: 0 }} />
                    <span style={{ fontFamily: FM, fontSize: 11.5, fontWeight: 700, color: T.ink }}>{e.ev}</span>
                    <span style={{ flex: 1, fontFamily: FM, fontSize: 10.5, color: T.muted, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{e.who}</span>
                    <span style={{ fontFamily: FM, fontSize: 10, color: T.faint, flexShrink: 0 }}>{e.time}</span>
                  </div>
                ))}
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OverviewScreen });