import Link from "next/link"
import { getTranslations } from "next-intl/server"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { ClipboardCheck, CalendarCheck, FileEdit, AlertCircle, ChevronRight } from "lucide-react"
import { cn } from "@/shared/lib/utils"

export interface TeacherTodoItem {
  label: string
  count: number
  href: string
  variant: "urgent" | "normal" | "info"
}

interface TeacherTodoCardProps {
  items: TeacherTodoItem[]
}

const VARIANT_STYLES: Record<TeacherTodoItem["variant"], { icon: typeof AlertCircle; iconColor: string; badge: string }> = {
  urgent: { icon: AlertCircle, iconColor: "text-destructive", badge: "bg-destructive text-destructive-foreground" },
  normal: { icon: ClipboardCheck, iconColor: "text-amber-500", badge: "bg-amber-500 text-white" },
  info: { icon: CalendarCheck, iconColor: "text-blue-500", badge: "bg-blue-500 text-white" },
}

/** 变体优先级映射（数值越小优先级越高），V4（P3-3）优化排序可读性 */
const VARIANT_PRIORITY: Record<TeacherTodoItem["variant"], number> = {
  urgent: 0,
  normal: 1,
  info: 2,
}

export async function TeacherTodoCard({ items }: TeacherTodoCardProps) {
  const t = await getTranslations("dashboard")
  const hasItems = items.some((item) => item.count > 0)
  const totalPending = items.reduce((acc, item) => acc + (item.count > 0 ? 1 : 0), 0)

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-3">
        <CardTitle className="flex items-center gap-2 text-base">
          <FileEdit className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
          {t("todo.title")}
          {totalPending > 0 && (
            <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-medium text-primary-foreground tabular-nums">
              {totalPending}
            </span>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent>
        {!hasItems ? (
          <div className="flex h-24 items-center justify-center text-sm text-muted-foreground">
            <CalendarCheck className="mr-2 h-4 w-4" aria-hidden="true" />
            {t("todo.empty")}
          </div>
        ) : (
          <div className="space-y-1">
            {items
              .filter((item) => item.count > 0)
              .sort((a, b) => VARIANT_PRIORITY[a.variant] - VARIANT_PRIORITY[b.variant])
              .map((item, idx) => {
                const style = VARIANT_STYLES[item.variant]
                const Icon = style.icon
                return (
                  <Link
                    key={item.href || item.label || `item-${idx}`}
                    href={item.href}
                    className="group flex items-center justify-between rounded-md border border-transparent px-3 py-2 hover:bg-muted/50 hover:border-border transition-colors"
                  >
                    <div className="flex items-center gap-2 min-w-0">
                      <Icon className={cn("h-4 w-4 shrink-0", style.iconColor)} aria-hidden="true" />
                      <span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
                        {item.label}
                      </span>
                    </div>
                    <div className="flex items-center gap-2 shrink-0">
                      <span className={cn("inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums", style.badge)}>
                        {item.count}
                      </span>
                      <ChevronRight className="h-3.5 w-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden="true" />
                    </div>
                  </Link>
                )
              })}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
