Edu/apps/portal-shell/src/features/teacher/classes/class-schedule-client.tsx

"use client";

/**
 * 班级课表页 - 客户端组件（ARCHITECTURE.md §7.3 详情页 / §9.1 / §10 P2）
 *
 * 数据契约：
 * - 课表查询 classSchedule(classId)：❌ schema 无此字段 → MSW 兜底（@contract-pending）
 * - 契约工单：docs/architecture/issues/contracts/classes_contract.md#class-schedule
 *
 * URL 状态：?classId=（可选，指定班级课表；未指定时返回默认课表）
 *
 * 三态规范（§11.3 DoD）：
 * - loading：DetailPageSkeleton
 * - error：errorNode 局部降级
 * - empty：data 为 null 时显示空态节点
 *
 * 关联：ARCHITECTURE.md §5.3 / §5.4 / §7.3 / §9.1 / §10 P2 / §11.3 / §11.4
 */
import { Calendar } from "lucide-react";
import { useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";

import { useClassSchedule, type ClassScheduleItem } from "@/lib/api";
import { EmptyState } from "@/shared/components/ui/empty-state";
import {
  DetailPageShell,
  DetailPageSkeleton,
  DetailSection,
  DetailField,
} from "@/shared/components/page-templates";
import {
  formatSchedulePeriod,
  formatScheduleTime,
  formatWeekday,
  groupScheduleByWeekday,
  sortScheduleByDay,
} from "@/features/teacher/classes/transformations";

/**
 * 课表客户端主体。需由 server page 包裹在 <Suspense> 中。
 */
export function ClassScheduleClient(): React.ReactElement {
  const t = useTranslations("classes");
  const tCommon = useTranslations("common");
  const searchParams = useSearchParams();

  const classId = searchParams.get("classId") ?? "cls-001";

  // @contract-pending：MSW 兜底
  const { data, loading, error } = useClassSchedule(classId);

  const errorNode = error ? (
    <div className="rounded-xl border border-destructive/30 bg-destructive/5 p-6 text-center">
      <p className="text-sm text-destructive">
        {tCommon("error.loadFailed", { message: String(error) })}
      </p>
      <p className="mt-2 text-xs text-muted-foreground">
        {t("schedule.mswNotice")}
      </p>
    </div>
  ) : undefined;

  const emptyNode =
    !loading && !error && !data ? (
      <EmptyState
        icon={Calendar}
        title={t("schedule.notFound")}
        action={{
          label: t("schedule.backToList"),
          href: "/shell/teacher/classes",
        }}
      />
    ) : undefined;

  return (
    <DetailPageShell
      title={t("schedule.title")}
      description={
        data
          ? t("schedule.subtitle", {
              className: data.className,
              weekRange: data.weekRange,
            })
          : undefined
      }
      icon={<Calendar className="size-6" />}
      backHref="/shell/teacher/classes"
      loading={loading}
      loadingNode={<DetailPageSkeleton />}
      errorNode={errorNode}
      emptyNode={emptyNode}
    >
      {data ? <ScheduleOverviewSection data={data} /> : null}
      {data ? <ScheduleByDaySection items={data.items} /> : null}
    </DetailPageShell>
  );
}

type ScheduleData = NonNullable<ReturnType<typeof useClassSchedule>["data"]>;

/**
 * 课表概览区。
 */
function ScheduleOverviewSection({
  data,
}: {
  data: ScheduleData;
}): React.ReactElement {
  const t = useTranslations("classes");
  return (
    <DetailSection title={t("schedule.sectionOverview")}>
      <DetailField
        label={t("schedule.fieldClassName")}
        value={data.className}
      />
      <DetailField
        label={t("schedule.fieldWeekRange")}
        value={data.weekRange}
      />
      <DetailField
        label={t("schedule.fieldTotalLessons")}
        value={String(data.items.length)}
      />
    </DetailSection>
  );
}

/**
 * 按星期分组的课表区。
 */
function ScheduleByDaySection({
  items,
}: {
  items: ClassScheduleItem[];
}): React.ReactElement {
  const t = useTranslations("classes");
  const sorted = sortScheduleByDay(items);
  const groups = groupScheduleByWeekday(sorted);

  return (
    <DetailSection title={t("schedule.sectionByDay")}>
      <div className="space-y-4">
        {groups.map((group, idx) => {
          if (group.length === 0) return null;
          return (
            <div key={idx} className="space-y-2">
              <h4 className="text-sm font-semibold text-foreground">
                {formatWeekday(idx)}
              </h4>
              <div className="overflow-x-auto rounded-xl border">
                <table className="w-full text-sm">
                  <thead className="border-b bg-muted/30">
                    <tr>
                      <th className="p-3 text-left font-medium">
                        {t("schedule.colPeriod")}
                      </th>
                      <th className="p-3 text-left font-medium">
                        {t("schedule.colSubject")}
                      </th>
                      <th className="p-3 text-left font-medium">
                        {t("schedule.colTeacher")}
                      </th>
                      <th className="p-3 text-left font-medium">
                        {t("schedule.colClassroom")}
                      </th>
                      <th className="p-3 text-left font-medium">
                        {t("schedule.colTime")}
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y">
                    {group.map((item) => (
                      <tr key={item.id} className="hover:bg-muted/30">
                        <td className="p-3 font-mono text-xs text-muted-foreground">
                          {formatSchedulePeriod(item.period)}
                        </td>
                        <td className="p-3 font-medium">{item.subjectName}</td>
                        <td className="p-3 text-muted-foreground">
                          {item.teacherName}
                        </td>
                        <td className="p-3 text-xs text-muted-foreground">
                          {item.classroom ?? "--"}
                        </td>
                        <td className="p-3 font-mono text-xs text-muted-foreground">
                          {formatScheduleTime(item.startTime, item.endTime)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          );
        })}
      </div>
    </DetailSection>
  );
}