// Tweaks panel — exposed when host toggles edit mode
const { useState, useEffect } = React;

window.TweaksPanel = function TweaksPanel({ tweaks, setTweaks }) {
  const [open, setOpen] = useState(false);

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

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

  return (
    <div className={`tweaks-panel ${open ? 'open' : ''}`}>
      <div className="head">
        <span>Tweaks</span>
        <button onClick={() => setOpen(false)}>×</button>
      </div>
      <div className="body">

        <div className="tweak-group">
          <div className="k">Accent color</div>
          <div className="swatches">
            {['#D94F2A', '#E8A317', '#1a1a1a', '#3A5BFF', '#5C6B5A'].map(c => (
              <span key={c} className={`swatch ${tweaks.accent === c ? 'active' : ''}`}
                style={{ background: c }} onClick={() => update({ accent: c })} />
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="k">Background tone</div>
          <div className="opts">
            {[
              { id: 'warm', label: 'Warm white', bg: '#f5f3ef' },
              { id: 'cool', label: 'Cool white', bg: '#f1f3f5' },
              { id: 'cream', label: 'Cream', bg: '#f4ede0' },
              { id: 'dark', label: 'Dark', bg: '#0f0f10' },
            ].map(o => (
              <button key={o.id} className={`opt ${tweaks.bgTone === o.id ? 'active' : ''}`}
                onClick={() => update({ bgTone: o.id })}>{o.label}</button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="k">Display font</div>
          <div className="opts">
            {[
              { id: 'inter-tight', label: 'Inter Tight' },
              { id: 'helvetica', label: 'Helvetica' },
              { id: 'space-grotesk', label: 'Space Grotesk' },
              { id: 'fraunces', label: 'Fraunces (serif)' },
            ].map(o => (
              <button key={o.id} className={`opt ${tweaks.displayFont === o.id ? 'active' : ''}`}
                onClick={() => update({ displayFont: o.id })}>{o.label}</button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="k">Categories layout</div>
          <div className="opts">
            {[
              { id: 'left-vertical', label: 'Left vertical' },
              { id: 'overlay-large', label: 'Large overlay' },
              { id: 'bottom-row', label: 'Bottom row' },
            ].map(o => (
              <button key={o.id} className={`opt ${tweaks.catLayout === o.id ? 'active' : ''}`}
                onClick={() => update({ catLayout: o.id })}>{o.label}</button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="k">Hover behaviour</div>
          <div className="opts">
            {[
              { id: 'crossfade-zoom', label: 'Crossfade + zoom' },
              { id: 'fade', label: 'Soft fade' },
              { id: 'wipe', label: 'Wipe' },
            ].map(o => (
              <button key={o.id} className={`opt ${tweaks.hover === o.id ? 'active' : ''}`}
                onClick={() => update({ hover: o.id })}>{o.label}</button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="k">Slideshow speed</div>
          <div className="opts">
            {[
              { id: 'slow', label: 'Slow (4s)' },
              { id: 'medium', label: 'Medium (2.4s)' },
              { id: 'fast', label: 'Fast (1.2s)' },
            ].map(o => (
              <button key={o.id} className={`opt ${tweaks.slideSpeed === o.id ? 'active' : ''}`}
                onClick={() => update({ slideSpeed: o.id })}>{o.label}</button>
            ))}
          </div>
        </div>

      </div>
    </div>
  );
};