/* global React, ReactDOM, NavBar, Footer, HomePage, RegisterPage, PaymentPage, HubPage, TicketsPage,
   AboutPage, ContactPage, DonatePage, LoginGate,
   useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakRadio, TweakColor, TweakText */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandColor": "#F4A623",
  "paper": "#FFF7EA",
  "shape": "Sticker",
  "headlineFont": "Fredoka",
  "announce": "Now enrolling · Summer 2026",
  "headline": "Where kids find their spotlight"
}/*EDITMODE-END*/;

const STICKER = {
  "--bd": "2.5px", "--shadow": "5px 5px 0 var(--ink)", "--shadow-sm": "3px 3px 0 var(--ink)",
  "--shadow-lg": "8px 8px 0 var(--ink)", "--r-sm": "12px", "--r-md": "18px", "--r-lg": "28px",
};
const SOFT = {
  "--bd": "0px", "--shadow": "0 16px 40px rgba(33,29,23,.13)", "--shadow-sm": "0 8px 20px rgba(33,29,23,.10)",
  "--shadow-lg": "0 26px 64px rgba(33,29,23,.17)", "--r-sm": "16px", "--r-md": "24px", "--r-lg": "34px",
};

function applyTweaks(t) {
  const r = document.documentElement.style;
  r.setProperty("--display", `"${t.headlineFont}", system-ui, sans-serif`);
  r.setProperty("--gold", t.brandColor);
  r.setProperty("--gold-deep", t.brandColor);
  r.setProperty("--paper", t.paper);
  const shape = t.shape === "Soft" ? SOFT : STICKER;
  Object.entries(shape).forEach(([k, v]) => r.setProperty(k, v));
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useStateA(() => (location.hash.replace("#", "").split("?")[0] || "home"));
  const [enrollment, setEnrollment] = useStateA(null);

  // Auth state — persisted to localStorage
  const [user, setUser] = useStateA(() => {
    try { return JSON.parse(localStorage.getItem("ftw_user")) || null; } catch { return null; }
  });

  const login = (u) => {
    setUser(u);
    localStorage.setItem("ftw_user", JSON.stringify(u));
  };
  const logout = () => {
    setUser(null);
    localStorage.removeItem("ftw_user");
    navigate("home");
  };

  useEffectA(() => { applyTweaks(t); }, [t]);

  const navigate = (r) => {
    setRoute(r);
    location.hash = r;
    window.scrollTo({ top: 0, behavior: "instant" in document.documentElement.style ? "instant" : "auto" });
  };

  useEffectA(() => {
    const onHash = () => setRoute(location.hash.replace("#", "").split("?")[0] || "home");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  let page;
  if (route === "register")   page = <RegisterPage navigate={navigate} setEnrollment={setEnrollment} />;
  else if (route === "payment") page = user
    ? <PaymentPage navigate={navigate} enrollment={enrollment} />
    : <LoginGate navigate={navigate} onLogin={(u) => { login(u); navigate("payment"); }} />;
  else if (route === "hub")   page = user
    ? <HubPage navigate={navigate} user={user} />
    : <LoginGate navigate={navigate} onLogin={(u) => { login(u); navigate("hub"); }} />;
  else if (route === "tickets") page = <TicketsPage navigate={navigate} />;
  else if (route === "about")  page = <AboutPage navigate={navigate} />;
  else if (route === "donate")  page = <DonatePage navigate={navigate} />;
  else if (route === "contact") page = <ContactPage navigate={navigate} />;
  else                        page = <HomePage navigate={navigate} tweaks={t} />;

  return (
    <div>
      <NavBar route={route} navigate={navigate} user={user} onLogout={logout} />
      <main key={route} className="pop">{page}</main>
      <Footer navigate={navigate} />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Primary color" value={t.brandColor}
          options={["#F4A623", "#4BA697", "#F0563B", "#2F86BC", "#8A5BA6"]}
          onChange={(v) => setTweak("brandColor", v)} />
        <TweakColor label="Background" value={t.paper}
          options={["#FFF7EA", "#FFFFFF", "#FFF1EC", "#F2F6F3"]}
          onChange={(v) => setTweak("paper", v)} />

        <TweakSection label="Style & type" />
        <TweakRadio label="Shape" value={t.shape} options={["Sticker", "Soft"]}
          onChange={(v) => setTweak("shape", v)} />
        <TweakSelect label="Headline font" value={t.headlineFont}
          options={["Fredoka", "Baloo 2", "Bricolage Grotesque", "Quicksand"]}
          onChange={(v) => setTweak("headlineFont", v)} />

        <TweakSection label="Hero copy" />
        <TweakText label="Announcement" value={t.announce}
          onChange={(v) => setTweak("announce", v)} />
        <TweakText label="Headline" value={t.headline}
          onChange={(v) => setTweak("headline", v)} />
      </TweaksPanel>
    </div>
  );
}

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