// TweaksApp — drop into any page; injects panel + applies CSS variables.
// Single canonical EDITMODE block lives here so all pages share state.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c15f3c",
  "palette": "warm",
  "font": "source-serif",
  "density": "regular"
}/*EDITMODE-END*/;

const PALETTES = {
  warm:    { ink: "#1a1612", ink2: "#3a342c", ink3: "#6b6357", ink4: "#a39988", paper: "#f7f3ec", paper2: "#efe9df" },
  slate:   { ink: "#0e1726", ink2: "#2a3447", ink3: "#5a6478", ink4: "#a3aab8", paper: "#fbfcfd", paper2: "#f1f3f7" },
  neutral: { ink: "#171717", ink2: "#3a3a3a", ink3: "#666666", ink4: "#a0a0a0", paper: "#fafaf9", paper2: "#f0efed" },
  ink:     { ink: "#0a0908", ink2: "#1f1d1a", ink3: "#3d3a35", ink4: "#7a766f", paper: "#f4f0e8", paper2: "#e8e2d4" },
};

const FONT_PAIRS = {
  "source-serif": { serif: '"Source Serif 4", "Iowan Old Style", Georgia, serif', sans: '"Inter", system-ui, sans-serif' },
  "playfair":     { serif: '"Playfair Display", Georgia, serif', sans: '"Inter", system-ui, sans-serif' },
  "fraunces":     { serif: '"Fraunces", Georgia, serif', sans: '"Inter", system-ui, sans-serif' },
  "ibm-serif":    { serif: '"IBM Plex Serif", Georgia, serif', sans: '"IBM Plex Sans", system-ui, sans-serif' },
};

const FONT_HREFS = {
  "playfair":  "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap",
  "fraunces":  "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&display=swap",
  "ibm-serif": "https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&display=swap",
};

const ACCENTS = ["#c15f3c", "#b8412a", "#0f6c6e", "#2a5fb8", "#1a1612"];

function ensureFont(key) {
  if (!FONT_HREFS[key]) return;
  const id = "twk-font-" + key;
  if (document.getElementById(id)) return;
  const l = document.createElement("link");
  l.id = id; l.rel = "stylesheet"; l.href = FONT_HREFS[key];
  document.head.appendChild(l);
}

function applyTweaks(t) {
  const root = document.documentElement;
  const pal = PALETTES[t.palette] || PALETTES.warm;
  root.style.setProperty("--ink", pal.ink);
  root.style.setProperty("--ink-2", pal.ink2);
  root.style.setProperty("--ink-3", pal.ink3);
  root.style.setProperty("--ink-4", pal.ink4);
  root.style.setProperty("--paper", pal.paper);
  root.style.setProperty("--paper-2", pal.paper2);
  root.style.setProperty("--line", "rgba(0,0,0,0.12)");
  root.style.setProperty("--line-soft", "rgba(0,0,0,0.06)");
  root.style.setProperty("--accent", t.accent);
  // accent-soft as rgba 0.08 of accent (hex -> rgb)
  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t.accent.replace("#", "#"));
  if (m) {
    const r = parseInt(m[1], 16), g = parseInt(m[2], 16), b = parseInt(m[3], 16);
    root.style.setProperty("--accent-soft", `rgba(${r},${g},${b},0.1)`);
  }
  const fp = FONT_PAIRS[t.font] || FONT_PAIRS["source-serif"];
  ensureFont(t.font);
  root.style.setProperty("--serif", fp.serif);
  root.style.setProperty("--sans", fp.sans);
  document.body.classList.remove("density-cozy", "density-airy");
  if (t.density === "cozy") document.body.classList.add("density-cozy");
  if (t.density === "airy") document.body.classList.add("density-airy");
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color" />
      <TweakColor label="Accent" value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak("accent", v)} />
      <TweakRadio label="Palette" value={t.palette}
        options={["warm", "slate", "neutral", "ink"]}
        onChange={(v) => setTweak("palette", v)} />
      <TweakSection label="Type" />
      <TweakSelect label="Font pair" value={t.font}
        options={[
          { value: "source-serif", label: "Source Serif + Inter" },
          { value: "playfair",     label: "Playfair + Inter" },
          { value: "fraunces",     label: "Fraunces + Inter" },
          { value: "ibm-serif",    label: "IBM Plex Serif + Sans" },
        ]}
        onChange={(v) => setTweak("font", v)} />
      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={t.density}
        options={["cozy", "regular", "airy"]}
        onChange={(v) => setTweak("density", v)} />
    </TweaksPanel>
  );
}

window.TweaksApp = TweaksApp;