spsays-training/app/books/bg/[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 = {
  chapter: number;
  verse: number;
  reference: string;
  devanagari: string;
  transliteration: string;
  synonyms: Synonym[];
  translation: string;
  purport: string[];
};

function getChapterVerses(chapter: string): Verse[] {
  const dir = path.join(
    process.cwd(),
    "app/lib/books/bg/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 getChapterTitle(chapter: string): string | null {
  const introPath = path.join(
    process.cwd(),
    "app/lib/books/bg/intro.json"
  );
  const intro = JSON.parse(fs.readFileSync(introPath, "utf-8"));
  const ch = intro.chapters.find(
    (c: { number: number }) => c.number === parseInt(chapter)
  );
  return ch?.title || null;
}

export default async function ChapterPage({
  params,
}: {
  params: Promise<{ chapter: string }>;
}) {
  const { chapter } = await params;
  const title = getChapterTitle(chapter);
  if (!title) notFound();

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

  const verseList = verses.map((v) => ({
    verse: v.verse,
    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/bg"
            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
          >
            &larr; Bhagavad-gītā
          </Link>
          <h1 className="mt-2 text-2xl font-bold text-zinc-900 dark:text-zinc-100">
            Chapter {chapter}: {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>
  );
}