'use client'

import type { TrOCRStatus } from './types'

interface OverviewTabProps {
  status: TrOCRStatus | null
  loading: boolean
  fetchStatus: () => void
}

export default function OverviewTab({ status, loading, fetchStatus }: OverviewTabProps) {
  return (
    <div className="space-y-6">
      {/* Status Card */}
      <div className="bg-gray-800/50 border border-gray-700 rounded-xl p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-white">Systemstatus</h2>
          <button
            onClick={fetchStatus}
            className="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm transition-colors"
          >
            Aktualisieren
          </button>
        </div>

        {loading ? (
          <div className="text-gray-400">Lade Status...</div>
        ) : status?.status === 'available' ? (
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="bg-gray-900/50 rounded-lg p-4">
              <div className="text-2xl font-bold text-white">{status.model_name || 'trocr-base'}</div>
              <div className="text-xs text-gray-400">Modell</div>
            </div>
            <div className="bg-gray-900/50 rounded-lg p-4">
              <div className="text-2xl font-bold text-white">{status.device || 'CPU'}</div>
              <div className="text-xs text-gray-400">Gerät</div>
            </div>
            <div className="bg-gray-900/50 rounded-lg p-4">
              <div className="text-2xl font-bold text-white">{status.training_examples_count || 0}</div>
              <div className="text-xs text-gray-400">Trainingsbeispiele</div>
            </div>
            <div className="bg-gray-900/50 rounded-lg p-4">
              <div className="text-2xl font-bold text-white">{status.has_lora_adapter ? 'Aktiv' : 'Keiner'}</div>
              <div className="text-xs text-gray-400">LoRA Adapter</div>
            </div>
          </div>
        ) : status?.status === 'not_installed' ? (
          <div className="text-gray-400">
            <p className="mb-2">TrOCR ist nicht installiert. Führe aus:</p>
            <code className="bg-gray-900 px-3 py-2 rounded text-sm block">{status.install_command}</code>
          </div>
        ) : (
          <div className="text-red-400">{status?.error || 'Unbekannter Fehler'}</div>
        )}
      </div>

      {/* Quick Overview Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-gradient-to-br from-purple-900/30 to-purple-800/20 border border-purple-700/50 rounded-xl p-6">
          <div className="text-3xl mb-2">🎯</div>
          <h3 className="text-lg font-semibold text-white mb-2">Handschrifterkennung</h3>
          <p className="text-sm text-gray-300">
            TrOCR erkennt automatisch handgeschriebenen Text in Klausuren.
            Das Modell wurde speziell für deutsche Handschriften optimiert.
          </p>
        </div>
        <div className="bg-gradient-to-br from-green-900/30 to-green-800/20 border border-green-700/50 rounded-xl p-6">
          <div className="text-3xl mb-2">🔒</div>
          <h3 className="text-lg font-semibold text-white mb-2">Privacy by Design</h3>
          <p className="text-sm text-gray-300">
            Alle Daten werden lokal verarbeitet. Schülernamen werden durch
            QR-Codes pseudonymisiert - DSGVO-konform.
          </p>
        </div>
        <div className="bg-gradient-to-br from-blue-900/30 to-blue-800/20 border border-blue-700/50 rounded-xl p-6">
          <div className="text-3xl mb-2">📈</div>
          <h3 className="text-lg font-semibold text-white mb-2">Kontinuierliches Lernen</h3>
          <p className="text-sm text-gray-300">
            Mit LoRA Fine-Tuning passt sich das Modell an individuelle
            Handschriften an - ohne das Basismodell zu verändern.
          </p>
        </div>
      </div>

      {/* Workflow Overview */}
      <div className="bg-gray-800/50 border border-gray-700 rounded-xl p-6">
        <h2 className="text-lg font-semibold text-white mb-4">Magic Onboarding Workflow</h2>
        <div className="flex flex-wrap items-center gap-4 text-sm">
          {[
            { icon: '📄', title: '1. Upload', desc: '25 Klausuren hochladen' },
            { icon: '🔍', title: '2. Analyse', desc: 'Lokale OCR in 5-10 Sek' },
            { icon: '✅', title: '3. Bestätigung', desc: 'Klasse, Schüler, Fach' },
            { icon: '🤖', title: '4. KI-Korrektur', desc: 'Cloud mit Pseudonymisierung' },
            { icon: '📊', title: '5. Integration', desc: 'Notenbuch, Zeugnisse' },
          ].map((step, i, arr) => (
            <div key={step.title} className="contents">
              <div className="flex items-center gap-2 bg-gray-900/50 rounded-lg px-4 py-3">
                <span className="text-2xl">{step.icon}</span>
                <div>
                  <div className="font-medium text-white">{step.title}</div>
                  <div className="text-gray-400">{step.desc}</div>
                </div>
              </div>
              {i < arr.length - 1 && <div className="text-gray-600">→</div>}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}