// Entry for /diary/ subpage. Uses shared Header/Footer; renders DiaryPage.
const { useEffect: useEffectD, useState: useStateDA } = React;

const DIARY_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "diplomat",
  "paper": "parchment",
  "displayFont": "newsreader",
  "showDropcap": true
}/*EDITMODE-END*/;

const DIARY_ACCENTS = {
  bordeaux: { c: "oklch(0.40 0.07 25)",  deep: "oklch(0.30 0.06 25)" },
  diplomat: { c: "oklch(0.38 0.08 250)", deep: "oklch(0.28 0.07 250)" },
  forest:   { c: "oklch(0.38 0.06 155)", deep: "oklch(0.28 0.05 155)" },
  steel:    { c: "oklch(0.42 0.04 240)", deep: "oklch(0.30 0.03 240)" },
};
const DIARY_PAPERS = {
  parchment: { p: "#EFEDE6", warm: "#E8E5DC", deep: "#DEDAD0", panel: "#F5F3EC", rule: "oklch(0.82 0.01 245)", ruleSoft: "oklch(0.88 0.008 245)" },
  stone:     { p: "#E9E6DD", warm: "#E0DCD1", deep: "#D5D0C2", panel: "#EFEDE5", rule: "oklch(0.78 0.01 245)", ruleSoft: "oklch(0.85 0.008 245)" },
  cool:      { p: "#ECEDEC", warm: "#E3E5E4", deep: "#D6D9D8", panel: "#F2F3F2", rule: "oklch(0.82 0.005 240)", ruleSoft: "oklch(0.88 0.004 240)" },
  white:     { p: "#F6F5F1", warm: "#EDECE7", deep: "#E0DFD9", panel: "#FAF9F5", rule: "oklch(0.85 0.008 245)", ruleSoft: "oklch(0.90 0.005 245)" },
};
const DIARY_FONTS = {
  newsreader: '"Newsreader", "Source Serif 4", Georgia, serif',
  fraunces:   '"Fraunces", "Newsreader", Georgia, serif',
  source:     '"Source Serif 4", "Newsreader", Georgia, serif',
};

function applyDiaryTweaks(t) {
  const r = document.documentElement.style;
  const a = DIARY_ACCENTS[t.accent] || DIARY_ACCENTS.diplomat;
  const p = DIARY_PAPERS[t.paper] || DIARY_PAPERS.parchment;
  r.setProperty("--bordeaux", a.c);
  r.setProperty("--bordeaux-deep", a.deep);
  r.setProperty("--paper", p.p);
  r.setProperty("--paper-warm", p.warm);
  r.setProperty("--paper-deep", p.deep);
  r.setProperty("--panel", p.panel);
  r.setProperty("--rule", p.rule);
  r.setProperty("--rule-soft", p.ruleSoft);
  r.setProperty("--serif", DIARY_FONTS[t.displayFont] || DIARY_FONTS.newsreader);
  document.body.dataset.dropcap = t.showDropcap ? "on" : "off";
}

function readDiaryArticleSlug() {
  const m = (location.hash || "").match(/^#article\/(.+)$/);
  return m ? decodeURIComponent(m[1]) : null;
}

function DiaryApp() {
  const [tweaks, setTweak] = useTweaks(DIARY_TWEAK_DEFAULTS);
  const data = window.WDA_DATA;

  const [articleSlug, setArticleSlug] = useStateDA(readDiaryArticleSlug());
  useEffectD(() => {
    const onHash = () => setArticleSlug(readDiaryArticleSlug());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffectD(() => { applyDiaryTweaks(tweaks); }, [tweaks]);

  return (
    <React.Fragment>
      <a href="#main" className="skip-link">Skip to main content</a>
      <Header data={data} />
      <main id="main">
        <DiaryPage data={data} articleSlug={articleSlug} onBack={() => { location.hash = ""; }} />
      </main>
      <Footer data={data} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "diplomat", label: "Diplomat" },
              { value: "bordeaux", label: "Bordeaux" },
              { value: "forest", label: "Forest" },
              { value: "steel", label: "Steel" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Paper tone">
          <TweakRadio
            value={tweaks.paper}
            onChange={(v) => setTweak("paper", v)}
            options={[
              { value: "parchment", label: "Parchment" },
              { value: "stone", label: "Stone" },
              { value: "cool", label: "Cool grey" },
              { value: "white", label: "Soft white" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Editorial serif">
          <TweakSelect
            value={tweaks.displayFont}
            onChange={(v) => setTweak("displayFont", v)}
            options={[
              { value: "newsreader", label: "Newsreader" },
              { value: "fraunces", label: "Fraunces" },
              { value: "source", label: "Source Serif 4" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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