/* App shell with router + tweaks */

const { useState, useEffect } = React;

function App() {
  const TWEAKS = /*EDITMODE-BEGIN*/{
    "accent": "#a4e635",
    "showNotebook": true,
    "showStats": true,
    "heroStyle": "Editorial"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(TWEAKS);
  const [route, setRoute] = useState({ page: 'home', article: null });

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
  }, [tweaks.accent]);

  const navigate = (page, opts = {}) => {
    setRoute({ page, article: opts.article || null });
    setTimeout(() => {
      if (opts.scrollTo) {
        const el = document.getElementById(opts.scrollTo);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else {
        window.scrollTo({ top: 0, behavior: 'instant' });
      }
    }, 50);
  };

  let pageEl;
  if (route.page === 'article') pageEl = <ArticlePage navigate={navigate} articleId={route.article} />;
  else if (route.page === 'in-focus') pageEl = <ArchivePage navigate={navigate} filter="in-focus" />;
  else if (route.page === 'beyond') pageEl = <ArchivePage navigate={navigate} filter="beyond" />;
  else if (route.page === 'about') pageEl = <AboutPage navigate={navigate} />;
  else if (route.page === 'infographics') pageEl = <InfographicsPage />;
  else pageEl = <HomePage navigate={navigate} />;

  return (
    <div data-screen-label={route.page === 'article' ? `Article · ${route.article}` : route.page}>
      <TopBar page={route.page} navigate={navigate} />
      {pageEl}
      <Footer navigate={navigate} />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakColor t={tweaks} setTweak={setTweak} k="accent"
            options={['#a4e635', '#f59e0b', '#ec4899', '#06b6d4']} />
        </TweakSection>
        <TweakSection title="Modules">
          <TweakToggle t={tweaks} setTweak={setTweak} k="showNotebook" label="Lab notebook" />
          <TweakToggle t={tweaks} setTweak={setTweak} k="showStats" label="Hero stats row" />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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