import fs from "fs";
import path from "path";
import Link from "next/link";
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-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-8">
        <div className="max-w-3xl mx-auto">
          <Link
            href="/"
            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
          >
            &larr; Home
          </Link>
          <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-100">
            Books
          </h1>
          <p className="mt-1 text-zinc-500 dark:text-zinc-400">
            Structured verse-by-verse editions with Devanagari, transliteration,
            synonyms, translation &amp; purports
          </p>
        </div>
      </header>

      <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 bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden hover:border-amber-400 dark:hover:border-zinc-600 hover:shadow-md transition-all"
            >
              <div className="px-6 py-5">
                <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">
                  {book.title}
                </h2>
                <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
                  {book.author}
                </p>
                <div className="mt-3 flex items-center gap-3 text-sm">
                  <span className="inline-flex items-center rounded-full bg-amber-100 dark:bg-zinc-800 px-3 py-0.5 text-amber-700 dark:text-amber-400 font-medium">
                    {book.description}
                  </span>
                  <ExtractedVerseCount
                    count={book.totalVerses}
                    label="extracted verses"
                    className="text-zinc-400 dark:text-zinc-500"
                  />
                </div>
              </div>
            </Link>
          ))}
        </div>
      </main>
    </div>
  );
}