// GrowthArchiveChart：成长档案折线图
// 依据：参考项目差距补齐 - 成长档案（班级均对比线）
// - 学生分数折线（accent 实线）
// - 班级平均折线（ink-subtle 虚线）
// - 响应式容器

"use client";

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";
import type { GrowthArchive } from "@/types";

interface GrowthArchiveChartProps {
  archive: GrowthArchive;
}

export function GrowthArchiveChart({
  archive,
}: GrowthArchiveChartProps): JSX.Element {
  const data = archive.dataPoints.map((p) => ({
    date: p.date,
    学生分数: p.studentScore,
    班级平均: p.classAverage,
  }));

  return (
    <div className="rounded border border-rule bg-paper-elevated p-4">
      <h3 className="font-serif text-base">
        成长档案{archive.subject ? `· ${archive.subject}` : ""}
      </h3>
      <div className="mt-4 h-72">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart
            data={data}
            margin={{ top: 8, right: 8, bottom: 8, left: 0 }}
          >
            <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--rule))" />
            <XAxis
              dataKey="date"
              tick={{ fill: "hsl(var(--ink-muted))", fontSize: 12 }}
            />
            <YAxis tick={{ fill: "hsl(var(--ink-muted))", fontSize: 12 }} />
            <Tooltip
              contentStyle={{
                background: "hsl(var(--paper-elevated))",
                border: "1px solid hsl(var(--rule))",
                borderRadius: "0.5rem",
              }}
              labelStyle={{ color: "hsl(var(--ink))" }}
            />
            <Legend wrapperStyle={{ fontSize: 12 }} />
            <Line
              dataKey="学生分数"
              stroke="hsl(var(--accent))"
              strokeWidth={2}
              dot={{ r: 3, fill: "hsl(var(--accent))" }}
            />
            <Line
              dataKey="班级平均"
              stroke="hsl(var(--ink-subtle))"
              strokeWidth={2}
              strokeDasharray="5 5"
              dot={{ r: 3, fill: "hsl(var(--ink-subtle))" }}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

export default GrowthArchiveChart;
