// Tweaks panel for CBx site
const { useEffect } = React;

function applyTweaks(t) {
  document.body.setAttribute('data-theme', t.theme);
  document.documentElement.style.setProperty('--accent', t.accent);
}

function CBxTweaks() {
  const _savedTheme = localStorage.getItem('cbx-theme');
  const [t, setTweak] = useTweaks({ ...TWEAK_DEFAULTS, theme: _savedTheme || TWEAK_DEFAULTS.theme });
  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio
        label="Mode"
        value={t.theme}
        options={['light', 'dark']}
        onChange={(v) => setTweak('theme', v)}
      />
      <TweakSection label="Accent" />
      <TweakColor
        label="Signal color"
        value={t.accent}
        options={['#ff2d1a', '#ffd400', '#00d68f', '#5b8cff']}
        onChange={(v) => setTweak('accent', v)}
      />
    </TweaksPanel>
  );
}

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

// Apply defaults immediately — but honor a saved toggle choice
const _saved = localStorage.getItem('cbx-theme');
applyTweaks({ ...TWEAK_DEFAULTS, theme: _saved || TWEAK_DEFAULTS.theme });