// SOFTRENA — Tweaks panel
const { useEffect } = React;

function SoftrenaTweaks() {
  const [t, setTweak] = window.useTweaks(window.__TWEAK_DEFAULTS__);

  // Apply tweaks live
  useEffect(() => {
    // Logo variant
    const navLogo = document.getElementById('nav-logo-img');
    const navWord = document.getElementById('nav-wordmark');
    const heroLogo = document.querySelector('.hero-logo-orbit img');
    if (t.logoVariant === 'full') {
      if (navLogo) { navLogo.src = 'assets/softrena-logo-full.png'; navLogo.style.height = '44px'; }
      if (navWord) navWord.style.display = 'none';
      if (heroLogo) heroLogo.src = 'assets/softrena-logo-full.png';
    } else {
      if (navLogo) { navLogo.src = 'assets/softrena-mark.png'; navLogo.style.height = '38px'; }
      if (navWord) navWord.style.display = '';
      if (heroLogo) heroLogo.src = 'assets/softrena-mark.png';
    }

    // Accent hue — recompute teal palette from a single hue
    const root = document.documentElement;
    const h = t.accentHue;
    root.style.setProperty('--teal-bright', `oklch(0.85 0.08 ${h})`);
    root.style.setProperty('--teal', `oklch(0.72 0.09 ${h})`);
    root.style.setProperty('--teal-dark', `oklch(0.55 0.08 ${h})`);
    root.style.setProperty('--navy', `oklch(0.32 0.06 ${h + 20})`);
    root.style.setProperty('--navy-2', `oklch(0.38 0.07 ${h + 15})`);
    root.style.setProperty('--grad-text', `linear-gradient(120deg, oklch(0.85 0.08 ${h}) 0%, oklch(0.72 0.09 ${h}) 35%, oklch(0.55 0.08 ${h}) 80%)`);
    root.style.setProperty('--grad', `linear-gradient(135deg, oklch(0.32 0.06 ${h + 20}) 0%, oklch(0.55 0.08 ${h}) 45%, oklch(0.72 0.09 ${h}) 100%)`);

    // Orbits visibility
    document.querySelectorAll('.orbit-ring').forEach(el => {
      el.style.display = t.showOrbits ? '' : 'none';
    });
  }, [t]);

  const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakSlider } = window;

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Logo">
        <TweakRadio
          label="Variant"
          value={t.logoVariant}
          onChange={v => setTweak('logoVariant', v)}
          options={[
            { value: 'mark', label: 'Mark' },
            { value: 'full', label: 'Full' },
          ]}
        />
        <TweakToggle
          label="Orbit rings"
          value={t.showOrbits}
          onChange={v => setTweak('showOrbits', v)}
        />
      </TweakSection>

      <TweakSection title="Accent">
        <TweakSlider
          label="Hue"
          value={t.accentHue}
          min={140}
          max={260}
          step={2}
          onChange={v => setTweak('accentHue', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<SoftrenaTweaks />);