/* global React */
const { useState, useEffect } = React;

function useTweaks() {
  const [t, setT] = useState(window.__TWEAKS);

  function set(patch) {
    const next = { ...t, ...patch };
    setT(next);
    window.__TWEAKS = next;
    applyTweaks(next);
    // Persist via edit_mode host (silent no-op outside the host)
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
    } catch (e) {}
  }

  useEffect(() => { applyTweaks(t); }, []);

  return [t, set];
}

function applyTweaks(t) {
  const root = document.documentElement;
  // Effects intensity
  const fxMap = { minimal: 0.25, medium: 1, max: 1.3 };
  root.style.setProperty('--fx', fxMap[t.effectsIntensity] ?? 1);
  document.body.dataset.fx = t.effectsIntensity;
  // Heading font
  root.style.setProperty('--font-serif', `'${t.headingFont}', Georgia, serif`);
  // Accent hue
  root.style.setProperty('--accent-h', t.accentHue);
}

const FONTS = [
  { label: 'Fraunces', value: 'Fraunces' },
  { label: 'Instrument', value: 'Instrument Serif' },
  { label: 'Playfair', value: 'Playfair Display' },
];

const ACCENTS = [
  { label: 'Ambra', hue: 75 },
  { label: 'Oliva', hue: 130 },
  { label: 'Cielo', hue: 230 },
  { label: 'Viola', hue: 290 },
  { label: 'Rosso', hue: 25 },
];

function TweaksPanel() {
  const [t, set] = useTweaks();
  const [open, setOpen] = useState(false);

  useEffect(() => {
    function onMsg(ev) {
      if (!ev.data) return;
      if (ev.data.type === '__activate_edit_mode') setOpen(true);
      if (ev.data.type === '__deactivate_edit_mode') setOpen(false);
    }
    window.addEventListener('message', onMsg);
    // Announce AFTER listener is wired
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  if (!open) return null;

  return (
    <div className="tweaks-panel" role="dialog" aria-label="Tweaks">
      <button className="tweaks-close" onClick={() => {
        setOpen(false);
        try { window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*'); } catch (e) {}
      }}>✕</button>
      <div className="tweaks-title">Tweaks</div>
      <div className="tweaks-subtitle">Personalizza il sito in tempo reale</div>

      <div className="tweak-group">
        <h4>Intensità effetti</h4>
        <div className="tweak-radio">
          {['minimal', 'medium', 'max'].map(v => (
            <button key={v} className={t.effectsIntensity === v ? 'active' : ''} onClick={() => set({ effectsIntensity: v })}>{v}</button>
          ))}
        </div>
      </div>

      <div className="tweak-group">
        <h4>Font titoli</h4>
        <select className="tweak-select" value={t.headingFont} onChange={e => set({ headingFont: e.target.value })}>
          {FONTS.map(f => <option key={f.value} value={f.value}>{f.label}</option>)}
        </select>
      </div>

      <div className="tweak-group">
        <h4>Colore accento</h4>
        <div className="tweak-radio">
          {ACCENTS.map(a => (
            <button
              key={a.hue}
              className={t.accentHue === a.hue ? 'active' : ''}
              onClick={() => set({ accentHue: a.hue })}
              title={a.label}
              style={{
                background: t.accentHue === a.hue ? `oklch(0.78 0.13 ${a.hue})` : 'transparent',
                borderColor: `oklch(0.78 0.13 ${a.hue})`,
                color: t.accentHue === a.hue ? '#0a0a0a' : `oklch(0.78 0.13 ${a.hue})`,
              }}
            >{a.label}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });