'use client'

import type { MagicSettings } from './types'
import { DEFAULT_SETTINGS } from './types'

interface SettingsTabProps {
  settings: MagicSettings
  setSettings: (settings: MagicSettings) => void
  settingsSaved: boolean
  saveSettings: () => void
}

export default function SettingsTab({ settings, setSettings, settingsSaved, saveSettings }: SettingsTabProps) {
  return (
    <div className="space-y-6">
      {/* OCR Settings */}
      <div className="bg-gray-800/50 border border-gray-700 rounded-xl p-6">
        <h2 className="text-lg font-semibold text-white mb-4">OCR Einstellungen</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={settings.autoDetectLines}
                onChange={(e) => setSettings({ ...settings, autoDetectLines: e.target.checked })}
                className="w-5 h-5 rounded bg-gray-900 border-gray-700"
              />
              <div>
                <div className="text-white font-medium">Automatische Zeilenerkennung</div>
                <div className="text-sm text-gray-400">Erkennt und verarbeitet einzelne Zeilen separat</div>
              </div>
            </label>
          </div>

          <div>
            <label className="block text-sm text-gray-300 mb-2">Konfidenz-Schwellwert</label>
            <input
              type="range"
              min="0"
              max="1"
              step="0.1"
              value={settings.confidenceThreshold}
              onChange={(e) => setSettings({ ...settings, confidenceThreshold: parseFloat(e.target.value) })}
              className="w-full"
            />
            <div className="flex justify-between text-xs text-gray-500 mt-1">
              <span>0%</span>
              <span className="text-white">{(settings.confidenceThreshold * 100).toFixed(0)}%</span>
              <span>100%</span>
            </div>
          </div>

          <div>
            <label className="block text-sm text-gray-300 mb-2">Max. Bildgröße (px)</label>
            <input
              type="number"
              value={settings.maxImageSize}
              onChange={(e) => setSettings({ ...settings, maxImageSize: parseInt(e.target.value) })}
              className="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"
            />
            <div className="text-xs text-gray-500 mt-1">Größere Bilder werden skaliert</div>
          </div>

          <div>
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={settings.enableCache}
                onChange={(e) => setSettings({ ...settings, enableCache: e.target.checked })}
                className="w-5 h-5 rounded bg-gray-900 border-gray-700"
              />
              <div>
                <div className="text-white font-medium">Ergebnis-Cache aktivieren</div>
                <div className="text-sm text-gray-400">Speichert OCR-Ergebnisse für identische Bilder</div>
              </div>
            </label>
          </div>
        </div>
      </div>

      {/* Training Settings */}
      <div className="bg-gray-800/50 border border-gray-700 rounded-xl p-6">
        <h2 className="text-lg font-semibold text-white mb-4">Training Einstellungen</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="block text-sm text-gray-300 mb-2">LoRA Rank</label>
            <select
              value={settings.loraRank}
              onChange={(e) => setSettings({ ...settings, loraRank: parseInt(e.target.value) })}
              className="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"
            >
              <option value="4">4 (Schnell, weniger Kapazität)</option>
              <option value="8">8 (Ausgewogen)</option>
              <option value="16">16 (Mehr Kapazität)</option>
              <option value="32">32 (Maximum)</option>
            </select>
          </div>

          <div>
            <label className="block text-sm text-gray-300 mb-2">LoRA Alpha</label>
            <input
              type="number"
              value={settings.loraAlpha}
              onChange={(e) => setSettings({ ...settings, loraAlpha: parseInt(e.target.value) })}
              className="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"
            />
            <div className="text-xs text-gray-500 mt-1">Empfohlen: 4 × LoRA Rank</div>
          </div>

          <div>
            <label className="block text-sm text-gray-300 mb-2">Epochen</label>
            <input
              type="number"
              min="1"
              max="10"
              value={settings.epochs}
              onChange={(e) => setSettings({ ...settings, epochs: parseInt(e.target.value) })}
              className="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"
            />
          </div>

          <div>
            <label className="block text-sm text-gray-300 mb-2">Batch Size</label>
            <select
              value={settings.batchSize}
              onChange={(e) => setSettings({ ...settings, batchSize: parseInt(e.target.value) })}
              className="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"
            >
              <option value="1">1 (Wenig RAM)</option>
              <option value="2">2</option>
              <option value="4">4 (Standard)</option>
              <option value="8">8 (Viel RAM)</option>
            </select>
          </div>

          <div>
            <label className="block text-sm text-gray-300 mb-2">Learning Rate</label>
            <select
              value={settings.learningRate}
              onChange={(e) => setSettings({ ...settings, learningRate: parseFloat(e.target.value) })}
              className="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"
            >
              <option value="0.0001">0.0001 (Schnell)</option>
              <option value="0.00005">0.00005 (Standard)</option>
              <option value="0.00001">0.00001 (Konservativ)</option>
            </select>
          </div>
        </div>
      </div>

      {/* Save Button */}
      <div className="flex justify-end gap-4">
        <button
          onClick={() => setSettings(DEFAULT_SETTINGS)}
          className="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm font-medium transition-colors"
        >
          Zurücksetzen
        </button>
        <button
          onClick={saveSettings}
          className="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm font-medium transition-colors"
        >
          {settingsSaved ? '✓ Gespeichert!' : 'Einstellungen speichern'}
        </button>
      </div>

      {/* Technical Info */}
      <div className="bg-gray-800/50 border border-gray-700 rounded-xl p-6">
        <h2 className="text-lg font-semibold text-white mb-4">Technische Informationen</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
          <div>
            <span className="text-gray-400">API Endpoint:</span>
            <code className="text-white ml-2 bg-gray-900 px-2 py-1 rounded text-xs">/api/klausur/trocr</code>
          </div>
          <div>
            <span className="text-gray-400">Model Path:</span>
            <code className="text-white ml-2 bg-gray-900 px-2 py-1 rounded text-xs">~/.cache/huggingface</code>
          </div>
          <div>
            <span className="text-gray-400">LoRA Path:</span>
            <code className="text-white ml-2 bg-gray-900 px-2 py-1 rounded text-xs">./models/lora</code>
          </div>
          <div>
            <span className="text-gray-400">Training Data:</span>
            <code className="text-white ml-2 bg-gray-900 px-2 py-1 rounded text-xs">./data/training</code>
          </div>
        </div>
      </div>
    </div>
  )
}