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 { formatDate } from "@/shared/lib/utils"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { GraduationCap } from "lucide-react"

import type { StudentGradeSummary } from "../types"

const typeColors: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
  exam: "default",
  quiz: "secondary",
  homework: "outline",
  other: "outline",
}

export function StudentGradeSummary({ summary }: { summary: StudentGradeSummary | null }) {
  if (!summary) {
    return (
      <EmptyState
        title="No data"
        description="Student grade summary is not available."
        icon={GraduationCap}
        className="border-none shadow-none"
      />
    )
  }

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Student</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">{summary.studentName}</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Average Score</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">{summary.averageScore.toFixed(2)}</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Total Records</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">{summary.records.length}</p>
          </CardContent>
        </Card>
      </div>

      {summary.records.length === 0 ? (
        <EmptyState
          title="No grades yet"
          description="There are no grade records for this student."
          icon={GraduationCap}
          className="border-none shadow-none"
        />
      ) : (
        <Card>
          <CardHeader>
            <CardTitle>Grade History</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Title</TableHead>
                    <TableHead>Class</TableHead>
                    <TableHead>Subject</TableHead>
                    <TableHead className="text-right">Score</TableHead>
                    <TableHead>Type</TableHead>
                    <TableHead>Semester</TableHead>
                    <TableHead>Date</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {summary.records.map((r) => (
                    <TableRow key={r.id}>
                      <TableCell className="font-medium">{r.title}</TableCell>
                      <TableCell>{r.className}</TableCell>
                      <TableCell>{r.subjectName}</TableCell>
                      <TableCell className="text-right font-mono">
                        {r.score} / {r.fullScore}
                      </TableCell>
                      <TableCell>
                        <Badge variant={typeColors[r.type]} className="capitalize">
                          {r.type}
                        </Badge>
                      </TableCell>
                      <TableCell>S{r.semester}</TableCell>
                      <TableCell className="text-muted-foreground">{formatDate(r.createdAt)}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}