import * as React from "react"
import Link from "next/link"

import { cn } from "@/shared/lib/utils"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Skeleton } from "@/shared/components/ui/skeleton"

/**
 * 统计卡片：用于仪表盘、洞察页等场景的单张统计卡片。
 *
 * 覆盖以下重复模式：
 * - TeacherStats / StudentStatsGrid（带图标 + 描述 + 跳转）
 * - AdminDashboardView KpiCard（带图标，无描述）
 * - insights / diagnostic / student-summary 页面内联卡片（无图标，带描述）
 */
interface StatCardProps {
  /** 卡片标题（统计项名称） */
  title: string
  /** 统计数值 */
  value: string | number
  /** 图标组件（Lucide 图标），传入组件类型而非实例 */
  icon?: React.ComponentType<{ className?: string }>
  /** 数值下方描述文本 */
  description?: string
  /** 图标颜色类名（如 "text-amber-500"） */
  color?: string
  /** 是否高亮（amber 边框 + 背景） */
  highlight?: boolean
  /** 点击跳转链接，传入则包裹 Link */
  href?: string
  /** 加载态，显示骨架屏 */
  isLoading?: boolean
  /** 数值自定义类名（如 "text-red-500"） */
  valueClassName?: string
}

function StatCardSkeleton() {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <Skeleton className="h-4 w-[100px]" />
        <Skeleton className="h-4 w-4 rounded-full" />
      </CardHeader>
      <CardContent>
        <Skeleton className="mb-2 h-8 w-[60px]" />
        <Skeleton className="h-3 w-[140px]" />
      </CardContent>
    </Card>
  )
}

export function StatCard({
  title,
  value,
  icon: Icon,
  description,
  color,
  highlight = false,
  href,
  isLoading = false,
  valueClassName,
}: StatCardProps) {
  if (isLoading) {
    return <StatCardSkeleton />
  }

  const card = (
    <Card
      className={cn(
        highlight && "border-amber-200 bg-amber-50/50 dark:border-amber-900 dark:bg-amber-950/20"
      )}
    >
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        {Icon ? <Icon className={cn("h-4 w-4 text-muted-foreground", color)} /> : null}
      </CardHeader>
      <CardContent>
        <div className={cn("text-2xl font-bold", valueClassName)}>{value}</div>
        {description ? (
          <p className="text-xs text-muted-foreground">{description}</p>
        ) : null}
      </CardContent>
    </Card>
  )

  if (href) {
    return (
      <Link href={href} className="block transition-transform hover:-translate-y-1">
        {card}
      </Link>
    )
  }

  return card
}