// WiseTokens — Tweaks panel
function Tweaks({ state, setState }) {
  const [open, setOpen] = React.useState(true);
  const set = (k, v) => {
    setState({ ...state, [k]: v });
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };
  if (!open) {
    return (
      <div className="tweaks" style={{ width: 'auto' }}>
        <div className="tweaks-h" style={{ borderBottom: 'none' }} onClick={() => setOpen(true)}>
          <span><Icon name="cog" size={13}/> Tweaks</span>
        </div>
      </div>
    );
  }
  return (
    <div className="tweaks">
      <div className="tweaks-h">
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="cog" size={13}/> Tweaks</span>
        <button className="btn ghost icon" onClick={() => setOpen(false)} style={{ padding: 2 }}><Icon name="x" size={13}/></button>
      </div>
      <div className="tweaks-b">
        <div className="tweaks-row">
          <span className="k">Theme</span>
          <div className="seg">
            {['light','dark'].map(v => <button key={v} className={state.theme === v ? 'active' : ''} onClick={() => set('theme', v)}>{v}</button>)}
          </div>
        </div>
        <div className="tweaks-row">
          <span className="k">Palette accent</span>
          <div className="seg">
            {['amber','indigo','emerald','ink'].map(v => <button key={v} className={state.palette === v ? 'active' : ''} onClick={() => set('palette', v)}>{v}</button>)}
          </div>
        </div>
        <div className="tweaks-row">
          <span className="k">Typography</span>
          <div className="seg">
            {['geist','grotesk','serif'].map(v => <button key={v} className={state.typeface === v ? 'active' : ''} onClick={() => set('typeface', v)}>{v}</button>)}
          </div>
        </div>
        <div className="tweaks-row">
          <span className="k">Density</span>
          <div className="seg">
            {['compact','default','comfortable'].map(v => <button key={v} className={state.density === v ? 'active' : ''} onClick={() => set('density', v)}>{v}</button>)}
          </div>
        </div>
        <div className="tweaks-row">
          <span className="k">Layout</span>
          <div className="seg">
            {['sidebar','rail','topnav'].map(v => <button key={v} className={state.layout === v ? 'active' : ''} onClick={() => set('layout', v)}>{v}</button>)}
          </div>
        </div>
        <div className="tweaks-row">
          <span className="k">Copy tone</span>
          <div className="seg">
            {['technical','friendly','bold'].map(v => <button key={v} className={state.tone === v ? 'active' : ''} onClick={() => set('tone', v)}>{v}</button>)}
          </div>
        </div>
        <div className="tweaks-row">
          <span className="k">Dashboard state</span>
          <div className="seg">
            {['filled','empty'].map(v => <button key={v} className={state.filled === v ? 'active' : ''} onClick={() => set('filled', v)}>{v}</button>)}
          </div>
        </div>
      </div>
    </div>
  );
}

// Tone transformer — maps base copy to tone variant
function applyTone(tone, s) {
  if (tone === 'technical') return s;
  if (tone === 'friendly') {
    return s
      .replace(/Overview of traffic/i, 'Here\'s how things are going')
      .replace(/Make your first API request/i, 'Let\'s get your first call running')
      .replace(/Pay-as-you-go\./i, 'Only pay for what you use.')
      .replace(/One OpenAI-compatible endpoint across every model\./i, 'Same code, cheaper models. We handle the rest.');
  }
  if (tone === 'bold') {
    return s
      .replace(/Overview of traffic/i, 'Stop overpaying for tokens')
      .replace(/Make your first API request/i, 'Ship in 60 seconds')
      .replace(/Pay-as-you-go\./i, 'Zero subscription. Zero waste.')
      .replace(/One OpenAI-compatible endpoint across every model\./i, 'One endpoint. Every model. 11× cheaper.');
  }
  return s;
}

Object.assign(window, { Tweaks, applyTone });