"use client";

/**
 * 教材列表页（ai14，P4）
 *
 * - 消费 useTextbooks 查询
 * - 教材卡片：科目、书名、版本、作者
 * - 链接到 /textbooks/[id]/chapters
 */

import Link from "next/link";
import { useTextbooks } from "@/lib/graphql/hooks";
import type { Textbook } from "@/lib/graphql/types";

function Cover({ textbook }: { textbook: Textbook }): React.ReactNode {
  return (
    <div
      className="w-full h-32 flex items-center justify-center rounded"
      style={{
        background: "var(--color-accent-muted)",
        color: "var(--color-accent)",
      }}
      role="img"
      aria-label={`${textbook.name} 封面占位`}
    >
      <span className="font-serif text-lg">{textbook.subject.name}</span>
    </div>
  );
}

export default function TextbooksPage(): React.ReactNode {
  const { data, fetching, error, reexecute } = useTextbooks();
  const textbooks = data ?? [];

  return (
    <main
      className="px-md py-lg max-w-5xl mx-auto"
      aria-labelledby="textbooks-title"
    >
      <header className="mb-lg">
        <h1 id="textbooks-title" className="font-serif text-2xl text-ink">
          教材
        </h1>
        <p className="mt-xs text-sm text-ink-muted">按科目浏览教材与章节</p>
      </header>

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

      {fetching ? (
        <p className="text-sm text-ink-muted" aria-live="polite">
          加载中…
        </p>
      ) : error ? (
        <div className="mark-left py-md px-md mb-md" aria-live="assertive">
          <p className="text-sm text-ink">{error.message || "加载失败"}</p>
          <button
            type="button"
            className="btn-secondary mt-sm"
            onClick={() => reexecute()}
          >
            重试
          </button>
        </div>
      ) : textbooks.length === 0 ? (
        <p className="text-sm text-ink-muted" role="status">
          暂无教材
        </p>
      ) : (
        <ul
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-lg"
          aria-label="教材列表"
        >
          {textbooks.map((tb: Textbook) => (
            <li key={tb.id}>
              <Link
                href={`/textbooks/${tb.id}/chapters`}
                className="card-paper block overflow-hidden transition hover:shadow-card"
                aria-label={`查看教材 ${tb.name} 的章节`}
              >
                <Cover textbook={tb} />
                <div className="p-md">
                  <div className="flex items-center gap-sm mb-xs">
                    <span className="badge badge-success">
                      {tb.subject.name}
                    </span>
                    <span className="badge badge-info">{tb.version}</span>
                  </div>
                  <h2 className="font-serif text-base text-ink text-clamp-2">
                    {tb.name}
                  </h2>
                  <p className="mt-xs text-xs text-ink-subtle">{tb.author}</p>
                  <p className="mt-xs text-xs text-accent">查看章节 →</p>
                </div>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}
