/* Viamar Mobile — Activity home (glanceable status + action center + updates) */

const M_ACTIONS = [
  { id: 'pay', icon: 'shield', title: 'Approve quote & prepay', sub: 'Household goods · Lisbon', shipIdx: 1, kind: 'pay', accent: true },
  { id: 'doc', icon: 'doc', title: 'Upload commercial invoice', sub: 'Required before sailing · Lisbon', shipIdx: 1, kind: 'chat' },
  { id: 'del', icon: 'pin', title: 'Confirm delivery contact', sub: 'BMW M4 · Bremerhaven', shipIdx: 0, kind: 'chat' },
];

const M_UPDATES = [
  { icon: 'ship', title: 'Loaded & sailing', sub: 'BMW M4 · MV Atlantic Crown', time: '2d ago', c: T.green },
  { icon: 'camera', title: '32 loading photos added', sub: 'BMW M4 · VMR-48217', time: '2d ago', c: T.navy3 },
  { icon: 'doc', title: 'Container sealed · BL-7741-DE', sub: 'BMW M4 · VMR-48217', time: '5d ago', c: T.navy3 },
  { icon: 'spark', title: 'Quote submitted', sub: 'Household goods · Lisbon', time: '6d ago', c: T.red },
  { icon: 'checkC', title: 'Delivered — Kingston', sub: 'Harley-Davidson · VMR-47788', time: 'Apr 22', c: T.green },
];

function LiveHero({ s, onOpen }) {
  const next = (s.steps || []).find(x => !x.done);
  return (
    <div onClick={onOpen} style={{ background: '#fff', borderRadius: 20, overflow: 'hidden', cursor: 'pointer', boxShadow: '0 10px 30px rgba(0,0,0,0.18)' }}>
      <div style={{ padding: '16px 18px 14px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <div style={{ width: 40, height: 40, borderRadius: 11, background: T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={s.cargoType} size={22} color={T.navy} stroke={1.9} />
            </div>
            <div>
              <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 15, color: T.ink }}>{s.cargo}</div>
              <div style={{ fontFamily: FM, fontSize: 10.5, color: T.muted }}>{s.id}</div>
            </div>
          </div>
          <Status kind={s.kind} />
        </div>
        {/* route progress */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, margin: '4px 0 4px' }}>
          <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 13, color: T.ink, fontStretch: '110%' }}>{s.fromPort}</div>
          <div style={{ flex: 1, position: 'relative', height: 22, display: 'flex', alignItems: 'center' }}>
            <div style={{ flex: 1, height: 2.5, background: T.line, borderRadius: 2 }} />
            <div style={{ position: 'absolute', left: 0, width: `${s.progress}%`, height: 2.5, background: T.red, borderRadius: 2 }} />
            <div style={{ position: 'absolute', left: `${s.progress}%`, transform: 'translateX(-50%)', width: 26, height: 26, borderRadius: '50%', background: '#fff', boxShadow: '0 2px 7px rgba(0,0,0,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="ship" size={15} color={T.red} stroke={2} />
            </div>
          </div>
          <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 13, color: T.ink, fontStretch: '110%' }}>{s.toPort}</div>
        </div>
      </div>
      <div style={{ display: 'flex', borderTop: '1px solid ' + T.line2 }}>
        <div style={{ flex: 1, padding: '11px 18px' }}>
          <div style={{ fontFamily: FM, fontSize: 8.5, letterSpacing: 1, color: T.faint, textTransform: 'uppercase' }}>Next</div>
          <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 13, color: T.ink }}>{next ? next.t : 'Arrival'}</div>
        </div>
        <div style={{ width: 1, background: T.line2 }} />
        <div style={{ flex: 1, padding: '11px 18px' }}>
          <div style={{ fontFamily: FM, fontSize: 8.5, letterSpacing: 1, color: T.faint, textTransform: 'uppercase' }}>ETA</div>
          <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 13, color: T.ink }}>{s.eta}</div>
        </div>
      </div>
    </div>
  );
}

function ActionCard({ a, onClick }) {
  return (
    <div onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 13, background: '#fff', border: '1px solid ' + (a.accent ? 'rgba(221,28,36,0.25)' : T.line2), borderRadius: 16, padding: '14px 15px', cursor: 'pointer', boxShadow: a.accent ? '0 6px 18px rgba(221,28,36,0.1)' : '0 1px 2px rgba(10,27,46,0.04)' }}>
      <div style={{ width: 40, height: 40, borderRadius: 11, background: a.accent ? 'rgba(221,28,36,0.1)' : T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name={a.icon} size={20} color={a.accent ? T.red : T.navy} stroke={1.9} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 14, color: T.ink }}>{a.title}</div>
        <div style={{ fontFamily: FB, fontSize: 11.5, color: T.muted }}>{a.sub}</div>
      </div>
      <Icon name="chevR" size={19} color={a.accent ? T.red : T.faint} stroke={2.2} />
    </div>
  );
}

function ActivityScreen({ onOpenShipment, onChat, onPay }) {
  const live = SHIPMENTS[0];
  return (
    <div className="m-screen" style={{ height: '100%', overflowY: 'auto', background: T.navy }}>
      {/* header */}
      <div style={{ padding: '54px 20px 22px', background: T.navy }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontFamily: FM, fontSize: 11, letterSpacing: 0.5, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase' }}>Welcome back</div>
            <Display size={28} color="#fff" style={{ marginTop: 4 }}>Alessandro</Display>
          </div>
          <div style={{ display: 'flex', gap: 11 }}>
            <div style={{ position: 'relative', width: 42, height: 42, borderRadius: 13, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="bell" size={20} color="#fff" stroke={1.9} />
              <span style={{ position: 'absolute', top: 10, right: 11, width: 7, height: 7, borderRadius: '50%', background: T.red, border: '1.5px solid ' + T.navy }} />
            </div>
            <div style={{ width: 42, height: 42, borderRadius: '50%', background: 'linear-gradient(135deg,#2C5172,#112A44)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FD, fontWeight: 800, fontSize: 16, color: '#fff', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.12)' }}>A</div>
          </div>
        </div>
      </div>

      {/* live hero on navy */}
      <div style={{ padding: '0 20px 6px', background: T.navy }}>
        <div style={{ fontFamily: FM, fontSize: 10.5, fontWeight: 700, letterSpacing: 1, color: T.red, textTransform: 'uppercase', marginBottom: 11 }}>● Tracking live</div>
        <LiveHero s={live} onOpen={() => onOpenShipment(live)} />
      </div>

      {/* light sheet */}
      <div style={{ background: T.paper, borderRadius: '26px 26px 0 0', marginTop: 18, minHeight: 400, padding: '20px 20px 28px' }}>
        {/* action center */}
        <SectionHead title="Needs your attention" action={M_ACTIONS.length + ' items'} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 26 }}>
          {M_ACTIONS.map(a => (
            <ActionCard key={a.id} a={a} onClick={() => a.kind === 'pay' ? onPay(SHIPMENTS[a.shipIdx]) : onChat()} />
          ))}
        </div>

        {/* updates feed */}
        <SectionHead title="Recent updates" />
        <Card pad={0} style={{ overflow: 'hidden' }}>
          {M_UPDATES.map((u, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 16px', borderTop: i ? '1px solid ' + T.line2 : 'none' }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={u.icon} size={18} color={u.c} stroke={2} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 13.5, color: T.ink }}>{u.title}</div>
                <div style={{ fontFamily: FB, fontSize: 11.5, color: T.muted }}>{u.sub}</div>
              </div>
              <span style={{ fontFamily: FM, fontSize: 10.5, color: T.faint, flexShrink: 0 }}>{u.time}</span>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { ActivityScreen, M_ACTIONS, M_UPDATES });