'use client'

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

interface CertificatesViewProps {
  certificates: TrainingAssignment[]
  onDownloadPDF: (certId: string) => void
}

export function CertificatesView({ certificates, onDownloadPDF }: CertificatesViewProps) {
  if (certificates.length === 0) {
    return (
      <div className="text-center py-12 text-gray-400">
        Noch keine Zertifikate vorhanden. Schliessen Sie eine Schulung mit Quiz ab.
      </div>
    )
  }

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {certificates.map(cert => (
        <div key={cert.id} className="bg-white border border-gray-200 rounded-lg p-5">
          <div className="flex items-start justify-between mb-3">
            <h3 className="font-semibold text-gray-900 text-sm">{cert.module_title}</h3>
            <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Bestanden</span>
          </div>
          <div className="text-xs text-gray-500 space-y-1">
            <p>Mitarbeiter: {cert.user_name}</p>
            <p>Abschluss: {cert.completed_at ? new Date(cert.completed_at).toLocaleDateString('de-DE') : '-'}</p>
            {cert.quiz_score != null && <p>Ergebnis: {Math.round(cert.quiz_score)}%</p>}
            <p className="font-mono text-[10px] text-gray-400">ID: {cert.certificate_id?.substring(0, 12)}</p>
          </div>
          {cert.certificate_id && (
            <button
              onClick={() => onDownloadPDF(cert.certificate_id!)}
              className="mt-3 w-full px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700"
            >
              PDF herunterladen
            </button>
          )}
        </div>
      ))}
    </div>
  )
}