'use client'

import { SkeletonText } from '@/components/common/SkeletonText'
import type { TrOCRStatus } from '../types'

interface TabOverviewProps {
  status: TrOCRStatus | null
  loading: boolean
  onRefresh: () => void
}

export function TabOverview({ status, loading, onRefresh }: TabOverviewProps) {
  return (
    <div className="space-y-6">
      {/* Status Card */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-slate-900">Systemstatus</h2>
          <button
            onClick={onRefresh}
            className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded text-sm transition-colors"
          >
            Aktualisieren
          </button>
        </div>

        {loading ? (
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="bg-slate-50 rounded-lg p-4">
                <SkeletonText lines={1} className="mb-2" />
                <div className="h-3 w-16 bg-slate-200 rounded animate-pulse" />
              </div>
            ))}
          </div>
        ) : status?.status === 'available' ? (
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="bg-slate-50 rounded-lg p-4">
              <div className="text-2xl font-bold text-slate-900">{status.model_name || 'trocr-base'}</div>
              <div className="text-xs text-slate-500">Modell</div>
            </div>
            <div className="bg-slate-50 rounded-lg p-4">
              <div className="text-2xl font-bold text-slate-900">{status.device || 'CPU'}</div>
              <div className="text-xs text-slate-500">Geraet</div>
            </div>
            <div className="bg-slate-50 rounded-lg p-4">
              <div className="text-2xl font-bold text-slate-900">{status.training_examples_count || 0}</div>
              <div className="text-xs text-slate-500">Trainingsbeispiele</div>
            </div>
            <div className="bg-slate-50 rounded-lg p-4">
              <div className="text-2xl font-bold text-slate-900">{status.has_lora_adapter ? 'Aktiv' : 'Keiner'}</div>
              <div className="text-xs text-slate-500">LoRA Adapter</div>
            </div>
          </div>
        ) : status?.status === 'not_installed' ? (
          <div className="text-slate-600">
            <p className="mb-2">TrOCR ist nicht installiert. Fuehre aus:</p>
            <code className="bg-slate-100 px-3 py-2 rounded text-sm block font-mono">{status.install_command}</code>
          </div>
        ) : (
          <div className="text-red-600">{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-50 to-purple-100 border border-purple-200 rounded-xl p-6">
          <div className="text-3xl mb-2">🎯</div>
          <h3 className="text-lg font-semibold text-slate-900 mb-2">Handschrifterkennung</h3>
          <p className="text-sm text-slate-600">
            TrOCR erkennt automatisch handgeschriebenen Text in Klausuren.
            Das Modell wurde speziell fuer deutsche Handschriften optimiert.
          </p>
        </div>
        <div className="bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-xl p-6">
          <div className="text-3xl mb-2">🔒</div>
          <h3 className="text-lg font-semibold text-slate-900 mb-2">Privacy by Design</h3>
          <p className="text-sm text-slate-600">
            Alle Daten werden lokal verarbeitet. Schuelernamen werden durch
            QR-Codes pseudonymisiert - DSGVO-konform.
          </p>
        </div>
        <div className="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-xl p-6">
          <div className="text-3xl mb-2">📈</div>
          <h3 className="text-lg font-semibold text-slate-900 mb-2">Kontinuierliches Lernen</h3>
          <p className="text-sm text-slate-600">
            Mit LoRA Fine-Tuning passt sich das Modell an individuelle
            Handschriften an - ohne das Basismodell zu veraendern.
          </p>
        </div>
      </div>

      {/* Workflow Overview */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h2 className="text-lg font-semibold text-slate-900 mb-4">Magic Onboarding Workflow</h2>
        <div className="flex flex-wrap items-center gap-4 text-sm">
          {WORKFLOW_STEPS.map((step, i) => (
            <WorkflowStep key={step.title} step={step} showArrow={i < WORKFLOW_STEPS.length - 1} />
          ))}
        </div>
      </div>
    </div>
  )
}

const WORKFLOW_STEPS = [
  { icon: '📄', title: '1. Upload', desc: '25 Klausuren hochladen' },
  { icon: '🔍', title: '2. Analyse', desc: 'Lokale OCR in 5-10 Sek' },
  { icon: '✅', title: '3. Bestaetigung', desc: 'Klasse, Schueler, Fach' },
  { icon: '🤖', title: '4. KI-Korrektur', desc: 'Cloud mit Pseudonymisierung' },
  { icon: '📊', title: '5. Integration', desc: 'Notenbuch, Zeugnisse' },
]

function WorkflowStep({ step, showArrow }: { step: typeof WORKFLOW_STEPS[number]; showArrow: boolean }) {
  return (
    <>
      <div className="flex items-center gap-2 bg-slate-50 rounded-lg px-4 py-3">
        <span className="text-2xl">{step.icon}</span>
        <div>
          <div className="font-medium text-slate-900">{step.title}</div>
          <div className="text-slate-500">{step.desc}</div>
        </div>
      </div>
      {showArrow && <div className="text-slate-400">&rarr;</div>}
    </>
  )
}