// tweaks.jsx — Tweak panel with edit-mode protocol

function Tweaks({ values, onChange }) {
  return (
    <div className="tweaks-panel" role="complementary" aria-label="Tweaks">
      <div className="tweaks-head">
        <span>Tweaks</span>
        <span style={{ color: 'var(--muted)' }}>live</span>
      </div>
      <div className="tweaks-body">
        <label>
          Accent
          <input
            type="color"
            value={values.accent}
            onChange={(e) => onChange({ accent: e.target.value })}
          />
        </label>
        <label>
          Display serif
          <select
            value={values.serifDisplay}
            onChange={(e) => onChange({ serifDisplay: e.target.value })}
          >
            <option value="Newsreader">Newsreader</option>
            <option value="Instrument Serif">Instrument Serif</option>
            <option value="EB Garamond">EB Garamond</option>
            <option value="Playfair Display">Playfair Display</option>
          </select>
        </label>
        <label>
          Density
          <select
            value={values.density}
            onChange={(e) => onChange({ density: e.target.value })}
          >
            <option value="tight">Tight</option>
            <option value="comfortable">Comfortable</option>
            <option value="roomy">Roomy</option>
          </select>
        </label>
        <label>
          12-col grid overlay
          <input
            type="checkbox"
            checked={!!values.showGrid}
            onChange={(e) => onChange({ showGrid: e.target.checked })}
          />
        </label>
      </div>
    </div>
  );
}

// hook — edit-mode plumbing
function useTweaks() {
  const [values, setValues] = React.useState(() => ({ ...(window.TWEAK_DEFAULTS || {}) }));
  const [enabled, setEnabled] = React.useState(false);

  // apply side-effects whenever values change
  React.useEffect(() => {
    const root = document.documentElement;
    if (values.accent) root.style.setProperty('--accent', values.accent);
    if (values.serifDisplay) {
      root.style.setProperty('--serif', `'${values.serifDisplay}', 'Iowan Old Style', Georgia, serif`);
      ensureFontLoaded(values.serifDisplay);
    }
    document.body.classList.toggle('grid-on', !!values.showGrid);
    document.body.classList.toggle('density-tight', values.density === 'tight');
    document.body.classList.toggle('density-roomy', values.density === 'roomy');
  }, [values]);

  // edit mode protocol
  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e && e.data;
      if (!d || !d.type) return;
      if (d.type === '__activate_edit_mode') setEnabled(true);
      else if (d.type === '__deactivate_edit_mode') setEnabled(false);
    };
    window.addEventListener('message', onMsg);
    // announce AFTER listener is live
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (_) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (patch) => {
    setValues((v) => {
      const next = { ...v, ...patch };
      try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*'); } catch (_) {}
      return next;
    });
  };

  return { values, update, enabled };
}

// google-font loader cache
const _loadedFonts = new Set(['Newsreader', 'IBM Plex Mono']);
function ensureFontLoaded(family) {
  if (_loadedFonts.has(family)) return;
  _loadedFonts.add(family);
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  const fam = family.replace(/\s+/g, '+');
  link.href = `https://fonts.googleapis.com/css2?family=${fam}:ital,wght@0,300;0,400;0,500;1,400&display=swap`;
  document.head.appendChild(link);
}

Object.assign(window, { Tweaks, useTweaks });