/* global React, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakSlider, TweakToggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#9b6bff",
  "glowIntensity": 1,
  "nodeDensity": 65,
  "showGrid": true,
  "mouseParallax": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  ["#9b6bff", "#6d4aff", "#3a2480"],
  ["#7a78ff", "#4b48d6", "#22206a"],
  ["#5db8ff", "#2f6bd6", "#142b54"],
  ["#c084fc", "#8b3df8", "#3a1162"],
];

const ACCENT_HUES = {
  "#9b6bff": 295,
  "#7a78ff": 280,
  "#5db8ff": 240,
  "#c084fc": 310,
};

const applyAccent = (primary) => {
  const root = document.documentElement;
  const hue = ACCENT_HUES[primary] || 295;
  root.style.setProperty("--accent", `oklch(0.68 0.19 ${hue})`);
  root.style.setProperty("--accent-2", `oklch(0.58 0.21 ${hue - 10})`);
  root.style.setProperty("--accent-soft", `oklch(0.42 0.12 ${hue - 5})`);
  root.style.setProperty("--accent-glow", `oklch(0.65 0.22 ${hue} / 0.45)`);
};

// Context to expose tweaks to NetworkCanvas etc.
const TweakCtx = React.createContext(TWEAK_DEFAULTS);
window.TweakCtx = TweakCtx;
window.NOJU_TWEAK_DEFAULTS = TWEAK_DEFAULTS;

const NOJUTweaksProvider = ({ children }) => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyAccent(t.accent); }, [t.accent]);
  React.useEffect(() => {
    document.body.classList.toggle("no-grid", !t.showGrid);
  }, [t.showGrid]);

  return (
    <TweakCtx.Provider value={t}>
      {children}
      <TweaksPanel title="NOJU · Tweaks">
        <TweakSection label="Identity" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#9b6bff", "#7a78ff", "#5db8ff", "#c084fc"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Hero network" />
        <TweakSlider
          label="Node density"
          value={t.nodeDensity}
          min={40} max={160} step={10}
          onChange={(v) => setTweak("nodeDensity", v)}
        />
        <TweakSlider
          label="Glow"
          value={t.glowIntensity}
          min={0} max={2} step={0.1}
          onChange={(v) => setTweak("glowIntensity", v)}
        />
        <TweakToggle
          label="Mouse parallax"
          value={t.mouseParallax}
          onChange={(v) => setTweak("mouseParallax", v)}
        />
        <TweakSection label="Background" />
        <TweakToggle
          label="Micro-grid overlay"
          value={t.showGrid}
          onChange={(v) => setTweak("showGrid", v)}
        />
      </TweaksPanel>
    </TweakCtx.Provider>
  );
};

window.NOJUTweaksProvider = NOJUTweaksProvider;