components/Settings.jsx

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/Card';
import { Button } from './ui/Button';
import { Save } from 'lucide-react';

export default function Settings() {
  const [config, setConfig] = useState({
    mistralApiKey: '',
    codestralApiKey: '',
    defaultEpochs: 10,
    defaultBatchSize: 1,
    defaultLearningRate: 0.0001,
    dbPath: 'kaggle_intelligence.db',
  });

  const saveSettings = () => {
    localStorage.setItem('appConfig', JSON.stringify(config));
    alert('Settings saved!');
  };

  return (
    <div className="space-y-6">
      <h2 className="text-3xl font-bold text-gray-800">Settings</h2>
      
      <Card>
        <CardHeader>
          <CardTitle>API Configuration</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2">Mistral API Key</label>
            <input
              type="password"
              value={config.mistralApiKey}
              onChange={(e) => setConfig({ ...config, mistralApiKey: e.target.value })}
              className="input-field w-full"
              placeholder="Enter your Mistral API key"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Codestral API Key</label>
            <input
              type="password"
              value={config.codestralApiKey}
              onChange={(e) => setConfig({ ...config, codestralApiKey: e.target.value })}
              className="input-field w-full"
              placeholder="Enter your Codestral API key"
            />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Training Defaults</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2">Default Epochs</label>
            <input
              type="number"
              value={config.defaultEpochs}
              onChange={(e) => setConfig({ ...config, defaultEpochs: parseInt(e.target.value) })}
              className="input-field w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Default Batch Size</label>
            <input
              type="number"
              value={config.defaultBatchSize}
              onChange={(e) => setConfig({ ...config, defaultBatchSize: parseInt(e.target.value) })}
              className="input-field w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Default Learning Rate</label>
            <input
              type="number"
              step="0.0001"
              value={config.defaultLearningRate}
              onChange={(e) => setConfig({ ...config, defaultLearningRate: parseFloat(e.target.value) })}
              className="input-field w-full"
            />
          </div>
        </CardContent>
      </Card>

      <Button onClick={saveSettings} className="w-full">
        <Save className="w-4 h-4 mr-2" />
        Save Settings
      </Button>
    </div>
  );
}