"use client";

/**
 * 学习中心入口页（ai14，P3）
 *
 * 聚合 3 个学习场景入口，每张卡片显示数量统计：
 * - 我的课程 → /courses（消费 useMyClasses 取班级数量）
 * - 我的作业 → /my-homework（消费 useMyHomework 取待提交作业数）
 * - 教材     → /textbooks（消费 useTextbooks 取教材数量）
 *
 * 设计依据：纸感设计（card-paper + mark-left + serif 标题）
 *          与 Dashboard 区分：Dashboard 是数据概览，本页是场景入口
 */

import Link from "next/link";
import {
  useMyClasses,
  useMyHomework,
  useTextbooks,
} from "@/lib/graphql/hooks";

interface EntryCardProps {
  href: string;
  label: string;
  description: string;
  count: number | null;
  countLabel: string;
  accent: boolean;
  symbol: string;
}

function EntryCard({
  href,
  label,
  description,
  count,
  countLabel,
  accent,
  symbol,
}: EntryCardProps): JSX.Element {
  return (
    <Link
      href={href}
      className="card-paper p-lg flex flex-col group transition hover:shadow-card"
      aria-label={`进入${label}`}
    >
      <div className="flex items-start justify-between mb-md">
        <span
          className="inline-flex w-12 h-12 items-center justify-center rounded-sm font-serif text-2xl"
          style={{
            background: accent
              ? "var(--color-accent-muted)"
              : "var(--color-rule)",
            color: accent ? "var(--color-accent)" : "var(--color-ink-muted)",
          }}
          aria-hidden="true"
        >
          {symbol}
        </span>
        <span
          className="text-xs uppercase tracking-wider group-hover:translate-x-1 transition-transform"
          style={{ color: "var(--color-accent)" }}
          aria-hidden="true"
        >
          →
        </span>
      </div>

      <p
        className="text-xs uppercase tracking-wider"
        style={{ color: "var(--color-ink-muted)" }}
      >
        {countLabel}
      </p>
      <h2
        className="mt-xs text-2xl lg:text-3xl font-serif"
        style={{ color: "var(--color-ink)" }}
      >
        {label}
      </h2>

      <div className="rule-thin my-md" />

      <p
        className="text-sm flex-1"
        style={{ color: "var(--color-ink-muted)" }}
      >
        {description}
      </p>

      <p
        className="mt-md text-3xl font-serif"
        style={{
          color: accent ? "var(--color-accent)" : "var(--color-ink)",
        }}
        aria-live="polite"
      >
        {count === null ? (
          <span
            className="inline-block w-8 h-6 rounded-sm animate-pulse"
            style={{ background: "var(--color-rule)" }}
            aria-label="加载中"
          />
        ) : (
          count
        )}
      </p>
    </Link>
  );
}

export default function LearningCenterPage(): JSX.Element {
  const {
    data: classesData,
    fetching: classesFetching,
    error: classesError,
  } = useMyClasses();
  const {
    data: homeworkData,
    fetching: homeworkFetching,
    error: homeworkError,
  } = useMyHomework();
  const {
    data: textbooksData,
    fetching: textbooksFetching,
    error: textbooksError,
  } = useTextbooks();

  const classCount = classesError ? null : classesFetching ? null : (classesData?.length ?? 0);
  const pendingHomeworkCount = homeworkError
    ? null
    : homeworkFetching
      ? null
      : (homeworkData?.filter((h) => h.status === "pending" || h.status === "overdue").length ?? 0);
  const textbookCount = textbooksError ? null : textbooksFetching ? null : (textbooksData?.length ?? 0);

  return (
    <div className="px-6 lg:px-10 py-8 lg:py-10 max-w-7xl mx-auto">
      <header className="mb-6">
        <p
          className="text-xs uppercase tracking-wider"
          style={{ color: "var(--color-ink-muted)" }}
        >
          学习场景
        </p>
        <h1
          className="mt-2 text-3xl lg:text-4xl font-serif"
          style={{ color: "var(--color-ink)" }}
        >
          学习中心
        </h1>
        <p
          className="mt-2 text-sm"
          style={{ color: "var(--color-ink-muted)" }}
        >
          从这里进入你的课程、作业与教材。
        </p>
      </header>

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

      <section
        aria-label="学习入口"
        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5"
      >
        <EntryCard
          href="/courses"
          label="我的课程"
          description="查看你所在的班级、班主任、同学与课表。"
          count={classCount}
          countLabel="个班级"
          accent
          symbol="✦"
        />
        <EntryCard
          href="/my-homework"
          label="我的作业"
          description="按状态查看待提交、已提交与已批改的作业。"
          count={pendingHomeworkCount}
          countLabel="待办"
          accent={false}
          symbol="✎"
        />
        <EntryCard
          href="/textbooks"
          label="教材"
          description="按科目浏览教材与章节目录。"
          count={textbookCount}
          countLabel="本"
          accent={false}
          symbol="▤"
        />
      </section>
    </div>
  );
}
