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 { StatusBadge } from "@/shared/components/ui/status-badge"
import { cn, formatDate } from "@/shared/lib/utils"
import {
  STUDENT_HOMEWORK_PROGRESS_VARIANT,
  STUDENT_HOMEWORK_PROGRESS_LABEL,
} from "@/modules/homework/types"
import type { ChildHomeworkSummaryData } from "@/modules/parent/types"

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"
}

const PROGRESS_LABEL: Record<string, string> = {
  not_started: "Not started",
  in_progress: "In progress",
  submitted: "Submitted",
  graded: "Graded",
}

/**
 * 作业详情视图：展示所有作业的完整信息（状态、截止时间、提交时间、分数、尝试次数）。
 * 用于详情页 homework tab，让家长查看子女作业全貌。
 */
export function ChildHomeworkDetail({
  summary,
  childId,
  childName,
}: {
  summary: ChildHomeworkSummaryData
  childId: string
  childName: string
}) {
  const hasAssignments = summary.recentAssignments.length > 0
  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" aria-hidden />
          {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" aria-hidden />
              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">
              All Assignments
            </div>
            {summary.recentAssignments.map((a) => {
              const urgency = getDueUrgency(a.dueAt, now)
              const isGraded = a.progressStatus === "graded"
              const isSubmitted = a.progressStatus === "submitted"
              const scoreText =
                a.latestScore !== null ? `${a.latestScore} pts` : isGraded ? "Graded" : "-"
              return (
                <div
                  key={a.id}
                  className="rounded-md border bg-card p-3 space-y-2 min-h-[88px]"
                >
                  <div className="flex items-start justify-between gap-2">
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2 flex-wrap">
                        {a.subjectName ? (
                          <Badge variant="outline" className="text-[10px] shrink-0">
                            {a.subjectName}
                          </Badge>
                        ) : null}
                        <div className="font-medium text-sm truncate">{a.title}</div>
                      </div>
                    </div>
                    <div className="text-sm font-medium tabular-nums shrink-0">
                      {scoreText}
                    </div>
                  </div>
                  <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                    <StatusBadge
                      status={a.progressStatus}
                      variantMap={STUDENT_HOMEWORK_PROGRESS_VARIANT}
                      labelMap={STUDENT_HOMEWORK_PROGRESS_LABEL}
                      className="text-[10px]"
                    />
                    <span aria-label="Progress status">
                      {PROGRESS_LABEL[a.progressStatus] ?? a.progressStatus}
                    </span>
                    {a.dueAt ? (
                      <span
                        className={cn(
                          !isSubmitted && !isGraded && urgency === "overdue" && "text-destructive font-medium",
                        )}
                      >
                        Due {formatDate(a.dueAt)}
                      </span>
                    ) : null}
                    {a.latestSubmittedAt ? (
                      <span>Submitted {formatDate(a.latestSubmittedAt)}</span>
                    ) : null}
                    <span className="tabular-nums">
                      Attempts {a.attemptsUsed}/{a.maxAttempts}
                    </span>
                  </div>
                  <Link
                    href={`/parent/children/${childId}?tab=homework`}
                    className="inline-flex min-h-[36px] items-center text-xs text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded"
                  >
                    View details
                  </Link>
                </div>
              )
            })}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
