import Link from "next/link";
import PageShell from "@/components/page-shell";
import { GuaGrid } from "@/components/learn/gua-grid";
import { ZenCard } from "@/components/ui/zen-card";
import {
  getGuaName,
  guaNumFromMark,
  listGuaMarks,
} from "@/lib/content/zhouyi";

export default async function LearnPage() {
  const guaMarks = await listGuaMarks("traditional");
  const items = guaMarks.map((mark) => ({
    num: guaNumFromMark(mark),
    name: getGuaName(mark),
    href: `/learn/${guaNumFromMark(mark)}`,
  }));

  return (
    <PageShell className="max-w-6xl px-4 py-8">
      <div className="mb-8 text-center">
        <h1 className="text-2xl font-bold tracking-wide">易经学习</h1>
        <p className="mt-2 text-sm text-muted-foreground">
          周易六十四卦 · 择卦而读
        </p>
      </div>

      <div className="mb-8 grid gap-4 sm:grid-cols-2">
        <ZenCard
          title="繁体精简版"
          subtitle="当前浏览 · 原文精要"
          className="ring-1 ring-primary/20"
        >
          <p className="text-sm text-muted-foreground">
            张铭仁解卦等精简内容，适合快速阅读与 AI 解读引用。
          </p>
          <span className="inline-block text-xs text-primary">已选中</span>
        </ZenCard>
        <Link href="/learn/other" className="block">
          <ZenCard
            title="简体图文版"
            subtitle="互卦 · 错卦 · 综卦"
            className="h-full transition-colors hover:border-primary/30"
          >
            <p className="text-sm text-muted-foreground">
              含卦象图片与更多注释，适合系统学习。
            </p>
            <span className="inline-block text-xs text-primary">点击进入 →</span>
          </ZenCard>
        </Link>
      </div>

      <GuaGrid items={items} />
    </PageShell>
  );
}