/* app.jsx — router, shell, tweaks */

const ROUTES = ['start', 'kurse', 'wiki', 'kw-plan', 'checkliste', 'plan-7', 'shop'];

function getRoute() {
  const h = (location.hash || '').replace(/^#\/?/, '').trim();
  const seg = h.split('/')[0];
  if (seg === 'admin') return 'admin';
  return ROUTES.includes(seg) ? seg : 'start';
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "oliv",
  "topStrip": true,
  "corner": "soft",
  "headingScale": 1
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState(getRoute());

  useEffect(() => {
    const onHash = () => { setRoute(getRoute()); window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' }); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const nav = (id) => {
    if (id === 'social') { window.open('https://instagram.com', '_blank', 'noopener'); return; }
    if (id === 'admin') { location.hash = '#/admin/dashboard'; return; }
    if (id === route) { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    location.hash = '#/' + id;
  };

  /* apply tweaks to root */
  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute('data-accent', t.accent);
    r.style.setProperty('--r-card-scale', t.corner === 'sharp' ? '0' : t.corner === 'round' ? '1.6' : '1');
    document.body.style.setProperty('--heading-scale', t.headingScale);
  }, [t.accent, t.corner, t.headingScale]);

  if (route === 'admin') {
    return <AdminApp onExit={() => { location.hash = '#/start'; }} />;
  }

  let page;
  switch (route) {
    case 'kurse': page = <KursePage onNav={nav} />; break;
    case 'wiki': page = <WikiPage onNav={nav} />; break;
    case 'kw-plan': page = <KwPlanPage onNav={nav} />; break;
    case 'checkliste': page = <ChecklistePage onNav={nav} />; break;
    case 'plan-7': page = <Plan7Page onNav={nav} />; break;
    case 'shop': page = <ShopPage onNav={nav} />; break;
    default: page = <HomePage onNav={nav} />;
  }

  return (
    <div className={`app ${t.topStrip ? '' : 'no-strip'} corner-${t.corner}`}>
      <Header route={route} onNav={nav} />
      {page}
      <Footer onNav={nav} />

      <TweaksPanel>
        <TweakSection label="Akzent-Stimmung" />
        <TweakRadio label="Farbe" value={t.accent}
          options={['oliv', 'anthrazit', 'stahlblau', 'sandgrau']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Form & Typografie" />
        <TweakRadio label="Ecken" value={t.corner}
          options={['sharp', 'soft', 'round']}
          onChange={(v) => setTweak('corner', v)} />
        <TweakSlider label="Überschriften" value={t.headingScale} min={0.9} max={1.15} step={0.05}
          onChange={(v) => setTweak('headingScale', v)} />
        <TweakToggle label="Behörden-Leiste oben" value={t.topStrip}
          onChange={(v) => setTweak('topStrip', v)} />
      </TweaksPanel>
    </div>
  );
}

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