// Tweaks panel
function Tweaks() {
  const [cfg, setCfg] = React.useState(() => ({ ...window.SITE_CONFIG }));
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    function 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);
  }, []);

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', cfg.accent);
    r.style.setProperty('--accent-alt', cfg.accent_alt);
    r.style.setProperty('--accent-amber', cfg.accent_amber);
    window.SITE_CONFIG = cfg;
  }, [cfg]);

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

  if (!visible) return null;

  return (
    <div className="tweaks-panel">
      <h4>Tweaks</h4>
      <div className="tweak-row">
        <label>Accent</label>
        <input type="color" value={cfg.accent} onChange={(e) => update({ accent: e.target.value })} />
      </div>
      <div className="tweak-row">
        <label>Alert</label>
        <input type="color" value={cfg.accent_alt} onChange={(e) => update({ accent_alt: e.target.value })} />
      </div>
      <div className="tweak-row">
        <label>Highlight</label>
        <input type="color" value={cfg.accent_amber} onChange={(e) => update({ accent_amber: e.target.value })} />
      </div>
      <div className="tweak-row">
        <label>Tape</label>
        <input type="range" min="15" max="80" value={cfg.tape_speed}
          onChange={(e) => {
            update({ tape_speed: +e.target.value });
            const t = document.querySelector('.fb-center #tape');
            if (t) t.style.animationDuration = (100 - +e.target.value) + 's';
          }} />
      </div>
      <div style={{ fontSize: 10, color: 'var(--ink-dimmer)', marginTop: 10, lineHeight: 1.5 }}>
        ←/→ or 1-5 navigate pages · hover any row
      </div>
    </div>
  );
}
Object.assign(window, { Tweaks });