/* SelfBeat — Tweaks island. Applies live changes to the vanilla page via CSS vars + root classes. */
const { useEffect } = React;

const SB_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2B9ED4",
  "warmth": "warm",
  "headline": "serif",
  "corners": "rounded",
  "motion": true
}/*EDITMODE-END*/;

const ACCENTS = ["#2B9ED4", "#2C6FA6", "#1FA89A", "#5A6FE0"];

function applyTweaks(t) {
  const root = document.documentElement;
  // accent
  root.style.setProperty('--accent', t.accent);
  // background warmth
  root.classList.toggle('bg-neutral', t.warmth === 'neutral');
  root.classList.toggle('bg-cool', t.warmth === 'cool');
  // headline font
  root.classList.toggle('font-sans-head', t.headline === 'sans');
  // corners
  root.classList.toggle('corners-soft', t.corners === 'soft');
  root.classList.toggle('corners-sharp', t.corners === 'sharp');
  // motion
  const wasOff = root.classList.contains('no-motion');
  root.classList.toggle('no-motion', !t.motion);
  if (t.motion && wasOff) {
    // motion just re-enabled — replay hero animations
    if (window.__selfbeatRunChat) window.__selfbeatRunChat();
    if (window.__selfbeatFillRing) window.__selfbeatFillRing();
  }
}

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

  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent} options={ACCENTS}
                  onChange={(v) => setTweak('accent', v)} />
      <TweakRadio label="Background" value={t.warmth}
                  options={['warm', 'neutral', 'cool']}
                  onChange={(v) => setTweak('warmth', v)} />

      <TweakSection label="Type & shape" />
      <TweakRadio label="Headlines" value={t.headline}
                  options={['serif', 'sans']}
                  onChange={(v) => setTweak('headline', v)} />
      <TweakRadio label="Corners" value={t.corners}
                  options={['soft', 'rounded', 'sharp']}
                  onChange={(v) => setTweak('corners', v)} />

      <TweakSection label="Feel" />
      <TweakToggle label="Motion" value={t.motion}
                   onChange={(v) => setTweak('motion', v)} />
    </TweaksPanel>
  );
}

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