// Tweaks.jsx — Runtime tweaks panel

const PDTweaks = ({ tweaks, setTweak }) => {
  const [open, setOpen] = React.useState(false);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => {
      const data = e.data;
      if (!data || typeof data !== 'object') return;
      if (data.type === '__activate_edit_mode') setVisible(true);
      if (data.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  if (!visible) return null;

  const panel = {
    position: 'fixed', bottom: 24, right: 100, zIndex: 90,
    width: open ? 300 : 48, height: open ? 'auto' : 48, maxHeight: '80vh', overflowY: 'auto',
    background: '#fff', borderRadius: open ? 16 : '50%',
    boxShadow: '0 20px 60px rgba(13,27,62,0.25)', border: '1px solid #eef1f6',
    transition: 'all 0.3s ease',
  };

  if (!open) {
    return (
      <button style={panel} onClick={() => setOpen(true)} aria-label="Tweaks">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0d1b3e" strokeWidth="2" style={{ margin: 'auto', display: 'block', marginTop: 14 }}>
          <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
        </svg>
      </button>
    );
  }

  const sectionStyle = { padding: '14px 18px', borderBottom: '1px solid #f0f2f7' };
  const labelStyle = { fontSize: 10, fontWeight: 700, color: '#636e87', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10, display: 'block' };
  const btnRow = { display: 'flex', gap: 6, flexWrap: 'wrap' };
  const chip = (active) => ({
    padding: '6px 10px', borderRadius: 9999, fontSize: 11, fontWeight: 600,
    border: active ? '1.5px solid var(--accent)' : '1px solid #dde2ed',
    background: active ? 'var(--accent)' : '#fff',
    color: active ? '#0d1b3e' : '#44506a',
    cursor: 'pointer', transition: 'all 0.2s',
  });

  return (
    <div style={panel}>
      <div style={{ padding: '16px 18px', borderBottom: '1px solid #f0f2f7', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="display" style={{ fontSize: 14, color: '#0d1b3e', fontWeight: 700 }}>Tweaks</div>
        <button onClick={() => setOpen(false)} style={{ fontSize: 18, color: '#8d98b3' }}>×</button>
      </div>

      <div style={sectionStyle}>
        <span style={labelStyle}>Hero variant</span>
        <div style={btnRow}>
          {[['bold','Imagen grande'],['split','Split'],['video','Video BG']].map(([k,l]) => (
            <button key={k} style={chip(tweaks.heroVariant === k)} onClick={() => setTweak('heroVariant', k)}>{l}</button>
          ))}
        </div>
      </div>

      <div style={sectionStyle}>
        <span style={labelStyle}>Navbar</span>
        <div style={btnRow}>
          {[['transparent','Transparente'],['solid','Sólido']].map(([k,l]) => (
            <button key={k} style={chip(tweaks.navStyle === k)} onClick={() => setTweak('navStyle', k)}>{l}</button>
          ))}
        </div>
      </div>

      <div style={sectionStyle}>
        <span style={labelStyle}>Color acento</span>
        <div style={btnRow}>
          {[['teal','Teal','#2ecbb1'],['violet','Violet','#8B5CF6'],['lime','Lime','#C6FF00']].map(([k,l,c]) => (
            <button key={k} style={{...chip(tweaks.accent === k), background: tweaks.accent === k ? c : '#fff', borderColor: c, color: tweaks.accent === k ? '#0d1b3e' : '#44506a'}} onClick={() => setTweak('accent', k)}>{l}</button>
          ))}
        </div>
      </div>

      <div style={{ padding: '14px 18px', fontSize: 11, color: '#8d98b3', lineHeight: 1.5 }}>
        Cambios persisten en localStorage y en el código fuente.
      </div>
    </div>
  );
};

Object.assign(window, { PDTweaks });