const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "midnight",
  "accent": "pink",
  "displayFont": "Space Grotesk",
  "calmMotion": false
}/*EDITMODE-END*/;

const ACCENTS = {
  pink:   { v: "var(--pink)",   on: "oklch(0.99 0.004 320)" },
  coral:  { v: "var(--coral)",  on: "oklch(0.99 0.004 320)" },
  violet: { v: "var(--violet)", on: "oklch(0.99 0.004 320)" },
  blue:   { v: "var(--blue)",   on: "oklch(0.99 0.004 320)" },
};
const ACCENT_SWATCH = {
  pink: "#ff3d99", coral: "#d83b8e", violet: "#8246d4", blue: "#4a63d6",
};
const FONTS = ["Space Grotesk", "Archivo", "Bricolage Grotesque"];

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
  }, [t.theme]);

  React.useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.pink;
    document.documentElement.style.setProperty("--accent", a.v);
    document.documentElement.style.setProperty("--accent-on", a.on);
  }, [t.accent]);

  React.useEffect(() => {
    document.documentElement.style.setProperty(
      "--font-display", `"${t.displayFont}", system-ui, sans-serif`);
  }, [t.displayFont]);

  React.useEffect(() => {
    document.documentElement.classList.toggle("calm", !!t.calmMotion);
  }, [t.calmMotion]);

  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme} options={["midnight", "paper"]}
        onChange={(v) => setTweak("theme", v)} />
      <TweakColor label="Accent" value={ACCENT_SWATCH[t.accent]}
        options={Object.values(ACCENT_SWATCH)}
        onChange={(hex) => {
          const key = Object.keys(ACCENT_SWATCH).find((k) => ACCENT_SWATCH[k] === hex);
          if (key) setTweak("accent", key);
        }} />
      <TweakSection label="Type" />
      <TweakSelect label="Display font" value={t.displayFont} options={FONTS}
        onChange={(v) => setTweak("displayFont", v)} />
      <TweakSection label="Motion" />
      <TweakToggle label="Calm motion" value={t.calmMotion}
        onChange={(v) => setTweak("calmMotion", v)} />
    </TweaksPanel>
  );
}

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