// Tweaks panel — live palette + type pairing + hero photo
const NikkiTweaks = ({ values, setValues }) => {
  const [active, setActive] = React.useState(false);
  const [open, setOpen] = React.useState(true);

  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setActive(true);
      if (e.data.type === '__deactivate_edit_mode') setActive(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const update = (patch) => {
    const next = { ...values, ...patch };
    setValues(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  if (!active) return null;

  const palettes = [
    { id: 'vampire', label: 'Amethyst Court', swatches: ['#2D1B4E', '#a8213a', '#D4B882'] },
    { id: 'brotherhood', label: 'Dark Brotherhood', swatches: ['#111111', '#C0392B', '#B8860B'] },
    { id: 'gothic', label: 'Gothic Noir', swatches: ['#0A0A0A', '#4A0D12', '#C9A227'] },
  ];
  const typePairs = [
    { id: 'aristocratic', label: 'Cormorant × Lora', sub: 'PNR Aristocratic' },
    { id: 'hybrid', label: 'Playfair × Bebas × Libre', sub: 'PNR+MC Hybrid' },
    { id: 'editorial', label: 'Cormorant × Raleway', sub: 'Editorial modern' },
  ];

  return (
    <div className={`nr-tweaks ${open ? '' : 'nr-tweaks-collapsed'}`}>
      <button className="nr-tweaks-handle" onClick={() => setOpen(!open)}>
        <span>Tweaks</span>
        <span className="nr-tweaks-chev">{open ? '▾' : '▴'}</span>
      </button>
      {open && (
        <div className="nr-tweaks-body">
          <div className="nr-tweak-group">
            <span className="nr-tweak-head">Palette</span>
            <div className="nr-tweak-row">
              {palettes.map((p) => (
                <button
                  key={p.id}
                  onClick={() => update({ palette: p.id })}
                  className={`nr-tweak-chip ${values.palette === p.id ? 'is-on' : ''}`}
                  title={p.label}
                >
                  <span className="nr-tweak-swatches">
                    {p.swatches.map((s) => <span key={s} style={{ background: s }} />)}
                  </span>
                  <span className="nr-tweak-label">{p.label}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="nr-tweak-group">
            <span className="nr-tweak-head">Type pairing</span>
            <div className="nr-tweak-col">
              {typePairs.map((t) => (
                <button
                  key={t.id}
                  onClick={() => update({ type: t.id })}
                  className={`nr-tweak-opt ${values.type === t.id ? 'is-on' : ''}`}
                >
                  <span className="nr-tweak-opt-label">{t.label}</span>
                  <span className="nr-tweak-opt-sub">{t.sub}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="nr-tweak-group">
            <span className="nr-tweak-head">Hero photo</span>
            <div className="nr-tweak-row">
              {[
                { id: 'banner', label: 'Candlelit portrait', path: 'assets/nikki-hero.jpg' },
                { id: 'library', label: 'Wide library', path: 'assets/nikki-hero-banner.png' },
                { id: 'chaise', label: 'Chaise full', path: 'assets/nikki-chaise.png' },
              ].map((h) => (
                <button
                  key={h.id}
                  onClick={() => update({ hero: h.id })}
                  className={`nr-tweak-hero ${values.hero === h.id ? 'is-on' : ''}`}
                >
                  <img src={h.path} alt="" />
                  <span>{h.label}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="nr-tweak-group">
            <span className="nr-tweak-head">Grain</span>
            <label className="nr-tweak-toggle">
              <input
                type="checkbox"
                checked={!!values.grain}
                onChange={(e) => update({ grain: e.target.checked })}
              />
              <span>Film grain overlay</span>
            </label>
          </div>
        </div>
      )}
    </div>
  );
};

window.NikkiTweaks = NikkiTweaks;