mongo fix

app/books/cc/[lila]/[chapter]/page.tsx

@@ -1,31 +1,8 @@
-import fs from "fs";
-import path from "path";
 import Link from "next/link";
 import { PageHeader } from "@/components/page-header";
 import { notFound } from "next/navigation";
-import { Card, CardHeader, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { VerseIndex } from "./verse-index";
-
-type Synonym = {
-  word: string;
-  meanings: string[];
-};
-
-type Verse = {
-  book_title: string;
-  lila: string;
-  chapter: number;
-  verse: number;
-  verse_end?: number | null;
-  reference: string;
-  devanagari: string;
-  bengali: string;
-  transliteration: string;
-  synonyms: Synonym[];
-  translation: string;
-  purport: string[];
-};
+import { getBookMeta, getChapterVerses, getChapterVerseIndex } from "@/lib/api";
+import { ChapterViewer } from "@/app/books/chapter-viewer";
 
 type ChapterInfo = {
   number: number;
@@ -41,70 +18,31 @@ type LilaInfo = {
   chapters: ChapterInfo[];
 };
 
-type Intro = {
-  book: string;
-  title: string;
-  author: string;
-  totalLilas: number;
-  lilas: LilaInfo[];
-};
-
-function getChapterVerses(lila: string, chapter: string): Verse[] {
-  const dir = path.join(
-    process.cwd(),
-    "app/lib/books/cc/lilas",
-    lila,
-    "chapters",
-    chapter.padStart(2, "0"),
-    "verses",
-  );
-  if (!fs.existsSync(dir)) return [];
-
-  return fs
-    .readdirSync(dir)
-    .filter((f) => f.endsWith(".json"))
-    .sort((a, b) => {
-      const na = parseInt(a);
-      const nb = parseInt(b);
-      return na - nb;
-    })
-    .map((f) => JSON.parse(fs.readFileSync(path.join(dir, f), "utf-8")));
-}
-
-function getLilaAndChapterInfo(
-  lila: string,
-  chapter: string,
-): { lilaInfo: LilaInfo; chapterInfo: ChapterInfo } | null {
-  const introPath = path.join(process.cwd(), "app/lib/books/cc/intro.json");
-  const intro: Intro = JSON.parse(fs.readFileSync(introPath, "utf-8"));
-  const lilaInfo = intro.lilas.find((l) => l.key === lila);
-  if (!lilaInfo) return null;
-  const chapterInfo = lilaInfo.chapters.find(
-    (ch) => ch.number === parseInt(chapter),
-  );
-  if (!chapterInfo) return null;
-  return { lilaInfo, chapterInfo };
-}
-
 export default async function CcChapterPage({
   params,
 }: {
   params: Promise<{ lila: string; chapter: string }>;
 }) {
   const { lila, chapter } = await params;
-  const info = getLilaAndChapterInfo(lila, chapter);
-  if (!info) notFound();
+  const PAGE_SIZE = 20;
 
-  const { lilaInfo, chapterInfo } = info;
+  const meta = await getBookMeta("cc");
+  if (!meta) notFound();
 
-  const verses = getChapterVerses(lila, chapter);
-  if (verses.length === 0) notFound();
+  const lilas = meta.lilas as LilaInfo[] | undefined;
+  const lilaInfo = lilas?.find((l) => l.key === lila);
+  if (!lilaInfo) notFound();
 
-  const verseList = verses.map((v) => ({
-    verse: v.verse,
-    verse_end: v.verse_end ?? undefined,
-    reference: v.reference,
-  }));
+  const chapterInfo = lilaInfo.chapters.find(
+    (ch) => ch.number === parseInt(chapter),
+  );
+  if (!chapterInfo) notFound();
+
+  const [verseIndex, firstPage] = await Promise.all([
+    getChapterVerseIndex("cc", lila, parseInt(chapter)),
+    getChapterVerses("cc", lila, parseInt(chapter), 1, PAGE_SIZE),
+  ]);
+  if (verseIndex.length === 0) notFound();
 
   return (
     <div className="min-h-screen bg-background">
@@ -121,94 +59,21 @@ export default async function CcChapterPage({
       </PageHeader>
 
       <div className="w-full md:max-w-5xl mx-auto flex">
-        {/* Left sidebar — verse index */}
-        <VerseIndex verses={verseList} chapter={chapter} />
-
-        {/* Main content */}
-        <main className="flex-1 min-w-0 px-6 py-8 space-y-12">
-          {verses.map((verse) => (
-            <Card
-              key={verse.reference}
-              id={`verse-${verse.verse}`}
-              className="scroll-mt-24"
-            >
-              {/* Header */}
-              <CardHeader className="border-b border-border bg-muted/50 py-3">
-                <Badge variant="secondary">{verse.reference}</Badge>
-              </CardHeader>
-
-              <CardContent className="space-y-5 pt-5">
-                {/* Bengali */}
-                {verse.bengali && (
-                  <div className="text-center">
-                    <p className="text-xl leading-relaxed whitespace-pre-line font-serif text-green-800 dark:text-green-400">
-                      {verse.bengali}
-                    </p>
-                  </div>
-                )}
-
-                {/* Devanagari */}
-                <div className="text-center">
-                  <p className="text-xl leading-relaxed text-red-800 dark:text-red-400 whitespace-pre-line font-serif">
-                    {verse.devanagari}
-                  </p>
-                </div>
-
-                {/* Transliteration */}
-                <div className="text-center">
-                  <p className="text-base italic text-muted-foreground whitespace-pre-line">
-                    {verse.transliteration}
-                  </p>
-                </div>
-
-                {/* Synonyms */}
-                {verse.synonyms.length > 0 && (
-                  <div>
-                    <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
-                      Synonyms
-                    </h3>
-                    <p className="text-sm text-muted-foreground leading-relaxed">
-                      {verse.synonyms.map((s, i) => (
-                        <span key={i}>
-                          <span className="italic text-foreground">
-                            {s.word}
-                          </span>
-                          —{s.meanings.join(", ")}
-                          {i < verse.synonyms.length - 1 ? "; " : "."}
-                        </span>
-                      ))}
-                    </p>
-                  </div>
-                )}
-
-                {/* Translation */}
-                <div>
-                  <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
-                    Translation
-                  </h3>
-                  <p
-                    className="text-base text-foreground leading-relaxed font-medium"
-                    dangerouslySetInnerHTML={{ __html: verse.translation }}
-                  />
-                </div>
-
-                {/* Purport */}
-                {verse.purport.length > 0 && (
-                  <div>
-                    <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
-                      Purport
-                    </h3>
-                    <div className="text-sm text-muted-foreground leading-relaxed space-y-3">
-                      {verse.purport.map((p, i) => (
-                        <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          ))}
-        </main>
+        <ChapterViewer
+          initialVerses={firstPage.verses}
+          hasMore={firstPage.hasMore}
+          totalPages={firstPage.totalPages}
+          book="cc"
+          division={lila}
+          chapter={parseInt(chapter)}
+          limit={PAGE_SIZE}
+          showBengali={true}
+          verseIndex={verseIndex.map((v) => ({
+            verse: v.verse,
+            verseEnd: v.verseEnd ?? undefined,
+            reference: v.reference,
+          }))}
+        />
       </div>
     </div>
   );

app/books/cc/[lila]/[chapter]/verse-index.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-type VerseEntry = {
-  verse: number;
-  verse_end?: number;
-  reference: string;
-};
-
-export function VerseIndex({
-  verses,
-  chapter,
-}: {
-  verses: VerseEntry[];
-  chapter: string;
-}) {
-  const [activeVerse, setActiveVerse] = useState<number | null>(null);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            const id = entry.target.id;
-            const num = parseInt(id.replace("verse-", ""));
-            if (!isNaN(num)) setActiveVerse(num);
-          }
-        }
-      },
-      { rootMargin: "-20% 0px -60% 0px" },
-    );
-
-    const articles = document.querySelectorAll("article[id^='verse-']");
-    articles.forEach((el) => observer.observe(el));
-
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <aside className="hidden lg:block w-48 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
-      <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
-        Verses
-      </h2>
-      <nav className="grid grid-cols-3 gap-0.5">
-        {verses.map((v) => (
-          <a
-            key={v.verse}
-            href={`#verse-${v.verse}`}
-            className={`px-2 py-1 rounded-md text-sm text-center transition-colors ${
-              activeVerse === v.verse
-                ? "bg-primary/10 text-primary font-medium"
-                : "text-muted-foreground hover:bg-muted hover:text-foreground"
-            }`}
-          >
-            {v.verse_end ? `${v.verse}–${v.verse_end}` : v.verse}
-          </a>
-        ))}
-      </nav>
-    </aside>
-  );
-}

app/books/cc/[lila]/page.tsx

@@ -1,10 +1,9 @@
-import fs from "fs";
-import path from "path";
 import Link from "next/link";
 import { PageHeader } from "@/components/page-header";
 import { notFound } from "next/navigation";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../../extracted-verse-count";
+import { getBookMeta } from "@/lib/api";
 
 type ChapterInfo = {
   number: number;
@@ -20,28 +19,17 @@ type LilaInfo = {
   chapters: ChapterInfo[];
 };
 
-type Intro = {
-  book: string;
-  title: string;
-  author: string;
-  totalLilas: number;
-  lilas: LilaInfo[];
-};
-
-function getIntro(): Intro {
-  const introPath = path.join(process.cwd(), "app/lib/books/cc/intro.json");
-  return JSON.parse(fs.readFileSync(introPath, "utf-8"));
-}
-
 export default async function LilaPage({
   params,
 }: {
   params: Promise<{ lila: string }>;
 }) {
   const { lila } = await params;
-  const intro = getIntro();
+  const meta = await getBookMeta("cc");
+  if (!meta) notFound();
 
-  const lilaInfo = intro.lilas.find((l) => l.key === lila);
+  const lilas = meta.lilas as LilaInfo[];
+  const lilaInfo = lilas.find((l) => l.key === lila);
   if (!lilaInfo) notFound();
 
   const totalVerses = lilaInfo.chapters.reduce(

app/books/cc/page.tsx

@@ -1,6 +1,5 @@
-import fs from "fs";
-import path from "path";
 import Link from "next/link";
+import { getBookMeta } from "@/lib/api";
 import { PageHeader } from "@/components/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -20,17 +19,19 @@ type LilaInfo = {
   chapters: ChapterInfo[];
 };
 
-type Intro = {
-  book: string;
-  title: string;
-  author: string;
-  totalLilas: number;
-  lilas: LilaInfo[];
-};
+export default async function CcPage() {
+  const meta = await getBookMeta("cc");
+  if (!meta) {
+    return (
+      <div className="p-8 text-center text-muted-foreground">
+        Book metadata not found.
+      </div>
+    );
+  }
 
-export default function CcPage() {
-  const introPath = path.join(process.cwd(), "app/lib/books/cc/intro.json");
-  const intro: Intro = JSON.parse(fs.readFileSync(introPath, "utf-8"));
+  const lilas = meta.lilas as LilaInfo[];
+  const title = meta.title as string;
+  const author = meta.author as string;
 
   return (
     <div className="min-h-screen bg-background">
@@ -41,16 +42,14 @@ export default function CcPage() {
         >
           &larr; Books
         </Link>
-        <h1 className="mt-3 text-3xl font-bold text-foreground">
-          {intro.title}
-        </h1>
-        <p className="mt-1 text-muted-foreground">{intro.author}</p>
+        <h1 className="mt-3 text-3xl font-bold text-foreground">{title}</h1>
+        <p className="mt-1 text-muted-foreground">{author}</p>
       </PageHeader>
       <main className="max-w-3xl mx-auto px-6 py-8">
         <Card className="divide-y divide-border">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">
-              {intro.lilas.map((lila) => {
+              {lilas.map((lila) => {
                 const totalVerses = lila.chapters.reduce(
                   (sum, ch) => sum + ch.totalVerses,
                   0,