// VIG Tweaks panel — exposes audience, accent mode, motion, grid via the host edit-mode toolbar.

const { useEffect } = React;

function VIGTweaks() {
  const [t, setTweak] = useTweaks(window.VIG_TWEAKS_DEFAULTS || {
    audience: 'startups',
    accentMode: 'audience',
    showGrid: true,
    motion: 'on',
    heroVariant: 'default',
  });

  // Sync audience tweak <-> live audience switcher
  useEffect(() => {
    if (window.VIG && t.audience && window.VIG.getAudience() !== t.audience) {
      window.VIG.setAudience(t.audience);
    }
  }, [t.audience]);

  useEffect(() => {
    function onAud(e) {
      if (e.detail && e.detail !== t.audience) {
        setTweak('audience', e.detail);
      }
    }
    window.addEventListener('vig:audience', onAud);
    return () => window.removeEventListener('vig:audience', onAud);
  }, [t.audience]);

  // Accent overrides
  useEffect(() => {
    const root = document.documentElement;
    if (t.accentMode === 'red' || t.accentMode === 'coral' /* legacy */) {
      root.style.setProperty('--accent', '#D8243A');
      root.style.setProperty('--accent-soft', 'rgba(216,36,58,0.20)');
      root.style.setProperty('--accent-2', '#F5A524');
    } else if (t.accentMode === 'amber' || t.accentMode === 'gold' /* legacy */) {
      root.style.setProperty('--accent', '#F5A524');
      root.style.setProperty('--accent-soft', 'rgba(245,165,36,0.20)');
      root.style.setProperty('--accent-2', '#D8243A');
    } else if (t.accentMode === 'teal' || t.accentMode === 'mint' /* legacy */) {
      root.style.setProperty('--accent', '#0EA47A');
      root.style.setProperty('--accent-soft', 'rgba(14,164,122,0.22)');
      root.style.setProperty('--accent-2', '#F5A524');
    } else if (t.accentMode === 'sky') {
      root.style.setProperty('--accent', '#6FB8FF');
      root.style.setProperty('--accent-soft', 'rgba(111,184,255,0.18)');
      root.style.setProperty('--accent-2', '#0EA47A');
    } else {
      root.style.removeProperty('--accent');
      root.style.removeProperty('--accent-soft');
      root.style.removeProperty('--accent-2');
    }
  }, [t.accentMode]);

  // Show / hide hero grid
  useEffect(() => {
    document.querySelectorAll('.hero-bg .grid').forEach((g) => {
      g.style.opacity = t.showGrid ? '' : '0';
    });
  }, [t.showGrid]);

  // Motion on/off
  useEffect(() => {
    if (t.motion === 'off') {
      document.documentElement.style.setProperty('--vig-anim', 'paused');
      const style = document.getElementById('vig-anim-off') || document.createElement('style');
      style.id = 'vig-anim-off';
      style.textContent = `
        .hero-bg .blob, .dash-card { animation: none !important; }
      `;
      document.head.appendChild(style);
    } else {
      const style = document.getElementById('vig-anim-off');
      if (style) style.remove();
    }
  }, [t.motion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Audience">
        <TweakSelect
          label="Active persona"
          value={t.audience}
          options={[
            { value: 'startups', label: 'Startups' },
            { value: 'smb', label: 'Small business' },
            { value: 'nonprofits', label: 'Nonprofits' },
          ]}
          onChange={(v) => setTweak('audience', v)}
        />
      </TweakSection>

      <TweakSection label="Visual">
        <TweakSelect
          label="Accent color"
          value={t.accentMode}
          options={[
            { value: 'audience', label: 'Follow audience' },
            { value: 'red',   label: 'Brand red #B31325' },
            { value: 'amber', label: 'Amber #F5A524' },
            { value: 'teal',  label: 'Teal #0EA47A' },
            { value: 'sky',   label: 'Sky #6FB8FF' },
          ]}
          onChange={(v) => setTweak('accentMode', v)}
        />
        <TweakToggle
          label="Hero grid overlay"
          value={t.showGrid}
          onChange={(v) => setTweak('showGrid', v)}
        />
        <TweakRadio
          label="Motion"
          value={t.motion}
          options={[
            { value: 'on',  label: 'On' },
            { value: 'off', label: 'Off' },
          ]}
          onChange={(v) => setTweak('motion', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweaksRoot = document.createElement('div');
tweaksRoot.id = 'vig-tweaks-root';
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<VIGTweaks />);