// Tweaks panel (shown when edit mode is active)
function TweaksPanel({ theme, themeKey, setThemeKey, visible }) {
  if (!visible) return null;

  return (
    <div className="ls-tweaks-panel" style={{
      position: 'fixed', bottom: '20px', right: '20px', zIndex: 100,
      background: '#0d0d0d', color: '#fff',
      borderRadius: '10px',
      padding: '16px',
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: '12px',
      boxShadow: '0 12px 40px rgba(0,0,0,0.4)',
      border: '1px solid rgba(255,255,255,0.08)',
      width: '280px',
    }}>
      <div style={{
        fontSize: '10px', letterSpacing: '0.16em', textTransform: 'uppercase',
        opacity: 0.5, marginBottom: '14px',
      }}>Tweaks</div>
      <div style={{ fontSize: '11px', opacity: 0.7, marginBottom: '10px' }}>Dirección visual</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
        {Object.entries(THEMES).map(([k, t]) => {
          const active = themeKey === k;
          return (
            <button key={k} onClick={() => setThemeKey(k)} style={{
              padding: '12px 14px',
              background: active ? '#1e1e1e' : 'transparent',
              border: `1px solid ${active ? '#fff' : 'rgba(255,255,255,0.12)'}`,
              borderRadius: '6px',
              color: '#fff', cursor: 'pointer', textAlign: 'left',
              fontFamily: 'inherit',
              display: 'flex', alignItems: 'center', gap: '12px',
            }}>
              <span style={{
                display: 'flex', gap: '2px',
              }}>
                <span style={{ width: 10, height: 16, background: t.bg, borderRadius: 2 }} />
                <span style={{ width: 10, height: 16, background: t.accent, borderRadius: 2 }} />
                <span style={{ width: 10, height: 16, background: t.accent2, borderRadius: 2 }} />
              </span>
              <span style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
                <span style={{ fontSize: '12px', fontWeight: 600 }}>{t.name}</span>
                <span style={{ fontSize: '10px', opacity: 0.55 }}>{t.sub}</span>
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;