/* AIMSify Blog — Tweaks panel + app entry */

// Tweaks helpers are exposed to window by tweaks-panel.jsx
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle } = window;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "comfortable",
  "tags": "shown",
  "readtime": "shown",
  "heroStyle": "editorial"
}/*EDITMODE-END*/;

function App() {
  const route = useRoute();
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  // Apply tweaks to body
  useEffect(() => {
    document.body.dataset.density  = tweaks.density;
    document.body.dataset.tags     = tweaks.tags;
    document.body.dataset.readtime = tweaks.readtime;
    document.body.dataset.hero     = tweaks.heroStyle;
  }, [tweaks]);

  // Keyboard: ⌘K → search
  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        navigate('/search');
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // Route resolution
  const { parts } = route;
  let page;
  if (parts.length === 0) page = <IndexPage />;
  else if (parts[0] === 'post' && parts[1]) page = <ArticlePage slug={parts[1]} />;
  else if (parts[0] === 'category' && parts[1] && parts[2]) page = <CategoryPage kind={parts[1]} catKey={parts[2]} />;
  else if (parts[0] === 'author' && parts[1]) page = <AuthorPage id={parts[1]} />;
  else if (parts[0] === 'search') page = <SearchPage />;
  else if (parts[0] === 'offers' && parts[1]) page = <OfferPage slug={parts[1]} />;
  else if (parts[0] === 'lead-gen') page = <LeadGenOverviewPage />;
  else page = <NotFound />;

  return (
    <>
      {page}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout" />
        <TweakRadio label="Card density" value={tweaks.density}
          options={['comfortable', 'compact']}
          onChange={(v) => setTweak('density', v)} />
        <TweakRadio label="Hero" value={tweaks.heroStyle}
          options={['editorial', 'minimal']}
          onChange={(v) => setTweak('heroStyle', v)} />
        <TweakSection label="Card chrome" />
        <TweakRadio label="Framework tags" value={tweaks.tags}
          options={['shown', 'hidden']}
          onChange={(v) => setTweak('tags', v)} />
        <TweakRadio label="Read time" value={tweaks.readtime}
          options={['shown', 'hidden']}
          onChange={(v) => setTweak('readtime', v)} />
      </TweaksPanel>
    </>
  );
}

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