// ============================================================
// app.jsx — root: router, tweaks panel, easter eggs
// ============================================================
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scanline": 35,
  "vignette": 80,
  "phosphorGlow": 100,
  "density": "standard"
}/*EDITMODE-END*/;

function App() {
  // Route from URL hash, fallback to home
  const [route, setRoute] = useState(() => {
    const h = window.location.hash.replace("#", "");
    return ["home","products","research","contact"].includes(h) ? h : "home";
  });
  const [afterhours, setAfterhours] = useState(false);
  const [cookieDismissed, setCookieDismissed] = useState(() => {
    try { return sessionStorage.getItem("fl-cookie") === "1"; }
    catch { return false; }
  });

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Push CSS vars from tweaks
  useEffect(() => {
    const root = document.documentElement.style;
    root.setProperty("--scanline-opacity", (t.scanline / 100).toString());
    root.setProperty("--vignette-opacity", (t.vignette / 100).toString());

    const glow = t.phosphorGlow / 100;
    const phos = "#33ff66";
    root.setProperty("--glow-phosphor", `0 0 ${6*glow}px ${phos}${alphaHex(0.55*glow)}, 0 0 ${16*glow}px ${phos}${alphaHex(0.30*glow)}`);
  }, [t.scanline, t.vignette, t.phosphorGlow]);

  // After-hours body class
  useEffect(() => {
    document.body.classList.toggle("afterhours", afterhours);
  }, [afterhours]);

  // Route -> hash
  useEffect(() => {
    if (window.location.hash.replace("#", "") !== route) window.location.hash = route;
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route]);

  // Density
  useEffect(() => {
    document.documentElement.dataset.density = t.density;
  }, [t.density]);

  const handleAcceptCookie = () => {
    try { sessionStorage.setItem("fl-cookie", "1"); } catch (e) {}
    setCookieDismissed(true);
  };

  return (
    <>
      <SiteHeader
        route={route}
        onRoute={setRoute}
        onLogoClick={() => setAfterhours(a => !a)}
      />
      {route === "home"     && <HomePage onRoute={setRoute}/>}
      {route === "products" && <ProductsPage onRoute={setRoute}/>}
      {route === "research" && <ResearchPage/>}
      {route === "contact"  && <ContactPage/>}

      <SiteFooter onRoute={setRoute}/>

      <TerminalEgg afterhours={afterhours} setAfterhours={setAfterhours}/>

      {!cookieDismissed && <CookieNoticeModal onAccept={handleAcceptCookie}/>}

      <TweaksPanel title="Tweaks · FL-OS dev">
        <TweakSection label="Aesthetic">
          <TweakSlider label="Scanline opacity" value={t.scanline} min={0} max={100} unit="%"
                       onChange={(v) => setTweak("scanline", v)}/>
          <TweakSlider label="CRT vignette" value={t.vignette} min={0} max={100} unit="%"
                       onChange={(v) => setTweak("vignette", v)}/>
          <TweakSlider label="Phosphor glow" value={t.phosphorGlow} min={0} max={200} unit="%"
                       onChange={(v) => setTweak("phosphorGlow", v)}/>
        </TweakSection>

        <TweakSection label="Density">
          <TweakRadio label="Density" value={t.density}
                      options={[
                        { label: "Comfortable", value: "comfortable" },
                        { label: "Standard",    value: "standard" },
                        { label: "Archival",    value: "archival" },
                      ]}
                      onChange={(v) => setTweak("density", v)}/>
        </TweakSection>

        <TweakSection label="Navigate">
          <TweakRadio label="Route" value={route}
                      options={[
                        { label: "Home",     value: "home" },
                        { label: "Products", value: "products" },
                        { label: "Research", value: "research" },
                        { label: "Contact",  value: "contact" },
                      ]}
                      onChange={setRoute}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// helper: 0..1 -> 2-digit alpha hex
function alphaHex(a) {
  const v = Math.max(0, Math.min(255, Math.round(a * 255)));
  return v.toString(16).padStart(2, "0");
}

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