import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/components/ui/table"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { Trophy } from "lucide-react"

import { GradeStatsCard } from "./grade-stats-card"
import type { ClassGradeStats, ClassRankingItem } from "../types"

interface ClassGradeReportProps {
  stats: ClassGradeStats | null
  ranking: ClassRankingItem[]
}

export function ClassGradeReport({ stats, ranking }: ClassGradeReportProps) {
  return (
    <div className="space-y-6">
      {stats ? (
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold">{stats.className}</h3>
              <p className="text-sm text-muted-foreground">
                {stats.studentCount} students · {stats.stats.count} grade records
              </p>
            </div>
          </div>
          <GradeStatsCard stats={stats.stats} />
        </div>
      ) : (
        <EmptyState
          title="No data"
          description="No grade records found for this class."
          icon={Trophy}
          className="border-none shadow-none"
        />
      )}

      {ranking.length > 0 ? (
        <Card>
          <CardHeader>
            <CardTitle>Class Ranking</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-16">Rank</TableHead>
                    <TableHead>Student</TableHead>
                    <TableHead className="text-right">Average Score</TableHead>
                    <TableHead className="text-right">Records</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {ranking.map((r) => (
                    <TableRow key={r.studentId}>
                      <TableCell>
                        <Badge
                          variant={
                            r.rank === 1 ? "default" : r.rank <= 3 ? "secondary" : "outline"
                          }
                          className="font-mono"
                        >
                          #{r.rank}
                        </Badge>
                      </TableCell>
                      <TableCell className="font-medium">{r.studentName}</TableCell>
                      <TableCell className="text-right font-mono">
                        {r.averageScore.toFixed(2)}
                      </TableCell>
                      <TableCell className="text-right text-muted-foreground">
                        {r.recordCount}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      ) : null}
    </div>
  )
}