// Tweaks panel — style toggles

const { useState: useStateTw, useEffect: useEffectTw } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "green",
  "density": "comfortable",
  "serifHeavy": false
}/*EDITMODE-END*/;

function Tweaks() {
  const [visible, setVisible] = useStateTw(false);
  const [state, setState] = useStateTw({...TWEAK_DEFAULTS});

  useEffectTw(() => {
    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);
    // Signal availability AFTER listener is mounted
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  useEffectTw(() => {
    const body = document.body;
    body.classList.remove('theme-mono', 'theme-blue', 'theme-orange');
    if (state.accent === 'mono') body.classList.add('theme-mono');
    if (state.accent === 'blue') body.classList.add('theme-blue');
    if (state.accent === 'orange') body.classList.add('theme-orange');
    body.classList.toggle('dense', state.density === 'dense');
    body.classList.toggle('serif-heavy', !!state.serifHeavy);
  }, [state]);

  const update = (patch) => {
    const next = { ...state, ...patch };
    setState(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="tw-row">
        <label className="tw-label">Accent kleur</label>
        <div className="tw-opts">
          {[
            { v: 'green', label: 'Groen' },
            { v: 'blue', label: 'Blauw' },
            { v: 'orange', label: 'Oranje' },
            { v: 'mono', label: 'Mono' },
          ].map(o => (
            <button key={o.v}
                    className={state.accent === o.v ? 'active' : ''}
                    onClick={() => update({ accent: o.v })}>{o.label}</button>
          ))}
        </div>
      </div>
      <div className="tw-row">
        <label className="tw-label">Dichtheid</label>
        <div className="tw-opts">
          {[
            { v: 'comfortable', label: 'Comfortabel' },
            { v: 'dense', label: 'Compact' },
          ].map(o => (
            <button key={o.v}
                    className={state.density === o.v ? 'active' : ''}
                    onClick={() => update({ density: o.v })}>{o.label}</button>
          ))}
        </div>
      </div>
      <div className="tw-row">
        <label className="tw-label">Serif headings in portfolio</label>
        <div className="tw-opts">
          <button className={state.serifHeavy ? 'active' : ''}
                  onClick={() => update({ serifHeavy: true })}>Aan</button>
          <button className={!state.serifHeavy ? 'active' : ''}
                  onClick={() => update({ serifHeavy: false })}>Uit</button>
        </div>
      </div>
    </div>
  );
}

window.Tweaks = Tweaks;