/* ═══════════════════════════════════════════════════════════════════════════
   ESBART — Shared <TweaksPanel> component + hook
   Global tweaks for the whole site: accent hue + type scale.
   Persists to the EDITMODE block on the host page (see ESBART_TWEAKS below).

   Usage:
     const tweaks = EsbartTweaks.useTweaks();
     // Render the panel somewhere (usually at root):
     <EsbartTweaksPanel {...tweaks} extra={null} />

   To add page-specific tweaks, pass them as children or via the `extra` prop:
     <EsbartTweaksPanel {...tweaks} extra={<MyPageTweaks .../>} />

   Host page must define:
     const ESBART_TWEAKS = / *EDITMODE-BEGIN* / {
       "accentHue": 350,
       "typeScale": 1
     } / *EDITMODE-END* /;
   (remove spaces inside comment markers; pseudo-shown to avoid this file being parsed)
   ═══════════════════════════════════════════════════════════════════════════ */

function useEsbartTweaks(defaults = { accentHue: 350, typeScale: 1 }) {
  const initial = (typeof window.ESBART_TWEAKS === 'object' && window.ESBART_TWEAKS) || defaults;

  const [accent, setAccent] = React.useState(initial.accentHue ?? defaults.accentHue);
  const [typeScale, setTypeScale] = React.useState(initial.typeScale ?? defaults.typeScale);
  const [open, setOpen] = React.useState(false);

  function persist(edits) {
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*'); } catch (e) {}
  }

  // Apply accent hue -> CSS vars
  React.useEffect(() => {
    const h = accent;
    const root = document.documentElement.style;
    root.setProperty('--burgundy', `hsl(${h}, 60%, 34%)`);
    root.setProperty('--burgundy-light', `hsl(${h}, 55%, 45%)`);
    root.setProperty('--burgundy-dark', `hsl(${h}, 62%, 26%)`);
    persist({ accentHue: h });
  }, [accent]);

  // Apply type scale
  React.useEffect(() => {
    document.documentElement.style.fontSize = (16 * typeScale) + 'px';
    persist({ typeScale });
  }, [typeScale]);

  // Edit-mode protocol: listen for activate/deactivate and announce availability
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  return { accent, setAccent, typeScale, setTypeScale, open, setOpen };
}

function EsbartTweaksPanel({ accent, setAccent, typeScale, setTypeScale, open, extra }) {
  return (
    <div className={`tweaks-panel ${open ? 'open' : ''}`}>
      <h5>Tweaks</h5>

      <label>Accent hue
        <div className="row" style={{marginTop: 8}}>
          {[350, 15, 200, 140, 30].map(h => (
            <div
              key={h}
              className={`sw ${accent === h ? 'active' : ''}`}
              style={{background: `hsl(${h}, 60%, 34%)`}}
              onClick={() => setAccent(h)}
              title={`Hue ${h}°`}
            />
          ))}
        </div>
      </label>

      <label>Type scale
        <select value={typeScale} onChange={e => setTypeScale(parseFloat(e.target.value))}>
          <option value="0.9">Compact</option>
          <option value="1">Default</option>
          <option value="1.08">Generous</option>
        </select>
      </label>

      {extra}
    </div>
  );
}

window.EsbartTweaks = { useTweaks: useEsbartTweaks };
window.EsbartTweaksPanel = EsbartTweaksPanel;