// Tweaks.jsx
const { useState: useTwkState, useEffect: useTwkEff } = React;

const SWATCHES = [
  { color: '#D97B96', label: 'Rosa' },
  { color: '#C9956A', label: 'Dourado' },
  { color: '#A78BFA', label: 'Lavanda' },
  { color: '#6EE7B7', label: 'Menta' },
  { color: '#F97316', label: 'Coral' },
];

function Tweaks() {
  const [visible, setVisible] = useTwkState(false);
  const [accent, setAccent] = useTwkState(
    window.TWEAK_DEFAULTS?.accentColor || '#D97B96'
  );
  const [bloom, setBloom] = useTwkState(
    window.TWEAK_DEFAULTS?.bloomEnabled !== false
  );
  const [pureBg, setPureBg] = useTwkState(
    window.TWEAK_DEFAULTS?.pureWhiteBg || false
  );

  // Listen for activate/deactivate from host
  useTwkEff(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', handler);
    // Signal availability
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  // Apply accent color
  useTwkEff(() => {
    document.documentElement.style.setProperty('--accent', accent);
    // Derive lighter tones
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { accentColor: accent } }, '*');
  }, [accent]);

  // Apply bloom visibility
  useTwkEff(() => {
    const bloom_el = document.getElementById('hero-bloom');
    const glow_el = document.getElementById('cta-glow');
    const opacity = bloom ? '1' : '0';
    if (bloom_el) bloom_el.style.opacity = opacity;
    if (glow_el) glow_el.style.opacity = opacity;
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { bloomEnabled: bloom } }, '*');
  }, [bloom]);

  // Apply background
  useTwkEff(() => {
    document.documentElement.style.setProperty('--bg', pureBg ? '#ffffff' : '#FFF7F9');
    document.documentElement.style.setProperty('--bg-alt', pureBg ? '#f8f8f8' : '#FDEEF2');
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { pureWhiteBg: pureBg } }, '*');
  }, [pureBg]);

  if (!visible) return null;

  return (
    <div className="tweaks-panel visible">
      <div className="tweaks-title">Tweaks</div>

      {/* Accent swatches */}
      <span className="tweaks-label">Cor de acento</span>
      <div className="tweaks-swatches">
        {SWATCHES.map(s => (
          <button
            key={s.color}
            className={`swatch${accent === s.color ? ' active' : ''}`}
            style={{ background: s.color, border: 'none', cursor: 'pointer' }}
            title={s.label}
            onClick={() => setAccent(s.color)}
          />
        ))}
      </div>

      {/* Bloom toggle */}
      <div className="tweaks-toggle">
        <span>Bloom / Glow</span>
        <button
          className={`toggle-switch${bloom ? ' on' : ''}`}
          onClick={() => setBloom(!bloom)}
          aria-label="Toggle bloom"
        />
      </div>

      {/* Background toggle */}
      <div className="tweaks-toggle">
        <span>Fundo branco puro</span>
        <button
          className={`toggle-switch${pureBg ? ' on' : ''}`}
          onClick={() => setPureBg(!pureBg)}
          aria-label="Toggle background"
        />
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks });