// Tweaks panel for the Manna home page.
// Live-adjusts CSS variables on :root.

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "paletteKey": "bone-olive",
  "density": 1,
  "heroVariant": "editorial",
  "symbolism": "subtle",
  "serif": "Newsreader"
}/*EDITMODE-END*/;

const PALETTES = {
  "bone-olive": {
    label: "Bone · Olive",
    swatch: ["#F4EFE6", "#3B4A2A", "#C97B3F"],
    vars: {
      "--bone": "#F4EFE6", "--bone-2": "#EAE3D2", "--bone-3": "#DCD3BD",
      "--olive": "#3B4A2A", "--olive-2": "#4E5F39", "--olive-deep": "#283319",
      "--terra": "#C97B3F", "--terra-2": "#A55A2E",
      "--ink": "#1F1B16", "--ink-soft": "#3A332A", "--muted": "#6F6657",
      "--hairline": "rgba(31,27,22,0.14)",
      "--hairline-2": "rgba(31,27,22,0.08)",
    },
  },
  "cream-forest": {
    label: "Cream · Forest",
    swatch: ["#FBFAF7", "#1E4D3A", "#E8B84A"],
    vars: {
      "--bone": "#FBFAF7", "--bone-2": "#F1ECDF", "--bone-3": "#E5DDC9",
      "--olive": "#1E4D3A", "--olive-2": "#2A6049", "--olive-deep": "#0E1A14",
      "--terra": "#E8B84A", "--terra-2": "#C99830",
      "--ink": "#0E1A14", "--ink-soft": "#22322B", "--muted": "#6E7E76",
      "--hairline": "rgba(14,26,20,0.14)",
      "--hairline-2": "rgba(14,26,20,0.08)",
    },
  },
  "ink-mode": {
    label: "Ink (dark)",
    swatch: ["#1A211D", "#D8C9A8", "#E07A3C"],
    vars: {
      "--bone": "#0E1411", "--bone-2": "#1A211D", "--bone-3": "#252C28",
      "--olive": "#D8C9A8", "--olive-2": "#BFB088", "--olive-deep": "#9F8F6C",
      "--terra": "#E07A3C", "--terra-2": "#B85F2A",
      "--ink": "#F4EFE6", "--ink-soft": "#D8D2C6", "--muted": "#9C9382",
      "--hairline": "rgba(244,239,230,0.16)",
      "--hairline-2": "rgba(244,239,230,0.08)",
    },
  },
  "clay-earth": {
    label: "Clay · Earth",
    swatch: ["#EFE9DC", "#7A4A2B", "#A8763F"],
    vars: {
      "--bone": "#EFE9DC", "--bone-2": "#E2DAC6", "--bone-3": "#D4C9AC",
      "--olive": "#7A4A2B", "--olive-2": "#8E5A36", "--olive-deep": "#2C2417",
      "--terra": "#A8763F", "--terra-2": "#8B5E2F",
      "--ink": "#2C2417", "--ink-soft": "#4A3E2B", "--muted": "#7B6F5B",
      "--hairline": "rgba(44,36,23,0.16)",
      "--hairline-2": "rgba(44,36,23,0.08)",
    },
  },
};

const PALETTE_KEYS = Object.keys(PALETTES);
const PALETTE_OPTIONS = PALETTE_KEYS.map((k) => PALETTES[k].swatch);

const SERIFS = {
  "Newsreader":       `"Newsreader", "Source Serif 4", Georgia, serif`,
  "Source Serif 4":   `"Source Serif 4", "Newsreader", Georgia, serif`,
  "EB Garamond":      `"EB Garamond", "Newsreader", Georgia, serif`,
  "Instrument Serif": `"Instrument Serif", "Newsreader", Georgia, serif`,
};

function loadFontFamilies() {
  const families = [
    "Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,400",
    "Source+Serif+4:ital,wght@0,400;0,500;1,400",
    "EB+Garamond:ital,wght@0,400;0,500;1,400",
    "Instrument+Serif:ital@0;1",
  ];
  const id = "tweak-font-faces";
  if (document.getElementById(id)) return;
  const l = document.createElement("link");
  l.id = id;
  l.rel = "stylesheet";
  l.href = `https://fonts.googleapis.com/css2?${families.map((f) => "family=" + f).join("&")}&display=swap`;
  document.head.appendChild(l);
}

function applyTweaks(t) {
  const root = document.documentElement.style;
  const p = PALETTES[t.paletteKey] || PALETTES["bone-olive"];
  Object.entries(p.vars).forEach(([k, v]) => root.setProperty(k, v));
  root.setProperty("--density", String(t.density));
  root.setProperty("--serif", SERIFS[t.serif] || SERIFS["Newsreader"]);
  document.body.dataset.heroVariant = t.heroVariant;
  document.body.dataset.symbolism = t.symbolism;
}

function HomeTweaks() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { loadFontFamilies(); }, []);
  useEffect(() => { applyTweaks(t); }, [t]);

  const currentPaletteSwatch = (PALETTES[t.paletteKey] || PALETTES["bone-olive"]).swatch;

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Palette" />
      <window.TweakColor
        label="Theme"
        value={currentPaletteSwatch}
        options={PALETTE_OPTIONS}
        onChange={(arr) => {
          const idx = PALETTE_OPTIONS.findIndex(
            (p) => JSON.stringify(p) === JSON.stringify(arr)
          );
          if (idx >= 0) setTweak("paletteKey", PALETTE_KEYS[idx]);
        }}
      />

      <window.TweakSection label="Typography" />
      <window.TweakSelect
        label="Display serif"
        value={t.serif}
        options={Object.keys(SERIFS)}
        onChange={(v) => setTweak("serif", v)}
      />

      <window.TweakSection label="Layout" />
      <window.TweakSlider
        label="Density"
        value={t.density}
        min={0.6} max={1.4} step={0.05}
        unit="×"
        onChange={(v) => setTweak("density", v)}
      />
      <window.TweakRadio
        label="Hero"
        value={t.heroVariant}
        options={[
          { value: "editorial", label: "Editorial" },
          { value: "data",      label: "Data" },
          { value: "quiet",     label: "Quiet" },
        ]}
        onChange={(v) => setTweak("heroVariant", v)}
      />

      <window.TweakSection label="Symbolism" />
      <window.TweakRadio
        label="Manna motif"
        value={t.symbolism}
        options={[
          { value: "off",     label: "Off" },
          { value: "subtle",  label: "Subtle" },
          { value: "visible", label: "Visible" },
        ]}
        onChange={(v) => setTweak("symbolism", v)}
      />
    </window.TweaksPanel>
  );
}

// Apply immediately so initial render uses the right palette (no flash)
applyTweaks(JSON.parse(JSON.stringify(TWEAK_DEFAULTS)));

ReactDOM.createRoot(document.getElementById("tweaks-mount")).render(<HomeTweaks />);