/* global React, ReactDOM */
const { useEffect } = React;

const PALETTES = [
  { id: 'indigo', label: 'Indigo', accent: '#4f46e5', accentSoft: '#eef0ff' },
  { id: 'cobalt', label: 'Cobalt', accent: '#1f4ed8', accentSoft: '#e6ecff' },
  { id: 'teal',   label: 'Teal',   accent: '#0e7c66', accentSoft: '#e2f3ee' },
  { id: 'signal', label: 'Signal', accent: '#c2185b', accentSoft: '#fde7ef' },
];

function NEX7Tweaks() {
  const [t, setTweak] = window.useTweaks(window.NEX7_TWEAK_DEFAULTS);

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

  useEffect(() => {
    window.__nex7Intensity = t.intensity;
  }, [t.intensity]);

  useEffect(() => {
    const root = document.documentElement;
    const p = PALETTES.find(p => p.id === t.palette) || PALETTES[0];
    root.style.setProperty('--accent', p.accent);
    root.style.setProperty('--accent-soft', p.accentSoft);
  }, [t.palette]);

  return (
    <window.TweaksPanel>
      <window.TweakSection label="Theme">
        <window.TweakRadio
          label="Mode"
          value={t.theme}
          options={['light', 'dark']}
          onChange={v => setTweak('theme', v)}
        />
      </window.TweakSection>

      <window.TweakSection label="Palette">
        <window.TweakColor
          label="Accent"
          value={t.palette}
          options={PALETTES.map(p => ({ value: p.id, color: p.accent }))}
          onChange={v => setTweak('palette', v)}
        />
      </window.TweakSection>

      <window.TweakSection label="Hero">
        <window.TweakSlider
          label="Animation"
          value={t.intensity}
          min={0} max={1} step={0.05}
          onChange={v => setTweak('intensity', v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<NEX7Tweaks />);