// App root

const { useState: useS, useEffect: useE, useRef: useR } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 350,
  "secondaryHue": 200,
  "scanlines": 0.18,
  "glitchIntensity": 1,
  "neonRain": true,
  "customCursor": true,
  "skipBoot": false
}/*EDITMODE-END*/;

function App() {
  const [page, setPageRaw] = useS("home");
  const [booting, setBooting] = useS(true);
  const [trailerOpen, setTrailerOpen] = useS(false);
  const [tweaks, setTweak] = (typeof useTweaks === "function") ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  // Skip boot via query or tweak
  useE(() => {
    const skip = new URLSearchParams(location.search).get("noboot");
    if (skip || tweaks.skipBoot) setBooting(false);
  }, []);

  // Apply tweaks as CSS vars
  useE(() => {
    const r = document.documentElement;
    r.style.setProperty("--scanline-opacity", tweaks.scanlines);
    r.style.setProperty("--glitch-intensity", tweaks.glitchIntensity);
    // Recompute accent
    r.style.setProperty("--pink", `oklch(0.68 0.28 ${tweaks.accentHue})`);
    r.style.setProperty("--pink-glow", `oklch(0.78 0.30 ${tweaks.accentHue})`);
    r.style.setProperty("--cyan", `oklch(0.85 0.18 ${tweaks.secondaryHue})`);
    r.style.setProperty("--cyan-glow", `oklch(0.92 0.20 ${tweaks.secondaryHue})`);
    if (!tweaks.customCursor) document.body.style.cursor = "auto";
    else document.body.style.cursor = "none";
  }, [tweaks]);

  // Scroll to top on page change
  useE(() => { window.scrollTo(0, 0); }, [page]);

  const setPage = (p) => setPageRaw(p);

  if (booting) return (
    <>
      <BootScreen onDone={() => setBooting(false)} />
      {tweaks.customCursor && <Cursor />}
    </>
  );

  let pageEl;
  switch (page) {
    case "nemesis": pageEl = <NemesisPage setPage={setPage} openTrailer={() => setTrailerOpen(true)} />; break;
    case "signup": pageEl = <SignupPage setPage={setPage} />; break;
    case "devlog": pageEl = <DevlogPage setPage={setPage} />; break;
    case "about": pageEl = <AboutPage setPage={setPage} />; break;
    case "contact": pageEl = <ContactPage setPage={setPage} />; break;
    default: pageEl = <HomePage setPage={setPage} openTrailer={() => setTrailerOpen(true)} />;
  }

  return (
    <>
      {tweaks.neonRain && <NeonRain />}
      {tweaks.customCursor && <Cursor />}
      <div className="page-wrap">
        <Nav page={page} setPage={setPage} />
        <div style={{ flex: 1 }} key={page}>
          {pageEl}
        </div>
        <Footer setPage={setPage} />
      </div>

      <Modal open={trailerOpen} onClose={() => setTrailerOpen(false)}>
        <TrailerContent onClose={() => setTrailerOpen(false)} />
      </Modal>

      {typeof TweaksPanel === "function" && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Accents">
            <TweakSlider label="Primary hue" value={tweaks.accentHue} min={0} max={360} step={1} onChange={v => setTweak("accentHue", v)} />
            <TweakSlider label="Secondary hue" value={tweaks.secondaryHue} min={0} max={360} step={1} onChange={v => setTweak("secondaryHue", v)} />
          </TweakSection>
          <TweakSection label="Effects">
            <TweakSlider label="Scanlines" value={tweaks.scanlines} min={0} max={0.5} step={0.01} onChange={v => setTweak("scanlines", v)} />
            <TweakSlider label="Glitch" value={tweaks.glitchIntensity} min={0} max={3} step={0.1} onChange={v => setTweak("glitchIntensity", v)} />
            <TweakToggle label="Neon rain" value={tweaks.neonRain} onChange={v => setTweak("neonRain", v)} />
            <TweakToggle label="Custom cursor" value={tweaks.customCursor} onChange={v => setTweak("customCursor", v)} />
            <TweakToggle label="Skip boot" value={tweaks.skipBoot} onChange={v => setTweak("skipBoot", v)} />
          </TweakSection>
          <TweakSection label="Navigate">
            <TweakSelect label="Page" value={page} options={PAGES.map(p => ({ value: p.id, label: `${p.code} · ${p.label}` }))} onChange={v => setPage(v)} />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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