/* global React, ReactDOM, useBotState, TopBar, SideRail, StatusBar,
   Dashboard, StrategyPage, PositionsPage, OrdersPage, WebhooksPage, RiskPage, AuditPage, SettingsPage,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "default",
  "accent": "cyan",
  "showSparkline": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  cyan:   { '--accent': 'oklch(0.78 0.13 220)', '--accent-dim': 'oklch(0.55 0.10 220)', '--accent-bg': 'oklch(0.78 0.13 220 / 0.12)' },
  green:  { '--accent': 'oklch(0.78 0.16 145)', '--accent-dim': 'oklch(0.55 0.13 145)', '--accent-bg': 'oklch(0.78 0.16 145 / 0.12)' },
  amber:  { '--accent': 'oklch(0.82 0.15 80)',  '--accent-dim': 'oklch(0.60 0.12 80)',  '--accent-bg': 'oklch(0.82 0.15 80 / 0.12)' },
  violet: { '--accent': 'oklch(0.74 0.16 295)', '--accent-dim': 'oklch(0.55 0.13 295)', '--accent-bg': 'oklch(0.74 0.16 295 / 0.12)' },
};

function App() {
  const [page, setPage] = useState('dash');
  const s = useBotState();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply tweaks
  useEffect(() => {
    const root = document.documentElement;
    const preset = ACCENT_PRESETS[t.accent] || ACCENT_PRESETS.cyan;
    Object.entries(preset).forEach(([k, v]) => root.style.setProperty(k, v));
  }, [t.accent]);

  useEffect(() => {
    document.body.classList.remove('density-compact', 'density-roomy');
    if (t.density === 'compact') document.body.classList.add('density-compact');
    if (t.density === 'roomy') document.body.classList.add('density-roomy');
  }, [t.density]);

  // F1-F8 hotkeys
  useEffect(() => {
    const handler = (e) => {
      const map = { F1: 'dash', F2: 'strat', F3: 'pos', F4: 'orders', F5: 'webhooks', F6: 'risk', F7: 'audit', F8: 'settings' };
      if (map[e.key]) { e.preventDefault(); setPage(map[e.key]); }
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault(); s.setKillSwitch(!s.killSwitch);
      }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [s.killSwitch]);

  return (
    <div className="app">
      <TopBar page={page} setPage={setPage}
              mode={s.mode} running={s.running} killSwitch={s.killSwitch} />
      <div className="main">
        <SideRail {...s} />
        <main className="content">
          {page === 'dash'   && <Dashboard s={s} />}
          {page === 'strat'  && <StrategyPage s={s} />}
          {page === 'pos'    && <PositionsPage s={s} />}
          {page === 'orders' && <OrdersPage s={s} />}
          {page === 'webhooks' && <WebhooksPage s={s} />}
          {page === 'risk'   && <RiskPage s={s} />}
          {page === 'audit'  && <AuditPage s={s} />}
          {page === 'settings' && <SettingsPage s={s} />}
        </main>
      </div>
      <StatusBar tickCount={s.tickCount} mode={s.mode} running={s.running} />

      <TweaksPanel>
        <TweakSection label="Density">
          <TweakRadio label="Density"
                      value={t.density}
                      options={['compact', 'default', 'roomy']}
                      onChange={(v) => setTweak('density', v)} />
        </TweakSection>
        <TweakSection label="Theme">
          <TweakRadio label="Accent"
                      value={t.accent}
                      options={['cyan', 'green', 'amber', 'violet']}
                      onChange={(v) => setTweak('accent', v)} />
          <TweakColor label="Swatch"
                      value={'#5fb3d4'}
                      options={['#5fb3d4', '#62c089', '#e6b14a', '#a986e6']}
                      onChange={(hex) => {
                        const map = { '#5fb3d4': 'cyan', '#62c089': 'green', '#e6b14a': 'amber', '#a986e6': 'violet' };
                        if (map[hex]) setTweak('accent', map[hex]);
                      }} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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