// Tweaks.jsx — floating settings panel
// Depends on: window.THEMES, window.FONTS, window.PROMPT_STYLES, React

function Tweaks({ visible, settings, onChange, onClose }) {
  if (!visible) return null;

  const set = (key) => (v) => onChange({ ...settings, [key]: v });

  return (
    <div className="tweaks-panel">
      <div className="tweaks-header">
        <span>Tweaks</span>
        <button className="tweaks-close" onClick={onClose} aria-label="Close">×</button>
      </div>

      <div className="tweaks-section">
        <div className="tweaks-label">Theme</div>
        <div className="tweaks-swatches">
          {Object.entries(window.THEMES).map(([key, t]) => (
            <button
              key={key}
              className={'swatch' + (settings.theme === key ? ' active' : '')}
              onClick={() => set('theme')(key)}
              title={t.label}
            >
              <div className="swatch-row">
                <span className="swatch-chip" style={{ background: t.bg }} />
                <span className="swatch-chip" style={{ background: t.accent }} />
                <span className="swatch-chip" style={{ background: t.user }} />
                <span className="swatch-chip" style={{ background: t.dir }} />
              </div>
              <div className="swatch-name">{t.label}</div>
            </button>
          ))}
        </div>
      </div>

      <div className="tweaks-section">
        <div className="tweaks-label">Font</div>
        <select
          className="tweaks-select"
          value={settings.font}
          onChange={e => set('font')(e.target.value)}
        >
          {Object.entries(window.FONTS).map(([key, f]) => (
            <option key={key} value={key}>{f.label}</option>
          ))}
        </select>
      </div>

      <div className="tweaks-section">
        <div className="tweaks-label">
          Font size <span className="tweaks-value">{settings.fontSize}px</span>
        </div>
        <input
          type="range"
          min="11"
          max="22"
          step="1"
          value={settings.fontSize}
          onChange={e => set('fontSize')(+e.target.value)}
          className="tweaks-range"
        />
      </div>

      <div className="tweaks-section">
        <div className="tweaks-label">Prompt style</div>
        <div className="tweaks-pills">
          {Object.keys(window.PROMPT_STYLES).map(key => (
            <button
              key={key}
              className={'pill' + (settings.prompt === key ? ' active' : '')}
              onClick={() => set('prompt')(key)}
            >
              {key}
            </button>
          ))}
        </div>
      </div>

    </div>
  );
}

window.Tweaks = Tweaks;