// Main app — orchestrates pages, holds tweaks state.

const { useState: useAppState, useEffect: useAppEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "volume": "01",
  "kanjiScale": 100,
  "density": "comfortable",
  "showAnnotations": true,
  "showVermillion": false
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = useAppState("cover");
  const [articleSlug, setArticleSlug] = useAppState(window.TGF_ENTRIES[0].slug);
  const [tweaks, setTweaks] = useAppState(TWEAK_DEFAULTS);

  useAppEffect(() => {
    const scale = tweaks.kanjiScale / 100;
    document.documentElement.setAttribute("data-volume", tweaks.volume);
    document.documentElement.style.setProperty(
      "--size-hero-kanji",
      `clamp(${6 * scale}rem, ${18 * scale}vw, ${12 * scale}rem)`
    );
    if (tweaks.showVermillion) {
      document.documentElement.style.setProperty("--color-accent-primary", "#C33737");
    } else {
      document.documentElement.style.removeProperty("--color-accent-primary");
    }
  }, [tweaks]);

  const updateTweak = (key, value) => {
    const next = { ...tweaks, [key]: value };
    setTweaks(next);
    window.parent.postMessage(
      { type: "__edit_mode_set_keys", edits: { [key]: value } },
      "*"
    );
  };

  const nav = (p) => {
    window.scrollTo({ top: 0 });
    setPage(p);
  };

  const openArticle = (slug) => {
    setArticleSlug(slug);
    window.scrollTo({ top: 0 });
    setPage("article");
  };

  const entry =
    window.TGF_ENTRIES.find((e) => e.slug === articleSlug) || window.TGF_ENTRIES[0];
  const featured = {
    ...entry,
    shopProducts: window.TGF_FEATURED.shopProducts,
    related: window.TGF_ENTRIES
      .filter((e) => e.slug !== entry.slug)
      .slice(0, 3)
      .map((e) => ({ slug: e.slug, title: e.title, desk: e.desk })),
  };

  return (
    <div className="site-frame">
      <SiteHeader page={page} onNav={nav} issue={1} />

      {page === "cover" && (
        <CoverPage
          issue={window.TGF_ISSUE}
          entries={window.TGF_ENTRIES}
          density={tweaks.density}
          showAnnotations={tweaks.showAnnotations}
          onOpenArticle={openArticle}
        />
      )}

      {page === "article" && (
        <ArticlePage
          article={featured}
          allEntries={window.TGF_ENTRIES}
          onOpenArticle={openArticle}
          onNav={nav}
        />
      )}

      {page === "about" && <AboutPage />}

      <NewsletterStrip />
      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Volume accent" />
        <TweakRadio
          label="Volume"
          value={tweaks.volume}
          options={[
            { value: "01", label: "I · Gold" },
            { value: "02", label: "II · Teal" },
            { value: "03", label: "III · Bronze" },
          ]}
          onChange={(v) => updateTweak("volume", v)}
        />
        <TweakToggle
          label="Vermillion override"
          value={tweaks.showVermillion}
          onChange={(v) => updateTweak("showVermillion", v)}
        />

        <TweakSection label="Cover composition" />
        <TweakSlider
          label="Kanji scale"
          value={tweaks.kanjiScale}
          min={60}
          max={160}
          step={5}
          unit="%"
          onChange={(v) => updateTweak("kanjiScale", v)}
        />
        <TweakToggle
          label="Kanji annotation"
          value={tweaks.showAnnotations}
          onChange={(v) => updateTweak("showAnnotations", v)}
        />

        <TweakSection label="Ledger" />
        <TweakRadio
          label="Density"
          value={tweaks.density}
          options={[
            { value: "comfortable", label: "Comfortable" },
            { value: "dense", label: "Dense" },
          ]}
          onChange={(v) => updateTweak("density", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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