/* global React, ReactDOM */
// Tweaks panel — palette + hero copy + language

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "emerald",
  "heroVariant": "amor",
  "language": "es"
}/*EDITMODE-END*/;

const PALETTES = {
  emerald: { '--c-emerald': '#0D2421', '--c-nostalgia': '#764A61', '--c-golden': '#AA8E67' },
  nostalgia: { '--c-emerald': '#3a2230', '--c-nostalgia': '#916B6B', '--c-golden': '#AA8E67' },
  golden:   { '--c-emerald': '#2a2520', '--c-nostalgia': '#AA8E67', '--c-golden': '#916B6B' },
  soul:     { '--c-emerald': '#3a423b', '--c-nostalgia': '#9FAA9A', '--c-golden': '#AA8E67' },
};

const COPY = {
  es: {
    amor:    { line1: 'Colecciona',   line2: 'momentos de amor.', sub: 'Fotografía materna e infantil, hecha despacio. Inmortalizamos las etapas que no vuelven.' },
    eternos: { line1: 'Hagamos',      line2: 'eternos los recuerdos.', sub: 'Una década traduciendo en luz lo que tu familia no quiere olvidar. Estudio in‑house en Sabaneta.' },
    luz:     { line1: 'Escribo',      line2: 'historias con luz.', sub: 'Maternidad. Recién nacidos. Infancia. Familia. Cada sesión es un capítulo que se vuelve álbum.' },
  },
  en: {
    amor:    { line1: 'Collect',      line2: 'moments of love.', sub: 'Maternity and child photography, slow-made. We immortalize the stages that don\'t come back.' },
    eternos: { line1: 'Let us make',  line2: 'memories eternal.', sub: 'A decade translating into light what your family doesn\'t want to forget. In-house studio in Sabaneta.' },
    luz:     { line1: 'I write',      line2: 'stories with light.', sub: 'Maternity. Newborns. Childhood. Family. Each session is a chapter that becomes an album.' },
  }
};

function TweaksPanel({ tweaks, setTweak }) {
  const [open, setOpen] = useState(false);
  const [available, setAvailable] = useState(false);

  useEffect(() => {
    const onMsg = (e) => {
      if (!e?.data?.type) return;
      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' }, '*');
    setAvailable(true);
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const close = () => {
    setOpen(false);
    window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
  };

  return (
    <div className={`tweaks ${open?'open':''}`}>
      <h4>
        Tweaks
        <button onClick={close}>×</button>
      </h4>
      <div className="group">
        <label>Paleta</label>
        <div className="swatches">
          {Object.keys(PALETTES).map(k => (
            <div
              key={k}
              className={`sw ${tweaks.palette===k?'active':''}`}
              style={{ background: PALETTES[k]['--c-nostalgia'] }}
              onClick={()=>setTweak('palette', k)}
              title={k}
            ></div>
          ))}
        </div>
      </div>
      <div className="group">
        <label>Hero · texto</label>
        <div className="segm">
          {['amor','eternos','luz'].map(k => (
            <button key={k} className={tweaks.heroVariant===k?'active':''} onClick={()=>setTweak('heroVariant', k)}>{k}</button>
          ))}
        </div>
      </div>
      <div className="group">
        <label>Idioma</label>
        <div className="segm">
          <button className={tweaks.language==='es'?'active':''} onClick={()=>setTweak('language','es')}>ES</button>
          <button className={tweaks.language==='en'?'active':''} onClick={()=>setTweak('language','en')}>EN</button>
        </div>
      </div>
    </div>
  );
}

function applyPalette(p) {
  const vars = PALETTES[p] || PALETTES.emerald;
  const root = document.documentElement;
  Object.entries(vars).forEach(([k,v]) => root.style.setProperty(k, v));
}

Object.assign(window, { TweaksPanel, TWEAK_DEFAULTS, COPY, PALETTES, applyPalette });