'use client'

import { useState, useEffect, useCallback, useRef } from 'react'

// ============================================================================
// TYPES
// ============================================================================

interface TrainingJob {
  id: string
  name: string
  model_type: 'zeugnis' | 'klausur' | 'general'
  status: 'queued' | 'preparing' | 'training' | 'validating' | 'completed' | 'failed' | 'paused'
  progress: number
  current_epoch: number
  total_epochs: number
  loss: number
  val_loss: number
  learning_rate: number
  documents_processed: number
  total_documents: number
  started_at: string | null
  estimated_completion: string | null
  error_message: string | null
  metrics: TrainingMetrics
  config: TrainingConfig
}

interface TrainingMetrics {
  precision: number
  recall: number
  f1_score: number
  accuracy: number
  loss_history: number[]
  val_loss_history: number[]
  confusion_matrix?: number[][]
}

interface TrainingConfig {
  batch_size: number
  learning_rate: number
  epochs: number
  warmup_steps: number
  weight_decay: number
  gradient_accumulation: number
  mixed_precision: boolean
  bundeslaender: string[]
}

interface DatasetStats {
  total_documents: number
  total_chunks: number
  training_allowed: number
  by_bundesland: Record<string, number>
  by_doc_type: Record<string, number>
}

interface ModelVersion {
  id: string
  version: string
  created_at: string
  metrics: TrainingMetrics
  is_active: boolean
  size_mb: number
}

// ============================================================================
// MOCK DATA (Replace with real API calls)
// ============================================================================

const MOCK_JOBS: TrainingJob[] = [
  {
    id: 'job-1',
    name: 'Zeugnis-RAG v2.1',
    model_type: 'zeugnis',
    status: 'training',
    progress: 67,
    current_epoch: 7,
    total_epochs: 10,
    loss: 0.234,
    val_loss: 0.289,
    learning_rate: 0.00002,
    documents_processed: 423,
    total_documents: 632,
    started_at: new Date(Date.now() - 3600000).toISOString(),
    estimated_completion: new Date(Date.now() + 1800000).toISOString(),
    error_message: null,
    metrics: {
      precision: 0.89,
      recall: 0.85,
      f1_score: 0.87,
      accuracy: 0.91,
      loss_history: [0.8, 0.6, 0.45, 0.35, 0.28, 0.25, 0.234],
      val_loss_history: [0.85, 0.65, 0.5, 0.4, 0.32, 0.3, 0.289],
    },
    config: {
      batch_size: 16,
      learning_rate: 0.00005,
      epochs: 10,
      warmup_steps: 500,
      weight_decay: 0.01,
      gradient_accumulation: 4,
      mixed_precision: true,
      bundeslaender: ['ni', 'by', 'nw', 'he', 'bw'],
    },
  },
]

const MOCK_STATS: DatasetStats = {
  total_documents: 632,
  total_chunks: 8547,
  training_allowed: 489,
  by_bundesland: {
    ni: 87, by: 92, nw: 78, he: 65, bw: 71, rp: 43, sn: 38, sh: 34, th: 29,
  },
  by_doc_type: {
    verordnung: 312,
    schulordnung: 156,
    handreichung: 98,
    erlass: 66,
  },
}

// ============================================================================
// API FUNCTIONS
// ============================================================================

async function fetchJobs(): Promise<TrainingJob[]> {
  try {
    const response = await fetch('/api/admin/training?action=jobs')
    if (!response.ok) throw new Error('Failed to fetch jobs')
    return await response.json()
  } catch (error) {
    console.error('Error fetching jobs:', error)
    return MOCK_JOBS // Fallback to mock data
  }
}

async function fetchDatasetStats(): Promise<DatasetStats> {
  try {
    const response = await fetch('/api/admin/training?action=dataset-stats')
    if (!response.ok) throw new Error('Failed to fetch stats')
    return await response.json()
  } catch (error) {
    console.error('Error fetching stats:', error)
    return MOCK_STATS // Fallback to mock data
  }
}

async function createTrainingJob(config: Partial<TrainingConfig>): Promise<{id: string, status: string}> {
  const response = await fetch('/api/admin/training?action=create-job', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name: `Zeugnis-RAG ${new Date().toLocaleDateString('de-DE')}`,
      model_type: 'zeugnis',
      bundeslaender: config.bundeslaender || [],
      batch_size: config.batch_size || 16,
      learning_rate: config.learning_rate || 0.00005,
      epochs: config.epochs || 10,
      warmup_steps: config.warmup_steps || 500,
      weight_decay: config.weight_decay || 0.01,
      gradient_accumulation: config.gradient_accumulation || 4,
      mixed_precision: config.mixed_precision ?? true,
    }),
  })
  if (!response.ok) {
    const error = await response.json()
    throw new Error(error.detail || 'Failed to create job')
  }
  return await response.json()
}

async function pauseJob(jobId: string): Promise<void> {
  const response = await fetch(`/api/admin/training?action=pause&job_id=${jobId}`, {
    method: 'POST',
  })
  if (!response.ok) throw new Error('Failed to pause job')
}

async function resumeJob(jobId: string): Promise<void> {
  const response = await fetch(`/api/admin/training?action=resume&job_id=${jobId}`, {
    method: 'POST',
  })
  if (!response.ok) throw new Error('Failed to resume job')
}

async function cancelJob(jobId: string): Promise<void> {
  const response = await fetch(`/api/admin/training?action=cancel&job_id=${jobId}`, {
    method: 'POST',
  })
  if (!response.ok) throw new Error('Failed to cancel job')
}

// ============================================================================
// COMPONENTS
// ============================================================================

// Progress Ring Component
function ProgressRing({ progress, size = 120, strokeWidth = 8, color = '#10B981' }: {
  progress: number
  size?: number
  strokeWidth?: number
  color?: string
}) {
  const radius = (size - strokeWidth) / 2
  const circumference = radius * 2 * Math.PI
  const offset = circumference - (progress / 100) * circumference

  return (
    <div className="relative" style={{ width: size, height: size }}>
      <svg className="transform -rotate-90" width={size} height={size}>
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke="currentColor"
          strokeWidth={strokeWidth}
          fill="none"
          className="text-gray-200 dark:text-gray-700"
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke={color}
          strokeWidth={strokeWidth}
          fill="none"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          strokeLinecap="round"
          className="transition-all duration-500"
        />
      </svg>
      <div className="absolute inset-0 flex items-center justify-center">
        <span className="text-2xl font-bold text-gray-900 dark:text-white">
          {Math.round(progress)}%
        </span>
      </div>
    </div>
  )
}

// Mini Line Chart Component
function MiniChart({ data, color = '#10B981', height = 60 }: {
  data: number[]
  color?: string
  height?: number
}) {
  if (!data.length) return null

  const max = Math.max(...data)
  const min = Math.min(...data)
  const range = max - min || 1
  const width = 200
  const padding = 4

  const points = data.map((value, i) => {
    const x = padding + (i / (data.length - 1)) * (width - 2 * padding)
    const y = padding + (1 - (value - min) / range) * (height - 2 * padding)
    return `${x},${y}`
  }).join(' ')

  return (
    <svg width={width} height={height} className="overflow-visible">
      <polyline
        points={points}
        fill="none"
        stroke={color}
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      {/* Latest point */}
      {data.length > 0 && (
        <circle
          cx={padding + ((data.length - 1) / (data.length - 1)) * (width - 2 * padding)}
          cy={padding + (1 - (data[data.length - 1] - min) / range) * (height - 2 * padding)}
          r={4}
          fill={color}
        />
      )}
    </svg>
  )
}

// Status Badge
function StatusBadge({ status }: { status: TrainingJob['status'] }) {
  const styles = {
    queued: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
    preparing: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
    training: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
    validating: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
    completed: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
    failed: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
    paused: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
  }

  const labels = {
    queued: 'In Warteschlange',
    preparing: 'Vorbereitung',
    training: 'Training läuft',
    validating: 'Validierung',
    completed: 'Abgeschlossen',
    failed: 'Fehlgeschlagen',
    paused: 'Pausiert',
  }

  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${styles[status]}`}>
      {status === 'training' && (
        <span className="w-2 h-2 mr-1.5 bg-blue-500 rounded-full animate-pulse" />
      )}
      {labels[status]}
    </span>
  )
}

// Metric Card
function MetricCard({ label, value, unit, trend, color }: {
  label: string
  value: number | string
  unit?: string
  trend?: 'up' | 'down' | 'neutral'
  color?: string
}) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-200 dark:border-gray-700">
      <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">{label}</p>
      <div className="flex items-baseline gap-1">
        <span className="text-2xl font-bold" style={{ color: color || 'inherit' }}>
          {typeof value === 'number' ? value.toFixed(3) : value}
        </span>
        {unit && <span className="text-sm text-gray-400">{unit}</span>}
        {trend && (
          <span className={`ml-2 text-sm ${
            trend === 'up' ? 'text-green-500' : trend === 'down' ? 'text-red-500' : 'text-gray-400'
          }`}>
            {trend === 'up' ? '↑' : trend === 'down' ? '↓' : '→'}
          </span>
        )}
      </div>
    </div>
  )
}

// Training Job Card
function TrainingJobCard({ job, onPause, onResume, onStop, onViewDetails }: {
  job: TrainingJob
  onPause: () => void
  onResume: () => void
  onStop: () => void
  onViewDetails: () => void
}) {
  const isActive = ['training', 'preparing', 'validating'].includes(job.status)

  return (
    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
      {/* Header */}
      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
        <div>
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{job.name}</h3>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            Modell: {job.model_type.charAt(0).toUpperCase() + job.model_type.slice(1)}
          </p>
        </div>
        <StatusBadge status={job.status} />
      </div>

      {/* Progress Section */}
      <div className="p-6">
        <div className="flex items-center gap-8">
          <ProgressRing
            progress={job.progress}
            color={job.status === 'failed' ? '#EF4444' : '#10B981'}
          />
          <div className="flex-1 space-y-4">
            {/* Epoch Progress */}
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-gray-600 dark:text-gray-400">Epoche</span>
                <span className="font-medium text-gray-900 dark:text-white">
                  {job.current_epoch} / {job.total_epochs}
                </span>
              </div>
              <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full transition-all duration-500"
                  style={{ width: `${(job.current_epoch / job.total_epochs) * 100}%` }}
                />
              </div>
            </div>

            {/* Documents Progress */}
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-gray-600 dark:text-gray-400">Dokumente</span>
                <span className="font-medium text-gray-900 dark:text-white">
                  {job.documents_processed.toLocaleString()} / {job.total_documents.toLocaleString()}
                </span>
              </div>
              <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full transition-all duration-500"
                  style={{ width: `${(job.documents_processed / job.total_documents) * 100}%` }}
                />
              </div>
            </div>
          </div>
        </div>

        {/* Metrics */}
        <div className="grid grid-cols-4 gap-3 mt-6">
          <MetricCard label="Loss" value={job.loss} trend="down" color="#3B82F6" />
          <MetricCard label="Val Loss" value={job.val_loss} trend="down" color="#8B5CF6" />
          <MetricCard label="Precision" value={job.metrics.precision} color="#10B981" />
          <MetricCard label="F1 Score" value={job.metrics.f1_score} color="#F59E0B" />
        </div>

        {/* Loss Chart */}
        <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-900 rounded-xl">
          <div className="flex justify-between items-center mb-3">
            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
              Loss-Verlauf
            </span>
            <div className="flex gap-4 text-xs">
              <span className="flex items-center gap-1">
                <span className="w-3 h-0.5 bg-blue-500 rounded" />
                Training
              </span>
              <span className="flex items-center gap-1">
                <span className="w-3 h-0.5 bg-purple-500 rounded" />
                Validation
              </span>
            </div>
          </div>
          <div className="flex gap-4">
            <MiniChart data={job.metrics.loss_history} color="#3B82F6" />
            <MiniChart data={job.metrics.val_loss_history} color="#8B5CF6" />
          </div>
        </div>

        {/* Time Info */}
        <div className="mt-4 flex justify-between text-sm text-gray-500 dark:text-gray-400">
          <span>
            Gestartet: {job.started_at ? new Date(job.started_at).toLocaleTimeString('de-DE') : '-'}
          </span>
          <span>
            Geschätzte Fertigstellung: {job.estimated_completion
              ? new Date(job.estimated_completion).toLocaleTimeString('de-DE')
              : '-'
            }
          </span>
        </div>
      </div>

      {/* Actions */}
      <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex justify-between">
        <button
          onClick={onViewDetails}
          className="px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400"
        >
          Details anzeigen
        </button>
        <div className="flex gap-2">
          {isActive && (
            <>
              <button
                onClick={job.status === 'paused' ? onResume : onPause}
                className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
              >
                {job.status === 'paused' ? 'Fortsetzen' : 'Pausieren'}
              </button>
              <button
                onClick={onStop}
                className="px-4 py-2 text-sm font-medium text-red-600 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/40"
              >
                Abbrechen
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  )
}

// Dataset Overview Component
function DatasetOverview({ stats }: { stats: DatasetStats }) {
  const maxBundesland = Math.max(...Object.values(stats.by_bundesland))

  return (
    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
        Datensatz-Übersicht
      </h3>

      {/* Stats Grid */}
      <div className="grid grid-cols-3 gap-4 mb-6">
        <div className="text-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
          <p className="text-3xl font-bold text-blue-600 dark:text-blue-400">
            {stats.total_documents.toLocaleString()}
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">Dokumente</p>
        </div>
        <div className="text-center p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-xl">
          <p className="text-3xl font-bold text-emerald-600 dark:text-emerald-400">
            {stats.total_chunks.toLocaleString()}
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">Chunks</p>
        </div>
        <div className="text-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-xl">
          <p className="text-3xl font-bold text-purple-600 dark:text-purple-400">
            {stats.training_allowed.toLocaleString()}
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">Training erlaubt</p>
        </div>
      </div>

      {/* Bundesland Distribution */}
      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
        Verteilung nach Bundesland
      </h4>
      <div className="space-y-2">
        {Object.entries(stats.by_bundesland)
          .sort((a, b) => b[1] - a[1])
          .map(([code, count]) => (
            <div key={code} className="flex items-center gap-3">
              <span className="w-8 text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">
                {code}
              </span>
              <div className="flex-1 h-4 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full"
                  style={{ width: `${(count / maxBundesland) * 100}%` }}
                />
              </div>
              <span className="w-10 text-sm text-right text-gray-600 dark:text-gray-400">
                {count}
              </span>
            </div>
          ))}
      </div>
    </div>
  )
}

// New Training Modal
function NewTrainingModal({ isOpen, onClose, onSubmit }: {
  isOpen: boolean
  onClose: () => void
  onSubmit: (config: Partial<TrainingConfig>) => void
}) {
  const [step, setStep] = useState(1)
  const [config, setConfig] = useState<Partial<TrainingConfig>>({
    batch_size: 16,
    learning_rate: 0.00005,
    epochs: 10,
    warmup_steps: 500,
    weight_decay: 0.01,
    gradient_accumulation: 4,
    mixed_precision: true,
    bundeslaender: [],
  })

  if (!isOpen) return null

  const bundeslaender = [
    { code: 'ni', name: 'Niedersachsen', allowed: true },
    { code: 'by', name: 'Bayern', allowed: true },
    { code: 'nw', name: 'NRW', allowed: true },
    { code: 'he', name: 'Hessen', allowed: true },
    { code: 'bw', name: 'Baden-Württemberg', allowed: true },
    { code: 'rp', name: 'Rheinland-Pfalz', allowed: true },
    { code: 'sn', name: 'Sachsen', allowed: true },
    { code: 'sh', name: 'Schleswig-Holstein', allowed: true },
    { code: 'th', name: 'Thüringen', allowed: true },
    { code: 'be', name: 'Berlin', allowed: false },
    { code: 'bb', name: 'Brandenburg', allowed: false },
    { code: 'hb', name: 'Bremen', allowed: false },
    { code: 'hh', name: 'Hamburg', allowed: false },
    { code: 'mv', name: 'Mecklenburg-Vorpommern', allowed: false },
    { code: 'sl', name: 'Saarland', allowed: false },
    { code: 'st', name: 'Sachsen-Anhalt', allowed: false },
  ]

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
        {/* Header */}
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
          <div>
            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
              Neues Training starten
            </h2>
            <p className="text-sm text-gray-500">Schritt {step} von 3</p>
          </div>
          <button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Progress Steps */}
        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900">
          <div className="flex items-center justify-center gap-4">
            {[1, 2, 3].map((s) => (
              <div key={s} className="flex items-center">
                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
                  s <= step
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-200 dark:bg-gray-700 text-gray-500'
                }`}>
                  {s < step ? '✓' : s}
                </div>
                {s < 3 && (
                  <div className={`w-16 h-1 mx-2 rounded ${
                    s < step ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'
                  }`} />
                )}
              </div>
            ))}
          </div>
          <div className="flex justify-center gap-20 mt-2 text-xs text-gray-500">
            <span>Daten</span>
            <span>Parameter</span>
            <span>Bestätigen</span>
          </div>
        </div>

        {/* Content */}
        <div className="p-6 overflow-y-auto max-h-[50vh]">
          {step === 1 && (
            <div>
              <h3 className="font-medium text-gray-900 dark:text-white mb-4">
                Wählen Sie die Bundesländer für das Training
              </h3>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
                Nur Bundesländer mit Training-Erlaubnis können ausgewählt werden.
              </p>
              <div className="grid grid-cols-2 gap-3">
                {bundeslaender.map((bl) => (
                  <label
                    key={bl.code}
                    className={`flex items-center p-3 rounded-lg border-2 transition cursor-pointer ${
                      config.bundeslaender?.includes(bl.code)
                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                        : bl.allowed
                          ? 'border-gray-200 dark:border-gray-700 hover:border-blue-300'
                          : 'border-gray-200 dark:border-gray-700 opacity-50 cursor-not-allowed'
                    }`}
                  >
                    <input
                      type="checkbox"
                      disabled={!bl.allowed}
                      checked={config.bundeslaender?.includes(bl.code)}
                      onChange={(e) => {
                        if (e.target.checked) {
                          setConfig({ ...config, bundeslaender: [...(config.bundeslaender || []), bl.code] })
                        } else {
                          setConfig({ ...config, bundeslaender: config.bundeslaender?.filter(c => c !== bl.code) })
                        }
                      }}
                      className="sr-only"
                    />
                    <span className={`w-5 h-5 rounded border-2 flex items-center justify-center mr-3 ${
                      config.bundeslaender?.includes(bl.code)
                        ? 'bg-blue-500 border-blue-500 text-white'
                        : 'border-gray-300 dark:border-gray-600'
                    }`}>
                      {config.bundeslaender?.includes(bl.code) && '✓'}
                    </span>
                    <span className="flex-1 text-gray-900 dark:text-white">{bl.name}</span>
                    {!bl.allowed && (
                      <span className="text-xs text-red-500">Kein Training</span>
                    )}
                  </label>
                ))}
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="space-y-6">
              <h3 className="font-medium text-gray-900 dark:text-white mb-4">
                Training-Parameter konfigurieren
              </h3>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Batch Size
                  </label>
                  <input
                    type="number"
                    value={config.batch_size}
                    onChange={(e) => setConfig({ ...config, batch_size: parseInt(e.target.value) })}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Learning Rate
                  </label>
                  <input
                    type="number"
                    step="0.00001"
                    value={config.learning_rate}
                    onChange={(e) => setConfig({ ...config, learning_rate: parseFloat(e.target.value) })}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Epochen
                  </label>
                  <input
                    type="number"
                    value={config.epochs}
                    onChange={(e) => setConfig({ ...config, epochs: parseInt(e.target.value) })}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Warmup Steps
                  </label>
                  <input
                    type="number"
                    value={config.warmup_steps}
                    onChange={(e) => setConfig({ ...config, warmup_steps: parseInt(e.target.value) })}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"
                  />
                </div>
              </div>

              <div className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
                <input
                  type="checkbox"
                  id="mixedPrecision"
                  checked={config.mixed_precision}
                  onChange={(e) => setConfig({ ...config, mixed_precision: e.target.checked })}
                  className="w-4 h-4 text-blue-600 rounded"
                />
                <label htmlFor="mixedPrecision" className="text-sm text-gray-700 dark:text-gray-300">
                  Mixed Precision Training (FP16) - schneller und speichereffizienter
                </label>
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              <h3 className="font-medium text-gray-900 dark:text-white mb-4">
                Training-Konfiguration bestätigen
              </h3>

              <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 space-y-3">
                <div className="flex justify-between">
                  <span className="text-gray-600 dark:text-gray-400">Bundesländer</span>
                  <span className="font-medium text-gray-900 dark:text-white">
                    {config.bundeslaender?.length || 0} ausgewählt
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600 dark:text-gray-400">Epochen</span>
                  <span className="font-medium text-gray-900 dark:text-white">{config.epochs}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600 dark:text-gray-400">Batch Size</span>
                  <span className="font-medium text-gray-900 dark:text-white">{config.batch_size}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600 dark:text-gray-400">Learning Rate</span>
                  <span className="font-medium text-gray-900 dark:text-white">{config.learning_rate}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600 dark:text-gray-400">Mixed Precision</span>
                  <span className="font-medium text-gray-900 dark:text-white">
                    {config.mixed_precision ? 'Aktiviert' : 'Deaktiviert'}
                  </span>
                </div>
              </div>

              <div className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                <p className="text-sm text-yellow-800 dark:text-yellow-200">
                  <strong>Hinweis:</strong> Das Training kann je nach Datenmenge und Konfiguration
                  mehrere Stunden dauern. Sie können den Fortschritt jederzeit überwachen.
                </p>
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-between">
          <button
            onClick={() => step > 1 ? setStep(step - 1) : onClose()}
            className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
          >
            {step > 1 ? 'Zurück' : 'Abbrechen'}
          </button>
          <button
            onClick={() => step < 3 ? setStep(step + 1) : onSubmit(config)}
            disabled={step === 1 && (!config.bundeslaender || config.bundeslaender.length === 0)}
            className="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {step < 3 ? 'Weiter' : 'Training starten'}
          </button>
        </div>
      </div>
    </div>
  )
}

// ============================================================================
// MAIN PAGE
// ============================================================================

export default function TrainingDashboardPage() {
  const [jobs, setJobs] = useState<TrainingJob[]>([])
  const [stats, setStats] = useState<DatasetStats>(MOCK_STATS)
  const [showNewTrainingModal, setShowNewTrainingModal] = useState(false)
  const [selectedJob, setSelectedJob] = useState<TrainingJob | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Load initial data
  useEffect(() => {
    async function loadData() {
      setIsLoading(true)
      try {
        const [jobsData, statsData] = await Promise.all([
          fetchJobs(),
          fetchDatasetStats(),
        ])
        setJobs(jobsData)
        setStats(statsData)
        setError(null)
      } catch (err) {
        console.error('Failed to load data:', err)
        setError('Verbindung zum Backend fehlgeschlagen')
        // Use mock data as fallback
        setJobs(MOCK_JOBS)
        setStats(MOCK_STATS)
      } finally {
        setIsLoading(false)
      }
    }
    loadData()
  }, [])

  // Real-time updates for active training jobs
  useEffect(() => {
    const hasActiveJob = jobs.some(j => j.status === 'training' || j.status === 'preparing')
    if (!hasActiveJob) return

    const interval = setInterval(async () => {
      try {
        const updatedJobs = await fetchJobs()
        setJobs(updatedJobs)
      } catch (err) {
        console.error('Failed to refresh jobs:', err)
      }
    }, 2000)

    return () => clearInterval(interval)
  }, [jobs])

  const handleStartTraining = async (config: Partial<TrainingConfig>) => {
    try {
      const result = await createTrainingJob(config)
      // Refresh jobs list
      const updatedJobs = await fetchJobs()
      setJobs(updatedJobs)
      setShowNewTrainingModal(false)
    } catch (err) {
      console.error('Failed to start training:', err)
      setError(err instanceof Error ? err.message : 'Training konnte nicht gestartet werden')
    }
  }

  const handlePauseJob = async (jobId: string) => {
    try {
      await pauseJob(jobId)
      const updatedJobs = await fetchJobs()
      setJobs(updatedJobs)
    } catch (err) {
      console.error('Failed to pause job:', err)
    }
  }

  const handleResumeJob = async (jobId: string) => {
    try {
      await resumeJob(jobId)
      const updatedJobs = await fetchJobs()
      setJobs(updatedJobs)
    } catch (err) {
      console.error('Failed to resume job:', err)
    }
  }

  const handleCancelJob = async (jobId: string) => {
    try {
      await cancelJob(jobId)
      const updatedJobs = await fetchJobs()
      setJobs(updatedJobs)
    } catch (err) {
      console.error('Failed to cancel job:', err)
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 p-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex justify-between items-start mb-8">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              Training Dashboard
            </h1>
            <p className="text-gray-500 dark:text-gray-400 mt-1">
              Überwachen und steuern Sie KI-Trainingsprozesse für Zeugnisse
            </p>
          </div>
          <button
            onClick={() => setShowNewTrainingModal(true)}
            className="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5"
          >
            <span className="flex items-center gap-2">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
              </svg>
              Neues Training
            </span>
          </button>
        </div>

        {/* Error Banner */}
        {error && (
          <div className="mb-6 p-4 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 rounded-xl">
            <div className="flex items-center gap-3">
              <span className="text-amber-500">&#9888;</span>
              <span className="text-amber-800 dark:text-amber-200">{error}</span>
              <button
                onClick={() => setError(null)}
                className="ml-auto text-amber-600 hover:text-amber-800"
              >
                &#10005;
              </button>
            </div>
          </div>
        )}

        {/* Loading State */}
        {isLoading ? (
          <div className="flex items-center justify-center py-20">
            <div className="text-center">
              <div className="w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mx-auto mb-4" />
              <p className="text-gray-500 dark:text-gray-400">Lade Trainingsdaten...</p>
            </div>
          </div>
        ) : (
        <div className="grid grid-cols-3 gap-6">
          {/* Training Jobs */}
          <div className="col-span-2 space-y-6">
            {jobs.length === 0 ? (
              <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-12 text-center">
                <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
                  <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                  </svg>
                </div>
                <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                  Kein aktives Training
                </h3>
                <p className="text-gray-500 dark:text-gray-400 mb-6">
                  Starten Sie ein neues Training, um das Zeugnis-Modell zu verbessern.
                </p>
                <button
                  onClick={() => setShowNewTrainingModal(true)}
                  className="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700"
                >
                  Training starten
                </button>
              </div>
            ) : (
              jobs.map(job => (
                <TrainingJobCard
                  key={job.id}
                  job={job}
                  onPause={() => handlePauseJob(job.id)}
                  onResume={() => handleResumeJob(job.id)}
                  onStop={() => handleCancelJob(job.id)}
                  onViewDetails={() => setSelectedJob(job)}
                />
              ))
            )}
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            <DatasetOverview stats={stats} />

            {/* Quick Actions */}
            <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                Schnellaktionen
              </h3>
              <div className="space-y-3">
                <button className="w-full px-4 py-3 text-left bg-gray-50 dark:bg-gray-900 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition">
                  <span className="flex items-center gap-3">
                    <span className="text-xl">📊</span>
                    <span>
                      <span className="block font-medium text-gray-900 dark:text-white">
                        Modell-Vergleich
                      </span>
                      <span className="text-sm text-gray-500">
                        Versionen vergleichen
                      </span>
                    </span>
                  </span>
                </button>
                <button className="w-full px-4 py-3 text-left bg-gray-50 dark:bg-gray-900 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition">
                  <span className="flex items-center gap-3">
                    <span className="text-xl">📥</span>
                    <span>
                      <span className="block font-medium text-gray-900 dark:text-white">
                        Modell exportieren
                      </span>
                      <span className="text-sm text-gray-500">
                        ONNX/TensorRT Format
                      </span>
                    </span>
                  </span>
                </button>
                <button className="w-full px-4 py-3 text-left bg-gray-50 dark:bg-gray-900 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition">
                  <span className="flex items-center gap-3">
                    <span className="text-xl">🔄</span>
                    <span>
                      <span className="block font-medium text-gray-900 dark:text-white">
                        Daten aktualisieren
                      </span>
                      <span className="text-sm text-gray-500">
                        Crawler erneut ausführen
                      </span>
                    </span>
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
        )}
      </div>

      {/* New Training Modal */}
      <NewTrainingModal
        isOpen={showNewTrainingModal}
        onClose={() => setShowNewTrainingModal(false)}
        onSubmit={handleStartTraining}
      />
    </div>
  )
}