spsays-training/app/books/page.tsx

import fs from "fs";
import path from "path";
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";

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

function loadBooks(): BookInfo[] {
  const booksDir = path.join(process.cwd(), "app/lib/books");
  const books: BookInfo[] = [];

  // Bhagavad-gītā
  const bgIntroPath = path.join(booksDir, "bg", "intro.json");
  if (fs.existsSync(bgIntroPath)) {
    const bg = JSON.parse(fs.readFileSync(bgIntroPath, "utf-8"));
    const totalVerses = bg.chapters.reduce(
      (sum: number, ch: { totalVerses: number }) => sum + ch.totalVerses,
      0,
    );
    books.push({
      slug: "bg",
      title: bg.title,
      author: bg.author,
      description: `${bg.totalChapters} chapters`,
      totalVerses,
      href: "/books/bg",
    });
  }

  // Śrīmad-Bhāgavatam
  const sbIntroPath = path.join(booksDir, "sb", "intro.json");
  if (fs.existsSync(sbIntroPath)) {
    const sb = JSON.parse(fs.readFileSync(sbIntroPath, "utf-8"));
    const totalChapters = sb.cantos.reduce(
      (sum: number, c: { totalChapters: number }) => sum + c.totalChapters,
      0,
    );
    const totalVerses = sb.cantos.reduce(
      (sum: number, c: { chapters: { totalVerses: number }[] }) =>
        sum +
        c.chapters.reduce(
          (s: number, ch: { totalVerses: number }) => s + ch.totalVerses,
          0,
        ),
      0,
    );
    books.push({
      slug: "sb",
      title: sb.title,
      author: sb.author,
      description: `${sb.totalCantos} cantos, ${totalChapters} chapters`,
      totalVerses,
      href: "/books/sb",
    });
  }

  return books;
}

export default function BooksPage() {
  const books = loadBooks();

  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>
  );
}