"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"
    >
      <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]"
      />
    </ChartCardShell>
  )
}