import { Users } from 'lucide-react';

import { StatePanel } from '@/components/ui/state-panel';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import type { SafetyQuizResultDto } from '@/shared/types/safetyQuiz';

interface DirectorQuizResultsPanelProps {
  readonly results: readonly SafetyQuizResultDto[];
}

export function DirectorQuizResultsPanel({ results }: DirectorQuizResultsPanelProps) {
  return (
    <div className="bg-white rounded-2xl border border-violet-100 shadow-sm p-5">
      <h3 className="font-semibold text-gray-800 mb-4 flex items-center gap-2">
        <Users size={18} className="text-violet-500" />
        Quiz Results from Database
      </h3>
      {results.length > 0 ? (
        <Table>
          <TableHeader>
            <TableRow className="bg-gray-50 hover:bg-gray-50">
              <TableHead className="h-auto p-3 text-left text-gray-500">Staff</TableHead>
              <TableHead className="h-auto p-3 text-center text-gray-500">Role</TableHead>
              <TableHead className="h-auto p-3 text-center text-gray-500">Score</TableHead>
              <TableHead className="h-auto p-3 text-center text-gray-500">Date</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {results.map((result) => (
              <TableRow key={result.id} className="border-t border-gray-50">
                <TableCell className="p-3 font-medium text-gray-700">{result.user_name}</TableCell>
                <TableCell className="p-3 text-center text-xs text-gray-500 capitalize">{result.user_role}</TableCell>
                <TableCell className="p-3 text-center">
                  <span className={`px-2 py-0.5 rounded-lg text-xs font-semibold ${result.score === result.total_questions ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'}`}>
                    {result.score}/{result.total_questions}
                  </span>
                </TableCell>
                <TableCell className="p-3 text-center text-xs text-gray-400">
                  {new Date(result.completed_at).toLocaleDateString()}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      ) : (
        <StatePanel className="border-0 bg-transparent" alignment="center">
          No quiz results yet. Staff will appear here after completing quizzes.
        </StatePanel>
      )}
    </div>
  );
}
