// Tweaks panel — wires into host __edit_mode_* protocol
const { useState: useStateT, useEffect: useEffectT } = React;

const ACCENTS = [
  { name: 'Brand',     v: '#5C50FF' },
  { name: 'Dark',      v: '#3D31CC' },
];

const FONT_PAIRS = [
  { name: 'Space Grotesk + JetBrains Mono', display: '"Space Grotesk"', body: '"Space Grotesk"', mono: '"JetBrains Mono"' },
  { name: 'Geist + Geist Mono', display: '"Geist"', body: '"Geist"', mono: '"Geist Mono"' },
  { name: 'Archivo + IBM Plex Mono', display: '"Archivo"', body: '"Archivo"', mono: '"IBM Plex Mono"' },
  { name: 'Instrument Serif + JetBrains', display: '"Instrument Serif"', body: '"Space Grotesk"', mono: '"JetBrains Mono"' },
];

function TweaksPanel({ tweaks, setTweak, onClose, onUndo, canUndo }) {
  return (
    <aside className="tweaks" role="dialog" aria-label="Tweaks">
      <div className="tweaks__head">
        <span className="tweaks__title">◉ Tweaks</span>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <button
            className="tweaks__undo"
            onClick={onUndo}
            disabled={!canUndo}
            title={canUndo ? 'Undo last change' : 'Nothing to undo'}
            style={{
              opacity: canUndo ? 1 : 0.35,
              cursor: canUndo ? 'pointer' : 'not-allowed',
              fontSize: 12,
              fontFamily: 'var(--font-mono)',
              color: 'var(--fg)',
              border: '1px solid var(--line-strong)',
              padding: '4px 10px',
              borderRadius: 6,
              background: 'transparent',
            }}
          >↶ Undo</button>
          <button className="tweaks__close" onClick={onClose}>✕</button>
        </div>
      </div>

      <div className="tweak">
        <label className="tweak__label">// Accent color</label>
        <div className="tweak__swatches">
          {ACCENTS.map(a => (
            <button key={a.v} title={a.name} className={`tweak__swatch ${tweaks.accent === a.v ? 'is-on' : ''}`} style={{ background: a.v }} onClick={() => setTweak('accent', a.v)} />
          ))}
        </div>
      </div>

      <div className="tweak">
        <label className="tweak__label">// Theme</label>
        <div className="tweak__seg">
          <button className={tweaks.theme === 'dark' ? 'is-on' : ''} onClick={() => setTweak('theme', 'dark')}>Dark</button>
          <button className={tweaks.theme === 'light' ? 'is-on' : ''} onClick={() => setTweak('theme', 'light')}>Light</button>
        </div>
      </div>

      <div className="tweak">
        <label className="tweak__label">// Font pairing</label>
        <select value={tweaks.fontPair} onChange={e => setTweak('fontPair', Number(e.target.value))}>
          {FONT_PAIRS.map((p, i) => <option key={i} value={i}>{p.name}</option>)}
        </select>
      </div>

      <div className="tweak">
        <label className="tweak__label">// Hero headline</label>
        <input type="text" value={tweaks.headline} onChange={e => setTweak('headline', e.target.value)} />
      </div>

      <div className="tweak">
        <label className="tweak__label">// Hero layout</label>
        <div className="tweak__seg">
          {['orbit','split','stacked'].map(v => (
            <button key={v} className={tweaks.heroVariant === v ? 'is-on' : ''} onClick={() => setTweak('heroVariant', v)}>{v}</button>
          ))}
        </div>
      </div>

      <div className="tweak">
        <label className="tweak__label">// Grid density — {tweaks.gridDensity}px</label>
        <input type="range" min="240" max="440" step="20" value={tweaks.gridDensity} onChange={e => setTweak('gridDensity', Number(e.target.value))} />
      </div>

      <div className="tweak">
        <label className="tweak__label">// Motion intensity — {tweaks.motion.toFixed(2)}x</label>
        <input type="range" min="0" max="2" step="0.05" value={tweaks.motion} onChange={e => setTweak('motion', Number(e.target.value))} />
      </div>
    </aside>
  );
}

function applyTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty('--accent', t.accent);
  r.style.setProperty('--motion', String(t.motion));
  r.style.setProperty('--col-w', `${t.gridDensity}px`);
  r.setAttribute('data-theme', t.theme);
  const pair = FONT_PAIRS[t.fontPair] || FONT_PAIRS[0];
  r.style.setProperty('--font-display', `${pair.display}, ui-sans-serif, system-ui, sans-serif`);
  r.style.setProperty('--font-body', `${pair.body}, ui-sans-serif, system-ui, sans-serif`);
  r.style.setProperty('--font-mono', `${pair.mono}, ui-monospace, monospace`);
}

function useTweaks(defaults) {
  const [tweaks, setTweaks] = useStateT(defaults);
  const [open, setOpen] = useStateT(false);
  const historyRef = React.useRef([]);

  useEffectT(() => { applyTweaks(tweaks); }, [tweaks]);

  useEffectT(() => {
    const onMsg = (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', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const setTweak = (k, v) => {
    setTweaks(prev => {
      historyRef.current.push({ k, v: prev[k] });
      const next = { ...prev, [k]: v };
      try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch {}
      return next;
    });
  };

  const undo = () => {
    const h = historyRef.current;
    if (!h.length) return;
    const { k, v } = h.pop();
    setTweaks(prev => {
      const next = { ...prev, [k]: v };
      try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch {}
      return next;
    });
  };

  const [, force] = useStateT(0);
  const canUndo = historyRef.current.length > 0;
  // trigger re-render when history changes
  const setTweakWrapped = (k, v) => { setTweak(k, v); force(n => n+1); };
  const undoWrapped = () => { undo(); force(n => n+1); };

  return { tweaks, setTweak: setTweakWrapped, open, setOpen, undo: undoWrapped, canUndo };
}

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