// Tweaks — density, accent, mode, grid
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "dark",
  "density": 1,
  "accent": "moss",
  "grid": true,
  "showTicker": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  moss:    { accent: "oklch(0.48 0.07 145)", soft: "oklch(0.93 0.04 145)", ink: "oklch(0.32 0.05 145)" },
  cobalt:  { accent: "oklch(0.48 0.13 255)", soft: "oklch(0.93 0.05 255)", ink: "oklch(0.32 0.10 255)" },
  rust:    { accent: "oklch(0.55 0.14 35)",  soft: "oklch(0.93 0.05 55)",  ink: "oklch(0.38 0.10 35)"  },
  ink:     { accent: "oklch(0.22 0.01 145)", soft: "oklch(0.93 0.01 145)", ink: "oklch(0.15 0.01 145)" },
};

function applyTweaks(t) {
  const root = document.documentElement;
  const body = document.body;
  root.dataset.mode = t.mode;
  body.dataset.grid = t.grid ? "on" : "off";
  root.style.setProperty("--density", t.density);
  const a = ACCENT_PRESETS[t.accent] || ACCENT_PRESETS.moss;
  root.style.setProperty("--accent", a.accent);
  root.style.setProperty("--accent-soft", a.soft);
  root.style.setProperty("--accent-ink", a.ink);
}

function BlockurbTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Surface">
        <TweakRadio
          label="Mode"
          value={t.mode}
          onChange={v => setTweak("mode", v)}
          options={[{value:"light", label:"Light"}, {value:"dark", label:"Dark"}]}
        />
        <TweakToggle label="Cartographic grid" value={t.grid} onChange={v => setTweak("grid", v)} />
      </TweakSection>
      <TweakSection title="Brand">
        <TweakColor
          label="Accent"
          value={t.accent}
          onChange={v => setTweak("accent", v)}
          options={[
            { value: "moss",   color: "#4A7C59" },
            { value: "cobalt", color: "#3565C9" },
            { value: "rust",   color: "#B6602C" },
            { value: "ink",    color: "#2A2E2A" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakSlider label="Density" min={0.85} max={1.25} step={0.05} value={t.density} onChange={v => setTweak("density", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// Mount tweaks at end
const tweaksRoot = document.createElement("div");
tweaksRoot.id = "tweaks-root";
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<BlockurbTweaks />);

// Apply defaults synchronously
applyTweaks(TWEAK_DEFAULTS);