"use client"

import type { JSX } from "react"
import { Radar } from "lucide-react"
import { useTranslations } from "next-intl"

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): JSX.Element {
  const t = useTranslations("grades")
  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={t("analytics.subjectComparison")}
      description={
        isEmpty
          ? t("subjectComparison.descriptionEmpty")
          : t("subjectComparison.descriptionNonEmpty")
      }
      icon={Radar}
      isEmpty={isEmpty}
      emptyTitle={t("subjectComparison.emptyTitle")}
      emptyDescription={t("subjectComparison.emptyDescription")}
      emptyClassName="h-60"
    >
      <div role="img" aria-label={isEmpty ? t("subjectComparison.ariaLabelEmpty") : t("subjectComparison.ariaLabelNonEmpty", { count: data.length })}>
        <ComparisonRadarChart
          data={chartData}
          angleKey="subject"
          angleTickFormatter={(value: string) =>
            value.length > 6 ? `${value.slice(0, 6)}...` : value
          }
          series={[
            {
              dataKey: "averageScore",
              name: t("chart.average"),
              color: "hsl(var(--primary))",
              fillOpacity: 0.4,
            },
            {
              dataKey: "passRate",
              name: t("chart.passRate"),
              color: "hsl(var(--chart-2))",
              fillOpacity: 0.2,
            },
          ]}
        />
      </div>
    </ChartCardShell>
  )
}
