const ACCENTS = {
  cyan: 'oklch(0.82 0.12 210)',
  amber: 'oklch(0.82 0.16 70)',
  rust: 'oklch(0.68 0.18 35)',
  lime: 'oklch(0.85 0.17 135)',
  violet: 'oklch(0.72 0.16 295)',
};
const ACCENT_TEXT = {
  amber: 'oklch(0.88 0.13 70)',
  rust: 'oklch(0.78 0.14 35)',
  cyan: 'oklch(0.85 0.11 210)',
  lime: 'oklch(0.90 0.14 135)',
  violet: 'oklch(0.82 0.13 295)',
};

function applyAccent(name) {
  const val = ACCENTS[name] || ACCENTS.amber;
  const txt = ACCENT_TEXT[name] || ACCENT_TEXT.amber;
  const r = document.documentElement.style;
  r.setProperty('--accent', val);
  r.setProperty('--accent-text', txt);
  // derive soft + line
  const soft = val.replace(')', ' / 0.12)');
  const line = val.replace(')', ' / 0.35)');
  r.setProperty('--accent-soft', soft);
  r.setProperty('--accent-line', line);
}

function applyDensity(d) {
  if (d === 'dense') document.body.classList.add('dense');
  else document.body.classList.remove('dense');
}

function Tweaks({ state, setState, visible, onClose }) {
  if (!visible) return null;
  return (
    <div className="tweaks">
      <div className="tweaks-head">
        <h6>// Tweaks</h6>
        <button className="close" onClick={onClose}>×</button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-group">
          <span className="tweak-lbl">Accent color</span>
          <div className="swatches">
            {Object.entries(ACCENTS).map(([k, v]) => (
              <button
                key={k}
                className={`swatch ${state.accent === k ? 'active' : ''}`}
                style={{background: v}}
                onClick={() => setState({...state, accent: k})}
                title={k}
              />
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <span className="tweak-lbl">Hero headline</span>
          <div className="seg" style={{'--cols': 3}}>
            {['os', 'precision', 'autopilot'].map(v => (
              <button
                key={v}
                className={state.heroVariant === v ? 'active' : ''}
                onClick={() => setState({...state, heroVariant: v})}
              >
                {v === 'os' ? 'OS' : v === 'precision' ? 'Precision' : 'Autopilot'}
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <span className="tweak-lbl">Density</span>
          <div className="seg" style={{'--cols': 2}}>
            {['comfortable', 'dense'].map(v => (
              <button
                key={v}
                className={state.density === v ? 'active' : ''}
                onClick={() => setState({...state, density: v})}
              >
                {v === 'comfortable' ? 'Comfortable' : 'Dense'}
              </button>
            ))}
          </div>
        </div>

        <div style={{fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', lineHeight: 1.5, paddingTop: 8, borderTop: '1px solid var(--line)'}}>
          Toggle Tweaks from the toolbar to hide this panel.
        </div>
      </div>
    </div>
  );
}

window.Tweaks = Tweaks;
window.applyAccent = applyAccent;
window.applyDensity = applyDensity;