breakpilot-compliance/admin-compliance/app/sdk/training/_components/AssignmentsTab.tsx

'use client'

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

export default function AssignmentsTab({
  assignments,
  statusFilter,
  onStatusFilterChange,
  onAssignmentClick,
}: {
  assignments: TrainingAssignment[]
  statusFilter: string
  onStatusFilterChange: (v: string) => void
  onAssignmentClick: (assignment: TrainingAssignment) => void
}) {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <select
          value={statusFilter}
          onChange={e => onStatusFilterChange(e.target.value)}
          className="px-3 py-2 text-sm border rounded-lg bg-white"
        >
          <option value="">Alle Status</option>
          {Object.entries(STATUS_LABELS).map(([k, v]) => (
            <option key={k} value={k}>{v}</option>
          ))}
        </select>
        <span className="text-sm text-gray-500">{assignments.length} Zuweisungen</span>
      </div>

      {assignments.length === 0 ? (
        <div className="text-center py-12 text-gray-500 text-sm">Keine Zuweisungen gefunden.</div>
      ) : (
        <div className="bg-white border rounded-lg overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Nutzer</th>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Modul</th>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Status</th>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Fortschritt</th>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Frist</th>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Quiz</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {assignments.map(a => {
                const colors = STATUS_COLORS[a.status]
                const deadline = new Date(a.deadline)
                const isOverdue = deadline < new Date() && a.status !== 'completed'
                return (
                  <tr
                    key={a.id}
                    onClick={() => onAssignmentClick(a)}
                    className="hover:bg-gray-50 cursor-pointer"
                  >
                    <td className="px-4 py-3">
                      <div className="font-medium text-gray-900">{a.user_name}</div>
                      <div className="text-xs text-gray-500">{a.user_email}</div>
                    </td>
                    <td className="px-4 py-3">
                      <code className="text-xs bg-gray-100 px-1.5 py-0.5 rounded">{a.module_code ?? a.module_id.slice(0, 8)}</code>
                      {a.module_title && <div className="text-xs text-gray-500 mt-0.5">{a.module_title}</div>}
                    </td>
                    <td className="px-4 py-3">
                      <span className={`text-xs px-2 py-0.5 rounded-full ${colors.bg} ${colors.text}`}>
                        {STATUS_LABELS[a.status]}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <div className="w-20 h-1.5 bg-gray-200 rounded-full overflow-hidden">
                          <div
                            className="h-full bg-blue-500 rounded-full"
                            style={{ width: `${a.progress_percent}%` }}
                          />
                        </div>
                        <span className="text-xs text-gray-600">{a.progress_percent}%</span>
                      </div>
                    </td>
                    <td className={`px-4 py-3 text-xs ${isOverdue ? 'text-red-600 font-medium' : 'text-gray-600'}`}>
                      {deadline.toLocaleDateString('de-DE')}
                    </td>
                    <td className="px-4 py-3 text-xs text-gray-600">
                      {a.quiz_score != null ? (
                        <span className={a.quiz_passed ? 'text-green-600' : 'text-red-600'}>
                          {Math.round(a.quiz_score)}% {a.quiz_passed ? '✓' : '✗'}
                        </span>
                      ) : (
                        <span className="text-gray-400">—</span>
                      )}
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}