/* global React */
/* ============================================================
   PF THEME — shared global Tweaks applied to :root.
   Each page merges PF_THEME_DEFAULTS into its own tweak defaults
   and renders <PFThemeTweaks/> inside its TweaksPanel.
   ============================================================ */

const PF_INKS = [
  { value: "ember",  label: "Ember" },
  { value: "bloom",  label: "Bloom" },
  { value: "sky",    label: "Sky" },
  { value: "sprout", label: "Sprout" },
  { value: "loam",   label: "Loam" },
];

const PF_INK_SWATCH = {
  ember: "#EB6541", bloom: "#EB426D", sky: "#42C0EB", sprout: "#42EBB9", loam: "#96685C",
};

const PF_FONTS = {
  bricolage: '"Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif',
  space:     '"Space Grotesk", "Bricolage Grotesque", system-ui, sans-serif',
};

const PF_THEME_DEFAULTS = {
  accent: "ember",
  spectrum: true,
  radius: 14,
  motif: 0.16,
  displayFont: "bricolage",
};

function pfApplyTheme(t) {
  const r = document.documentElement.style;
  const ink = t.accent || "ember";
  r.setProperty("--accent", `var(--${ink})`);
  r.setProperty("--accent-deep", `var(--${ink}-deep)`);
  r.setProperty("--accent-soft", `var(--${ink}-soft)`);
  r.setProperty("--accent-wash", `var(--${ink}-wash)`);
  r.setProperty("--accent-grad", t.spectrum ? "var(--spectrum)" : `var(--${ink})`);
  r.setProperty("--radius", (t.radius ?? 14) + "px");
  r.setProperty("--motif-opacity", String(t.motif ?? 0.16));
  r.setProperty("--font-display", PF_FONTS[t.displayFont] || PF_FONTS.bricolage);
}

/* Hook: apply theme whenever the relevant tweak values change. */
function usePFTheme(t) {
  React.useLayoutEffect(() => {
    pfApplyTheme(t);
  }, [t.accent, t.spectrum, t.radius, t.motif, t.displayFont]);
}

function PFThemeTweaks({ t, setTweak }) {
  return (
    <TweakSection label="Brand system">
      <TweakColor
        label="Accent ink"
        value={PF_INK_SWATCH[t.accent] || "#EB6541"}
        options={PF_INKS.map((i) => PF_INK_SWATCH[i.value])}
        onChange={(hex) => {
          const found = PF_INKS.find((i) => PF_INK_SWATCH[i.value].toLowerCase() === String(hex).toLowerCase());
          setTweak("accent", found ? found.value : "ember");
        }}
      />
      <TweakToggle label="Spectrum (key moments)" value={t.spectrum} onChange={(v) => setTweak("spectrum", v)} />
      <TweakSlider label="Corner softness" value={t.radius} min={0} max={22} unit="px" onChange={(v) => setTweak("radius", v)} />
      <TweakSlider label="Motif intensity" value={Math.round((t.motif ?? 0.16) * 100)} min={0} max={32} unit="%" onChange={(v) => setTweak("motif", v / 100)} />
      <TweakRadio label="Display font" value={t.displayFont}
        options={[{ value: "bricolage", label: "Bricolage" }, { value: "space", label: "Space" }]}
        onChange={(v) => setTweak("displayFont", v)} />
    </TweakSection>
  );
}

Object.assign(window, { PF_THEME_DEFAULTS, pfApplyTheme, usePFTheme, PFThemeTweaks, PF_INKS, PF_INK_SWATCH });