/* Viamar Desktop — app shell (sidebar + topbar + routing + tweaks) */

function Sidebar({ tab, onTab, onQuote }) {
  const nav = [
    { id: 'home', icon: 'home', label: 'Dashboard' },
    { id: 'track', icon: 'track', label: 'Track shipments' },
    { id: 'account', icon: 'user', label: 'Account' },
  ];
  return (
    <div style={{ width: 244, flexShrink: 0, background: T.navy, display: 'flex', flexDirection: 'column', padding: '22px 16px' }}>
      {/* logo */}
      <div style={{ padding: '4px 8px 22px', display: 'flex', flexDirection: 'column' }}>
        <ViamarLogo width={148} onDark />
        <span style={{ fontFamily: FM, fontSize: 7.5, letterSpacing: 2.5, color: 'rgba(255,255,255,0.45)', marginTop: 4 }}>SCILLA · EST. 1976</span>
      </div>

      {/* new quote CTA */}
      <Btn full variant="primary" icon="spark" onClick={onQuote} style={{ marginBottom: 22 }}>New quote</Btn>

      {/* nav */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1 }}>
        {nav.map(it => {
          const active = tab === it.id;
          return (
            <div key={it.id} onClick={() => onTab(it.id)} style={{
              display: 'flex', alignItems: 'center', gap: 13, padding: '11px 13px', borderRadius: 12, cursor: 'pointer',
              background: active ? 'rgba(255,255,255,0.08)' : 'transparent', transition: 'background .15s',
            }}
            onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
            onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
              <Icon name={it.icon} size={21} color={active ? '#fff' : 'rgba(255,255,255,0.55)'} stroke={active ? 2.2 : 1.9} />
              <span style={{ fontFamily: FB, fontWeight: active ? 700 : 600, fontSize: 14, color: active ? '#fff' : 'rgba(255,255,255,0.6)' }}>{it.label}</span>
              {active && <div style={{ marginLeft: 'auto', width: 6, height: 6, borderRadius: '50%', background: T.red }} />}
            </div>
          );
        })}
      </div>

      {/* support mini card */}
      <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, padding: 15, marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 6 }}>
          <Icon name="phone" size={16} color={T.red} stroke={2} />
          <span style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: 0.8, textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>Talk to an agent</span>
        </div>
        <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 16, color: '#fff', fontStretch: '110%' }}>1-800-277-7570</div>
      </div>

      {/* user */}
      <div onClick={() => onTab('account')} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '8px', borderRadius: 12, cursor: 'pointer' }}>
        <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'linear-gradient(135deg,#2C5172,#112A44)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FD, fontWeight: 800, fontSize: 15, color: '#fff', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.12)', flexShrink: 0 }}>A</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 13.5, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Alessandro M.</div>
          <div style={{ fontFamily: FM, fontSize: 10, color: 'rgba(255,255,255,0.5)' }}>3 shipments</div>
        </div>
      </div>
    </div>
  );
}

function TopBar({ title, sub }) {
  return (
    <div style={{ height: 74, flexShrink: 0, borderBottom: '1px solid ' + T.line, background: '#fff', display: 'flex', alignItems: 'center', padding: '0 36px', gap: 20 }}>
      <div style={{ flex: 1 }}>
        <Display size={20} color={T.ink}>{title}</Display>
        {sub && <div style={{ fontFamily: FM, fontSize: 11, color: T.muted, letterSpacing: 0.3, marginTop: 3 }}>{sub}</div>}
      </div>
      {/* search */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, background: T.paper, borderRadius: 12, padding: '10px 14px', width: 280, border: '1px solid ' + T.line2 }}>
        <Icon name="search" size={17} color={T.faint} stroke={2} />
        <input placeholder="Search shipments, ports, refs" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: FB, fontSize: 13, color: T.ink }} />
      </div>
      {/* bell */}
      <div style={{ position: 'relative', width: 42, height: 42, borderRadius: 12, background: T.paper, border: '1px solid ' + T.line2, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
        <Icon name="bell" size={20} color={T.navy} stroke={1.9} />
        <span style={{ position: 'absolute', top: 9, right: 11, width: 7, height: 7, borderRadius: '50%', background: T.red, border: '1.5px solid #fff' }} />
      </div>
    </div>
  );
}

const TWEAK_DEFAULTS = {
  accent: '#DD1C24',
  chrome: '#0A1B2E',
  headline: 'Ship anything, anywhere — by sea, land or air.',
};

const PAGE_META = {
  home: { title: 'Dashboard', sub: 'Welcome back, Alessandro' },
  track: { title: 'Track shipments', sub: 'Live status across your cargo' },
  account: { title: 'Account', sub: 'Profile, documents & credentials' },
};

function DesktopApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  T.red = t.accent;
  T.navy = t.chrome;

  const [tab, setTab] = React.useState('home');
  const [quoteOpen, setQuoteOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(SHIPMENTS[0]);
  const [toast, setToast] = React.useState(null);

  const openQuote = () => {
    if (window.ViamarAnalytics) ViamarAnalytics.track('quote_started', { source: 'desktop' });
    setQuoteOpen(true);
  };
  const fireToast = (msg) => { setToast(msg); setTimeout(() => setToast(null), 3400); };

  const onSubmitted = (ref, goTrack) => {
    setQuoteOpen(false);
    fireToast('Quote ' + ref + ' submitted — agent reviewing');
    if (goTrack) { setSelected(SHIPMENTS[1]); setTab('track'); }
    else setTab('home');
  };

  const openShipment = (s) => { setSelected(s); setTab('track'); };

  let screen;
  if (tab === 'home') screen = <DashboardScreen onQuote={openQuote} onOpenShipment={openShipment} onNav={setTab} headline={t.headline} />;
  else if (tab === 'track') screen = <TrackScreenDesktop selected={selected} onSelect={setSelected} onMessage={() => fireToast('Message sent to your agent — they typically reply within the hour')} />;
  else screen = <AccountScreen onQuote={openQuote} onNav={setTab} />;

  const meta = PAGE_META[tab];

  return (
    <div style={{ height: '100%', display: 'flex', background: T.paper, position: 'relative', overflow: 'hidden' }}>
      <Sidebar tab={tab} onTab={setTab} onQuote={openQuote} />
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        <TopBar title={meta.title} sub={meta.sub} />
        <div key={tab} className="screenfade" style={{ flex: 1, minHeight: 0, position: 'relative' }}>{screen}</div>
      </div>

      {quoteOpen && <QuoteWizardDesktop onClose={() => setQuoteOpen(false)} onSubmitted={onSubmitted} />}

      {toast && (
        <div className="toast" style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', bottom: 28, zIndex: 95, background: T.navy, color: '#fff', borderRadius: 14, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 11, boxShadow: '0 16px 40px 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.5 }}>{toast}</span>
        </div>
      )}

    </div>
  );
}

function Root() {
  return (
    <div id="stage" style={{ height: '100vh', minHeight: 720, background: T.paper, overflow: 'hidden' }}>
      <DesktopApp />
    </div>
  );
}

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