'use client'

import { useState } from 'react'

export default function AISettingsTab() {
  const [settings, setSettings] = useState({
    autoAnalyze: true,
    autoCreateTasks: true,
    analysisModel: 'breakpilot-teacher-8b',
    confidenceThreshold: 0.7,
  })

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-semibold text-slate-900">KI-Einstellungen</h2>
        <p className="text-sm text-slate-500">Konfigurieren Sie die automatische E-Mail-Analyse</p>
      </div>

      <div className="bg-white rounded-lg border border-slate-200 p-6 space-y-6">
        {/* Auto-Analyze */}
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-sm font-medium text-slate-900">Automatische Analyse</h3>
            <p className="text-sm text-slate-500">E-Mails automatisch beim Empfang analysieren</p>
          </div>
          <button
            onClick={() => setSettings({ ...settings, autoAnalyze: !settings.autoAnalyze })}
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
              settings.autoAnalyze ? 'bg-primary-600' : 'bg-slate-200'
            }`}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                settings.autoAnalyze ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
        </div>

        {/* Auto-Create Tasks */}
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-sm font-medium text-slate-900">Aufgaben automatisch erstellen</h3>
            <p className="text-sm text-slate-500">Erkannte Fristen als Aufgaben anlegen</p>
          </div>
          <button
            onClick={() => setSettings({ ...settings, autoCreateTasks: !settings.autoCreateTasks })}
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
              settings.autoCreateTasks ? 'bg-primary-600' : 'bg-slate-200'
            }`}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                settings.autoCreateTasks ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
        </div>

        {/* Model Selection */}
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">Analyse-Modell</label>
          <select
            value={settings.analysisModel}
            onChange={(e) => setSettings({ ...settings, analysisModel: e.target.value })}
            className="w-full md:w-64 px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
          >
            <option value="breakpilot-teacher-8b">BreakPilot Teacher 8B (schnell)</option>
            <option value="breakpilot-teacher-70b">BreakPilot Teacher 70B (genau)</option>
            <option value="llama-3.1-8b-instruct">Llama 3.1 8B Instruct</option>
          </select>
        </div>

        {/* Confidence Threshold */}
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">
            Konfidenz-Schwelle: {Math.round(settings.confidenceThreshold * 100)}%
          </label>
          <input
            type="range"
            min="0.5"
            max="0.95"
            step="0.05"
            value={settings.confidenceThreshold}
            onChange={(e) => setSettings({ ...settings, confidenceThreshold: parseFloat(e.target.value) })}
            className="w-full md:w-64"
          />
          <p className="text-xs text-slate-500 mt-1">
            Mindest-Konfidenz für automatische Aufgabenerstellung
          </p>
        </div>
      </div>

      {/* Sender Classification */}
      <div className="bg-white rounded-lg border border-slate-200 p-6">
        <h3 className="text-sm font-medium text-slate-700 mb-4">Bekannte Absender (Niedersachsen)</h3>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {[
            { domain: '@mk.niedersachsen.de', type: 'Kultusministerium', priority: 'Hoch' },
            { domain: '@rlsb.de', type: 'RLSB', priority: 'Hoch' },
            { domain: '@landesschulbehoerde-nds.de', type: 'Landesschulbehörde', priority: 'Hoch' },
            { domain: '@nibis.de', type: 'NiBiS', priority: 'Mittel' },
            { domain: '@schultraeger.de', type: 'Schulträger', priority: 'Mittel' },
          ].map((sender) => (
            <div key={sender.domain} className="p-3 bg-slate-50 rounded-lg">
              <p className="text-sm font-mono text-slate-700">{sender.domain}</p>
              <p className="text-xs text-slate-500">{sender.type}</p>
              <span className={`text-xs px-2 py-0.5 rounded ${
                sender.priority === 'Hoch' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700'
              }`}>
                {sender.priority}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}