Edu/apps/teacher-portal/src/app/(app)/exams/page.tsx

"use client";

import { useState, useEffect, useCallback } from "react";
import { getToken } from "@/lib/auth";

interface ExamItem {
  id: string;
  classId: string;
  title: string;
  description?: string;
  examDate: string;
  duration: string;
  totalScore: string;
  status: string;
  createdBy: string;
  createdAt: string;
  updatedAt: string;
}

interface ApiResponse<T> {
  success: boolean;
  data?: T;
  error?: { code: string; message: string };
}

export default function ExamsPage() {
  const [exams, setExams] = useState<ExamItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [classId, setClassId] = useState(
    "00000000-0000-0000-0000-000000000001",
  );
  const [error, setError] = useState<string | null>(null);

  const authHeaders = (): Record<string, string> => {
    const token = getToken();
    return token ? { Authorization: `Bearer ${token}` } : {};
  };

  const fetchExams = useCallback(async () => {
    if (!classId.trim()) return;
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(
        `/api/v1/teacher/classes/${encodeURIComponent(classId)}/exams`,
        { headers: authHeaders() },
      );
      const json: ApiResponse<ExamItem[]> = await res.json();
      if (json.success && json.data) {
        setExams(json.data);
      } else {
        setError(json.error?.message || "Failed to load");
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : "Network error");
    } finally {
      setLoading(false);
    }
  }, [classId]);

  useEffect(() => {
    fetchExams();
  }, [fetchExams]);

  return (
    <div className="px-10 py-10">
      <header className="mb-8">
        <h1
          className="text-3xl"
          style={{
            fontFamily: "var(--font-serif)",
            color: "var(--color-ink)",
          }}
        >
          考试管理
        </h1>
        <p className="mt-1 text-sm" style={{ color: "var(--color-ink-muted)" }}>
          core-edu 域 · BFF 聚合查询
        </p>
      </header>

      <div className="rule-thin mb-8" />

      <div className="mb-6 flex items-baseline gap-3">
        <label
          className="text-xs uppercase tracking-wide"
          style={{ color: "var(--color-ink-muted)" }}
        >
          班级 ID
        </label>
        <input
          type="text"
          value={classId}
          onChange={(e) => setClassId(e.target.value)}
          className="flex-1 max-w-md px-3 py-2 bg-transparent border-b text-sm font-mono"
          style={{ borderColor: "var(--color-rule)" }}
          placeholder="输入班级 UUID"
        />
        <button
          onClick={fetchExams}
          className="text-xs uppercase tracking-wide hover:opacity-70"
          style={{ color: "var(--color-accent)" }}
        >
          查询
        </button>
      </div>

      {error && (
        <div
          className="mark-left mb-4 py-2"
          style={{ borderColor: "var(--color-accent)" }}
        >
          <p className="text-sm px-3" style={{ color: "var(--color-accent)" }}>
            {error}
          </p>
        </div>
      )}

      {loading ? (
        <p className="text-sm" style={{ color: "var(--color-ink-muted)" }}>
          加载中...
        </p>
      ) : exams.length === 0 ? (
        <p
          className="text-sm italic"
          style={{ color: "var(--color-ink-muted)" }}
        >
          该班级下暂无考试
        </p>
      ) : (
        <ul className="space-y-0">
          {exams.map((exam) => (
            <li
              key={exam.id}
              className="py-4 grid grid-cols-12 gap-4 items-baseline"
              style={{ borderBottom: "1px solid var(--color-rule)" }}
            >
              <div className="col-span-7">
                <h3
                  className="text-lg"
                  style={{
                    fontFamily: "var(--font-serif)",
                    color: "var(--color-ink)",
                  }}
                >
                  {exam.title}
                </h3>
                {exam.description && (
                  <p
                    className="mt-1 text-sm"
                    style={{ color: "var(--color-ink-muted)" }}
                  >
                    {exam.description}
                  </p>
                )}
                <p
                  className="mt-1 text-xs"
                  style={{ color: "var(--color-ink-muted)" }}
                >
                  考试时间: {new Date(exam.examDate).toLocaleString("zh-CN")}
                  {" · "}
                  时长 {exam.duration} 分钟
                  {" · "}
                  满分 {exam.totalScore}
                </p>
              </div>
              <div
                className="col-span-3 text-xs"
                style={{ color: "var(--color-ink-muted)" }}
              >
                状态: {exam.status}
              </div>
              <div
                className="col-span-2 text-right text-xs font-mono"
                style={{ color: "var(--color-ink-muted)" }}
              >
                {exam.id.slice(0, 8)}...
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}