"use client";

/**
 * Classes 页面 - 班级管理（只读列表）
 *
 * 数据来源（ARB-001 §1.2）：GraphQL ClassesQuery
 * - 返回当前教师 dataScope 范围内的班级列表
 * - P2 阶段为只读展示（Mutation 在 P3 启用）
 *
 * 维护者：ai13（teacher-portal）
 */

import { useQuery } from "urql";
import Link from "next/link";
import { Loading, Empty } from "@edu/ui-components";
import { ClassesQuery } from "@/lib/graphql";
import type { Class } from "@/lib/graphql";

export default function ClassesPage() {
  const [result] = useQuery({ query: ClassesQuery });

  return (
    <div className="px-10 py-10">
      <header className="mb-8">
        <h1 className="text-3xl font-serif text-ink">班级管理</h1>
        <p className="mt-1 text-sm text-ink-muted">
          GraphQL ClassesQuery · 按教师 dataScope 过滤
        </p>
      </header>

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

      <section>
        <div className="flex items-baseline justify-between mb-4">
          <h2 className="text-xl font-serif text-ink">
            班级列表
            <span className="ml-2 text-sm font-sans text-ink-muted">
              {result.data?.classes.length ?? 0} 个
            </span>
          </h2>
        </div>
        <div className="rule-thin mb-6" />

        {result.fetching ? (
          <Loading lines={4} />
        ) : result.error ? (
          <div className="mark-left mb-4 py-2 border-l-2 border-danger pl-md">
            <p className="text-sm px-3 text-danger">
              加载失败：{result.error.message}
            </p>
          </div>
        ) : !result.data?.classes || result.data.classes.length === 0 ? (
          <Empty title="暂无班级" description="请联系管理员分配班级" />
        ) : (
          <ul className="space-y-0">
            {(result.data.classes as Class[]).map((cls) => (
              <li
                key={cls.id}
                className="py-4 grid grid-cols-12 gap-4 items-baseline border-b border-rule"
              >
                <div className="col-span-7">
                  <h3 className="text-lg font-serif text-ink">{cls.name}</h3>
                  <p className="mt-1 text-tiny text-ink-muted">
                    年级：{cls.gradeId}
                  </p>
                </div>
                <div className="col-span-2 text-sm text-ink-muted">
                  {cls.studentCount} 名学生
                </div>
                <div className="col-span-3 text-right flex justify-end gap-4">
                  <Link
                    href={`/students?classId=${cls.id}`}
                    className="text-tiny uppercase tracking-wide text-accent hover:opacity-70"
                  >
                    查看学生
                  </Link>
                  <Link
                    href={`/exams?classId=${cls.id}`}
                    className="text-tiny uppercase tracking-wide text-ink-muted hover:opacity-70"
                  >
                    考试
                  </Link>
                  <Link
                    href={`/homework?classId=${cls.id}`}
                    className="text-tiny uppercase tracking-wide text-ink-muted hover:opacity-70"
                  >
                    作业
                  </Link>
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}
