/* global React, ReactDOM */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "photo",
  "gridIntensity": 10,
  "scanlines": true,
  "density": "spacious"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [interestOpen, setInterestOpen] = useState(false);
  const route = window.useRoute();
  const openInterest = () => setInterestOpen(true);
  const closeInterest = () => setInterestOpen(false);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--grid-intensity", (tweaks.gridIntensity / 100).toFixed(3));
    root.style.setProperty("--scanline-opacity", tweaks.scanlines ? "0.35" : "0");
    root.style.setProperty("--density", tweaks.density === "compact" ? "0.7" : "1");
  }, [tweaks]);

  const { TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakToggle } = window;

  let page;
  if (route === "/about") page = <window.AboutPage />;
  else if (route === "/compete") page = <window.CompetePage openInterest={openInterest} />;
  else if (route === "/sponsor") page = <window.SponsorPage />;
  else if (route === "/gallery/2025") page = <window.GalleryYearPage year="2025" />;
  else if (route === "/gallery/2024") page = <window.GalleryYearPage year="2024" />;
  else if (route === "/gallery") page = <window.GalleryYearPage year="2025" />;
  else if (route === "/register-interest") page = <window.RegisterPage />;
  else page = <window.HomePage openInterest={openInterest} />;

  return (
    <>
      <div className="global-grid"></div>
      <div className="noise"></div>
      <div className="vignette"></div>
      {tweaks.scanlines && <div className="scanlines"></div>}

      <window.NavbarV2 route={route} openInterest={openInterest} />

      <main className="route-host" key={route}>
        {page}
      </main>

      <window.FooterV2 openInterest={openInterest} />

      <window.InterestModal open={interestOpen} onClose={closeInterest} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio
            label="Hero variant"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { label: "Blueprint", value: "blueprint" },
              { label: "Photo", value: "photo" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Atmosphere">
          <TweakSlider
            label="Grid intensity"
            min={0} max={20} step={1}
            value={tweaks.gridIntensity}
            onChange={(v) => setTweak("gridIntensity", v)}
            unit="%"
          />
          <TweakToggle
            label="Scanlines / CRT"
            value={tweaks.scanlines}
            onChange={(v) => setTweak("scanlines", v)}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { label: "Compact", value: "compact" },
              { label: "Spacious", value: "spacious" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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