// === Tweaks panel ===
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#d4a574",
  "accent2": "#7ab8d4",
  "fontDisplay": "Instrument Serif",
  "fontBody": "Geist",
  "particleStyle": "constellation",
  "particleDensity": 100,
  "playMode": "orbit",
  "playCount": 40,
  "playGravity": 1,
  "playFriction": 0.99,
  "playColor": "warm",
  "playTrails": false,
  "showCursor": true,
  "showMesh": true,
  "show3D": true,
  "parallaxStrength": 1,
  "grain": 0.04
}/*EDITMODE-END*/;

window.__TWEAKS = TWEAK_DEFAULTS;
window.__TWEAK_LISTENERS = [];
window.__onTweakChange = (cb) => { window.__TWEAK_LISTENERS.push(cb); return () => { window.__TWEAK_LISTENERS = window.__TWEAK_LISTENERS.filter(x => x !== cb); }; };

function applyTweaks(t) {
  const root = document.documentElement;
  // Convert hex to oklch-ish via direct hex (browsers handle conversion in mix)
  root.style.setProperty('--accent', t.accent);
  root.style.setProperty('--accent-2', t.accent2);
  root.style.setProperty('--serif', `"${t.fontDisplay}", Georgia, serif`);
  root.style.setProperty('--sans', `"${t.fontBody}", -apple-system, sans-serif`);
  root.style.setProperty('--grain', t.grain);
  document.body.classList.toggle('no-cursor', !t.showCursor);
  document.body.classList.toggle('no-mesh', !t.showMesh);
  document.body.classList.toggle('no-3d', !t.show3D);
  window.__TWEAK_LISTENERS.forEach(cb => cb(t));
}

function App2() {
  const [t, setT] = useState(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(t); }, [t]);

  // Edit-mode protocol
  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') 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 [open, setOpen] = useState(false);

  const set = (k, v) => {
    setT(s => {
      const next = { ...s, [k]: v };
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
      return next;
    });
  };

  const close = () => {
    setOpen(false);
    window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
  };

  // load Google Fonts on demand
  useEffect(() => {
    const allFonts = ['Instrument Serif', 'Cormorant Garamond', 'Playfair Display', 'DM Serif Display', 'Fraunces', 'Geist', 'Inter', 'IBM Plex Sans', 'Space Grotesk'];
    const family = allFonts.map(f => f.replace(/\s/g, '+') + ':wght@400;500;600').join('&family=');
    const id = 'tweaks-fonts';
    if (!document.getElementById(id)) {
      const link = document.createElement('link');
      link.id = id; link.rel = 'stylesheet';
      link.href = `https://fonts.googleapis.com/css2?family=${family}&display=swap`;
      document.head.appendChild(link);
    }
  }, []);

  if (!open) return null;

  return (
    <div className="tw-panel">
      <div className="tw-head">
        <b>Tweaks</b>
        <button className="tw-x" onClick={close}>×</button>
      </div>
      <div className="tw-body">
        <div className="tw-sect">Color</div>
        <Swatch label="Accent" value={t.accent} options={['#d4a574', '#e89e63', '#7ab8d4', '#a78bfa', '#34d399', '#f472b6']} onChange={v => set('accent', v)} />
        <Swatch label="Secondary" value={t.accent2} options={['#7ab8d4', '#a78bfa', '#34d399', '#f472b6', '#fb923c', '#facc15']} onChange={v => set('accent2', v)} />

        <div className="tw-sect">Type</div>
        <Select label="Display font" value={t.fontDisplay} options={['Instrument Serif', 'Cormorant Garamond', 'Playfair Display', 'DM Serif Display', 'Fraunces']} onChange={v => set('fontDisplay', v)} />
        <Select label="Body font" value={t.fontBody} options={['Geist', 'Inter', 'IBM Plex Sans', 'Space Grotesk']} onChange={v => set('fontBody', v)} />

        <div className="tw-sect">Background</div>
        <Radio label="Particles" value={t.particleStyle} options={[['constellation','Lines'], ['stars','Stars'], ['rain','Rain'], ['off','Off']]} onChange={v => set('particleStyle', v)} />
        <Slider label="Density" value={t.particleDensity} min={20} max={200} step={5} onChange={v => set('particleDensity', v)} />
        <Toggle label="Gradient mesh" value={t.showMesh} onChange={v => set('showMesh', v)} />
        <Toggle label="Custom cursor" value={t.showCursor} onChange={v => set('showCursor', v)} />
        <Slider label="Grain" value={t.grain} min={0} max={0.12} step={0.01} onChange={v => set('grain', v)} />

        <div className="tw-sect">Scroll & 3D</div>
        <Toggle label="3D parallax cards" value={t.show3D} onChange={v => set('show3D', v)} />
        <Slider label="Parallax strength" value={t.parallaxStrength} min={0} max={2} step={0.1} onChange={v => set('parallaxStrength', v)} />

        <div className="tw-sect">Playground</div>
        <Select label="Mode" value={t.playMode} options={['orbit','gravity','flock','spring','vortex','magnet','trails','swarm','chain']} onChange={v => set('playMode', v)} />
        <Slider label="Particles" value={t.playCount} min={5} max={300} step={5} onChange={v => set('playCount', v)} />
        <Slider label="Gravity" value={t.playGravity} min={0} max={3} step={0.1} onChange={v => set('playGravity', v)} />
        <Slider label="Friction" value={t.playFriction} min={0.9} max={1} step={0.005} onChange={v => set('playFriction', v)} />
        <Radio label="Color" value={t.playColor} options={[['warm','Warm'],['cool','Cool'],['rainbow','Rainbow'],['mono','Mono']]} onChange={v => set('playColor', v)} />
        <Toggle label="Trails" value={t.playTrails} onChange={v => set('playTrails', v)} />
      </div>
    </div>
  );
}

function Swatch({ label, value, options, onChange }) {
  return (
    <div className="tw-row">
      <div className="tw-lbl"><span>{label}</span><span className="tw-val" style={{color: value}}>{value}</span></div>
      <div className="tw-swatches">
        {options.map(o => (
          <button key={o} onClick={() => onChange(o)} className={"tw-sw " + (o === value ? 'on' : '')} style={{ background: o }} />
        ))}
      </div>
    </div>
  );
}
function Select({ label, value, options, onChange }) {
  return (
    <div className="tw-row tw-row-h">
      <span>{label}</span>
      <select className="tw-select" value={value} onChange={e => onChange(e.target.value)}>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    </div>
  );
}
function Radio({ label, value, options, onChange }) {
  return (
    <div className="tw-row">
      <div className="tw-lbl"><span>{label}</span></div>
      <div className="tw-radio">
        {options.map(([v, l]) => (
          <button key={v} onClick={() => onChange(v)} className={value === v ? 'on' : ''}>{l}</button>
        ))}
      </div>
    </div>
  );
}
function Slider({ label, value, min, max, step, onChange }) {
  return (
    <div className="tw-row">
      <div className="tw-lbl"><span>{label}</span><span className="tw-val">{value}</span></div>
      <input type="range" className="tw-range" min={min} max={max} step={step} value={value} onChange={e => onChange(parseFloat(e.target.value))} />
    </div>
  );
}
function Toggle({ label, value, onChange }) {
  return (
    <div className="tw-row tw-row-h">
      <span>{label}</span>
      <button className={"tw-toggle " + (value ? 'on' : '')} onClick={() => onChange(!value)}>
        <span></span>
      </button>
    </div>
  );
}

window.TweaksApp = App2;