Edu/apps/parent-portal/src/components/ChildGradeChart.tsx

// ChildGradeChart：子女成绩图表（recharts）
// 依据：02-architecture-design.md §15.6 成绩图表设计
// - 柱状图：学生分数
// - 折线图：班级平均（虚线对比）
// - 响应式容器

"use client";

import {
  ComposedChart,
  Bar,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";
import type { GradeDataPoint } from "@/types";

interface ChildGradeChartProps {
  grades: GradeDataPoint[];
}

export function ChildGradeChart({ grades }: ChildGradeChartProps) {
  const data = grades.map((g) => ({
    name: g.subject,
    学生分数: g.studentScore,
    班级平均: g.classAverage ?? 0,
  }));

  return (
    <div className="rounded border border-rule bg-paper-elevated p-4">
      <h3 className="font-serif text-base">成绩对比</h3>
      <div className="mt-4 h-72">
        <ResponsiveContainer width="100%" height="100%">
          <ComposedChart
            data={data}
            margin={{ top: 8, right: 8, bottom: 8, left: 0 }}
          >
            <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--rule))" />
            <XAxis
              dataKey="name"
              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 }} />
            <Bar
              dataKey="学生分数"
              fill="hsl(var(--accent))"
              radius={[4, 4, 0, 0]}
            />
            <Line
              dataKey="班级平均"
              stroke="hsl(var(--warning))"
              strokeWidth={2}
              strokeDasharray="5 5"
              dot={{ r: 3, fill: "hsl(var(--warning))" }}
            />
          </ComposedChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

export default ChildGradeChart;