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

import { Badge } from "@/shared/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { cn, formatDate } from "@/shared/lib/utils"
import type { StudentHomeworkProgressStatus } from "@/modules/homework/types"
import type { ChildHomeworkSummaryData } from "@/modules/parent/types"

const getStatusVariant = (
  status: StudentHomeworkProgressStatus,
): "default" | "secondary" | "outline" => {
  switch (status) {
    case "graded":
      return "default"
    case "submitted":
    case "in_progress":
      return "secondary"
    case "not_started":
      return "outline"
  }
}

const getStatusLabel = (status: StudentHomeworkProgressStatus): string => {
  switch (status) {
    case "graded":
      return "Graded"
    case "submitted":
      return "Submitted"
    case "in_progress":
      return "In progress"
    case "not_started":
      return "Not started"
  }
}

type DueUrgency = "overdue" | "urgent" | "normal"

const getDueUrgency = (dueAt: string | null, now: Date): DueUrgency | null => {
  if (!dueAt) return null
  const due = new Date(dueAt)
  const diffHours = (due.getTime() - now.getTime()) / (1000 * 60 * 60)
  if (diffHours < 0) return "overdue"
  if (diffHours < 48) return "urgent"
  return "normal"
}

export function ChildHomeworkSummary({
  summary,
  childId,
  childName,
}: {
  summary: ChildHomeworkSummaryData
  childId: string
  childName: string
}) {
  const hasAssignments = summary.recentAssignments.length > 0
  // hoist：在组件作用域计算一次 now，避免每次 map 迭代都 new Date()
  const now = new Date()

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <PenTool className="h-4 w-4 text-muted-foreground" />
          {childName}&apos;s Homework
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-center">
          <div className="rounded-md bg-muted/50 p-2">
            <div className="text-xs text-muted-foreground">Pending</div>
            <div className="text-lg font-semibold tabular-nums">{summary.pendingCount}</div>
          </div>
          <div className="rounded-md bg-muted/50 p-2">
            <div className="text-xs text-muted-foreground">Submitted</div>
            <div className="text-lg font-semibold tabular-nums">{summary.submittedCount}</div>
          </div>
          <div className="rounded-md bg-muted/50 p-2">
            <div className="text-xs text-muted-foreground">Graded</div>
            <div className="text-lg font-semibold tabular-nums">{summary.gradedCount}</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",
                summary.overdueCount > 0 && "text-destructive",
              )}
            >
              {summary.overdueCount}
            </div>
          </div>
        </div>

        {!hasAssignments ? (
          <EmptyState
            icon={PenTool}
            title="No assignments"
            description="No homework assigned right now."
            className="border-none h-48"
          />
        ) : (
          <div className="space-y-2">
            <div className="text-xs font-medium uppercase text-muted-foreground">
              Recent Assignments
            </div>
            {summary.recentAssignments.map((a) => {
              const urgency = getDueUrgency(a.dueAt, now)
              const isGraded = a.progressStatus === "graded"
              return (
                <Link
                  key={a.id}
                  href={`/parent/children/${childId}?tab=homework`}
                  className="flex items-center justify-between rounded-md border bg-card p-3 hover:bg-muted/50 transition-colors"
                >
                  <div className="min-w-0 flex-1 space-y-1">
                    <div className="font-medium text-sm truncate">{a.title}</div>
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                      <Badge variant={getStatusVariant(a.progressStatus)} className="text-[10px]">
                        {getStatusLabel(a.progressStatus)}
                      </Badge>
                      {a.dueAt ? (
                        <span
                          className={cn(
                            !isGraded && urgency === "overdue" && "text-destructive font-medium",
                          )}
                        >
                          Due {formatDate(a.dueAt)}
                        </span>
                      ) : null}
                    </div>
                  </div>
                  <div className="text-sm font-medium tabular-nums shrink-0 ml-2">
                    {a.latestScore ?? "-"}
                  </div>
                </Link>
              )
            })}
            <Link
              href={`/parent/children/${childId}?tab=homework`}
              className="block text-center text-xs text-muted-foreground hover:text-foreground transition-colors pt-1"
            >
              View all
            </Link>
          </div>
        )}
      </CardContent>
    </Card>
  )
}