"use client"

import { Target } from "lucide-react"

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

interface MasteryRadarChartProps {
  data: MasteryRadarPoint[]
}

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

  const chartData = isEmpty
    ? []
    : data.map((d) => ({
        ...d,
        shortName:
          d.knowledgePoint.length > 8
            ? `${d.knowledgePoint.slice(0, 8)}...`
            : d.knowledgePoint,
      }))

  const hasClassAverage = !isEmpty && data.some((d) => d.classAverage !== undefined)

  return (
    <ChartCardShell
      title="Knowledge Point Mastery"
      description="Radar chart of mastery level (0-100) across knowledge points."
      icon={Target}
      isEmpty={isEmpty}
      emptyTitle="No mastery data"
      emptyDescription="No knowledge point mastery records found for this student."
      emptyClassName="h-60"
    >
      <div role="img" aria-label={`知识点掌握度雷达图：${isEmpty ? "暂无数据" : `共 ${data.length} 个知识点的掌握度${hasClassAverage ? "（含班级平均对比）" : ""}`}`}>
        <ComparisonRadarChart
          data={chartData}
          angleKey="shortName"
          angleTickFontSize={11}
          domain={[0, 100]}
          tickCount={5}
          showLegend={hasClassAverage}
          heightClassName="mx-auto h-96 w-full max-w-lg"
          gridStrokeDasharray="4 4"
          series={[
            {
              dataKey: "student",
              name: "Student",
              color: "hsl(var(--primary))",
              fillOpacity: 0.35,
              strokeWidth: 2,
              show: true,
            },
            {
              dataKey: "classAverage",
              name: "Class Avg",
              color: "hsl(var(--chart-2))",
              fillOpacity: 0.15,
              strokeWidth: 2,
              strokeDasharray: "4 4",
              show: hasClassAverage,
            },
          ]}
        />
      </div>
    </ChartCardShell>
  )
}
