/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakSlider, TweakToggle, TweakSelect */
const { useState, useEffect, useMemo } = React;

// Palette presets — each rewrites the CSS variables on :root
const PALETTES = {
  bone: {
    name: "Bone",
    "--paper": "#f5f2ec",
    "--paper-2": "#ebe6da",
    "--ink": "#15140f",
    "--ink-2": "#3a3830",
    "--muted": "#8a8576",
    "--rule": "#d6cfbe",
    "--accent": "oklch(0.62 0.13 48)", // warm clay
    "--accent-ink": "#f5f2ec",
  },
  cream: {
    name: "Cream",
    "--paper": "#f1ebdb",
    "--paper-2": "#e7dfca",
    "--ink": "#1a1812",
    "--ink-2": "#3d3a2d",
    "--muted": "#857f6c",
    "--rule": "#cec3a4",
    "--accent": "oklch(0.55 0.10 145)", // sage
    "--accent-ink": "#f1ebdb",
  },
  frost: {
    name: "Frost",
    "--paper": "#eef0f3",
    "--paper-2": "#e1e5ea",
    "--ink": "#10131a",
    "--ink-2": "#2c3140",
    "--muted": "#7a8092",
    "--rule": "#c7cdd6",
    "--accent": "oklch(0.55 0.16 250)", // electric blue
    "--accent-ink": "#eef0f3",
  },
  noir: {
    name: "Noir",
    "--paper": "#0e0e0c",
    "--paper-2": "#1a1916",
    "--ink": "#f1ede2",
    "--ink-2": "#cfc8b8",
    "--muted": "#8a8676",
    "--rule": "#2c2a25",
    "--accent": "oklch(0.78 0.14 75)", // warm yellow
    "--accent-ink": "#0e0e0c",
  },
};

const FONT_PAIRS = {
  geist: { name: "Geist", sans: '"Geist", sans-serif', mono: '"Geist Mono", monospace' },
  jakarta: { name: "Jakarta", sans: '"Plus Jakarta Sans", sans-serif', mono: '"JetBrains Mono", monospace' },
  grotesk: { name: "Grotesk", sans: '"Space Grotesk", sans-serif', mono: '"Space Mono", monospace' },
};

function applyTokens(t) {
  const root = document.documentElement;
  const p = PALETTES[t.palette] || PALETTES.bone;
  for (const [k, v] of Object.entries(p)) {
    if (k.startsWith("--")) root.style.setProperty(k, v);
  }
  const f = FONT_PAIRS[t.font] || FONT_PAIRS.geist;
  root.style.setProperty("--font-sans", f.sans);
  root.style.setProperty("--font-mono", f.mono);
  root.style.setProperty("--scale", String(t.scale));
  root.style.setProperty("--accent", t.accentOverride || p["--accent"]);
  document.body.dataset.layout = t.layout;
  document.body.dataset.headshot = t.headshot;
}

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "bone",
  "font": "geist",
  "scale": 1.0,
  "layout": "split",
  "headshot": "circle",
  "accentOverride": "oklch(0.55 0.10 145)"
}/*EDITMODE-END*/;

// Expose palette table + applyTokens so the inline theme toggle can reuse them
window.__PALETTES = PALETTES;
window.__applyTokens = applyTokens;

function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);

  useEffect(() => { applyTokens(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakRadio
          label="Preset"
          value={t.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "bone", label: "Bone" },
            { value: "cream", label: "Cream" },
            { value: "frost", label: "Frost" },
            { value: "noir", label: "Noir" },
          ]}
        />
        <TweakColor
          label="Accent"
          value={t.accentOverride || PALETTES[t.palette]["--accent"]}
          onChange={(v) => setTweak("accentOverride", v)}
          options={[
            "oklch(0.62 0.13 48)",
            "oklch(0.55 0.10 145)",
            "oklch(0.55 0.16 250)",
            "oklch(0.78 0.14 75)",
            "oklch(0.55 0.18 25)",
          ]}
        />
      </TweakSection>
      <TweakSection title="Type">
        <TweakRadio
          label="Family"
          value={t.font}
          onChange={(v) => setTweak("font", v)}
          options={[
            { value: "geist", label: "Geist" },
            { value: "jakarta", label: "Jakarta" },
            { value: "grotesk", label: "Grotesk" },
          ]}
        />
        <TweakSlider
          label="Scale"
          value={t.scale}
          min={0.9}
          max={1.15}
          step={0.01}
          onChange={(v) => setTweak("scale", v)}
        />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakRadio
          label="Hero"
          value={t.layout}
          onChange={(v) => setTweak("layout", v)}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "stacked", label: "Stacked" },
            { value: "split", label: "Split" },
          ]}
        />
        <TweakRadio
          label="Headshot"
          value={t.headshot}
          onChange={(v) => setTweak("headshot", v)}
          options={[
            { value: "circle", label: "Circle" },
            { value: "square", label: "Square" },
            { value: "duotone", label: "Duotone" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Apply defaults immediately on load (before TweaksPanel even mounts)
applyTokens(DEFAULTS);

const root = ReactDOM.createRoot(document.getElementById("tweaks-root"));
root.render(<App />);