NextEdu/src/modules/parent/components/child-card.tsx

import Link from "next/link"
import { ChevronRight, GraduationCap, PenTool, TriangleAlert } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
import { Badge } from "@/shared/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { cn, getInitials } from "@/shared/lib/utils"
import type { ChildDashboardData } from "@/modules/parent/types"

export function ChildCard({ child }: { child: ChildDashboardData }) {
  const { basicInfo, homeworkSummary, gradeTrend } = child
  const ranking = gradeTrend.ranking
  const latestGrade = gradeTrend.recent[0]
  const childName = basicInfo.name ?? "Child"

  return (
    <Link
      href={`/parent/children/${basicInfo.id}`}
      aria-label={`View ${childName}'s details`}
      className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md"
    >
      <Card className="hover:bg-muted/50 transition-colors h-full">
        <CardHeader className="flex flex-row items-center gap-4 space-y-0">
          <Avatar className="h-12 w-12">
            <AvatarImage src={basicInfo.image ?? undefined} alt={childName} />
            <AvatarFallback>{getInitials(basicInfo.name)}</AvatarFallback>
          </Avatar>
          <div className="flex-1 min-w-0 space-y-1">
            <CardTitle className="text-base truncate">{basicInfo.name ?? "Unnamed"}</CardTitle>
            <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
              {basicInfo.className ? (
                <Badge variant="secondary" className="text-xs">
                  {basicInfo.className}
                </Badge>
              ) : null}
              {basicInfo.gradeName ? <span>{basicInfo.gradeName}</span> : null}
              {basicInfo.relation ? <span>· {basicInfo.relation}</span> : null}
            </div>
          </div>
          <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="grid grid-cols-3 gap-2 text-center">
            <div className="rounded-md bg-muted/50 p-2">
              <div className="text-xs text-muted-foreground flex items-center justify-center gap-1">
                <PenTool className="h-3 w-3" />
                Pending
              </div>
              <div className="text-lg font-semibold tabular-nums">
                {homeworkSummary.pendingCount}
              </div>
            </div>
            <div className="rounded-md bg-muted/50 p-2">
              <div className="text-xs text-muted-foreground flex items-center justify-center gap-1">
                <TriangleAlert className="h-3 w-3" />
                Overdue
              </div>
              <div
                className={cn(
                  "text-lg font-semibold tabular-nums",
                  homeworkSummary.overdueCount > 0 && "text-destructive",
                )}
              >
                {homeworkSummary.overdueCount}
              </div>
            </div>
            <div className="rounded-md bg-muted/50 p-2">
              <div className="text-xs text-muted-foreground flex items-center justify-center gap-1">
                <GraduationCap className="h-3 w-3" />
                Avg
              </div>
              <div className="text-lg font-semibold tabular-nums">
                {ranking ? `${Math.round(ranking.percentage)}%` : "-"}
              </div>
            </div>
          </div>
          {latestGrade ? (
            <div className="text-xs text-muted-foreground flex items-center gap-1">
              <span className="shrink-0">Latest:</span>
              <span className="font-medium text-foreground tabular-nums shrink-0">
                {latestGrade.score}/{latestGrade.maxScore}
              </span>
              <span className="truncate">({latestGrade.assignmentTitle})</span>
            </div>
          ) : null}
        </CardContent>
      </Card>
    </Link>
  )
}