breakpilot-compliance/admin-compliance/app/sdk/academy/_components/CertificatesTab.tsx

'use client'

import React from 'react'
import type { Certificate } from '@/lib/sdk/academy/types'

// =============================================================================
// CERTIFICATE ROW
// =============================================================================

function CertificateRow({ cert }: { cert: Certificate }) {
  const now = new Date()
  const validUntil = new Date(cert.validUntil)
  const daysLeft = Math.ceil((validUntil.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
  const isExpired = daysLeft <= 0
  const isExpiringSoon = daysLeft > 0 && daysLeft <= 30

  return (
    <tr className="hover:bg-gray-50">
      <td className="px-4 py-3 font-medium text-gray-900">{cert.userName}</td>
      <td className="px-4 py-3 text-gray-600">{cert.courseName}</td>
      <td className="px-4 py-3 text-gray-500">{new Date(cert.issuedAt).toLocaleDateString('de-DE')}</td>
      <td className="px-4 py-3 text-gray-500">{validUntil.toLocaleDateString('de-DE')}</td>
      <td className="px-4 py-3 text-center">
        {isExpired ? (
          <span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">Abgelaufen</span>
        ) : isExpiringSoon ? (
          <span className="px-2 py-1 text-xs rounded-full bg-orange-100 text-orange-700">Laeuft bald ab</span>
        ) : (
          <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">Gueltig</span>
        )}
      </td>
      <td className="px-4 py-3 text-center">
        {cert.pdfUrl ? (
          <a
            href={cert.pdfUrl}
            download
            target="_blank"
            rel="noopener noreferrer"
            className="px-3 py-1 text-xs bg-purple-600 text-white rounded hover:bg-purple-700 transition-colors"
          >
            PDF Download
          </a>
        ) : (
          <span className="px-3 py-1 text-xs bg-gray-100 text-gray-400 rounded cursor-not-allowed">
            Nicht verfuegbar
          </span>
        )}
      </td>
    </tr>
  )
}

// =============================================================================
// CERTIFICATES TAB
// =============================================================================

export function CertificatesTab({
  certificates,
  certSearch,
  onSearchChange
}: {
  certificates: Certificate[]
  certSearch: string
  onSearchChange: (s: string) => void
}) {
  const now = new Date()
  const total = certificates.length
  const valid = certificates.filter(c => new Date(c.validUntil) > now).length
  const expired = certificates.filter(c => new Date(c.validUntil) <= now).length

  return (
    <div className="space-y-4">
      {/* Stats */}
      <div className="grid grid-cols-3 gap-4">
        <div className="bg-white rounded-xl border border-gray-200 p-4 text-center">
          <div className="text-2xl font-bold text-gray-900">{total}</div>
          <div className="text-sm text-gray-500">Gesamt</div>
        </div>
        <div className="bg-white rounded-xl border border-green-200 p-4 text-center">
          <div className="text-2xl font-bold text-green-600">{valid}</div>
          <div className="text-sm text-gray-500">Gueltig</div>
        </div>
        <div className="bg-white rounded-xl border border-red-200 p-4 text-center">
          <div className="text-2xl font-bold text-red-600">{expired}</div>
          <div className="text-sm text-gray-500">Abgelaufen</div>
        </div>
      </div>

      {/* Search */}
      <div>
        <input
          type="text"
          placeholder="Nach Mitarbeiter oder Kurs suchen..."
          value={certSearch}
          onChange={e => onSearchChange(e.target.value)}
          className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
        />
      </div>

      {/* Table */}
      {certificates.length === 0 ? (
        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
          <div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
            <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 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
            </svg>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">Noch keine Zertifikate ausgestellt</h3>
          <p className="mt-2 text-gray-500">Zertifikate werden automatisch nach Kursabschluss generiert.</p>
        </div>
      ) : (
        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-gray-50 border-b border-gray-200">
              <tr>
                <th className="text-left px-4 py-3 font-medium text-gray-700">Mitarbeiter</th>
                <th className="text-left px-4 py-3 font-medium text-gray-700">Kurs</th>
                <th className="text-left px-4 py-3 font-medium text-gray-700">Ausgestellt am</th>
                <th className="text-left px-4 py-3 font-medium text-gray-700">Gueltig bis</th>
                <th className="text-center px-4 py-3 font-medium text-gray-700">Status</th>
                <th className="text-center px-4 py-3 font-medium text-gray-700">Aktionen</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {certificates
                .filter(c =>
                  !certSearch ||
                  c.userName.toLowerCase().includes(certSearch.toLowerCase()) ||
                  c.courseName.toLowerCase().includes(certSearch.toLowerCase())
                )
                .map(cert => <CertificateRow key={cert.id} cert={cert} />)
              }
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}