'use client'

import type { TrainingJob } from './types'
import { ProgressRing, MiniChart, StatusBadge, MetricCard } from './ChartComponents'

export 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>
  )
}