"use client"

import { BarChart3 } from "lucide-react"

import { ChartCardShell } from "@/shared/components/charts/chart-card-shell"
import { SimpleBarChart } from "@/shared/components/charts/simple-bar-chart"
import type { ClassComparisonItem } from "@/modules/grades/types"

interface ClassComparisonChartProps {
  data: ClassComparisonItem[]
}

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

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

  return (
    <ChartCardShell
      title="Class Comparison"
      description={
        isEmpty
          ? "Compare average, pass rate, and excellent rate across classes."
          : "Average score, pass rate (≥60%), and excellent rate (≥85%) per class."
      }
      icon={BarChart3}
      isEmpty={isEmpty}
      emptyTitle="No comparison data"
      emptyDescription="Select a grade and subject to compare classes."
      emptyClassName="h-60"
    >
      <div role="img" aria-label={`班级对比柱状图：${isEmpty ? "暂无数据" : `共 ${data.length} 个班级的均分、及格率与优秀率对比`}`}>
        <SimpleBarChart
          data={chartData}
          bars={[
            { dataKey: "averageScore", name: "Average (%)", color: "hsl(var(--primary))" },
            { dataKey: "passRate", name: "Pass Rate (%)", color: "hsl(var(--chart-2))" },
            { dataKey: "excellentRate", name: "Excellent (%)", color: "hsl(var(--chart-3))" },
          ]}
          xKey="name"
          xTruncateLength={8}
          yDomain={[0, 100]}
          yTickFormatter={(value: number) => `${value}%`}
          yWidth={36}
          heightClassName="h-[300px]"
          margin={{ left: 8, right: 8, top: 8, bottom: 8 }}
          showLegend
          tooltipClassName="w-[240px]"
        />
      </div>
    </ChartCardShell>
  )
}
