import type { JSX } from "react"
import { getTranslations } from "next-intl/server"

import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
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 { StatusBadge } from "@/shared/components/ui/status-badge"
import { GraduationCap, Trophy } from "lucide-react"

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

export async function StudentGradeSummary({ summary }: { summary: StudentGradeSummary | null }): Promise<JSX.Element> {
  const t = await getTranslations("grades")

  if (!summary) {
    return (
      <EmptyState
        title={t("summary.noDataTitle")}
        description={t("summary.noDataDescription")}
        icon={GraduationCap}
        className="border-none shadow-none"
      />
    )
  }

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">{t("summary.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">{t("summary.averageScore")}</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">{t("summary.classRank")}</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">
              {summary.rank > 0 ? (
                <span className="inline-flex items-center gap-1.5">
                  <Trophy className="h-5 w-5 text-amber-500" aria-hidden="true" />
                  {t("summary.rankValue", { rank: summary.rank })}
                </span>
              ) : (
                <span className="text-muted-foreground">-</span>
              )}
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">{t("summary.totalRecords")}</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">{summary.records.length}</p>
          </CardContent>
        </Card>
      </div>

      {summary.records.length === 0 ? (
        <EmptyState
          title={t("summary.noGradesTitle")}
          description={t("summary.noGradesDescription")}
          icon={GraduationCap}
          className="border-none shadow-none"
        />
      ) : (
        <Card>
          <CardHeader>
            <CardTitle>{t("summary.gradeHistory")}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <caption className="sr-only">{t("summary.caption")}</caption>
                <TableHeader>
                  <TableRow>
                    <TableHead>{t("list.columns.title")}</TableHead>
                    <TableHead>{t("list.columns.class")}</TableHead>
                    <TableHead>{t("list.columns.subject")}</TableHead>
                    <TableHead className="text-right">{t("list.columns.score")}</TableHead>
                    <TableHead>{t("list.columns.type")}</TableHead>
                    <TableHead>{t("list.columns.semester")}</TableHead>
                    <TableHead>{t("list.columns.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>
                        <StatusBadge status={r.type} variantMap={GRADE_TYPE_VARIANT} />
                      </TableCell>
                      <TableCell>S{r.semester}</TableCell>
                      <TableCell className="text-muted-foreground">{formatDate(r.createdAt)}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
