spsays-training/app/books/sb/[canto]/[chapter]/page.tsx

import fs from "fs";
import path from "path";
import Link from "next/link";
import { notFound } from "next/navigation";
import { VerseIndex } from "./verse-index";

type Synonym = {
  word: string;
  meanings: string[];
};

type Verse = {
  book_title: string;
  canto: number;
  chapter: number;
  verse: number;
  verse_end?: number | null;
  reference: string;
  devanagari: string;
  transliteration: string;
  synonyms: Synonym[];
  translation: string;
  purport: string[];
};

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

type CantoInfo = {
  number: number;
  title: string;
  totalChapters: number;
  chapters: ChapterInfo[];
};

type Intro = {
  book: string;
  title: string;
  author: string;
  totalCantos: number;
  cantos: CantoInfo[];
};

function getChapterVerses(canto: string, chapter: string): Verse[] {
  const dir = path.join(
    process.cwd(),
    "app/lib/books/sb/cantos",
    canto.padStart(2, "0"),
    "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 getCantoAndChapterInfo(
  canto: string,
  chapter: string,
): { cantoInfo: CantoInfo; chapterInfo: ChapterInfo } | null {
  const introPath = path.join(process.cwd(), "app/lib/books/sb/intro.json");
  const intro: Intro = JSON.parse(fs.readFileSync(introPath, "utf-8"));
  const cantoInfo = intro.cantos.find(
    (c) => c.number === parseInt(canto),
  );
  if (!cantoInfo) return null;
  const chapterInfo = cantoInfo.chapters.find(
    (ch) => ch.number === parseInt(chapter),
  );
  if (!chapterInfo) return null;
  return { cantoInfo, chapterInfo };
}

export default async function SbChapterPage({
  params,
}: {
  params: Promise<{ canto: string; chapter: string }>;
}) {
  const { canto, chapter } = await params;
  const info = getCantoAndChapterInfo(canto, chapter);
  if (!info) notFound();

  const { cantoInfo, chapterInfo } = info;

  const verses = getChapterVerses(canto, 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-amber-50 dark:bg-zinc-950">
      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-6 sticky top-0 z-20">
        <div className="max-w-5xl mx-auto">
          <Link
            href={`/books/sb/${canto}`}
            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
          >
            &larr; Canto {cantoInfo.number}: {cantoInfo.title}
          </Link>
          <h1 className="mt-2 text-2xl font-bold text-zinc-900 dark:text-zinc-100">
            Chapter {chapter}: {chapterInfo.title}
          </h1>
        </div>
      </header>

      <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) => (
            <article
              key={verse.reference}
              id={`verse-${verse.verse}`}
              className="bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden scroll-mt-24"
            >
              {/* Header */}
              <div className="px-6 py-3 bg-amber-100 dark:bg-zinc-800 border-b border-amber-200 dark:border-zinc-700">
                <span className="text-sm font-semibold text-amber-700 dark:text-amber-400">
                  {verse.reference}
                </span>
              </div>

              <div className="px-6 py-5 space-y-5">
                {/* 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-zinc-700 dark:text-zinc-300 whitespace-pre-line">
                    {verse.transliteration}
                  </p>
                </div>

                {/* Synonyms */}
                {verse.synonyms.length > 0 && (
                  <div>
                    <h3 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-2">
                      Synonyms
                    </h3>
                    <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
                      {verse.synonyms.map((s, i) => (
                        <span key={i}>
                          <span className="italic text-zinc-800 dark:text-zinc-200">
                            {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-amber-600 dark:text-amber-500 mb-2">
                    Translation
                  </h3>
                  <p
                    className="text-base text-zinc-900 dark:text-zinc-100 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-amber-600 dark:text-amber-500 mb-2">
                      Purport
                    </h3>
                    <div className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed space-y-3">
                      {verse.purport.map((p, i) => (
                        <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </article>
          ))}
        </main>
      </div>
    </div>
  );
}