"use client"

import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
  Legend,
} from "recharts"

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/shared/components/ui/chart"
import { cn } from "@/shared/lib/utils"

/**
 * 对比雷达图：统一的 RadarChart 配置（PolarGrid + PolarAngleAxis + PolarRadiusAxis + ChartTooltip + Radar）。
 *
 * 覆盖以下重复模式：
 * - SubjectComparisonChart（双 Radar：averageScore + passRate）
 * - MasteryRadarChart（双 Radar：student + classAverage，含条件 Legend）
 *
 * 默认配置：
 * - PolarGrid: strokeOpacity=0.4
 * - PolarAngleAxis: tick fontSize=12
 * - PolarRadiusAxis: domain=[0,100], tickFormatter=百分比
 * - Radar: stroke/fill 来自 config，fillOpacity 可配置
 */
export interface RadarSeries {
  /** 数据字段名 */
  dataKey: string
  /** 图例名称 */
  name: string
  /** 颜色（CSS 变量或 hsl 值） */
  color: string
  /** 填充透明度（默认 0.3） */
  fillOpacity?: number
  /** 线宽（默认不设置） */
  strokeWidth?: number
  /** 虚线样式（如 "4 4"） */
  strokeDasharray?: string
  /** 是否条件渲染（为 false 时不渲染该系列） */
  show?: boolean
}

interface ComparisonRadarChartProps {
  /** 图表数据 */
  data: Array<Record<string, string | number>>
  /** 雷达系列配置 */
  series: RadarSeries[]
  /** 角度轴数据字段名 */
  angleKey: string
  /** 角度轴刻度格式化（默认不格式化） */
  angleTickFormatter?: (value: string) => string
  /** 角度轴字体大小（默认 12） */
  angleTickFontSize?: number
  /** 半径轴定义域（默认 [0, 100]） */
  domain?: [number, number]
  /** 半径轴刻度数量 */
  tickCount?: number
  /** 是否显示 Legend */
  showLegend?: boolean
  /** 图表高度类名（默认 "h-[300px]"） */
  heightClassName?: string
  /** Tooltip 宽度类名（默认 "w-[220px]"） */
  tooltipClassName?: string
  /** 容器额外类名 */
  className?: string
  /** PolarGrid 虚线样式（如 "4 4"） */
  gridStrokeDasharray?: string
  /** PolarGrid 透明度（默认 0.4） */
  gridStrokeOpacity?: number
}

export function ComparisonRadarChart({
  data,
  series,
  angleKey,
  angleTickFormatter,
  angleTickFontSize = 12,
  domain = [0, 100],
  tickCount,
  showLegend = false,
  heightClassName = "h-[300px]",
  tooltipClassName = "w-[220px]",
  className,
  gridStrokeDasharray,
  gridStrokeOpacity = 0.4,
}: ComparisonRadarChartProps) {
  const chartConfig: ChartConfig = {}
  for (const s of series) {
    chartConfig[s.dataKey] = {
      label: s.name,
      color: s.color,
    }
  }

  const visibleSeries = series.filter((s) => s.show !== false)

  return (
    <ChartContainer
      config={chartConfig}
      className={cn(heightClassName, "w-full", className)}
    >
      <RadarChart data={data} outerRadius="75%">
        <PolarGrid
          strokeDasharray={gridStrokeDasharray}
          strokeOpacity={gridStrokeOpacity}
        />
        <PolarAngleAxis
          dataKey={angleKey}
          tick={{ fontSize: angleTickFontSize }}
          tickFormatter={angleTickFormatter}
        />
        <PolarRadiusAxis
          domain={domain}
          tickCount={tickCount}
          tickFormatter={(value: number) => `${value}%`}
          tick={{ fontSize: 10 }}
          axisLine={false}
        />
        <ChartTooltip content={<ChartTooltipContent className={tooltipClassName} />} />
        {showLegend ? <Legend /> : null}
        {visibleSeries.map((s) => (
          <Radar
            key={s.dataKey}
            name={s.name}
            dataKey={s.dataKey}
            stroke={`var(--color-${s.dataKey})`}
            fill={`var(--color-${s.dataKey})`}
            fillOpacity={s.fillOpacity ?? 0.3}
            strokeWidth={s.strokeWidth}
            strokeDasharray={s.strokeDasharray}
          />
        ))}
      </RadarChart>
    </ChartContainer>
  )
}
