"use client"

import Link from "next/link"
import { BarChart3 } from "lucide-react"

import { ChartCardShell } from "@/shared/components/charts/chart-card-shell"
import { TrendLineChart } from "@/shared/components/charts/trend-line-chart"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { formatDate } from "@/shared/lib/utils"
import type { StudentDashboardGradeProps } from "@/modules/homework/types"

export function StudentGradesCard({ grades }: { grades: StudentDashboardGradeProps }) {
  const hasGradeTrend = grades.trend.length > 0
  const hasRecentGrades = grades.recent.length > 0

  const chartData = grades.trend.map((item) => ({
    title: item.assignmentTitle,
    score: Math.round(item.percentage),
    fullTitle: item.assignmentTitle,
    submittedAt: formatDate(item.submittedAt),
    rawScore: item.score,
    maxScore: item.maxScore,
  }))

  const latestGrade = grades.trend[grades.trend.length - 1]

  return (
    <ChartCardShell
      title="Recent Grades"
      icon={BarChart3}
      iconClassName="text-muted-foreground"
      isEmpty={!hasGradeTrend}
      emptyTitle="No graded work yet"
      emptyDescription="Finish and submit assignments to see your score trend."
      emptyClassName="h-72"
    >
      <div className="space-y-4">
        <div className="rounded-md border bg-card p-4">
          <TrendLineChart
            data={chartData}
            series={[
              {
                dataKey: "score",
                name: "Score (%)",
                color: "hsl(var(--primary))",
                dotRadius: 4,
                activeDotRadius: 6,
              },
            ]}
            heightClassName="h-[200px]"
            margin={{ left: 12, right: 12, top: 12, bottom: 12 }}
            yWidth={30}
            tooltipClassName="w-[200px]"
          />

          {latestGrade ? (
            <div className="mt-3 flex items-center justify-between text-sm text-muted-foreground">
              <div>
                Latest:{" "}
                <span className="font-medium text-foreground tabular-nums">
                  {Math.round(latestGrade.percentage)}%
                </span>
              </div>
              <div>
                Points:{" "}
                <span className="font-medium text-foreground tabular-nums">
                  {latestGrade.score}/{latestGrade.maxScore}
                </span>
              </div>
            </div>
          ) : null}
        </div>

        {!hasRecentGrades ? null : (
          <div className="rounded-md border bg-card">
            <Table>
              <TableHeader>
                <TableRow className="bg-muted/50">
                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">Assignment</TableHead>
                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">Score</TableHead>
                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">When</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {grades.recent.map((r) => (
                  <TableRow key={r.assignmentId} className="h-12">
                    <TableCell className="font-medium">
                      <Link href={`/student/learning/assignments/${r.assignmentId}`} className="hover:underline">
                        {r.assignmentTitle}
                      </Link>
                    </TableCell>
                    <TableCell className="tabular-nums">
                      {r.score}/{r.maxScore} <span className="text-muted-foreground">({Math.round(r.percentage)}%)</span>
                    </TableCell>
                    <TableCell className="text-muted-foreground">{formatDate(r.submittedAt)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        )}
      </div>
    </ChartCardShell>
  )
}