/* Nodepool — Tweaks island. Drives the vanilla page via window.NP.applyTweak. */

const ACCENTS = {
  "#7c6cf0": [292, 268], // AI Purple (default)
  "#15b8c9": [196, 212], // Cyan
  "#5b8cf5": [256, 272], // Blue
  "#e0639a": [356, 20],  // Rose
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#15b8c9",
  "motion": true,
  "textSize": 1
}/*EDITMODE-END*/;

function apply(key, value) {
  if (!window.NP || !window.NP.applyTweak) return;
  if (key === "accent") window.NP.applyTweak("accent", ACCENTS[value] || ACCENTS["#7c6cf0"]);
  else if (key === "motion") window.NP.applyTweak("motion", value);
  else if (key === "textSize") window.NP.applyTweak("fontScale", value);
}

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

  React.useEffect(() => {
    apply("accent", t.accent);
    apply("motion", t.motion);
    apply("textSize", t.textSize);
    // eslint-disable-next-line
  }, []);

  const set = (k, v) => { setTweak(k, v); apply(k, v); };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v) => set("accent", v)}
      />
      <TweakSection label="Motion & type" />
      <TweakToggle
        label="Animations"
        value={t.motion}
        onChange={(v) => set("motion", v)}
      />
      <TweakSlider
        label="Text size"
        value={t.textSize}
        min={0.85}
        max={1.2}
        step={0.05}
        unit="×"
        onChange={(v) => set("textSize", v)}
      />
    </TweaksPanel>
  );
}

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