/* Tweaks panel — theme, accent, type, density, report layout, rec UI.
   Persists edits via parent postMessage + localStorage. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "ink-red",
  "type": "editorial",
  "density": "dense",
  "reportLayout": "editorial",
  "recUI": "radial"
}/*EDITMODE-END*/;

function useTweaks() {
  const [tweaks, setTweaks] = React.useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('ca_tweaks') || 'null');
      return { ...TWEAK_DEFAULTS, ...(saved || {}) };
    } catch { return TWEAK_DEFAULTS; }
  });
  React.useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = tweaks.theme;
    root.dataset.accent = tweaks.accent;
    root.dataset.type = tweaks.type;
    root.dataset.density = tweaks.density;
    localStorage.setItem('ca_tweaks', JSON.stringify(tweaks));
  }, [tweaks]);
  const set = (k, v) => setTweaks((t) => {
    const next = { ...t, [k]: v };
    try {
      window.parent?.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    } catch {}
    return next;
  });
  return [tweaks, set];
}

function TweaksPanel({ tweaks, setTweak }) {
  const [open, setOpen] = React.useState(false);
  const [editMode, setEditMode] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => {
      const t = e.data && e.data.type;
      if (t === '__activate_edit_mode') { setEditMode(true); setOpen(true); }
      if (t === '__deactivate_edit_mode') { setEditMode(false); setOpen(false); }
    };
    window.addEventListener('message', handler);
    try { window.parent?.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', handler);
  }, []);

  if (!editMode) return null;

  const Swatch = ({ v, color }) => (
    <button
      aria-label={v}
      onClick={() => setTweak('accent', v)}
      className={cls('tweak-swatch', tweaks.accent === v && 'active')}
      style={{ background: color }}
    />
  );
  const Pill = ({ k, v, label }) => (
    <button
      onClick={() => setTweak(k, v)}
      className={cls('tweak-pill', tweaks[k] === v && 'active')}
    >{label}</button>
  );

  return (
    <>
      <button className="tweaks-fab" onClick={() => setOpen((o) => !o)} aria-label="Tweaks">
        <Icon name="tune" size={18} />
      </button>
      {open && (
        <div className="tweaks-panel" onClick={(e) => e.stopPropagation()}>
          <div className="tweaks-hd">
            <div className="tweaks-hd-title">Tweaks</div>
            <button className="btn btn-ghost btn-sm" onClick={() => setOpen(false)}>
              <Icon name="close" size={12} />
            </button>
          </div>
          <div className="tweaks-body">
            <div className="tweak-group">
              <label>Theme</label>
              <div className="tweak-pills">
                <Pill k="theme" v="light" label="Light" />
                <Pill k="theme" v="dark"  label="Dark" />
              </div>
            </div>
            <div className="tweak-group">
              <label>Accent</label>
              <div style={{ display: 'flex', gap: 8 }}>
                <Swatch v="ink-red" color="#a93226" />
                <Swatch v="forest"  color="#2d6a4f" />
                <Swatch v="indigo"  color="#2e4a7a" />
                <Swatch v="ochre"   color="#8a5a1b" />
                <Swatch v="plum"    color="#6c4675" />
              </div>
            </div>
            <div className="tweak-group">
              <label>Typography</label>
              <div className="tweak-pills">
                <Pill k="type" v="editorial" label="Editorial" />
                <Pill k="type" v="swiss"     label="Swiss" />
                <Pill k="type" v="academic"  label="Academic" />
                <Pill k="type" v="geometric" label="Geometric" />
              </div>
            </div>
            <div className="tweak-group">
              <label>Density</label>
              <div className="tweak-pills">
                <Pill k="density" v="airy"     label="Airy" />
                <Pill k="density" v="balanced" label="Balanced" />
                <Pill k="density" v="dense"    label="Dense" />
              </div>
            </div>
            <div className="tweak-group">
              <label>Report layout</label>
              <div className="tweak-pills">
                <Pill k="reportLayout" v="editorial" label="Editorial" />
                <Pill k="reportLayout" v="dashboard" label="Dashboard" />
                <Pill k="reportLayout" v="briefing"  label="Briefing" />
              </div>
            </div>
            <div className="tweak-group">
              <label>Recording UI</label>
              <div className="tweak-pills">
                <Pill k="recUI" v="radial"  label="Radial" />
                <Pill k="recUI" v="wave"    label="Waveform" />
                <Pill k="recUI" v="minimal" label="Minimal" />
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

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