// Tweaks.jsx — Crovista design tweaks panel

const { useEffect } = React;
const { TweaksPanel, useTweaks, TweakSection, TweakColor, TweakSlider, TweakToggle, TweakRadio } = window;

function CrovistaTweaks() {
  // TWEAK_DEFAULTS defined as a global const in index.html
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  useEffect(() => {
    // Inject a <style> that overrides site colours with the tweaked values
    let style = document.getElementById('cv-tweaks-injected');
    if (!style) {
      style = document.createElement('style');
      style.id = 'cv-tweaks-injected';
      document.head.appendChild(style);
    }

    const g    = t.primaryGreen;
    const gold = t.accentGold;
    const gRgb = hexToRgb(g);
    const goldRgb = hexToRgb(gold);

    style.textContent = `
      :root {
        --cv-green: ${g};
        --cv-gold:  ${gold};
      }

      /* ── Primary green overrides ── */
      .cv-btn-primary  { background: ${g} !important; }
      .cv-btn-primary:hover { box-shadow: 0 0 28px ${g}88 !important; }
      .cv-cta-btn      { background: ${g} !important; }
      .cv-cta-white    { color: ${g} !important; }
      .cv-footer-link:hover { color: ${g} !important; }

      /* ── Logo style ── */
      .cv-logo-main {
        filter: ${t.logoStyle === 'white'
          ? 'brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.3))'
          : 'none'};
        transition: filter 0.4s ease;
      }

      /* ── Particles ── */
      ${!t.showParticles
        ? 'canvas { opacity: 0 !important; pointer-events: none !important; }'
        : ''}

      /* ── Card glass tint ── */
      [data-glass-card] {
        background: rgba(255,255,255,${(t.cardOpacity / 100).toFixed(3)}) !important;
      }
    `;
  }, [t.primaryGreen, t.accentGold, t.logoStyle, t.showParticles, t.cardOpacity]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand Colours" />
      <TweakColor
        label="Primary green"
        value={t.primaryGreen}
        onChange={v => setTweak('primaryGreen', v)}
      />
      <TweakColor
        label="Accent gold"
        value={t.accentGold}
        onChange={v => setTweak('accentGold', v)}
      />

      <TweakSection label="Logo Treatment" />
      <TweakRadio
        label="Logo style"
        value={t.logoStyle}
        options={['color', 'white']}
        onChange={v => setTweak('logoStyle', v)}
      />

      <TweakSection label="Visual Density" />
      <TweakSlider
        label="Glass card opacity"
        value={t.cardOpacity}
        min={1} max={18} unit="%"
        onChange={v => setTweak('cardOpacity', v)}
      />
      <TweakToggle
        label="Particle network"
        value={t.showParticles}
        onChange={v => setTweak('showParticles', v)}
      />
    </TweaksPanel>
  );
}

function hexToRgb(hex) {
  const r = parseInt(hex.slice(1,3),16);
  const g = parseInt(hex.slice(3,5),16);
  const b = parseInt(hex.slice(5,7),16);
  return `${r},${g},${b}`;
}

Object.assign(window, { CrovistaTweaks });

// Self-mount into a standalone div so it doesn't depend on App.jsx's render cycle
function mountTweaks() {
  const container = document.createElement('div');
  container.id = 'cv-tweaks-root';
  document.body.appendChild(container);
  ReactDOM.createRoot(container).render(<CrovistaTweaks />);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountTweaks);
} else {
  mountTweaks();
}