function Tweaks({ tweaks, setTweaks }) {
  const [visible, setVisible] = useState(false);

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

  const update = (edits) => {
    const next = { ...tweaks, ...edits };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
  };

  if (!visible) return null;

  const accents = [
    { name: 'Amber', hex: '#FFA000' },
    { name: 'Coral', hex: '#FF6A3D' },
    { name: 'Emerald', hex: '#10B981' },
    { name: 'Violet', hex: '#7C3AED' },
    { name: 'Rose', hex: '#EC4899' },
  ];
  const inks = [
    { name: 'Deep blue', hex: '#041E4A' },
    { name: 'Onyx', hex: '#0F172A' },
    { name: 'Espresso', hex: '#2B1A0F' },
    { name: 'Forest', hex: '#0A2D1F' },
  ];

  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <h4>Tweaks</h4>
        <button onClick={() => setVisible(false)} style={{fontSize:18, color:'var(--muted)'}}>×</button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <label>Accent</label>
          <div className="tweak-swatches">
            {accents.map(a => (
              <div key={a.hex}
                className={`tweak-sw ${tweaks.accent === a.hex ? 'sel' : ''}`}
                style={{ background: a.hex }}
                title={a.name}
                onClick={() => update({ accent: a.hex })}
              />
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>Dark surface</label>
          <div className="tweak-swatches">
            {inks.map(a => (
              <div key={a.hex}
                className={`tweak-sw ${tweaks.ink === a.hex ? 'sel' : ''}`}
                style={{ background: a.hex }}
                title={a.name}
                onClick={() => update({ ink: a.hex })}
              />
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>Density</label>
          <div className="tweak-opts">
            {['compact','comfortable','spacious'].map(d => (
              <button key={d} className={`tweak-opt ${tweaks.density === d ? 'sel' : ''}`} onClick={() => update({ density: d })}>{d}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>Hero visual</label>
          <div className="tweak-opts">
            {['dashboard','minimal'].map(d => (
              <button key={d} className={`tweak-opt ${tweaks.heroVariant === d ? 'sel' : ''}`} onClick={() => update({ heroVariant: d })}>{d}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
window.Tweaks = Tweaks;