/* ============================================================
   Kulfi website — Tweaks panel
   Toggles accent palette + hero treatment. Persists via host.
   ============================================================ */

const { useState, useEffect, useCallback } = React;

const ACCENT_OPTIONS = [
  { key: 'cherry',  label: 'Cherry',  a: '#ff6b8a', b: '#ff9b78' },
  { key: 'sunset',  label: 'Sunset',  a: '#ff6b8a', b: '#a855f7' },
  { key: 'ember',   label: 'Ember',   a: '#f23a3a', b: '#ffb86b' },
];

const HERO_OPTIONS = [
  { key: 'collage', label: 'Collage' },
  { key: 'still',   label: 'Glow' },
  { key: 'minimal', label: 'Type' },
];

function applyTweaks(t) {
  const accent = ACCENT_OPTIONS.find(x => x.key === t.accent) || ACCENT_OPTIONS[0];
  document.documentElement.style.setProperty('--accent-a', accent.a);
  document.documentElement.style.setProperty('--accent-b', accent.b);
  document.documentElement.style.setProperty('--accent-grad', `linear-gradient(89deg, ${accent.a}, ${accent.b})`);
  document.body.dataset.hero = t.hero || 'collage';
}

function TweaksPanel() {
  const [open, setOpen] = useState(false);
  const [enabled, setEnabled] = useState(false);
  const [tweaks, setTweaks] = useState(() => ({ ...(window.__TWEAKS || { accent: 'cherry', hero: 'collage' }) }));

  // Talk to host
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d || typeof d !== 'object') return;
      if (d.type === '__activate_edit_mode')   { setEnabled(true); setOpen(true); }
      if (d.type === '__deactivate_edit_mode') { setEnabled(false); setOpen(false); }
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Persist on change
  const update = useCallback((patch) => {
    setTweaks(prev => {
      const next = { ...prev, ...patch };
      applyTweaks(next);
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
      return next;
    });
  }, []);

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

  if (!enabled) return null;

  return (
    <div className="tw-panel">
      <header>
        <h6>Tweaks</h6>
        <button className="close" onClick={close} aria-label="Close tweaks">×</button>
      </header>

      <div className="row">
        <label>Accent</label>
        <div className="swatches">
          {ACCENT_OPTIONS.map(opt => (
            <button
              key={opt.key}
              className={`swatch${tweaks.accent === opt.key ? ' on' : ''}`}
              style={{ background: `linear-gradient(89deg, ${opt.a}, ${opt.b})` }}
              onClick={() => update({ accent: opt.key })}
              title={opt.label}
              aria-label={opt.label}
            />
          ))}
        </div>
      </div>

      <div className="row">
        <label>Hero treatment</label>
        <div className="segmented">
          {HERO_OPTIONS.map(opt => (
            <button
              key={opt.key}
              className={tweaks.hero === opt.key ? 'on' : ''}
              onClick={() => update({ hero: opt.key })}
            >{opt.label}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

const mount = document.getElementById('tweaks-mount');
if (mount) {
  mount.hidden = false;
  ReactDOM.createRoot(mount).render(<TweaksPanel />);
}