// Tweaks — floating panel; visible only when host toggles edit mode on.
// Reduced to what matters for the immersive rebuild: parallax variant.
// Other knobs (theme, density) are vestigial and removed.

const { useEffect: useTwkEffect, useState: useTwkState } = React;

const Tweaks = ({ state, setState }) => {
  const [active, setActive] = useTwkState(false);

  useTwkEffect(() => {
    const onMsg = (e) => {
      const t = e && e.data && e.data.type;
      if (t === '__activate_edit_mode') setActive(true);
      if (t === '__deactivate_edit_mode') setActive(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (patch) => {
    const next = { ...state, ...patch };
    setState(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
    } catch {}
  };

  if (!active) return null;

  const Seg = ({ value, options, onPick }) => (
    <div className="tweaks__seg">
      {options.map(o => (
        <button key={o} className={value === o ? 'on' : ''} onClick={() => onPick(o)}>{o}</button>
      ))}
    </div>
  );

  return (
    <aside className="tweaks">
      <div className="tweaks__title">
        <span>Tweaks</span>
        <span style={{color:'var(--fg-faint)'}}>feed</span>
      </div>

      <div className="tweaks__row">
        <span className="tweaks__label">Parallax</span>
        <Seg
          value={state.parallax}
          options={['subtle','cinematic','aggressive']}
          onPick={v => update({ parallax: v })}
        />
      </div>

      <div className="tweaks__row">
        <span className="tweaks__label">Hover</span>
        <Seg
          value={state.hover}
          options={['none','darken-sm','darken-md','darken-lg','lighten','desat','warmth','zoom','edges']}
          onPick={v => update({ hover: v })}
        />
      </div>

      <div className="tweaks__row">
        <span className="tweaks__label" style={{color:'var(--fg-faint)', fontSize: 9}}>
          Hover a sit to feel each hover mode. Move mouse to feel parallax.
        </span>
      </div>
    </aside>
  );
};

window.Tweaks = Tweaks;