/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */
const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "currentBand": "all",
  "themeOverride": "auto",
  "darkMode": false,
  "density": "regular",
  "heroVariant": "today"
}/*EDITMODE-END*/;

function applyAccent(bandId, override) {
  const b = bandById(bandId);
  let accent = b.color;
  let ink = b.ink;
  let accentSoft = `color-mix(in oklab, ${accent} 14%, transparent)`;
  if (override && override !== 'auto') {
    accent = override;
    ink = '#fff';
    accentSoft = `color-mix(in oklab, ${override} 14%, transparent)`;
  }
  document.documentElement.style.setProperty('--accent', accent);
  document.documentElement.style.setProperty('--accent-ink', ink);
  document.documentElement.style.setProperty('--accent-soft', accentSoft);
  document.documentElement.style.setProperty('--band-color', b.color);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [search, setSearch] = useState('');

  // current band — driven by Tweaks state
  const active = t.currentBand;
  const setActive = (id) => setTweak('currentBand', id);

  useEffect(() => {
    document.documentElement.dataset.theme = t.darkMode ? 'dark' : 'light';
  }, [t.darkMode]);

  useEffect(() => {
    applyAccent(active, t.themeOverride);
  }, [active, t.themeOverride]);

  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        document.querySelector('.bf-search input')?.focus();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const bandOptions = window.BANDORI_DATA.BANDS.map(b => ({ value: b.id, label: b.romaji }));

  return (
    <div className="bf-shell">
      <UtilityBar />
      <Masthead search={search} setSearch={setSearch} />
      <PrimaryNav />
      <BandSwitcher active={active} setActive={setActive} />
      <Hero active={active} />

      <main className="bf-main">
        <div className="bf-container">
          <CalendarStrip />
        </div>
      </main>

      <QuickAccess />

      <Footer />

      <TweaksPanel title="调节">
        <TweakSection label="当前团体" />
        <TweakSelect
          label="筛选团体"
          value={t.currentBand}
          options={bandOptions}
          onChange={(v) => setTweak('currentBand', v)}
        />

        <TweakSection label="主题色" />
        <TweakColor
          label="强调色覆写"
          value={t.themeOverride}
          options={['auto', '#ff5a85', '#cd2c34', '#f1b500', '#7e9bff', '#3a3f7a', '#a886cf', '#3b6ea7', '#2a1d3a']}
          onChange={(v) => setTweak('themeOverride', v)}
        />

        <TweakSection label="显示" />
        <TweakToggle
          label="深色模式"
          value={t.darkMode}
          onChange={(v) => setTweak('darkMode', v)}
        />
      </TweaksPanel>
    </div>
  );
}

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