/** @jsx React.createElement */
const { useState: useTK, useEffect: useTKE } = React;

function TweaksPanel() {
  const [active, setActive] = useTK(false);
  const [b, setB] = useTK({ ...window.BRAND });

  // register listener BEFORE announcing availability
  useTKE(() => {
    function onMsg(e) {
      const t = e.data && e.data.type;
      if (t === '__activate_edit_mode') setActive(true);
      else if (t === '__deactivate_edit_mode') setActive(false);
    }
    window.addEventListener('message', onMsg);
    // announce
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (_) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  function update(patch) {
    const next = { ...b, ...patch };
    setB(next);
    // live mutation
    Object.assign(window.BRAND, patch);
    if (patch.primaryColor) {
      if (window.__applyBrandColor) window.__applyBrandColor(patch.primaryColor);
      else document.documentElement.style.setProperty('--brand', patch.primaryColor);
    }
    window.dispatchEvent(new CustomEvent('brand:rerender'));
    // persist
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*'); } catch (_) {}
  }

  if (!active) return null;

  return (
    <div className="tweaks-panel" role="dialog" aria-label="Tweaks">
      <div className="tweaks-head">
        <span className="tweaks-title">Tweaks</span>
        <button className="tweaks-close" onClick={() => setActive(false)} aria-label="Cerrar">×</button>
      </div>

      <div className="tweaks-body">
        <div className="tweaks-group">
          <div className="tweaks-group-title">Contacto</div>
          <label className="tweaks-field">
            <span>Dominio</span>
            <input value={b.domain} onChange={e => update({ domain: e.target.value })} />
          </label>
          <label className="tweaks-field">
            <span>Email (local)</span>
            <div className="tweaks-inline">
              <input value={b.emailLocal} onChange={e => update({ emailLocal: e.target.value })} />
              <span className="tweaks-suffix">@{b.domain}</span>
            </div>
          </label>
          <label className="tweaks-field">
            <span>Teléfono</span>
            <input value={b.phone} onChange={e => update({ phone: e.target.value })} />
          </label>
          <label className="tweaks-field">
            <span>Ubicación</span>
            <input value={b.location} onChange={e => update({ location: e.target.value })} />
          </label>
        </div>

        <div className="tweaks-group">
          <div className="tweaks-group-title">Marca</div>
          <label className="tweaks-field">
            <span>Tagline</span>
            <input value={b.tagline} onChange={e => update({ tagline: e.target.value })} />
          </label>
          <label className="tweaks-field">
            <span>Color primario</span>
            <div className="tweaks-inline">
              <input type="color" value={b.primaryColor} onChange={e => update({ primaryColor: e.target.value })} />
              <input value={b.primaryColor} onChange={e => update({ primaryColor: e.target.value })} />
            </div>
          </label>
          <div className="tweaks-swatches">
            {['#0E8FD6','#1F6FEB','#0F766E','#7C3AED','#D97706','#DC2626','#0B1B29'].map(c => (
              <button key={c} className="tweaks-swatch" style={{ background: c, outline: b.primaryColor === c ? '2px solid #0B1B29' : 'none' }} onClick={() => update({ primaryColor: c })} aria-label={c} />
            ))}
          </div>
          <label className="tweaks-field">
            <span>CTA nav</span>
            <input value={b.ctaLabel} onChange={e => update({ ctaLabel: e.target.value })} />
          </label>
          <label className="tweaks-check">
            <input type="checkbox" checked={!!b.showSocial} onChange={e => update({ showSocial: e.target.checked })} />
            <span>Mostrar redes sociales</span>
          </label>
        </div>
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;