/* Viamar Mobile — Shipments list + More */

function ShipRow({ s, onOpen }) {
  return (
    <div onClick={() => onOpen(s)} style={{ background: '#fff', borderRadius: 16, padding: 15, border: '1px solid ' + T.line2, cursor: 'pointer', marginBottom: 11, boxShadow: '0 1px 2px rgba(10,27,46,0.04)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
        <div style={{ width: 40, height: 40, borderRadius: 11, background: T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Icon name={s.cargoType} size={22} color={T.navy} stroke={1.9} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 14.5, color: T.ink, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.cargo}</div>
          <div style={{ fontFamily: FM, fontSize: 10.5, color: T.muted }}>{s.id} · {s.to}</div>
        </div>
        <Status kind={s.kind} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <span style={{ fontFamily: FM, fontSize: 10.5, color: T.faint }}>{s.fromPort}</span>
        <div style={{ flex: 1 }}><Progress value={s.progress} h={4} /></div>
        <span style={{ fontFamily: FM, fontSize: 10.5, color: T.faint }}>{s.toPort}</span>
      </div>
    </div>
  );
}

function ShipmentsScreen({ onOpenShipment }) {
  const [tab, setTab] = React.useState('active');
  const [extra, setExtra] = React.useState(() => (window.ViamarStore ? ViamarStore.getShipments() : []));
  React.useEffect(() => {
    if (!window.ViamarStore) return;
    const refresh = () => setExtra(ViamarStore.getShipments());
    refresh();
    return ViamarStore.subscribe(refresh);
  }, []);
  const extraIds = new Set(extra.map(s => s.id));
  const all = [...extra, ...SHIPMENTS.filter(s => !extraIds.has(s.id))];
  const list = all.filter(s => tab === 'active' ? s.kind !== 'delivered' : s.kind === 'delivered');
  return (
    <div className="m-screen" style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T.paper }}>
      <div style={{ background: T.navy, padding: '54px 20px 18px', flexShrink: 0 }}>
        <Kicker color={T.red} style={{ marginBottom: 7 }}>Live tracking</Kicker>
        <Display size={26} color="#fff">Your shipments</Display>
        <div style={{ display: 'flex', gap: 6, background: 'rgba(255,255,255,0.07)', borderRadius: 12, padding: 4, marginTop: 16 }}>
          {[['active', 'Active'], ['delivered', 'Delivered']].map(([id, lbl]) => (
            <div key={id} onClick={() => setTab(id)} style={{ flex: 1, textAlign: 'center', padding: '9px 0', borderRadius: 9, cursor: 'pointer', fontFamily: FB, fontWeight: 700, fontSize: 13, color: tab === id ? T.navy : 'rgba(255,255,255,0.6)', background: tab === id ? '#fff' : 'transparent', transition: 'all .2s' }}>{lbl}</div>
          ))}
        </div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '18px 20px 28px' }}>
        {extra.length > 0 && tab === 'active' && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontFamily: FM, fontSize: 10.5, color: T.green, letterSpacing: 0.3 }}>
            <Icon name="checkC" size={15} color={T.green} stroke={2} /> {extra.length} newly confirmed by your agent
          </div>
        )}
        {list.map(s => <ShipRow key={s.id} s={s} onOpen={onOpenShipment} />)}
      </div>
    </div>
  );
}

function MoreRowM({ icon, title, sub, onClick, last }) {
  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={19} color={T.navy} stroke={1.9} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: FB, fontWeight: 600, fontSize: 14.5, color: T.ink }}>{title}</div>
        {sub && <div style={{ fontFamily: FB, fontSize: 11.5, color: T.muted }}>{sub}</div>}
      </div>
      <Icon name="chevR" size={17} color={T.faint} stroke={2.2} />
    </div>
  );
}

function MoreScreenM({ onChat }) {
  return (
    <div className="m-screen" style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T.paper }}>
      <div style={{ background: T.navy, padding: '54px 20px 24px', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'linear-gradient(135deg,#2C5172,#112A44)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FD, fontWeight: 800, fontSize: 22, color: '#fff', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.14)' }}>A</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 19, color: '#fff', fontStretch: '110%' }}>Alessandro M.</div>
            <div style={{ fontFamily: FM, fontSize: 11, color: 'rgba(255,255,255,0.55)' }}>Member since 2024 · 3 shipments</div>
          </div>
        </div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '18px 20px 28px' }}>
        {/* support callout */}
        <div onClick={onChat} style={{ display: 'flex', alignItems: 'center', gap: 13, background: T.navy, borderRadius: 18, padding: 18, marginBottom: 20, cursor: 'pointer' }}>
          <div style={{ width: 46, height: 46, borderRadius: 13, background: T.red, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="phone" size={24} color="#fff" stroke={2} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 16, color: '#fff', fontStretch: '110%' }}>Chat with support</div>
            <div style={{ fontFamily: FB, fontSize: 12, color: 'rgba(255,255,255,0.65)' }}>Marco is online · replies in minutes</div>
          </div>
          <Icon name="chevR" size={20} color="rgba(255,255,255,0.6)" stroke={2.2} />
        </div>

        <Kicker color={T.navy3} style={{ marginBottom: 10, paddingLeft: 2 }}>Account</Kicker>
        <Card pad={0} style={{ overflow: 'hidden', marginBottom: 20 }}>
          <MoreRowM icon="box" title="My shipments" sub="3 total · 1 active" last />
          <MoreRowM icon="doc" title="Documents & customs" sub="Bills of lading, B-13, insurance" />
          <MoreRowM icon="user" title="Profile & contacts" sub="Consignees, addresses" />
          <MoreRowM icon="shield" title="Recover shipments" sub="Email magic link for another device" onClick={() => window.ViamarAPI && ViamarAPI.promptRecovery()} />
        </Card>

        <Kicker color={T.navy3} style={{ marginBottom: 10, paddingLeft: 2 }}>Viamar</Kicker>
        <Card pad={0} style={{ overflow: 'hidden', marginBottom: 20 }}>
          <MoreRowM icon="phone" title="Call us" sub="1-800-277-7570 · Mon–Fri" last />
          <MoreRowM icon="globe" title="Where we ship" sub="250+ ports worldwide" />
          <MoreRowM icon="shield" title="Cargo insurance" sub="Coverage & claims" />
        </Card>

        <div style={{ textAlign: 'center', padding: '8px 0 4px' }}>
          <div style={{ fontFamily: FD, fontWeight: 900, fontSize: 18, color: T.faint, fontStretch: '125%', letterSpacing: '0.04em' }}>VIA<span style={{ color: 'rgba(221,28,36,0.4)' }}>MAR</span></div>
          <div style={{ fontFamily: FM, fontSize: 9.5, color: T.faint, letterSpacing: 1, marginTop: 4 }}>C.I.F.F.A. MEMBER · SINCE 1976</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ShipmentsScreen, MoreScreenM });