// Tweaks — integrates with host, supports keyboard-triggered palette & detail panel
const Tweaks = () => {
  const [open, setOpen] = useState(false);
  const [t, setT] = useState(window.__TWEAKS__ || {});

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

  const update = (patch) => {
    const next = { ...t, ...patch };
    setT(next);
    window.__TWEAKS__ = next;
    window.dispatchEvent(new CustomEvent('tweak:change', { detail: next }));
    if ('accentHue' in patch) document.documentElement.style.setProperty('--accent-h', String(patch.accentHue));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  // Allow other components to request tweak updates
  useEffect(() => {
    const h = (e) => update(e.detail || {});
    window.addEventListener('tweak:update', h);
    return () => window.removeEventListener('tweak:update', h);
  }, [t]);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent-h', String(t.accentHue ?? 190));
  }, []);

  if (!open) return null;

  return (
    <div className="tweaks" role="dialog" aria-label="Tweaks">
      <h4><span>SIGNAL · TWEAKS</span><span style={{ color: 'var(--accent)' }}>●</span></h4>
      <div className="row">
        <label>Accent hue · {t.accentHue ?? 190}°</label>
        <input type="range" min="0" max="360" value={t.accentHue ?? 190}
          onChange={(e) => update({ accentHue: Number(e.target.value) })} />
        <div className="swatch" />
      </div>
      <div className="row">
        <label>Motion</label>
        <div className="seg">
          <button className={t.motion !== false ? 'on' : ''} onClick={() => update({ motion: true })}>Alive</button>
          <button className={t.motion === false ? 'on' : ''} onClick={() => update({ motion: false })}>Still</button>
        </div>
      </div>
      <div className="row">
        <label>Intensity · {(t.intensity ?? 1).toFixed(2)}</label>
        <input type="range" min="0.3" max="1.8" step="0.05" value={t.intensity ?? 1}
          onChange={(e) => update({ intensity: Number(e.target.value) })} />
      </div>
      <div className="row">
        <label>Hints</label>
        <div className="seg">
          <button className={t.showHints !== false ? 'on' : ''} onClick={() => update({ showHints: true })}>On</button>
          <button className={t.showHints === false ? 'on' : ''} onClick={() => update({ showHints: false })}>Off</button>
        </div>
      </div>
    </div>
  );
};

window.Tweaks = Tweaks;