// Tweaks panel — palette + typography

function Tweaks({ enabled, values, onChange }) {
  if (!enabled) return null;
  const palettes = {
    'NRX': { bg:'#efe6da', bg2:'#e6dac8', ink:'#044e52', primary:'#044e52', teal:'#044e52', sand:'#e6dac8', hair:'#c8b99a' },
    'Warm': { bg:'#F7F5F0', bg2:'#EEE9DF', ink:'#131F1F', primary:'#1A6B6A', teal:'#1A6B6A', sand:'#DDD7C8', hair:'#D0CFC7' },
    'Forest': { bg:'#F3F1EA', bg2:'#EBE7DC', ink:'#1B2218', primary:'#2F5233', teal:'#8B5A3C', sand:'#DDD6C4', hair:'#CEC6B4' },
    'Dark': { bg:'#0a1a1a', bg2:'#112020', ink:'#eff5f5', primary:'#1a8080', teal:'#1a8080', sand:'#142828', hair:'#1a3232' },
  };
  const typos = {
    'Editorial': { display:'"Instrument Serif", Georgia, serif', body:'"Geist", ui-sans-serif, system-ui, sans-serif', mono:'"JetBrains Mono", monospace' },
    'Grotesque': { display:'"Space Grotesk", ui-sans-serif, sans-serif', body:'"Space Grotesk", ui-sans-serif, sans-serif', mono:'"JetBrains Mono", monospace' },
    'Humanist': { display:'"Cormorant Garamond", Georgia, serif', body:'"DM Sans", ui-sans-serif, system-ui, sans-serif', mono:'"DM Mono", monospace' },
  };

  const applyPalette = (name) => {
    const p = palettes[name];
    const root = document.documentElement;
    root.style.setProperty('--bg', p.bg);
    root.style.setProperty('--bg-2', p.bg2);
    root.style.setProperty('--ink', p.ink);
    root.style.setProperty('--primary', p.primary);
    root.style.setProperty('--teal', p.teal);
    root.style.setProperty('--sand', p.sand);
    root.style.setProperty('--hair', p.hair);
    root.style.setProperty('--ink-2', name === 'Dark' ? '#b8cccc' : name === 'NRX' ? '#2a5f62' : '#3A3A38');
    root.style.setProperty('--muted', name === 'Dark' ? '#6a8888' : name === 'NRX' ? '#6a8080' : '#7A756C');
  };
  const applyTypo = (name) => {
    const t = typos[name];
    const root = document.documentElement;
    root.style.setProperty('--f-display', t.display);
    root.style.setProperty('--f-body', t.body);
    root.style.setProperty('--f-mono', t.mono);
  };

  React.useEffect(() => { applyPalette(values.palette); }, [values.palette]);
  React.useEffect(() => { applyTypo(values.typography); }, [values.typography]);

  return (
    <div className="tweaks">
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 16}}>
        <h5 style={{margin:0}}>Tweaks</h5>
        <span className="mono" style={{fontSize: 9, color:'var(--muted)'}}>Live preview</span>
      </div>

      <div style={{marginBottom: 16}}>
        <div className="mono" style={{fontSize: 10, color:'var(--muted)', marginBottom: 8, letterSpacing:'0.1em'}}>PALETTE</div>
        <div className="row">
          {Object.keys(palettes).map(p => (
            <button key={p} className={'chip ' + (values.palette === p ? 'active' : '')} onClick={() => onChange({ palette: p })}>{p}</button>
          ))}
        </div>
      </div>

      <div>
        <div className="mono" style={{fontSize: 10, color:'var(--muted)', marginBottom: 8, letterSpacing:'0.1em'}}>TYPOGRAPHY</div>
        <div className="row">
          {Object.keys(typos).map(t => (
            <button key={t} className={'chip ' + (values.typography === t ? 'active' : '')} onClick={() => onChange({ typography: t })}>{t}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks });