/* Tweaks: theme, accent hue, density, mesh intensity, philosophy section toggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "violet",
  "meshIntensity": 0.85,
  "density": "comfortable",
  "showPhilosophy": true,
  "cursor": true
}/*EDITMODE-END*/;

const ACCENT_HUES = {
  violet: 285,
  cyan:   215,
  amber:   55,
  rose:    20,
};

const ACCENT_OPTIONS = [
  ["#7a5bff", "#aa90ff"],  // violet
  ["#2da7d9", "#7ad0ec"],  // cyan
  ["#d99a2d", "#e8c069"],  // amber
  ["#d65a6d", "#eea1ad"],  // rose
];
const ACCENT_KEYS = ["violet", "cyan", "amber", "rose"];

function TweaksUI() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to the document
  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", tweaks.theme);
    root.style.setProperty("--accent-hue", ACCENT_HUES[tweaks.accent] ?? 285);
    root.style.setProperty("--mesh-opacity", String(tweaks.meshIntensity));

    if (tweaks.density === "compact") {
      root.style.setProperty("--space-section", "clamp(56px, 8vw, 96px)");
    } else {
      root.style.removeProperty("--space-section");
    }
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme">
        <TweakRadio
          label="Mode"
          value={tweaks.theme}
          onChange={(v) => setTweak("theme", v)}
          options={[
            { value: "light", label: "Light" },
            { value: "dark",  label: "Dark"  },
          ]}
        />
      </TweakSection>

      <TweakSection label="Brand">
        <TweakColor
          label="Accent"
          value={ACCENT_OPTIONS[ACCENT_KEYS.indexOf(tweaks.accent)] || ACCENT_OPTIONS[0]}
          options={ACCENT_OPTIONS}
          onChange={(palette) => {
            const idx = ACCENT_OPTIONS.findIndex(p => p[0] === palette[0]);
            setTweak("accent", ACCENT_KEYS[idx] ?? "violet");
          }}
        />
        <TweakSlider
          label="Gradient"
          value={Math.round(tweaks.meshIntensity * 100)}
          min={0} max={100} step={5} unit="%"
          onChange={(v) => setTweak("meshIntensity", v / 100)}
        />
      </TweakSection>

      <TweakSection label="Layout">
        <TweakRadio
          label="Density"
          value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "comfortable", label: "Comfy" },
            { value: "compact",     label: "Tight" },
          ]}
        />
        <TweakToggle
          label="Philosophy section"
          value={tweaks.showPhilosophy}
          onChange={(v) => setTweak("showPhilosophy", v)}
        />
        <TweakToggle
          label="Custom cursor"
          value={tweaks.cursor}
          onChange={(v) => setTweak("cursor", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.TweaksUI = TweaksUI;
window.useTweaksDefaults = TWEAK_DEFAULTS;