import type { HomeworkAssignmentQuestionAnalytics } from "@/modules/homework/types"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { ScrollArea } from "@/shared/components/ui/scroll-area"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"

export function HomeworkAssignmentQuestionErrorDetailsCard({
  questions,
  gradedSampleCount,
}: {
  questions: HomeworkAssignmentQuestionAnalytics[]
  gradedSampleCount: number
}) {
  return (
    <Card className="md:col-span-1">
      <CardHeader className="pb-3">
        <CardTitle className="text-sm font-medium text-muted-foreground">Question Error Details</CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        {questions.length === 0 || gradedSampleCount === 0 ? (
          <div className="p-4 text-sm text-muted-foreground">No data available.</div>
        ) : (
          <ScrollArea className="h-72">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[70px]">Question</TableHead>
                  <TableHead className="text-right">Error Count</TableHead>
                  <TableHead className="text-right">Error Rate</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {questions.map((q, index) => (
                  <TableRow key={q.questionId}>
                    <TableCell className="text-sm">
                      <div className="font-medium">Q{index + 1}</div>
                    </TableCell>
                    <TableCell className="text-right text-sm tabular-nums">{q.errorCount}</TableCell>
                    <TableCell className="text-right text-sm tabular-nums">{(q.errorRate * 100).toFixed(1)}%</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </ScrollArea>
        )}
      </CardContent>
    </Card>
  )
}