// Tweak panel — design knobs exposed to user
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 70,
  "bgTone": "claro",
  "serifFamily": "Instrument Serif",
  "nomeMetodo": "Método PHI"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty('--accent', `oklch(0.78 0.13 ${t.accentHue})`);
  root.style.setProperty('--accent-soft', `oklch(0.78 0.13 ${t.accentHue} / 0.14)`);

  if (t.bgTone === 'claro') {
    root.style.setProperty('--bg', 'oklch(0.96 0.006 85)');
    root.style.setProperty('--bg-2', 'oklch(0.93 0.006 85)');
    root.style.setProperty('--fg', 'oklch(0.18 0.005 85)');
    root.style.setProperty('--fg-dim', 'oklch(0.38 0.008 85)');
    root.style.setProperty('--fg-mute', 'oklch(0.55 0.008 85)');
    root.style.setProperty('--line', 'oklch(0.82 0.006 85)');
    root.style.setProperty('--line-soft', 'oklch(0.88 0.006 85)');
  } else if (t.bgTone === 'creme') {
    root.style.setProperty('--bg', 'oklch(0.92 0.015 85)');
    root.style.setProperty('--bg-2', 'oklch(0.89 0.015 85)');
    root.style.setProperty('--fg', 'oklch(0.20 0.005 85)');
    root.style.setProperty('--fg-dim', 'oklch(0.40 0.008 85)');
    root.style.setProperty('--fg-mute', 'oklch(0.55 0.008 85)');
    root.style.setProperty('--line', 'oklch(0.78 0.012 85)');
    root.style.setProperty('--line-soft', 'oklch(0.84 0.012 85)');
  } else {
    root.style.setProperty('--bg', 'oklch(0.16 0.005 85)');
    root.style.setProperty('--bg-2', 'oklch(0.20 0.006 85)');
    root.style.setProperty('--fg', 'oklch(0.96 0.008 85)');
    root.style.setProperty('--fg-dim', 'oklch(0.72 0.008 85)');
    root.style.setProperty('--fg-mute', 'oklch(0.52 0.008 85)');
    root.style.setProperty('--line', 'oklch(0.30 0.006 85)');
    root.style.setProperty('--line-soft', 'oklch(0.24 0.006 85)');
  }

  root.style.setProperty('--serif', `'${t.serifFamily}', 'Times New Roman', serif`);
}

function TweakPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  const update = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    applyTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  return (
    <div style={{
      position: 'fixed', right: 24, bottom: 24, zIndex: 100,
      width: 300, padding: 20,
      background: 'oklch(0.12 0.005 85 / 0.95)',
      border: '1px solid oklch(0.3 0.006 85)',
      backdropFilter: 'blur(14px)',
      borderRadius: 18,
      color: 'oklch(0.96 0.008 85)',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      display: 'flex', flexDirection: 'column', gap: 18,
      boxShadow: '0 30px 60px -20px rgba(0,0,0,.5)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.7 }}>
        <span>Tweaks</span>
        <span style={{ color: 'oklch(0.78 0.13 70)' }}>● ao vivo</span>
      </div>

      <Knob label="Tom da base">
        <Segmented value={tweaks.bgTone} options={['escuro', 'creme', 'claro']} onChange={(v) => update('bgTone', v)} />
      </Knob>

      <Knob label={`Matiz do acento (${tweaks.accentHue}°)`}>
        <input type="range" min="0" max="360" step="5" value={tweaks.accentHue}
          onChange={e => update('accentHue', parseInt(e.target.value))}
          style={{ width: '100%', accentColor: 'oklch(0.78 0.13 70)' }} />
      </Knob>

      <Knob label="Serif de títulos">
        <Segmented value={tweaks.serifFamily}
          options={['Instrument Serif', 'DM Serif Display', 'Playfair Display']}
          onChange={(v) => update('serifFamily', v)} />
      </Knob>

      <Knob label="Nome do método">
        <input type="text" value={tweaks.nomeMetodo}
          onChange={e => update('nomeMetodo', e.target.value)}
          style={{
            width: '100%', padding: '8px 12px', borderRadius: 8,
            border: '1px solid oklch(0.3 0.006 85)', background: 'transparent',
            color: 'inherit', fontFamily: 'inherit', fontSize: 13,
          }} />
      </Knob>
    </div>
  );
}

function Knob({ label, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <label style={{ fontSize: 11, opacity: 0.6, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.06em', textTransform: 'uppercase' }}>{label}</label>
      {children}
    </div>
  );
}

function Segmented({ value, options, onChange }) {
  return (
    <div style={{ display: 'flex', border: '1px solid oklch(0.3 0.006 85)', borderRadius: 8, overflow: 'hidden' }}>
      {options.map((o) => (
        <button key={o} onClick={() => onChange(o)} style={{
          flex: 1, padding: '6px 8px', fontSize: 11,
          background: value === o ? 'oklch(0.78 0.13 70)' : 'transparent',
          color: value === o ? 'oklch(0.16 0.005 85)' : 'inherit',
          fontFamily: 'inherit', letterSpacing: '-0.005em',
          transition: 'all .3s',
        }}>{o}</button>
      ))}
    </div>
  );
}

// Inject any needed fonts on the fly for serif swap
const extraFonts = document.createElement('link');
extraFonts.rel = 'stylesheet';
extraFonts.href = 'https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap';
document.head.appendChild(extraFonts);

Object.assign(window, { TWEAK_DEFAULTS, applyTweaks, TweakPanel });