NextEdu/src/modules/parent/components/child-grade-summary.tsx

"use client"

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

import { ChartCardShell } from "@/shared/components/charts/chart-card-shell"
import { TrendLineChart } from "@/shared/components/charts/trend-line-chart"
import { Badge } from "@/shared/components/ui/badge"
import { formatDate } from "@/shared/lib/utils"
import type { StudentDashboardGradeProps } from "@/modules/homework/types"

export function ChildGradeSummary({
  grades,
  childId,
  childName,
}: {
  grades: StudentDashboardGradeProps
  childId: string
  childName: string
}) {
  const hasGradeTrend = grades.trend.length > 0
  const ranking = grades.ranking
  const latestGrade = grades.trend[grades.trend.length - 1]

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

  return (
    <ChartCardShell
      title={`${childName}'s Grades`}
      icon={BarChart3}
      iconClassName="text-muted-foreground"
      titleClassName="text-base"
      isEmpty={!hasGradeTrend}
      emptyTitle="No graded work yet"
      emptyDescription="Finish and submit assignments to see score trend."
      emptyClassName="h-48"
    >
      <div className="space-y-4">
        <div className="grid grid-cols-2 gap-3">
          <div className="rounded-md bg-muted/50 p-3">
            <div className="text-xs text-muted-foreground flex items-center gap-1">
              <BarChart3 className="h-3 w-3" />
              Latest Score
            </div>
            <div className="text-xl font-semibold tabular-nums">
              {latestGrade ? `${Math.round(latestGrade.percentage)}%` : "-"}
            </div>
            {latestGrade ? (
              <div className="text-xs text-muted-foreground tabular-nums">
                {latestGrade.score}/{latestGrade.maxScore}
              </div>
            ) : null}
          </div>
          <div className="rounded-md bg-muted/50 p-3">
            <div className="text-xs text-muted-foreground flex items-center gap-1">
              <Trophy className="h-3 w-3" />
              Class Rank
            </div>
            <div className="text-xl font-semibold tabular-nums">
              {ranking ? `${ranking.rank}/${ranking.classSize}` : "-"}
            </div>
            {ranking ? <div className="text-xs text-muted-foreground">Current position</div> : null}
          </div>
        </div>

        <div className="rounded-md bg-muted/50 p-3">
          <TrendLineChart
            data={chartData}
            series={[
              {
                dataKey: "score",
                name: "Score (%)",
                color: "hsl(var(--primary))",
                dotRadius: 3,
                activeDotRadius: 5,
              },
            ]}
            xKey="date"
            xTickFormatter={null}
            heightClassName="h-[160px]"
            margin={{ left: 8, right: 8, top: 8, bottom: 8 }}
            yWidth={30}
            tooltipClassName="w-[200px]"
          />
        </div>

        {grades.recent.length > 0 ? (
          <div className="space-y-2">
            <div className="text-xs font-medium uppercase text-muted-foreground">Recent Grades</div>
            {grades.recent.slice(0, 3).map((r) => (
              <Link
                key={r.assignmentId}
                href={`/parent/children/${childId}?tab=grades`}
                className="flex items-center justify-between rounded-md border bg-card p-2 hover:bg-muted/50 transition-colors"
              >
                <div className="min-w-0 flex-1">
                  <div className="font-medium text-sm truncate">{r.assignmentTitle}</div>
                  <div className="text-xs text-muted-foreground">{formatDate(r.submittedAt)}</div>
                </div>
                <Badge variant="secondary" className="tabular-nums shrink-0 ml-2">
                  {r.score}/{r.maxScore}
                </Badge>
              </Link>
            ))}
          </div>
        ) : null}
      </div>
    </ChartCardShell>
  )
}