// Tweaks panel — hero animation, accent color, image treatment

function TweaksPanel() {
  const [open, setOpen] = React.useState(false);
  const [t, setT] = React.useState(window.TWEAKS);

  React.useEffect(() => {
    const onMsg = (e) => {
      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 set = (key, val) => {
    const next = { ...t, [key]: val };
    setT(next);
    window.TWEAKS = next;
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
    // Hot-reload hero by re-rendering: force the Hero to pick up new anim
    window.dispatchEvent(new CustomEvent('tweaks-changed', { detail: next }));
  };

  if (!open) return null;

  return (
    <div className="tweaks-panel open">
      <h3>Tweaks</h3>
      <div className="tweak-row">
        <div className="tweak-label">Hero animation</div>
        <div className="tweak-options">
          {[
            ['earth-spin', 'Earth Spin'],
            ['image-reveal', 'Night Office'],
            ['facade-sweep', 'Facade Sweep'],
          ].map(([v, l]) => (
            <button key={v} className={`tweak-chip ${t.heroAnimation === v ? 'active' : ''}`} onClick={()=>set('heroAnimation', v)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-label">Accent color</div>
        <div className="tweak-options">
          {[
            ['silver-green', '#7f9695', 'Silver-green'],
            ['brass', '#c4a66b', 'Brass'],
            ['royal', '#003594', 'Royal'],
          ].map(([v, hex, l]) => (
            <button key={v} className={`tweak-chip ${t.accentColor === v ? 'active' : ''}`} onClick={()=>{
              document.documentElement.style.setProperty('--accent', hex);
              set('accentColor', v);
            }}>
              <span style={{ display:'inline-block', width:8, height:8, borderRadius:'50%', background:hex, marginRight:6, verticalAlign:'middle' }} />
              {l}
            </button>
          ))}
        </div>
      </div>
      <div style={{ marginTop:14, paddingTop:10, borderTop:'1px solid var(--mist)', fontSize:10, color:'var(--muted)' }}>
        Changes persist across reloads when activated from the toolbar.
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });