// ElectiveSelectionList：选修课列表
// 依据：02-architecture-design.md §15 组件设计
// 每项：课程名/课程代码/教师/分类标签/学分/上课时间/状态/成绩（如有）

"use client";

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

interface ElectiveSelectionListProps {
  electiveSelections: ElectiveSelection[];
}

type ElectiveCategory = ElectiveSelection["category"];
type ElectiveStatus = ElectiveSelection["status"];

const CATEGORY_LABELS: Record<ElectiveCategory, string> = {
  arts: "艺术",
  sports: "体育",
  science: "科学",
  language: "语言",
  other: "其他",
};

const CATEGORY_DOT_STYLES: Record<ElectiveCategory, string> = {
  arts: "bg-accent",
  sports: "bg-warning",
  science: "bg-success",
  language: "bg-danger",
  other: "bg-ink-muted",
};

const STATUS_LABELS: Record<ElectiveStatus, string> = {
  enrolled: "已选",
  completed: "已完成",
  dropped: "已退选",
};

const STATUS_STYLES: Record<ElectiveStatus, string> = {
  enrolled: "text-accent",
  completed: "text-success",
  dropped: "text-ink-muted",
};

export function ElectiveSelectionList({
  electiveSelections,
}: ElectiveSelectionListProps): JSX.Element {
  if (electiveSelections.length === 0) {
    return (
      <p className="rounded border border-rule bg-paper-elevated p-4 text-sm text-ink-muted">
        暂无选修课记录
      </p>
    );
  }

  return (
    <ul className="space-y-3" aria-label="选修课列表">
      {electiveSelections.map((sel) => (
        <li
          key={sel.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 flex-wrap items-center gap-2">
                <span className="inline-flex items-center gap-1.5 rounded bg-accent-soft px-2 py-0.5 text-xs text-ink">
                  <span
                    className={cn(
                      "h-1.5 w-1.5 rounded-full",
                      CATEGORY_DOT_STYLES[sel.category],
                    )}
                    aria-hidden="true"
                  />
                  {CATEGORY_LABELS[sel.category]}
                </span>
                <span className="font-mono text-xs text-ink-muted">
                  {sel.courseCode}
                </span>
              </div>
              <h3 className="mt-2 font-serif text-base">{sel.courseName}</h3>
            </div>
            <span
              className={cn(
                "flex-shrink-0 text-xs font-medium",
                STATUS_STYLES[sel.status],
              )}
            >
              {STATUS_LABELS[sel.status]}
            </span>
          </div>

          <div className="mt-3 border-t border-rule pt-3">
            <dl className="grid grid-cols-2 gap-y-2 text-xs sm:grid-cols-4">
              <div>
                <dt className="text-ink-muted">教师</dt>
                <dd className="mt-1">{sel.teacherName}</dd>
              </div>
              <div>
                <dt className="text-ink-muted">学分</dt>
                <dd className="mt-1 font-mono">{sel.credits}</dd>
              </div>
              <div>
                <dt className="text-ink-muted">上课时间</dt>
                <dd className="mt-1">{sel.schedule}</dd>
              </div>
              <div>
                <dt className="text-ink-muted">选课日期</dt>
                <dd className="mt-1">{formatDate(sel.enrolledAt)}</dd>
              </div>
            </dl>
          </div>

          {typeof sel.score === "number" && (
            <div className="mt-3 border-t border-rule pt-3">
              <p className="text-xs text-ink-muted">
                成绩：<span className="font-mono text-sm text-ink">{sel.score}</span>
              </p>
            </div>
          )}
        </li>
      ))}
    </ul>
  );
}

export default ElectiveSelectionList;
