"use client";

/**
 * Dashboard 页面 - 教师仪表盘
 *
 * 数据来源（ARB-001 §1.2）：GraphQL DashboardQuery
 * - 并行聚合：iam.me + iam.viewports + iam.permissions + classes.byTeacher
 * - 返回：user + classes + viewports + stats
 *
 * 维护者：ai13（teacher-portal）
 */

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

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

  if (result.fetching) {
    return (
      <div className="px-10 py-10">
        <Loading lines={5} />
      </div>
    );
  }

  if (result.error) {
    return (
      <div className="px-10 py-10">
        <header className="mb-8">
          <h1 className="text-3xl font-serif text-ink">欢迎</h1>
        </header>
        <div className="rule-thin mb-8" />
        <div className="mark-left py-2 mb-4 border-l-2 border-danger pl-md">
          <p className="text-sm px-3 text-danger">
            仪表盘加载失败：{result.error.message}
          </p>
        </div>
      </div>
    );
  }

  const data = result.data?.dashboard;
  if (!data) {
    return (
      <div className="px-10 py-10">
        <Empty title="暂无数据" description="仪表盘数据尚未就绪" />
      </div>
    );
  }

  const { user, classes, stats } = data;

  return (
    <div className="px-10 py-10">
      <header className="mb-8">
        <h1 className="text-3xl font-serif text-ink">欢迎，{user.name}</h1>
        <p className="mt-1 text-sm text-ink-muted">
          {user.email} · 角色：{user.roles.join(", ") || "无"} · 数据范围：
          {user.dataScope}
        </p>
      </header>

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

      {/* 统计卡片 */}
      <section className="grid grid-cols-3 gap-6 mb-10">
        <div className="p-6 border border-rule rounded-card">
          <p className="text-tiny uppercase tracking-wide text-ink-muted">
            班级总数
          </p>
          <p className="mt-3 text-4xl font-serif text-ink">{classes.length}</p>
        </div>
        <div className="p-6 border border-rule rounded-card">
          <p className="text-tiny uppercase tracking-wide text-ink-muted">
            考试总数
          </p>
          <p className="mt-3 text-4xl font-serif text-ink">
            {stats.totalExams}
          </p>
        </div>
        <div className="p-6 border border-rule rounded-card">
          <p className="text-tiny uppercase tracking-wide text-ink-muted">
            待批改
          </p>
          <p className="mt-3 text-4xl font-serif text-accent">
            {stats.pendingGrading}
          </p>
        </div>
      </section>

      {/* 班级快览 */}
      <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">
              {classes.length} 个
            </span>
          </h2>
          <Link
            href="/classes"
            className="text-tiny uppercase tracking-wide text-accent hover:opacity-70"
          >
            查看全部
          </Link>
        </div>
        <div className="rule-thin mb-6" />

        {classes.length === 0 ? (
          <Empty title="暂无班级" description="请联系管理员分配班级" />
        ) : (
          <ul className="space-y-0">
            {(classes as Class[]).slice(0, 5).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-8">
                  <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-2 text-right">
                  <Link
                    href={`/students?classId=${cls.id}`}
                    className="text-tiny uppercase tracking-wide text-accent hover:opacity-70"
                  >
                    查看学生
                  </Link>
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}
