// Tweaks panel — exposed via toolbar toggle
const TweaksPanel = ({ settings, setSettings, onClose }) => {
  const themes = [
    { id: 'lila', name: 'Lila', color: 'linear-gradient(135deg, #7c5cff, #ff5ea8)' },
    { id: 'acid', name: 'Acid', color: 'linear-gradient(135deg, #4fd0ff, #d4ff7a)' },
    { id: 'ember', name: 'Ember', color: 'linear-gradient(135deg, #ff8a4c, #b94dff)' },
  ];

  const update = (k, v) => {
    const next = { ...settings, [k]: v };
    setSettings(next);
    window.parent?.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  return (
    <div className="tweaks-panel">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <div style={{ fontWeight: 600, fontSize: 14 }}>Tweaks</div>
        <button onClick={onClose} style={{ color: 'var(--text-dim)' }}><Icon name="x" size={16}/></button>
      </div>

      <div className="tweak-row">
        <label>Paleta</label>
        <div className="tweak-swatches">
          {themes.map(t => (
            <button key={t.id}
              className={`tweak-sw ${settings.theme === t.id ? 'active' : ''}`}
              style={{ background: t.color }}
              onClick={() => update('theme', t.id)}
              title={t.name}/>
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <label>Densidade</label>
        <div style={{ display: 'flex', gap: 6 }}>
          {['cozy', 'compact'].map(d => (
            <button key={d}
              className={`tweak-pill ${settings.density === d ? 'active' : ''}`}
              onClick={() => update('density', d)}>
              {d === 'cozy' ? 'Arejado' : 'Compacto'}
            </button>
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <label>Animações</label>
        <button
          className={`tweak-pill ${settings.animations ? 'active' : ''}`}
          onClick={() => update('animations', !settings.animations)}>
          {settings.animations ? 'ON' : 'OFF'}
        </button>
      </div>

      <div className="tweak-row">
        <label>Estilo do hero</label>
        <div style={{ display: 'flex', gap: 6 }}>
          {['image', 'abstract'].map(h => (
            <button key={h}
              className={`tweak-pill ${settings.heroStyle === h ? 'active' : ''}`}
              onClick={() => update('heroStyle', h)}>
              {h === 'image' ? 'Imagem' : 'Abstrato'}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TweaksPanel });