'use client'

import type { TrainingAssignment } from '@/lib/sdk/training/types'
import { STATUS_LABELS, STATUS_COLORS } from '@/lib/sdk/training/types'

interface AssignmentsListProps {
  assignments: TrainingAssignment[]
  loading: boolean
  certGenerating: boolean
  onStart: (a: TrainingAssignment) => void
  onResume: (a: TrainingAssignment) => void
  onGenerateCertificate: (id: string) => void
  onDownloadPDF: (certId: string) => void
}

export function AssignmentsList({
  assignments, loading, certGenerating, onStart, onResume, onGenerateCertificate, onDownloadPDF,
}: AssignmentsListProps) {
  if (loading) return <div className="text-center py-12 text-gray-400">Lade Schulungen...</div>
  if (assignments.length === 0) return <div className="text-center py-12 text-gray-400">Keine Schulungen zugewiesen</div>

  return (
    <div className="grid gap-4">
      {assignments.map(a => (
        <div key={a.id} className="bg-white border border-gray-200 rounded-lg p-5 hover:shadow-sm transition-shadow">
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <div className="flex items-center gap-3">
                <h3 className="font-semibold text-gray-900">{a.module_title || a.module_code}</h3>
                <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[a.status]?.bg || 'bg-gray-100'} ${STATUS_COLORS[a.status]?.text || 'text-gray-700'}`}>
                  {STATUS_LABELS[a.status] || a.status}
                </span>
              </div>
              <p className="text-sm text-gray-500 mt-1">
                Code: {a.module_code} | Deadline: {new Date(a.deadline).toLocaleDateString('de-DE')}
                {a.quiz_score != null && ` | Quiz: ${Math.round(a.quiz_score)}%`}
              </p>
              <div className="mt-3 w-full bg-gray-200 rounded-full h-2">
                <div
                  className={`h-2 rounded-full transition-all ${a.status === 'completed' ? 'bg-green-500' : 'bg-indigo-500'}`}
                  style={{ width: `${a.progress_percent}%` }}
                />
              </div>
              <p className="text-xs text-gray-400 mt-1">{a.progress_percent}% abgeschlossen</p>
            </div>
            <div className="flex gap-2 ml-4">
              {a.status === 'pending' && (
                <button onClick={() => onStart(a)} className="px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700">Starten</button>
              )}
              {a.status === 'in_progress' && (
                <button onClick={() => onResume(a)} className="px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700">Fortsetzen</button>
              )}
              {a.status === 'completed' && a.quiz_passed && !a.certificate_id && (
                <button onClick={() => onGenerateCertificate(a.id)} disabled={certGenerating} className="px-3 py-1.5 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 disabled:opacity-50">
                  {certGenerating ? 'Erstelle...' : 'Zertifikat'}
                </button>
              )}
              {a.certificate_id && (
                <button onClick={() => onDownloadPDF(a.certificate_id!)} className="px-3 py-1.5 bg-green-100 text-green-700 text-sm rounded-lg hover:bg-green-200">PDF</button>
              )}
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}
