// Main app — router + tweaks + theme/typeface wiring.

const { TopBar, Footer } = window.MOTD_ATOMS;
const { HomePage, ReleasesPage, ReleasePage }            = window.MOTD_PAGES_A;
const { MixesPage, EventsPage, AboutPage }              = window.MOTD_PAGES_B;

// Persist tweak defaults so the host can edit them in place.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme":     "dark",
  "typeface":  "sans",
  "hero":      "A · Cinematic",
  "density":   4,
  "accent":    "none",
  "graphics":  "on",
  "sigilStroke": 2.6,
  "bgGradient": "on",
  "sigilRotation": "weekly"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  ['none',   '#e7e7e6'],
  ['cobalt', '#3b78d6'],
  ['sea',    '#26a3a3'],
  ['rust',   '#c46a3a'],
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState(() => {
    const h = (window.location.hash || '').replace('#','').split('/');
    return h[0] || 'latest';
  });
  const [releaseId, setReleaseId] = React.useState(() => {
    const h = (window.location.hash || '').replace('#','').split('/');
    return h[1] || null;
  });

  // Apply theme/typeface to root + body.
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme',    t.theme);
    document.documentElement.setAttribute('data-typeface', t.typeface);
    document.documentElement.setAttribute('data-graphics', t.graphics);
    document.documentElement.setAttribute('data-bg-gradient', t.bgGradient);
    // Drives the rotation offset inside motd-sigils.jsx — changes apply
    // on the next render of any <Sigil> (so flipping this in Tweaks shifts
    // every mark on the page in unison).
    window.MOTD_SIGIL_ROTATION = t.sigilRotation;
    const accent = ACCENT_OPTIONS.find(a => a[0] === t.accent)?.[1] || '#e7e7e6';
    document.documentElement.style.setProperty('--accent', accent);
  }, [t.theme, t.typeface, t.accent, t.graphics, t.bgGradient, t.sigilRotation]);

  // Sync URL hash so refresh keeps the page.
  React.useEffect(() => {
    const hash = page === 'release' && releaseId ? `${page}/${releaseId}` : page;
    if (window.location.hash !== '#' + hash) window.location.hash = hash;
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [page, releaseId]);

  // Prefetch the SoundCloud feed at app boot so the Podcast page is
  // already populated by the time the user navigates there (and so the
  // Home page's "Latest mix" block has the live data immediately).
  // Fire-and-forget — failures are handled inside fetchMotdChapters
  // (falls back to the static CHAPTERS list in proto-data.jsx).
  React.useEffect(() => {
    if (window.fetchMotdChapters) {
      window.fetchMotdChapters().catch(() => {});
    }
  }, []);

  // Listen to back/forward.
  React.useEffect(() => {
    const onHash = () => {
      const h = (window.location.hash || '').replace('#','').split('/');
      setPage(h[0] || 'latest');
      setReleaseId(h[1] || null);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const go = (p, id) => {
    setPage(p);
    if (p === 'release') setReleaseId(id);
  };

  let body;
  switch (page) {
    case 'releases': body = <ReleasesPage go={go} t={t} />; break;
    case 'release':  body = <ReleasePage  go={go} id={releaseId} t={t} />; break;
    case 'mixes':    body = <MixesPage    go={go} t={t} />; break;
    case 'events':   body = <EventsPage   go={go} t={t} />; break;
    case 'about':    body = <AboutPage    go={go} t={t} />; break;
    case 'contact':  body = <AboutPage    go={go} t={t} />; break; /* contact merged */
    case 'latest':
    default:         body = <HomePage     go={go} t={t} />;
  }

  return (
    <>
      <div className="site">
        <TopBar go={go} page={page} />
        {body}
        <Footer go={go} />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Background"
            value={t.theme}
            options={['dark','light']}
            onChange={(v) => setTweak('theme', v)}
          />
          <TweakRadio
            label="Typeface"
            value={t.typeface}
            options={['sans','serif']}
            onChange={(v) => setTweak('typeface', v)}
          />
          <TweakColor
            label="Accent"
            value={t.accent}
            options={ACCENT_OPTIONS.map(([k]) => k)}
            onChange={(v) => setTweak('accent', v)}
          />
          <TweakRadio
            label="Background"
            value={t.bgGradient}
            options={['flat','gradient']}
            onChange={(v) => setTweak('bgGradient', v === 'gradient' ? 'on' : 'off')}
          />
        </TweakSection>

        <TweakSection label="Home hero" />
        <TweakRadio
          label="Variant"
          value={t.hero}
          options={['A · Cinematic','B · Split','C · Typographic','D · Wall']}
          onChange={(v) => setTweak('hero', v)}
        />

        <TweakSection label="Catalog" />
        <TweakSlider
          label="Releases per row"
          value={t.density}
          min={3} max={5} step={1}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Label graphics" />
        <TweakRadio
          label="Sigils"
          value={t.graphics}
          options={['on','off']}
          onChange={(v) => setTweak('graphics', v)}
        />
        <TweakSelect
          label="Rotate"
          value={t.sigilRotation}
          options={['off','weekly','monthly','visit']}
          onChange={(v) => setTweak('sigilRotation', v)}
        />
        <TweakSlider
          label="Stroke weight"
          value={t.sigilStroke}
          min={1.2} max={4} step={0.2}
          onChange={(v) => setTweak('sigilStroke', v)}
        />

        <TweakSection label="Jump to page" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, padding: '4px 14px 14px' }}>
          {[
            ['latest','Latest'],
            ['releases','Label'],
            ['release','Locust ↗'],
            ['mixes','Podcast'],
            ['events','Events'],
            ['about','About'],
          ].map(([k,l]) => (
            <button key={k}
              onClick={() => go(k, 'locust-the-first-cause')}
              style={{
                background: page === k ? 'rgba(0,0,0,.08)' : 'transparent',
                border: '1px solid rgba(0,0,0,.12)',
                borderRadius: 6, padding: '8px 10px', cursor: 'pointer',
                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
                fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: '#29261b',
              }}>{l}</button>
          ))}
        </div>
      </TweaksPanel>
    </>
  );
}

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