frontend/src/components/ModelSelector.tsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { FaRobot, FaSync } from 'react-icons/fa';

const ModelSelector: React.FC<{ selectedModel: string; onModelChange: (model: string) => void }> = ({ selectedModel, onModelChange }) => {
  const [models, setModels] = useState<any[]>([]);

  const load = () => {
    axios.get('/api/models').then(res => setModels(res.data)).catch(() => setModels([]));
  };

  useEffect(() => { load(); }, []);

  const refresh = async () => {
    await axios.post('/api/refresh-models');
    load();
  };

  return (
    <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, color: 'var(--text-secondary)', fontSize: 12 }}>
        <FaRobot /> ACTIVE MODEL
        <button onClick={refresh} style={{ marginLeft: 'auto', color: 'var(--text-secondary)', cursor: 'pointer' }} title="Refresh models from APIs">
          <FaSync size={12} />
        </button>
      </div>
      <select
        style={{ width: '100%', background: 'var(--bg-tertiary)', color: 'var(--text-primary)', border: '1px solid var(--border)', padding: '6px 8px', borderRadius: 6, outline: 'none', fontSize: 13 }}
        value={selectedModel}
        onChange={e => onModelChange(e.target.value)}
      >
        {models.map((m: any) => (
          <option key={m.id} value={m.id}>{m.name}</option>
        ))}
      </select>
    </div>
  );
};

export default ModelSelector;