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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "audience": "both",
  "heroVariant": "stacked",
  "density": "spacious",
  "animation": "full",
  "showMarquee": true,
  "showStats": true,
  "cursor": true,
  "accent": "gold"
}/*EDITMODE-END*/;

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

  useEffect(() => {
    document.body.dataset.density = tweaks.density;
    document.body.dataset.audience = tweaks.audience;
    document.body.dataset.hero = tweaks.heroVariant;
    document.body.dataset.animation = tweaks.animation;
    document.body.classList.toggle('no-cursor', !tweaks.cursor);

    // section visibility
    document.querySelectorAll('[data-aud]').forEach(el => {
      const aud = el.dataset.aud;
      el.style.display = (tweaks.audience === 'both' || tweaks.audience === aud) ? '' : 'none';
    });
    const marq = document.querySelector('.marq'); if (marq) marq.style.display = tweaks.showMarquee ? '' : 'none';
    const stats = document.querySelector('#stats-band'); if (stats) stats.style.display = tweaks.showStats ? '' : 'none';
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Audience">
        <TweakRadio label="Show lane" value={tweaks.audience} options={[
          { value: 'business', label: 'Business' },
          { value: 'freelancer', label: 'Freelancer' },
          { value: 'both', label: 'Both' },
        ]} onChange={v => setTweak('audience', v)} />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakRadio label="Layout" value={tweaks.heroVariant} options={[
          { value: 'stacked', label: 'Stacked' },
          { value: 'split', label: 'Split' },
          { value: 'editorial', label: 'Editorial' },
        ]} onChange={v => setTweak('heroVariant', v)} />
      </TweakSection>
      <TweakSection title="Visual">
        <TweakRadio label="Density" value={tweaks.density} options={[
          { value: 'compact', label: 'Compact' },
          { value: 'spacious', label: 'Spacious' },
        ]} onChange={v => setTweak('density', v)} />
        <TweakRadio label="Animation" value={tweaks.animation} options={[
          { value: 'minimal', label: 'Minimal' },
          { value: 'full', label: 'Full' },
        ]} onChange={v => setTweak('animation', v)} />
        <TweakToggle label="Custom cursor" checked={tweaks.cursor} onChange={v => setTweak('cursor', v)} />
        <TweakToggle label="Marquee" checked={tweaks.showMarquee} onChange={v => setTweak('showMarquee', v)} />
        <TweakToggle label="Stats band" checked={tweaks.showStats} onChange={v => setTweak('showStats', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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