"use client"

import type { ComponentType, ReactNode } from "react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { cn } from "@/shared/lib/utils"

/**
 * 图表卡片外壳：统一的 Card + CardHeader + EmptyState + CardContent 结构。
 *
 * 覆盖以下重复模式：
 * - GradeTrendChart 的 Card + EmptyState 包装
 * - TeacherGradeTrends 的 Card + EmptyState 包装
 * - StudentGradesCard 的 Card + EmptyState 包装
 * - ChildGradeSummary 的 Card + EmptyState 包装
 * - GradeDistributionChart / ClassComparisonChart 等 BarChart 卡片
 * - SubjectComparisonChart / MasteryRadarChart 等 RadarChart 卡片
 *
 * 结构：Card > CardHeader (icon + title + description) > CardContent (EmptyState | children)。
 */
interface ChartCardShellProps {
  /** 卡片标题 */
  title: string
  /** 标题下方描述（可为字符串或 ReactNode，例如含动态数值） */
  description?: ReactNode
  /** 标题左侧图标（lucide-react 图标等） */
  icon?: ComponentType<{ className?: string }>
  /** 图标额外类名（如 text-primary、text-muted-foreground） */
  iconClassName?: string
  /** 标题额外类名（如 text-base font-medium） */
  titleClassName?: string
  /** 是否为空状态（为 true 时渲染 EmptyState，否则渲染 children） */
  isEmpty?: boolean
  /** 空状态标题 */
  emptyTitle?: string
  /** 空状态描述 */
  emptyDescription?: string
  /** 空状态图标（默认使用 icon） */
  emptyIcon?: ComponentType<{ className?: string }>
  /** 空状态额外类名（如 h-60、h-72） */
  emptyClassName?: string
  /** 卡片内容 */
  children: ReactNode
  /** Card 额外类名 */
  className?: string
  /** CardContent 额外类名 */
  contentClassName?: string
  /** 卡片头部右侧操作区（如"查看全部"链接） */
  action?: ReactNode
}

export function ChartCardShell({
  title,
  description,
  icon: Icon,
  iconClassName,
  titleClassName,
  isEmpty = false,
  emptyTitle,
  emptyDescription,
  emptyIcon,
  emptyClassName,
  children,
  className,
  contentClassName,
  action,
}: ChartCardShellProps) {
  const EmptyIcon = emptyIcon ?? Icon
  return (
    <Card className={className}>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className={cn("flex items-center gap-2", titleClassName)}>
            {Icon ? <Icon className={cn("h-4 w-4", iconClassName)} /> : null}
            {title}
          </CardTitle>
          {action}
        </div>
        {description ? <CardDescription>{description}</CardDescription> : null}
      </CardHeader>
      <CardContent className={contentClassName}>
        {isEmpty ? (
          <EmptyState
            icon={EmptyIcon}
            title={emptyTitle ?? "No data available"}
            description={emptyDescription ?? "No data to display."}
            className={cn("border-none", emptyClassName)}
          />
        ) : (
          children
        )}
      </CardContent>
    </Card>
  )
}
