/* ============ App shell + router + tweaks ============ */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#FFBD59",
  "ticket": "#E27A66",
  "headingFont": "Calistoga",
  "bodyFont": "Familjen Grotesk",
  "showPodcastSection": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = React.useState(() => {
    const h = window.location.hash.replace(/^#\//, "");
    return h || "home";
  });
  const [t, setTweak] = useTweaks(DEFAULTS);
  const [, setDataVersion] = React.useState(0);

  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace(/^#\//, "");
      setRoute(h || "home");
      window.scrollTo(0, 0);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  React.useEffect(() => {
    const onData = () => setDataVersion(v => v + 1);
    window.addEventListener("notion-data-loaded", onData);
    return () => window.removeEventListener("notion-data-loaded", onData);
  }, []);

  const navigate = React.useCallback((path) => {
    window.location.hash = "#/" + path;
  }, []);

  // Apply tweaks via CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty("--yellow", t.primary);
    document.documentElement.style.setProperty("--ticket", t.ticket);
    document.documentElement.style.setProperty("--font-heading", `"${t.headingFont}", Georgia, serif`);
    document.documentElement.style.setProperty("--font-body", `"${t.bodyFont}", Helvetica, sans-serif`);
  }, [t.primary, t.ticket, t.headingFont, t.bodyFont]);

  // Parse route
  const parts = route.split("/");
  let page;
  if (route === "home" || route === "") {
    page = <HomePage navigate={navigate} />;
  } else if (parts[0] === "levyarviot") {
    if (parts[1] === "tag" && parts[2]) page = <LevyarviotPage navigate={navigate} tag={decodeURIComponent(parts[2])} />;
    else if (parts[1]) page = <LevyarvioArticle navigate={navigate} slug={parts[1]} />;
    else page = <LevyarviotPage navigate={navigate} />;
  } else if (parts[0] === "keikkaraportit") {
    if (parts[1] === "tag" && parts[2]) page = <KeikkaraportitPage navigate={navigate} tag={decodeURIComponent(parts[2])} />;
    else if (parts[1]) page = <KeikkaraporttiArticle navigate={navigate} slug={parts[1]} />;
    else page = <KeikkaraportitPage navigate={navigate} />;
  } else if (parts[0] === "debug" && parts[1] === "missing-images") {
    page = <MissingImagesPage />;
  } else if (parts[0] === "podcast") {
    page = <PodcastPage />;
  } else if (parts[0] === "info") {
    page = <InfoPage />;
  } else if (parts[0] === "yhteys") {
    page = <YhteysPage navigate={navigate} />;
  } else if (parts[0] === "tietosuojaseloste") {
    page = <TietosuojaselostePage />;
  } else {
    page = <NotFound navigate={navigate} />;
  }

  return (
    <>
      <Header route={route} navigate={navigate} />
      {page}
      <Footer navigate={navigate} />
      <CookieBanner />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand colors">
          <TweakColor
            label="Primary (page bg)"
            value={t.primary}
            onChange={v => setTweak("primary", v)}
            options={["#FFBD59", "#F5DC52", "#FF9D6C", "#CDDFE3", "#E8E2D6"]}
          />
          <TweakColor
            label="Ticket color"
            value={t.ticket}
            onChange={v => setTweak("ticket", v)}
            options={["#E27A66", "#D94C3D", "#F2A65A", "#7BAE99"]}
          />
        </TweakSection>
        <TweakSection label="Typography">
          <TweakSelect
            label="Heading font"
            value={t.headingFont}
            onChange={v => setTweak("headingFont", v)}
            options={["Calistoga", "DM Serif Display", "Fraunces", "Playfair Display", "Familjen Grotesk"]}
          />
          <TweakSelect
            label="Body font"
            value={t.bodyFont}
            onChange={v => setTweak("bodyFont", v)}
            options={["Familjen Grotesk", "Inter", "Work Sans", "DM Sans"]}
          />
        </TweakSection>
        <TweakSection label="Quick navigation">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            <TweakButton label="Home" onClick={() => navigate("home")} />
            <TweakButton label="Reviews" onClick={() => navigate("levyarviot")} />
            <TweakButton label="Concerts" onClick={() => navigate("keikkaraportit")} />
            <TweakButton label="Podcast" onClick={() => navigate("podcast")} />
            <TweakButton label="Review article" onClick={() => navigate("levyarviot/lauri-haav-no-haav-no-love")} />
            <TweakButton label="Concert article" onClick={() => navigate("keikkaraportit/marcos-valle-tavastia-2026")} />
            <TweakButton label="Info" onClick={() => navigate("info")} />
            <TweakButton label="Yhteys" onClick={() => navigate("yhteys")} />
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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