spsays-training/app/books/page.tsx

import Link from "next/link";
import { PageHeader } from "@/components/page-header";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { ExtractedVerseCount } from "./extracted-verse-count";
import { getAllBooks, type BookMeta } from "@/lib/api";

type ChapterEntry = { totalVerses: number };
type CantoEntry = { totalChapters: number; chapters: ChapterEntry[] };
type LilaEntry = { totalChapters: number; chapters: ChapterEntry[] };

interface ChapterBookMeta extends BookMeta {
  totalChapters: number;
  chapters: ChapterEntry[];
}

interface SbMeta extends BookMeta {
  totalCantos: number;
  cantos: CantoEntry[];
}

interface CcMeta extends BookMeta {
  totalLilas: number;
  lilas: LilaEntry[];
}

type BookInfo = {
  slug: string;
  title: string;
  author: string;
  description: string;
  totalVerses: number;
  href: string;
};

function buildBookList(allBooks: BookMeta[]): BookInfo[] {
  const books: BookInfo[] = [];

  for (const data of allBooks) {
    const slug = data.book;
    const title = data.title as string;
    const author = data.author as string;

    if (slug === "bg") {
      const bg = data as ChapterBookMeta;
      const totalVerses = bg.chapters.reduce(
        (sum, ch) => sum + ch.totalVerses,
        0,
      );
      books.push({
        slug,
        title,
        author,
        description: `${bg.totalChapters} chapters`,
        totalVerses,
        href: "/books/bg",
      });
    } else if (slug === "sb1962") {
      const sb62 = data as ChapterBookMeta;
      const totalVerses = sb62.chapters.reduce(
        (sum, ch) => sum + ch.totalVerses,
        0,
      );
      books.push({
        slug,
        title,
        author,
        description: `${sb62.totalChapters} chapters · First Canto`,
        totalVerses,
        href: "/books/sb1962",
      });
    } else if (slug === "sb") {
      const sb = data as SbMeta;
      const totalChapters = sb.cantos.reduce(
        (sum, c) => sum + c.totalChapters,
        0,
      );
      const totalVerses = sb.cantos.reduce(
        (sum, c) => sum + c.chapters.reduce((s, ch) => s + ch.totalVerses, 0),
        0,
      );
      books.push({
        slug,
        title,
        author,
        description: `${sb.totalCantos} cantos, ${totalChapters} chapters`,
        totalVerses,
        href: "/books/sb",
      });
    } else if (slug === "cc") {
      const cc = data as CcMeta;
      const totalChapters = cc.lilas.reduce(
        (sum, l) => sum + l.totalChapters,
        0,
      );
      const totalVerses = cc.lilas.reduce(
        (sum, l) => sum + l.chapters.reduce((s, ch) => s + ch.totalVerses, 0),
        0,
      );
      books.push({
        slug,
        title,
        author,
        description: `${cc.totalLilas} līlās, ${totalChapters} chapters`,
        totalVerses,
        href: "/books/cc",
      });
    }
  }

  return books;
}

export default async function BooksPage() {
  const allBooks = await getAllBooks();
  const books = buildBookList(allBooks);

  return (
    <div className="min-h-screen bg-background">
      <PageHeader>
        <Link
          href="/"
          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          &larr; Home
        </Link>
        <h1 className="mt-3 text-3xl font-bold text-foreground">Books</h1>
        <p className="mt-1 text-muted-foreground">
          Structured verse-by-verse editions with Devanagari, transliteration,
          synonyms, translation &amp; purports
        </p>
      </PageHeader>

      <main className="max-w-3xl mx-auto px-6 py-8">
        <div className="grid gap-4">
          {books.map((book) => (
            <Link key={book.slug} href={book.href} className="block">
              <Card
                className={cn(
                  "transition-all hover:shadow-md hover:ring-foreground/20",
                )}
              >
                <CardHeader>
                  <CardTitle className="text-xl font-bold">
                    {book.title}
                  </CardTitle>
                  <CardDescription>{book.author}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-3 text-sm">
                    <Badge variant="secondary">{book.description}</Badge>
                    <ExtractedVerseCount
                      count={book.totalVerses}
                      label="extracted verses"
                      className="text-muted-foreground"
                    />
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </main>
    </div>
  );
}