frontend/src/components/SettingsPanel.tsx

import type { AppSettings } from '../types'

interface Props {
  settings: AppSettings
  onChange: (s: AppSettings) => void
}

export function SettingsPanel({ settings, onChange }: Props) {
  const set = (key: keyof AppSettings, value: any) =>
    onChange({ ...settings, [key]: value })

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 4 }}>Settings</div>

      <div>
        <div className="label">OpenAI Model</div>
        <select value={settings.openaiModel} onChange={e => set('openaiModel', e.target.value)}>
          <option value="gpt-4o-mini">gpt-4o-mini</option>
          <option value="gpt-4o">gpt-4o</option>
          <option value="gpt-4-turbo">gpt-4-turbo</option>
        </select>
      </div>

      <div>
        <div className="label">Max Chain Depth</div>
        <input type="number" min={1} max={10} value={settings.maxDepth}
          onChange={e => set('maxDepth', Number(e.target.value))} />
      </div>

      <div>
        <div className="label">Top K Chains</div>
        <input type="number" min={1} max={20} value={settings.topKChains}
          onChange={e => set('topKChains', Number(e.target.value))} />
      </div>

      <div>
        <div className="label">Confidence Threshold</div>
        <input type="range" min={0} max={1} step={0.05}
          value={settings.confidenceThreshold}
          onChange={e => set('confidenceThreshold', Number(e.target.value))} />
        <span style={{ fontSize: 12, color: 'var(--muted)', marginLeft: 8 }}>
          {settings.confidenceThreshold.toFixed(2)}
        </span>
      </div>

      <div>
        <div className="label">Theme Filter</div>
        <input type="text" placeholder="e.g. supply_chain" value={settings.theme}
          onChange={e => set('theme', e.target.value)} />
      </div>

      <div style={{ padding: '8px 0', borderTop: '1px solid var(--border)', fontSize: 11, color: 'var(--muted)' }}>
        Set OPENAI_API_KEY env var in Hugging Face Secrets. Without it, heuristic extraction + fallback answers are used.
      </div>
    </div>
  )
}