"use client";

/**
 * TrendChart - 纯 SVG 折线图组件
 *
 * 用于展示成绩趋势（最近 N 次考试/测验）。
 * 不依赖 recharts/d3，纯 SVG 手绘（project_rules：不安装新 npm 包）。
 * 颜色使用 var(--color-accent) 语义令牌（project_rules §3.10）。
 *
 * 维护者：ai13（teacher-portal）
 */

interface TrendChartProps {
  /** 数据序列（按时间顺序，最近一次在右） */
  data: number[];
  /** Y 轴标签前缀，默认 "第 N 次" */
  labelPrefix?: string;
  /** 自定义高度（可选） */
  height?: number;
}

const DEFAULT_HEIGHT = 200;
const PADDING = { top: 20, right: 24, bottom: 32, left: 36 };

export default function TrendChart({
  data,
  labelPrefix = "第",
  height = DEFAULT_HEIGHT,
}: TrendChartProps): React.ReactNode {
  const width = 480;
  const innerW = width - PADDING.left - PADDING.right;
  const innerH = height - PADDING.top - PADDING.bottom;

  if (data.length === 0) {
    return (
      <p className="text-sm text-ink-muted">暂无趋势数据</p>
    );
  }

  // Y 轴范围：0-100（成绩），或自适应
  const yMax = Math.max(100, ...data);
  const yMin = Math.min(0, ...data);
  const yRange = yMax - yMin || 1;

  // 坐标映射
  const xStep = data.length > 1 ? innerW / (data.length - 1) : 0;
  const points = data.map((v, i) => {
    const x = PADDING.left + i * xStep;
    const y = PADDING.top + innerH - ((v - yMin) / yRange) * innerH;
    return { x, y, value: v };
  });

  // 折线路径
  const linePath = points
    .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
    .join(" ");

  // 填充区域路径（data.length 已在前面校验 > 0，points 至少 1 个元素）
  const firstPoint = points[0];
  const lastPoint = points[points.length - 1];
  if (!firstPoint || !lastPoint) {
    return <p className="text-sm text-ink-muted">暂无趋势数据</p>;
  }
  const areaPath = `${linePath} L ${lastPoint.x} ${PADDING.top + innerH} L ${firstPoint.x} ${PADDING.top + innerH} Z`;

  // Y 轴刻度（3 条网格线）
  const gridLines = [0, 0.5, 1].map((ratio) => {
    const value = yMin + yRange * (1 - ratio);
    const y = PADDING.top + innerH * ratio;
    return { y, value: Math.round(value) };
  });

  return (
    <svg
      viewBox={`0 0 ${width} ${height}`}
      className="w-full max-w-xl border border-rule rounded-card bg-surface"
      role="img"
      aria-label="成绩趋势折线图"
    >
      {/* 网格线 + Y 轴刻度 */}
      <g>
        {gridLines.map((g, i) => (
          <g key={`grid-${i}`}>
            <line
              x1={PADDING.left}
              y1={g.y}
              x2={width - PADDING.right}
              y2={g.y}
              stroke="var(--color-rule)"
              strokeWidth={1}
              strokeDasharray="3 3"
            />
            <text
              x={PADDING.left - 8}
              y={g.y + 4}
              textAnchor="end"
              fontSize="11"
              fontFamily="var(--font-family-mono)"
              fill="var(--color-ink-muted)"
            >
              {g.value}
            </text>
          </g>
        ))}
      </g>

      {/* 填充区域 */}
      <path
        d={areaPath}
        fill="var(--color-accent)"
        fillOpacity={0.08}
      />

      {/* 折线 */}
      <path
        d={linePath}
        fill="none"
        stroke="var(--color-accent)"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      />

      {/* 数据点 */}
      <g>
        {points.map((p, i) => (
          <g key={`point-${i}`}>
            <circle
              cx={p.x}
              cy={p.y}
              r={4}
              fill="var(--color-accent)"
              stroke="var(--bg-paper)"
              strokeWidth={2}
            />
            <text
              x={p.x}
              y={p.y - 10}
              textAnchor="middle"
              fontSize="11"
              fontFamily="var(--font-family-mono)"
              fontWeight="600"
              fill="var(--color-ink)"
            >
              {p.value}
            </text>
            <text
              x={p.x}
              y={height - PADDING.bottom + 18}
              textAnchor="middle"
              fontSize="11"
              fontFamily="var(--font-family-sans)"
              fill="var(--color-ink-muted)"
            >
              {labelPrefix}{i + 1}次
            </text>
          </g>
        ))}
      </g>
    </svg>
  );
}
