'use client'

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

interface TabSettingsProps {
  settings: MagicSettings
  settingsSaved: boolean
  onUpdateSettings: (settings: MagicSettings) => void
  onSave: () => void
}

export function TabSettings({ settings, settingsSaved, onUpdateSettings, onSave }: TabSettingsProps) {
  const update = (partial: Partial<MagicSettings>) => {
    onUpdateSettings({ ...settings, ...partial })
  }

  return (
    <div className="space-y-6">
      {/* OCR Settings */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h2 className="text-lg font-semibold text-slate-900 mb-4">OCR Einstellungen</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <CheckboxSetting
            label="Automatische Zeilenerkennung"
            description="Erkennt und verarbeitet einzelne Zeilen separat"
            checked={settings.autoDetectLines}
            onChange={(v) => update({ autoDetectLines: v })}
          />

          <CheckboxSetting
            label="Live-Vorschau"
            description="OCR startet automatisch nach Bild-Upload"
            checked={settings.livePreview}
            onChange={(v) => update({ livePreview: v })}
          />

          <CheckboxSetting
            label="Sound-Feedback"
            description="Akustisches Feedback bei erfolgreicher Erkennung"
            checked={settings.soundFeedback}
            onChange={(v) => update({ soundFeedback: v })}
          />

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

          <div>
            <label className="block text-sm text-slate-700 mb-2">Max. Bildgroesse (px)</label>
            <input
              type="number"
              value={settings.maxImageSize}
              onChange={(e) => update({ maxImageSize: parseInt(e.target.value) })}
              className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-900"
            />
            <div className="text-xs text-slate-400 mt-1">Groessere Bilder werden skaliert</div>
          </div>

          <CheckboxSetting
            label="Ergebnis-Cache aktivieren"
            description="Speichert OCR-Ergebnisse fuer identische Bilder"
            checked={settings.enableCache}
            onChange={(v) => update({ enableCache: v })}
          />
        </div>
      </div>

      {/* Training Settings */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h2 className="text-lg font-semibold text-slate-900 mb-4">Training Einstellungen</h2>

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

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

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

          <div>
            <label className="block text-sm text-slate-700 mb-2">Batch Size</label>
            <select
              value={settings.batchSize}
              onChange={(e) => update({ batchSize: parseInt(e.target.value) })}
              className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-900"
            >
              <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-slate-700 mb-2">Learning Rate</label>
            <select
              value={settings.learningRate}
              onChange={(e) => update({ learningRate: parseFloat(e.target.value) })}
              className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-900"
            >
              <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={() => onUpdateSettings(DEFAULT_SETTINGS)}
          className="px-6 py-2 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-lg text-sm font-medium transition-colors"
        >
          Zuruecksetzen
        </button>
        <button
          onClick={onSave}
          className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium transition-colors"
        >
          {settingsSaved ? '\u2713 Gespeichert!' : 'Einstellungen speichern'}
        </button>
      </div>

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

/* ------------------------------------------------------------------ */

function CheckboxSetting({
  label,
  description,
  checked,
  onChange,
}: {
  label: string
  description: string
  checked: boolean
  onChange: (value: boolean) => void
}) {
  return (
    <div>
      <label className="flex items-center gap-3 cursor-pointer">
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => onChange(e.target.checked)}
          className="w-5 h-5 rounded bg-slate-100 border-slate-300"
        />
        <div>
          <div className="text-slate-900 font-medium">{label}</div>
          <div className="text-sm text-slate-500">{description}</div>
        </div>
      </label>
    </div>
  )
}