"use client"

import { Radar } from "lucide-react"

import { ChartCardShell } from "@/shared/components/charts/chart-card-shell"
import { ComparisonRadarChart } from "@/shared/components/charts/comparison-radar-chart"
import type { SubjectComparisonItem } from "@/modules/grades/types"

interface SubjectComparisonChartProps {
  data: SubjectComparisonItem[]
}

export function SubjectComparisonChart({ data }: SubjectComparisonChartProps) {
  const isEmpty = !data || data.length === 0

  const chartData = isEmpty
    ? []
    : data.map((d) => ({
        subject: d.subjectName,
        averageScore: d.averageScore,
        passRate: d.passRate,
        excellentRate: d.excellentRate,
        count: d.count,
      }))

  return (
    <ChartCardShell
      title="Subject Comparison"
      description={
        isEmpty
          ? "Compare performance across subjects for the selected class."
          : "Average score and pass rate per subject (normalized to 0-100)."
      }
      icon={Radar}
      isEmpty={isEmpty}
      emptyTitle="No comparison data"
      emptyDescription="Select a class to compare subject performance."
      emptyClassName="h-60"
    >
      <div role="img" aria-label={`科目对比雷达图：${isEmpty ? "暂无数据" : `共 ${data.length} 个科目的均分与及格率对比`}`}>
        <ComparisonRadarChart
          data={chartData}
          angleKey="subject"
          angleTickFormatter={(value: string) =>
            value.length > 6 ? `${value.slice(0, 6)}...` : value
          }
          heightClassName="h-[300px]"
          series={[
            {
              dataKey: "averageScore",
              name: "Average",
              color: "hsl(var(--primary))",
              fillOpacity: 0.4,
            },
            {
              dataKey: "passRate",
              name: "Pass Rate",
              color: "hsl(var(--chart-2))",
              fillOpacity: 0.2,
            },
          ]}
        />
      </div>
    </ChartCardShell>
  )
}
