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

// ChildSummaryCard：子女概览卡片
// 依据：02-architecture-design.md §15.4 ChildSummaryCard 设计
// - 平均分 / 班级排名 / 出勤率 / 待完成作业
// - 成绩趋势指示（图标 + 文案）
// - 逾期作业高亮徽标
// - 即将到来的事件
// - 点击跳转子女详情

"use client";

import Link from "next/link";
import type { ChildSummary } from "@/types";
import { formatPercent, formatNumber, formatDate } from "@/lib/utils";
import { cn } from "@/lib/utils";

interface ChildSummaryCardProps {
  summary: ChildSummary;
}

const TREND_LABELS = {
  up: { text: "上升", color: "text-success", icon: "↑" },
  down: { text: "下降", color: "text-danger", icon: "↓" },
  stable: { text: "稳定", color: "text-ink-muted", icon: "→" },
} as const;

const DEFAULT_TREND = { text: "稳定", color: "text-ink-muted", icon: "→" };

export function ChildSummaryCard({ summary }: ChildSummaryCardProps) {
  const trend = TREND_LABELS[summary.recentGradeTrend] ?? DEFAULT_TREND;
  const hasPending = summary.pendingHomeworkCount > 0;

  return (
    <Link
      href={`/parent/children/${summary.childId}`}
      className="block focus-visible:outline-2"
      aria-label={`查看 ${summary.childId} 详情`}
    >
      <div className="space-y-4">
        {/* 指标网格 */}
        <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
          <Metric label="平均分" value={formatNumber(summary.avgScore)} />
          <Metric
            label="班级排名"
            value={`${summary.classRank} / ${summary.classSize}`}
          />
          <Metric label="出勤率" value={formatPercent(summary.attendanceRate)} />
          <Metric
            label="待完成作业"
            value={formatNumber(summary.pendingHomeworkCount)}
            highlight={hasPending}
            badge={hasPending ? `${summary.pendingHomeworkCount} 份待办` : undefined}
          />
        </div>

        {/* 成绩趋势 */}
        <div className="rounded border border-rule bg-paper-elevated p-4">
          <div className="flex items-center justify-between">
            <h3 className="font-serif text-base">成绩趋势</h3>
            <span className={cn("flex items-center gap-1 text-sm", trend.color)}>
              <span aria-hidden="true">{trend.icon}</span>
              {trend.text}
            </span>
          </div>
          <ul className="mt-3 space-y-2">
            {summary.recentScores.slice(0, 5).map((score) => (
              <li
                key={score.examId}
                className="flex items-center justify-between border-b border-rule pb-2 text-sm last:border-b-0 last:pb-0"
              >
                <div>
                  <span className="font-medium">{score.subject}</span>
                  <span className="ml-2 text-ink-muted">{score.examName}</span>
                </div>
                <div className="flex items-center gap-3">
                  <span className="font-mono">{score.studentScore}</span>
                  {score.classAverage !== undefined && (
                    <span className="text-xs text-ink-muted">
                      班均 {score.classAverage}
                    </span>
                  )}
                </div>
              </li>
            ))}
          </ul>
        </div>

        {/* 即将到来事件 */}
        {summary.upcomingEvents && summary.upcomingEvents.length > 0 && (
          <div className="rounded border border-rule bg-paper-elevated p-4">
            <h3 className="font-serif text-base">即将到来</h3>
            <ul className="mt-3 space-y-2">
              {summary.upcomingEvents.map((event) => (
                <li
                  key={event.id}
                  className="flex items-center justify-between text-sm"
                >
                  <span className="mark-left">{event.title}</span>
                  <span className="text-ink-muted">
                    {formatDate(event.dueDate)}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </Link>
  );
}

function Metric({
  label,
  value,
  highlight,
  badge,
}: {
  label: string;
  value: string;
  highlight?: boolean;
  badge?: string;
}) {
  return (
    <div
      className={cn(
        "relative rounded border border-rule bg-paper-elevated p-4",
        highlight && "border-warning",
      )}
    >
      <p className="text-xs text-ink-muted">{label}</p>
      <p className="mt-1 font-serif text-2xl">{value}</p>
      {badge && (
        <span className="absolute right-2 top-2 rounded bg-warning px-1.5 py-0.5 text-xs text-paper">
          {badge}
        </span>
      )}
    </div>
  );
}

export default ChildSummaryCard;