/* Viamar Mobile — app shell (bottom nav, routing, pay sheet, toast) */

function MBottomNav({ tab, onTab }) {
  const items = [
    { id: 'activity', icon: 'home', label: 'Activity' },
    { id: 'shipments', icon: 'box', label: 'Shipments' },
    { id: 'chat', icon: 'phone', label: 'Support' },
    { id: 'more', icon: 'user', label: 'Profile' },
  ];
  return (
    <div style={{ flexShrink: 0, background: T.navy, paddingBottom: 28, paddingTop: 10, position: 'relative', zIndex: 40, boxShadow: '0 -1px 0 rgba(255,255,255,0.06)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around', padding: '0 14px' }}>
        {items.map(it => {
          const active = tab === it.id;
          return (
            <div key={it.id} onClick={() => onTab(it.id)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, cursor: 'pointer', padding: '0 6px', minWidth: 54, position: 'relative' }}>
              <Icon name={it.icon} size={23} color={active ? '#fff' : 'rgba(255,255,255,0.4)'} stroke={active ? 2.3 : 1.9} />
              <span style={{ fontFamily: FM, fontSize: 9, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', color: active ? '#fff' : 'rgba(255,255,255,0.4)' }}>{it.label}</span>
              {it.id === 'chat' && <span style={{ position: 'absolute', top: -2, right: 8, width: 7, height: 7, borderRadius: '50%', background: T.red, border: '1.5px solid ' + T.navy }} />}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function MobileApp() {
  const [tab, setTab] = React.useState('activity');
  const [pushed, setPushed] = React.useState(null); // {type:'detail',s} | {type:'chat'}
  const [pay, setPay] = React.useState(null);
  const [quoteOpen, setQuoteOpen] = React.useState(false);
  const [toast, setToast] = React.useState(null);

  const fireToast = (msg) => { setToast(msg); setTimeout(() => setToast(null), 3200); };
  const openShipment = (s) => setPushed({ type: 'detail', s });
  const openChat = () => {
    if (window.ViamarAnalytics) ViamarAnalytics.track('support_chat_opened', { source: 'mobile' });
    setPushed({ type: 'chat' });
  };
  const openPay = (s) => setPay(s);
  const openQuote = () => {
    if (window.ViamarAnalytics) ViamarAnalytics.track('quote_started', { source: 'mobile' });
    setQuoteOpen(true);
  };
  const onQuoteSubmitted = (ref, goTrack) => { setQuoteOpen(false); fireToast('Quote ' + ref + ' submitted — agent reviewing'); if (goTrack) { setPushed(null); setTab('shipments'); } };

  const onTab = (id) => {
    if (id === 'chat') { openChat(); return; }
    setPushed(null); setTab(id);
  };

  let screen, showNav = true;
  if (pushed && pushed.type === 'detail') {
    screen = <ShipmentDetailMobile s={pushed.s} onBack={() => setPushed(null)} onChat={openChat} onPay={openPay} />;
    showNav = false;
  } else if (pushed && pushed.type === 'chat') {
    screen = <ChatScreen onBack={() => setPushed(null)} />;
    showNav = false;
  } else if (tab === 'activity') {
    screen = <ActivityScreen onOpenShipment={openShipment} onChat={openChat} onPay={openPay} onQuote={openQuote} />;
  } else if (tab === 'shipments') {
    screen = <ShipmentsScreen onOpenShipment={openShipment} onQuote={openQuote} />;
  } else {
    screen = <MoreScreenM onChat={openChat} />;
  }

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden', background: T.navy }}>
      <div key={(pushed && pushed.type) || tab} style={{ flex: 1, minHeight: 0, position: 'relative' }}>{screen}</div>
      {showNav && <MBottomNav tab={tab} onTab={onTab} />}

      {/* New-quote FAB */}
      {showNav && (
        <div onClick={openQuote} style={{ position: 'absolute', right: 18, bottom: 92, zIndex: 50, width: 56, height: 56, borderRadius: 18, background: T.red, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 10px 26px rgba(221,28,36,0.5)', cursor: 'pointer', border: '3px solid ' + T.navy }}>
          <Icon name="spark" size={26} color="#fff" stroke={2.2} />
        </div>
      )}

      {quoteOpen && (
        <div style={{ position: 'absolute', inset: 0, zIndex: 85, background: T.navy }}>
          <QuoteFlow onClose={() => setQuoteOpen(false)} onSubmitted={onQuoteSubmitted} />
        </div>
      )}

      {pay && <PaySheet s={pay} onClose={() => setPay(null)} onPaid={(amt, method) => {
        if (window.ViamarAnalytics) ViamarAnalytics.track('payment_authorized', { shipment_id: pay.id, amount: amt, currency: 'CAD', method: method || 'unknown', source: 'mobile' });
        setPay(null);
        fireToast('Payment confirmed · $' + amt.toLocaleString() + ' CAD');
      }} />}

      {toast && (
        <div className="m-up" style={{ position: 'absolute', left: 16, right: 16, bottom: showNav ? 92 : 40, zIndex: 96, background: T.navy2, color: '#fff', borderRadius: 14, padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 12px 30px rgba(0,0,0,0.4)', border: '1px solid rgba(255,255,255,0.1)' }}>
          <div style={{ width: 26, height: 26, borderRadius: '50%', background: T.green, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="check" size={15} color="#fff" stroke={3} /></div>
          <span style={{ fontFamily: FB, fontWeight: 600, fontSize: 13 }}>{toast}</span>
        </div>
      )}
    </div>
  );
}

function Root() {
  return (
    <div style={{ height: '100vh', minHeight: 620, background: T.navy, overflow: 'hidden' }}>
      <MobileApp />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Root />);