/* global React, ReactDOM */
const { useEffect } = React;
const { TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSlider } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e89e58",
  "secondary": "#d55c45",
  "density": "comfy",
  "grain": true,
  "marqSpeed": 60
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--orange', t.accent);
    r.setProperty('--coral', t.secondary);
  }, [t.accent, t.secondary]);

  useEffect(() => {
    document.body.dataset.density = t.density;
  }, [t.density]);

  useEffect(() => {
    const g = document.querySelector('.grain');
    if (g) g.style.display = t.grain ? '' : 'none';
  }, [t.grain]);

  useEffect(() => {
    const tr = document.querySelector('.marquee__track');
    if (tr) tr.style.animationDuration = `${t.marqSpeed}s`;
  }, [t.marqSpeed]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakColor
          label="Accent (orange)"
          value={t.accent}
          onChange={v => setTweak('accent', v)}
          options={['#e89e58', '#f4d35e', '#c5a880', '#e8e0d4']}
        />
        <TweakColor
          label="Secondary (coral)"
          value={t.secondary}
          onChange={v => setTweak('secondary', v)}
          options={['#d55c45', '#9caa85', '#7a8aa3', '#b3b0a8']}
        />
      </TweakSection>
      <TweakSection title="Motion">
        <TweakSlider
          label="Marquee speed"
          value={t.marqSpeed}
          min={20} max={120} step={5}
          onChange={v => setTweak('marqSpeed', v)}
          unit="s"
        />
        <TweakToggle
          label="Film grain overlay"
          value={t.grain}
          onChange={v => setTweak('grain', v)}
        />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakRadio
          label="Density"
          value={t.density}
          options={['tight', 'comfy']}
          onChange={v => setTweak('density', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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