"use client"

import { BarChart3 } from "lucide-react"

import { ChartCardShell } from "@/shared/components/charts/chart-card-shell"
import { TrendLineChart } from "@/shared/components/charts/trend-line-chart"
import { formatDate } from "@/shared/lib/utils"
import type { GradeTrendResult } from "@/modules/grades/types"

interface GradeTrendChartProps {
  data: GradeTrendResult | null
}

export function GradeTrendChart({ data }: GradeTrendChartProps) {
  const isEmpty = !data || data.points.length === 0

  const chartData = isEmpty
    ? []
    : data.points.map((p) => ({
        title: p.title,
        normalizedScore: p.normalizedScore,
        fullTitle: p.title,
        date: formatDate(p.date),
        rawScore: p.score,
        fullScore: p.fullScore,
        type: p.type,
      }))

  return (
    <ChartCardShell
      title="Grade Trend"
      description={
        isEmpty
          ? "Score progression over time (normalized to 0-100)."
          : `${data.label} · avg ${data.averageScore.toFixed(1)}%`
      }
      icon={BarChart3}
      isEmpty={isEmpty}
      emptyTitle="No trend data"
      emptyDescription="Select a class and subject to view the grade trend."
      emptyClassName="h-60"
    >
      <div role="img" aria-label={`成绩趋势图：${isEmpty ? "暂无数据" : `${data.label}，平均 ${data.averageScore.toFixed(1)}%`}`}>
        <TrendLineChart
          data={chartData}
          series={[
            {
              dataKey: "normalizedScore",
              name: "Score (%)",
              color: "hsl(var(--primary))",
              dotRadius: 3,
              activeDotRadius: 5,
            },
          ]}
          heightClassName="h-[280px]"
          margin={{ left: 8, right: 8, top: 8, bottom: 8 }}
          yWidth={36}
          tooltipClassName="w-[220px]"
        />
      </div>
    </ChartCardShell>
  )
}
