// Neurasea Exchange — app shell (nav + balance + lang + ticker + mount)

function ExLangToggle() {
  const t = useTheme();
  const { lang, setLang } = useWebLang();
  return (
    <div style={{ display: 'inline-flex', background: t.panel3, borderRadius: 9, padding: 2, border: `1px solid ${t.line2}` }}>
      {[['en', 'EN'], ['zh', '中']].map(([v, l]) => (
        <button key={v} onClick={() => setLang(v)} style={{
          padding: '5px 10px', fontSize: 12, fontWeight: 600, fontFamily: t.sans, cursor: 'pointer',
          border: 'none', borderRadius: 7, background: lang === v ? t.panel : 'transparent',
          color: lang === v ? t.ink : t.ink2, transition: 'all .15s',
        }}>{l}</button>
      ))}
    </div>
  );
}

function ExTopBar({ route, go }) {
  const t = useTheme();
  const T = useT();
  const a = EX_DATA.account;
  const tabs = [
    { id: 'spot', label: 'Spot' },
    { id: 'futures', label: 'Futures' },
    { id: 'terminal', label: 'Terminal' },
  ];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, display: 'flex', alignItems: 'center', gap: 24, padding: '0 28px', height: 60, background: `color-mix(in oklch, ${t.win} 88%, transparent)`, backdropFilter: 'saturate(1.4) blur(14px)', WebkitBackdropFilter: 'saturate(1.4) blur(14px)', borderBottom: `1px solid ${t.line}` }}>
      <button onClick={() => go('spot')} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
        <div style={{ width: 30, height: 30, borderRadius: 9, background: t.ink, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Bolt size={17} color={t.draw}/></div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
          <span style={{ fontSize: 16.5, fontWeight: 720, letterSpacing: '-0.02em', color: t.ink }}>Neurasea</span>
          <span style={{ fontSize: 11.5, fontWeight: 650, fontFamily: t.mono, color: t.draw, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{T('Exchange')}</span>
        </div>
      </button>
      <nav style={{ display: 'flex', alignItems: 'center', gap: 4, marginLeft: 6 }}>
        {tabs.map(tab => {
          const on = route === tab.id;
          return (
            <button key={tab.id} onClick={() => go(tab.id)} style={{
              padding: '8px 14px', fontSize: 14, fontWeight: on ? 650 : 550, fontFamily: t.sans, cursor: 'pointer',
              border: 'none', borderRadius: 9, background: on ? t.panel3 : 'transparent', color: on ? t.ink : t.ink2, transition: 'all .15s',
            }}>{T(tab.label)}</button>
          );
        })}
      </nav>
      <div style={{ flex: 1 }}/>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontFamily: t.mono, color: t.live }}><StatusDot color={t.live} size={6} pulse/> {T('Markets open')}</span>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 11, color: t.ink3, fontFamily: t.mono, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{T('Balance')}</div>
          <div style={{ fontSize: 14, fontWeight: 680, fontFamily: t.mono, color: t.ink }}>{a.balance.toLocaleString()} <span style={{ color: t.ink3, fontWeight: 500 }}>kWh</span></div>
        </div>
        <Btn kind="accent" size="sm" color={t.draw} icon="plus">{T('Deposit')}</Btn>
        <ExLangToggle/>
        <Avatar label="AC" bg={t.panel3} fg={t.ink} size={32} radius={9}/>
      </div>
    </header>
  );
}

function ExApp() {
  const t = React.useMemo(() => makeTheme(false, 'green'), []);
  const [route, setRoute] = React.useState(() => localStorage.getItem('ns_ex_route') || 'spot');
  const go = (r) => { localStorage.setItem('ns_ex_route', r); setRoute(r); document.querySelector('#exScroll')?.scrollTo({ top: 0 }); };
  const url = 'exchange.neurasea.io/' + route;
  return (
    <WebLangProvider>
      <ThemeCtx.Provider value={t}>
        <div style={{ width: '100vw', height: '100vh', background: t.desk2 }}>
          <ChromeWindow url={url} width="100%" height="100%" tabs={[{ title: 'Neurasea Exchange' }, { title: 'Trading API docs' }]}>
            <div id="exScroll" style={{ height: '100%', overflow: 'auto', background: t.win, fontFamily: t.sans, color: t.ink }}>
              <ExTopBar route={route} go={go}/>
              <Ticker/>
              {route === 'spot' && <ExSpot/>}
              {route === 'futures' && <ExFutures/>}
              {route === 'terminal' && <ExTerminal/>}
            </div>
          </ChromeWindow>
        </div>
      </ThemeCtx.Provider>
    </WebLangProvider>
  );
}

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