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 type { ChildDashboardData } from "@/modules/parent/types"

const getInitials = (name: string | null) => {
  if (!name) return "S"
  return name.slice(0, 2).toUpperCase()
}

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

  return (
    <Link href={`/parent/children/${basicInfo.id}`} className="block">
      <Card className="hover:bg-muted/50 transition-colors cursor-pointer 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={basicInfo.name ?? "Child"} />
            <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 border bg-card 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 border bg-card 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={`text-lg font-semibold tabular-nums ${
                  homeworkSummary.overdueCount > 0 ? "text-destructive" : ""
                }`}
              >
                {homeworkSummary.overdueCount}
              </div>
            </div>
            <div className="rounded-md border bg-card 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">
              Latest:{" "}
              <span className="font-medium text-foreground tabular-nums">
                {latestGrade.score}/{latestGrade.maxScore}
              </span>{" "}
              ({latestGrade.assignmentTitle.slice(0, 20)}
              {latestGrade.assignmentTitle.length > 20 ? "..." : ""})
            </div>
          ) : null}
        </CardContent>
      </Card>
    </Link>
  )
}