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

// CoursePlanDetail：课程计划详情（基本信息 + 章节列表）
// 依据：02-architecture-design.md §15 组件设计
// 章节：标题/描述/排序/课时数/预计学时

"use client";

import type { CoursePlanDetail } from "@/types";
import { cn, formatDate } from "@/lib/utils";

interface CoursePlanDetailProps {
  coursePlan: CoursePlanDetail;
}

type CoursePlanStatus = CoursePlanDetail["status"];

const STATUS_LABELS: Record<CoursePlanStatus, string> = {
  active: "进行中",
  completed: "已完成",
  archived: "已归档",
};

const STATUS_STYLES: Record<CoursePlanStatus, string> = {
  active: "text-success",
  completed: "text-ink-muted",
  archived: "text-ink-muted",
};

export function CoursePlanDetail({
  coursePlan,
}: CoursePlanDetailProps): JSX.Element {
  const chapters = [...coursePlan.chapters].sort(
    (a, b) => a.sortOrder - b.sortOrder,
  );

  return (
    <article className="space-y-6">
      {/* 基本信息 */}
      <section
        aria-label="课程计划基本信息"
        className="rounded border border-rule bg-paper-elevated p-4"
      >
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0 flex-1">
            <span className="rounded bg-accent-soft px-2 py-0.5 text-xs text-ink">
              {coursePlan.subject}
            </span>
            <h2 className="mt-2 font-serif text-xl">{coursePlan.title}</h2>
            <p className="mt-2 text-sm text-ink-muted">
              {coursePlan.description}
            </p>
          </div>
          <span
            className={cn(
              "flex-shrink-0 text-xs font-medium",
              STATUS_STYLES[coursePlan.status],
            )}
          >
            {STATUS_LABELS[coursePlan.status]}
          </span>
        </div>

        <div className="mt-4 border-t border-rule pt-3">
          <dl className="grid grid-cols-2 gap-y-3 text-sm sm:grid-cols-4">
            <div>
              <dt className="text-xs text-ink-muted">班级</dt>
              <dd className="mt-1">{coursePlan.className}</dd>
            </div>
            <div>
              <dt className="text-xs text-ink-muted">教师</dt>
              <dd className="mt-1">{coursePlan.teacherName}</dd>
            </div>
            <div>
              <dt className="text-xs text-ink-muted">起止日期</dt>
              <dd className="mt-1">
                {formatDate(coursePlan.startDate)} ~{" "}
                {formatDate(coursePlan.endDate)}
              </dd>
            </div>
            <div>
              <dt className="text-xs text-ink-muted">章节数</dt>
              <dd className="mt-1 font-mono">{coursePlan.chapterCount}</dd>
            </div>
          </dl>
        </div>
      </section>

      {/* 章节列表 */}
      <section aria-label="章节列表" className="space-y-3">
        <h3 className="font-serif text-base">章节安排</h3>
        <ol className="space-y-3">
          {chapters.map((chapter) => (
            <li
              key={chapter.id}
              className="rounded border border-rule bg-paper-elevated p-4"
            >
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-xs text-ink-muted">
                      第 {chapter.sortOrder} 章
                    </span>
                  </div>
                  <h4 className="mt-1 font-serif text-base">{chapter.title}</h4>
                  <p className="mt-1 text-sm text-ink-muted">
                    {chapter.description}
                  </p>
                </div>
                <div className="flex-shrink-0 text-right">
                  <div className="font-mono text-sm">
                    {chapter.lessonCount} 课时
                  </div>
                  <div className="mt-1 text-xs text-ink-muted">
                    预计 {chapter.estimatedHours} 学时
                  </div>
                </div>
              </div>
            </li>
          ))}
        </ol>
      </section>
    </article>
  );
}

export default CoursePlanDetail;