// OSAP — Tweaks panel. Live-adjusts CSS variables on :root.
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentKey": "harvest-gold",
  "round": 1,
  "displayFont": "Bricolage Grotesque"
}/*EDITMODE-END*/;

const ACCENTS = {
  "harvest-gold": { label: "Harvest gold", swatch: ["#1E5A39", "#E3A52C"],
    vars: { "--green": "#1E5A39", "--green-2": "#2B704A", "--green-deep": "#12301F", "--gold": "#E3A52C", "--gold-2": "#C2861A", "--gold-soft": "#F7E9C8", "--green-soft": "#EAF0E4" } },
  "terracotta": { label: "Terracotta", swatch: ["#1E5A39", "#C2673A"],
    vars: { "--green": "#1E5A39", "--green-2": "#2B704A", "--green-deep": "#12301F", "--gold": "#C2673A", "--gold-2": "#A8501F", "--gold-soft": "#F3DDCE", "--green-soft": "#EAF0E4" } },
  "deep-forest": { label: "Deep forest", swatch: ["#16482E", "#D9A328"],
    vars: { "--green": "#16482E", "--green-2": "#225C3C", "--green-deep": "#0D2719", "--gold": "#D9A328", "--gold-2": "#B5841A", "--gold-soft": "#F4E6C6", "--green-soft": "#E5EEE0" } },
  "olive-amber": { label: "Olive · amber", swatch: ["#3C5A2A", "#E0982B"],
    vars: { "--green": "#3C5A2A", "--green-2": "#4C6E37", "--green-deep": "#23341A", "--gold": "#E0982B", "--gold-2": "#BC7C1B", "--gold-soft": "#F6E7C7", "--green-soft": "#ECF0E2" } },
};
const ACCENT_KEYS = Object.keys(ACCENTS);
const ACCENT_OPTIONS = ACCENT_KEYS.map((k) => ACCENTS[k].swatch);

const FONTS = {
  "Bricolage Grotesque": `"Bricolage Grotesque", "Hanken Grotesk", sans-serif`,
  "Fraunces": `"Fraunces", "Bricolage Grotesque", serif`,
  "Hanken Grotesk": `"Hanken Grotesk", system-ui, sans-serif`,
  "Spectral": `"Spectral", Georgia, serif`,
};

function loadFonts() {
  if (document.getElementById("tweak-fonts")) return;
  const l = document.createElement("link");
  l.id = "tweak-fonts"; l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Spectral:wght@400;500;600&display=swap";
  document.head.appendChild(l);
}

function apply(t) {
  const r = document.documentElement.style;
  const a = ACCENTS[t.accentKey] || ACCENTS["harvest-gold"];
  Object.entries(a.vars).forEach(([k, v]) => r.setProperty(k, v));
  const rnd = t.round;
  r.setProperty("--r-sm", (12 * rnd) + "px");
  r.setProperty("--r", (18 * rnd) + "px");
  r.setProperty("--r-lg", (28 * rnd) + "px");
  r.setProperty("--r-xl", (40 * rnd) + "px");
  r.setProperty("--serif", FONTS[t.displayFont] || FONTS["Bricolage Grotesque"]);
}

function OsapTweaks() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { loadFonts(); }, []);
  useEffect(() => { apply(t); }, [t]);
  const cur = (ACCENTS[t.accentKey] || ACCENTS["harvest-gold"]).swatch;
  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Brand color" />
      <window.TweakColor label="Accent" value={cur} options={ACCENT_OPTIONS}
        onChange={(arr) => { const i = ACCENT_OPTIONS.findIndex((p) => JSON.stringify(p) === JSON.stringify(arr)); if (i >= 0) setTweak("accentKey", ACCENT_KEYS[i]); }} />
      <window.TweakSection label="Typography" />
      <window.TweakSelect label="Display font" value={t.displayFont} options={Object.keys(FONTS)} onChange={(v) => setTweak("displayFont", v)} />
      <window.TweakSection label="Shape" />
      <window.TweakSlider label="Corner roundness" value={t.round} min={0.2} max={1.4} step={0.1} unit="×" onChange={(v) => setTweak("round", v)} />
    </window.TweaksPanel>
  );
}

apply(JSON.parse(JSON.stringify(TWEAK_DEFAULTS)));
ReactDOM.createRoot(document.getElementById("tweaks-mount")).render(<OsapTweaks />);