Edu/apps/portal-shell/src/features/teacher/attendance/attendance-report-client.tsx

"use client";

/**
 * 考勤报表页 - 客户端组件（ARCHITECTURE.md §7.3 详情页 / §9.1 / §10 P2）
 *
 * 数据契约：
 * - 报表查询 attendanceReport(classId, range)：❌ schema 无此字段 → MSW 兜底（@contract-pending）
 * - 契约工单：docs/architecture/issues/contracts/classes_contract.md#attendance-report
 *
 * 三态规范（§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 { FileText } from "lucide-react";
import { useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";

import { useAttendanceReport, type AttendanceReportItem } from "@/lib/api";
import { EmptyState } from "@/shared/components/ui/empty-state";
import {
  DetailPageShell,
  DetailPageSkeleton,
  DetailSection,
  DetailField,
} from "@/shared/components/page-templates";
import {
  attendanceRateToColorClass,
  formatAttendanceRate,
} from "@/features/teacher/attendance/transformations";

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

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

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

  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("report.mswNotice")}
      </p>
    </div>
  ) : undefined;

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

  return (
    <DetailPageShell
      title={t("report.title")}
      description={
        data
          ? t("report.subtitle", {
              className: data.className,
              range: data.range,
            })
          : undefined
      }
      icon={<FileText className="size-6" />}
      backHref="/shell/teacher/attendance"
      loading={loading}
      loadingNode={<DetailPageSkeleton />}
      errorNode={errorNode}
      emptyNode={emptyNode}
    >
      {data ? <ReportSummarySection data={data} /> : null}
      {data ? <ReportItemsSection items={data.items} /> : null}
    </DetailPageShell>
  );
}

/**
 * 报表汇总区。
 */
function ReportSummarySection({
  data,
}: {
  data: NonNullable<ReturnType<typeof useAttendanceReport>["data"]>;
}): React.ReactElement {
  const t = useTranslations("attendance");
  const summary = data.summary;
  return (
    <DetailSection title={t("report.sectionSummary")}>
      <DetailField
        label={t("report.fieldTotal")}
        value={String(summary.total)}
      />
      <DetailField
        label={t("report.fieldPresent")}
        value={String(summary.present)}
      />
      <DetailField
        label={t("report.fieldAbsent")}
        value={String(summary.absent)}
      />
      <DetailField label={t("report.fieldLate")} value={String(summary.late)} />
      <DetailField
        label={t("report.fieldLeave")}
        value={String(summary.leave)}
      />
      <DetailField
        label={t("report.fieldAttendanceRate")}
        value={
          <span
            className={`font-medium ${attendanceRateToColorClass(summary.attendanceRate)}`}
          >
            {formatAttendanceRate(summary.attendanceRate)}
          </span>
        }
      />
    </DetailSection>
  );
}

/**
 * 报表明细区（按学生聚合）。
 */
function ReportItemsSection({
  items,
}: {
  items: AttendanceReportItem[];
}): React.ReactElement {
  const t = useTranslations("attendance");
  return (
    <DetailSection title={t("report.sectionItems")}>
      <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("report.colStudentName")}
              </th>
              <th className="p-3 text-center font-medium">
                {t("report.colPresent")}
              </th>
              <th className="p-3 text-center font-medium">
                {t("report.colAbsent")}
              </th>
              <th className="p-3 text-center font-medium">
                {t("report.colLate")}
              </th>
              <th className="p-3 text-center font-medium">
                {t("report.colLeave")}
              </th>
              <th className="p-3 text-right font-medium">
                {t("report.colAttendanceRate")}
              </th>
            </tr>
          </thead>
          <tbody className="divide-y">
            {items.map((item) => (
              <tr key={item.studentId} className="hover:bg-muted/30">
                <td className="p-3 font-medium">{item.studentName}</td>
                <td className="p-3 text-center text-muted-foreground">
                  {item.present}
                </td>
                <td className="p-3 text-center text-muted-foreground">
                  {item.absent}
                </td>
                <td className="p-3 text-center text-muted-foreground">
                  {item.late}
                </td>
                <td className="p-3 text-center text-muted-foreground">
                  {item.leave}
                </td>
                <td
                  className={`p-3 text-right font-medium ${attendanceRateToColorClass(item.attendanceRate)}`}
                >
                  {formatAttendanceRate(item.attendanceRate)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </DetailSection>
  );
}