// Tweaks panel — floating, hidden behind Tweaks toggle from toolbar.
const { useState: useStateTW, useEffect: useEffectTW } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "cyan",
  "density": "comfortable",
  "journeyStyle": "scroll",
  "displayFont": "geist"
}/*EDITMODE-END*/;

const ACCENTS = {
  cyan:   { '--accent': '#5BC5E3', '--accent-2': '#6B8BC5' },
  blue:   { '--accent': '#3B82F6', '--accent-2': '#2662AE' },
  purple: { '--accent': '#7B5DAD', '--accent-2': '#5A6DBB' },
};
const FONTS = {
  geist: { display: "'Geist', -apple-system, sans-serif", body: "'Geist', -apple-system, sans-serif" },
  editorial: { display: "'Instrument Serif', 'Times New Roman', serif", body: "'Geist', sans-serif" },
  wide: { display: "'Space Grotesk', sans-serif", body: "'Geist', sans-serif" },
};

window.useTweaks = function useTweaks() {
  const [tweaks, setTweaks] = useStateTW(() => {
    try {
      const saved = localStorage.getItem('tc-tweaks');
      return saved ? { ...TWEAK_DEFAULTS, ...JSON.parse(saved) } : TWEAK_DEFAULTS;
    } catch { return TWEAK_DEFAULTS; }
  });

  useEffectTW(() => {
    const root = document.documentElement;
    const accent = ACCENTS[tweaks.accent] || ACCENTS.cyan;
    Object.entries(accent).forEach(([k, v]) => root.style.setProperty(k, v));
    const font = FONTS[tweaks.displayFont] || FONTS.geist;
    root.style.setProperty('--font-display', font.display);
    root.setAttribute('data-density', tweaks.density);
    root.setAttribute('data-journey', tweaks.journeyStyle);
    try { localStorage.setItem('tc-tweaks', JSON.stringify(tweaks)); } catch {}
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: tweaks }, '*');
    } catch {}
  }, [tweaks]);

  return [tweaks, setTweaks];
};

window.TweaksPanel = function TweaksPanel() {
  const [visible, setVisible] = useStateTW(false);
  const [tweaks, setTweaks] = window.useTweaks();

  useEffectTW(() => {
    const handler = (e) => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === '__activate_edit_mode') setVisible(true);
      if (e.data.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', handler);
  }, []);

  if (!visible) return null;

  const set = (k, v) => setTweaks(t => ({ ...t, [k]: v }));

  return (
    <div className="tweaks-panel">
      <h4>Tweaks</h4>
      <div className="tweak-row">
        <div className="tweak-row-label">Accent</div>
        <div className="tweak-options">
          {['cyan', 'blue', 'purple'].map(c => (
            <button key={c} className={`tweak-opt ${tweaks.accent === c ? 'active' : ''}`} onClick={() => set('accent', c)}>{c}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-row-label">Display type</div>
        <div className="tweak-options">
          {['geist', 'editorial', 'wide'].map(c => (
            <button key={c} className={`tweak-opt ${tweaks.displayFont === c ? 'active' : ''}`} onClick={() => set('displayFont', c)}>{c}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-row-label">Density</div>
        <div className="tweak-options">
          {['comfortable', 'compact'].map(c => (
            <button key={c} className={`tweak-opt ${tweaks.density === c ? 'active' : ''}`} onClick={() => set('density', c)}>{c}</button>
          ))}
        </div>
      </div>
    </div>
  );
};