/* global React, ReactDOM */
/* Tweaks panel — Oliver Studio Lab 2026 */

const { useState, useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "cyan",
  "density": "comfortable",
  "motion": "full",
  "showRail": true,
  "showTicker": true,
  "tileArt": true
}/*EDITMODE-END*/;

const ACCENTS = {
  cyan:   "oklch(82% 0.13 210)",
  amber:  "oklch(78% 0.13 65)",
  cream:  "oklch(92% 0.04 80)",
  moss:   "oklch(70% 0.10 150)",
  plum:   "oklch(70% 0.12 330)",
  red:    "oklch(70% 0.16 28)"
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty('--accent', ACCENTS[t.accent] || ACCENTS.cyan);

  if (t.density === 'cozy') root.style.setProperty('--gutter', 'clamp(0.75rem, 2vw, 1.25rem)');
  else if (t.density === 'spacious') root.style.setProperty('--gutter', 'clamp(1.5rem, 4vw, 3rem)');
  else root.style.setProperty('--gutter', 'clamp(1rem, 3vw, 2rem)');

  document.body.classList.toggle('motion-off', t.motion === 'off');
  document.body.classList.toggle('motion-reduced', t.motion === 'reduced');

  const rail = document.querySelector('.side-rail');
  if (rail) rail.style.display = t.showRail ? '' : 'none';
  const ticker = document.querySelector('.ticker');
  if (ticker) ticker.style.display = t.showTicker ? '' : 'none';
  document.body.classList.toggle('art-off', !t.tileArt);
}

function App() {
  const [open, setOpen] = useState(false);
  const [t, setT] = useState(DEFAULTS);

  useEffect(() => {
    const onMsg = (e) => {
      const data = e.data || {};
      if (data.type === '__activate_edit_mode') setOpen(true);
      else if (data.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  useEffect(() => { applyTweaks(t); }, [t]);

  function set(key, val) {
    const next = { ...t, [key]: val };
    setT(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
  }

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

  if (!open) return null;

  return (
    <div style={panelStyles.shell}>
      <div style={panelStyles.head}>
        <span style={panelStyles.title}>Tweaks</span>
        <button style={panelStyles.close} onClick={close}>×</button>
      </div>

      <div style={panelStyles.section}>
        <div style={panelStyles.label}>Accent</div>
        <div style={panelStyles.swatchRow}>
          {Object.keys(ACCENTS).map(k => (
            <button
              key={k}
              onClick={() => set('accent', k)}
              style={{
                ...panelStyles.swatch,
                background: ACCENTS[k],
                outline: t.accent === k ? '2px solid #fff' : '2px solid transparent',
                outlineOffset: '2px',
              }}
              title={k}
            />
          ))}
        </div>
      </div>

      <div style={panelStyles.section}>
        <div style={panelStyles.label}>Density</div>
        <div style={panelStyles.segRow}>
          {['cozy','comfortable','spacious'].map(d => (
            <button key={d} onClick={() => set('density', d)} style={{...panelStyles.seg, ...(t.density === d ? panelStyles.segOn : {})}}>{d}</button>
          ))}
        </div>
      </div>

      <div style={panelStyles.section}>
        <div style={panelStyles.label}>Motion</div>
        <div style={panelStyles.segRow}>
          {['full','reduced','off'].map(d => (
            <button key={d} onClick={() => set('motion', d)} style={{...panelStyles.seg, ...(t.motion === d ? panelStyles.segOn : {})}}>{d}</button>
          ))}
        </div>
      </div>

      <div style={panelStyles.section}>
        <label style={panelStyles.toggle}>
          <input type="checkbox" checked={t.showRail} onChange={e => set('showRail', e.target.checked)} />
          <span>Side rail</span>
        </label>
        <label style={panelStyles.toggle}>
          <input type="checkbox" checked={t.showTicker} onChange={e => set('showTicker', e.target.checked)} />
          <span>Ticker</span>
        </label>
        <label style={panelStyles.toggle}>
          <input type="checkbox" checked={t.tileArt} onChange={e => set('tileArt', e.target.checked)} />
          <span>Tile art</span>
        </label>
      </div>
    </div>
  );
}

const panelStyles = {
  shell: {
    position: 'fixed', right: 16, bottom: 16, zIndex: 200,
    width: 280, padding: 16,
    background: 'rgba(17, 19, 23, 0.96)',
    border: '1px solid rgba(220,224,232,0.18)',
    borderRadius: 10,
    color: '#f4f3ee',
    fontFamily: 'Geist Mono, ui-monospace, monospace',
    fontSize: 12,
    backdropFilter: 'blur(12px)',
    boxShadow: '0 24px 60px rgba(0,0,0,0.5)',
  },
  head: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 },
  title: { letterSpacing: '0.14em', textTransform: 'uppercase', fontSize: 11, opacity: 0.8 },
  close: { background: 'transparent', border: 'none', color: '#fff', fontSize: 22, cursor: 'pointer', lineHeight: 1, padding: 0 },
  section: { marginBottom: 14 },
  label: { textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: 10, opacity: 0.55, marginBottom: 8 },
  swatchRow: { display: 'flex', gap: 6 },
  swatch: { width: 26, height: 26, borderRadius: '50%', border: 'none', cursor: 'pointer', padding: 0 },
  segRow: { display: 'flex', gap: 4 },
  seg: { flex: 1, padding: '6px 8px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(220,224,232,0.12)', color: 'inherit', borderRadius: 6, fontFamily: 'inherit', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', cursor: 'pointer' },
  segOn: { background: 'rgba(120,220,232,0.15)', borderColor: 'rgba(120,220,232,0.5)', color: '#aef0f6' },
  toggle: { display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', cursor: 'pointer' },
};

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);