spsays-training/app/books/cc/[lila]/[chapter]/page.tsx

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[];
};

type ChapterInfo = {
  number: number;
  title: string;
  totalVerses: number;
};

type LilaInfo = {
  key: string;
  name: string;
  totalChapters: number;
  totalVerses: number;
  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 { lilaInfo, chapterInfo } = info;

  const verses = getChapterVerses(lila, chapter);
  if (verses.length === 0) notFound();

  const verseList = verses.map((v) => ({
    verse: v.verse,
    verse_end: v.verse_end ?? undefined,
    reference: v.reference,
  }));

  return (
    <div className="min-h-screen bg-background">
      <PageHeader sticky wide>
        <Link
          href={`/books/cc/${lila}`}
          className="text-sm text-muted-foreground hover:text-foreground"
        >
          &larr; {lilaInfo.name}
        </Link>
        <h1 className="mt-2 text-2xl font-bold text-foreground">
          Chapter {chapter}: {chapterInfo.title}
        </h1>
      </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>
      </div>
    </div>
  );
}