"use client";

import { useRouter } from "next/navigation";
import { useCallback, useMemo, useEffect, useState } from "react";
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
import { JsonLd } from "@/components/seo/json-ld";
import { articleJsonLd } from "@/lib/jsonld";
import { BOOK_NAMES } from "@/lib/constants";

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

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

type Verse = {
  id: string;
  book: string;
  division: string | null;
  chapter: number;
  verse: number;
  verseEnd: number | null;
  reference: string;
  bookTitle: string;
  devanagari: string;
  bengali: string | null;
  transliteration: string;
  synonyms: Synonym[];
  translation: string;
  purport: string[];
};

type VerseIndexEntry = {
  verse: number;
  verseEnd?: number;
  reference: string;
};

// ---------------------------------------------------------------------------
// Props
// ---------------------------------------------------------------------------

type ChapterViewerProps = {
  /** The first verse (SSR'd), shown before any client-side fetch */
  initialVerse: Verse;
  /** The verse number of the initial verse */
  initialVerseNum: number;
  /** Lightweight index of ALL verses in the chapter (for the sidebar) */
  verseIndex: VerseIndexEntry[];
  /** Book key */
  book: string;
  /** Division: null for BG, canto string for SB, lila key for CC */
  division: string | null;
  /** Chapter number */
  chapter: number;
  /** Whether to show the Bengali script field (CC only) */
  showBengali?: boolean;
  /** Base path for verse URLs, e.g. "/books/bg/1" — verse number is appended */
  basePath: string;
  /** Mobile nav groups for the drawer */
  mobileNavGroups?: MobileNavGroup[];
  /** Book title for the mobile nav drawer header */
  mobileNavBookTitle?: string;
};

// ---------------------------------------------------------------------------
// Navigation buttons (reused at top and bottom)
// ---------------------------------------------------------------------------

function VerseNav({
  currentIdx,
  total,
  onPrev,
  onNext,
  verseIndex,
  mobileNavGroups,
  currentVerseSlug,
  mobileNavBookTitle,
}: {
  currentIdx: number;
  total: number;
  onPrev: () => void;
  onNext: () => void;
  verseIndex: VerseIndexEntry[];
  mobileNavGroups?: MobileNavGroup[];
  currentVerseSlug?: string;
  mobileNavBookTitle?: string;
}) {
  const hasPrev = currentIdx > 0;
  const hasNext = currentIdx < total - 1;
  const current = verseIndex[currentIdx];
  const label = current
    ? current.verseEnd
      ? `${current.verse}–${current.verseEnd}`
      : String(current.verse)
    : "";

  return (
    <div className="flex items-center justify-between gap-3">
      <div className="flex items-center gap-2">
        {mobileNavGroups && mobileNavGroups.length > 0 && (
          <MobileNav
            groups={mobileNavGroups}
            currentSlug={currentVerseSlug ?? String(current?.verse ?? "")}
            bookTitle={mobileNavBookTitle}
          />
        )}
        <Button
          variant="outline"
          size="sm"
          disabled={!hasPrev}
          onClick={onPrev}
          className="gap-1.5"
        >
          <ChevronLeft className="size-4" />
          <span className="hidden sm:inline">Previous</span>
        </Button>
      </div>

      <span className="text-sm text-muted-foreground">
        Verse {label} of {total}
      </span>

      <Button
        variant="outline"
        size="sm"
        disabled={!hasNext}
        onClick={onNext}
        className="gap-1.5"
      >
        <span className="hidden sm:inline">Next</span>
        <ChevronRight className="size-4" />
      </Button>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Verse card
// ---------------------------------------------------------------------------

function VerseCard({
  verse,
  showBengali,
}: {
  verse: Verse;
  showBengali: boolean;
}) {
  return (
    <Card id={`verse-${verse.verse}`} className="">
      <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 (CC only) */}
        {showBengali && 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-white 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-sm font-bold uppercase tracking-wider text-muted-foreground mb-2">
              Synonyms
            </h3>
            <p className="text-base text-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-sm 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-sm font-bold uppercase tracking-wider text-muted-foreground mb-2">
              Purport
            </h3>
            <div className="text-base text-foreground leading-relaxed space-y-3">
              {verse.purport.map((p, i) =>
                // Cited ślokas come wrapped in <blockquote class="shloka"> — a
                // block element that can't live inside a <p>, so render those
                // in a <div> (styled centered + accent via globals.css); plain
                // prose paragraphs stay as <p>.
                /^\s*<blockquote/i.test(p) ? (
                  <div key={i} dangerouslySetInnerHTML={{ __html: p }} />
                ) : (
                  <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
                ),
              )}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// ---------------------------------------------------------------------------
// ChapterViewer
// ---------------------------------------------------------------------------

export function ChapterViewer({
  initialVerse,
  initialVerseNum,
  verseIndex,
  book,
  division,
  chapter,
  showBengali = false,
  basePath,
  mobileNavGroups,
  mobileNavBookTitle,
}: ChapterViewerProps) {
  const router = useRouter();

  // Verse cache: verseNum → Verse data
  const [cache, setCache] = useState<Map<number, Verse>>(() => {
    const map = new Map<number, Verse>();
    map.set(initialVerseNum, initialVerse);
    return map;
  });

  const [loading, setLoading] = useState(false);

  // Current verse number — driven by the initialVerseNum from the server
  // (which reads it from the [verse] path param)
  const currentVerseNum = initialVerseNum;

  // Current index in the verseIndex array
  const currentIdx = useMemo(
    () => verseIndex.findIndex((v) => v.verse === currentVerseNum),
    [verseIndex, currentVerseNum],
  );

  // The verse data to display
  const currentVerse = cache.get(currentVerseNum) ?? null;

  // Reset cache when route changes to a different chapter
  useEffect(() => {
    const map = new Map<number, Verse>();
    map.set(initialVerseNum, initialVerse);
    setCache(map);
  }, [initialVerse, initialVerseNum]);

  // Fetch a verse if it's not in the cache
  const fetchVerse = useCallback(
    async (verseNum: number) => {
      if (cache.has(verseNum)) return cache.get(verseNum)!;

      setLoading(true);

      const params = new URLSearchParams({
        chapter: String(chapter),
        verse: String(verseNum),
      });
      if (division !== null) {
        params.set("division", division);
      }

      try {
        const res = await fetch(`/api/books/${book}/verses?${params}`);
        if (!res.ok) throw new Error(`API error: ${res.status}`);
        const data = await res.json();

        // The API returns the verse in a paginated wrapper or an array
        const verse: Verse | undefined = Array.isArray(data.verses)
          ? data.verses[0]
          : Array.isArray(data)
            ? data[0]
            : undefined;

        if (verse) {
          setCache((prev) => {
            const next = new Map(prev);
            next.set(verseNum, verse);
            return next;
          });
          return verse;
        }
      } catch (err) {
        console.error("Failed to fetch verse:", err);
      } finally {
        setLoading(false);
      }

      return null;
    },
    [cache, book, division, chapter],
  );

  // Navigate to a verse — update the URL path and fetch if needed
  const navigateTo = useCallback(
    async (verseNum: number) => {
      // Prefetch the verse data before navigating
      if (!cache.has(verseNum)) {
        await fetchVerse(verseNum);
      }

      // Navigate to the new path-based URL
      router.push(`${basePath}/${verseNum}`, { scroll: false });

      // Scroll to top of the verse
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    [basePath, router, cache, fetchVerse],
  );

  // Fetch current verse on mount/URL change if not cached
  useEffect(() => {
    if (!cache.has(currentVerseNum)) {
      fetchVerse(currentVerseNum);
    }
  }, [currentVerseNum, cache, fetchVerse]);

  // Prefetch adjacent verses
  useEffect(() => {
    if (currentIdx > 0) {
      const prevNum = verseIndex[currentIdx - 1].verse;
      if (!cache.has(prevNum)) fetchVerse(prevNum);
    }
    if (currentIdx < verseIndex.length - 1) {
      const nextNum = verseIndex[currentIdx + 1].verse;
      if (!cache.has(nextNum)) fetchVerse(nextNum);
    }
  }, [currentIdx, verseIndex, cache, fetchVerse]);

  // Keyboard navigation
  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (
        e.target instanceof HTMLInputElement ||
        e.target instanceof HTMLTextAreaElement
      )
        return;

      if (e.key === "ArrowLeft" && currentIdx > 0) {
        e.preventDefault();
        navigateTo(verseIndex[currentIdx - 1].verse);
      } else if (e.key === "ArrowRight" && currentIdx < verseIndex.length - 1) {
        e.preventDefault();
        navigateTo(verseIndex[currentIdx + 1].verse);
      }
    };

    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [currentIdx, verseIndex, navigateTo]);

  const goPrev = useCallback(() => {
    if (currentIdx > 0) navigateTo(verseIndex[currentIdx - 1].verse);
  }, [currentIdx, verseIndex, navigateTo]);

  const goNext = useCallback(() => {
    if (currentIdx < verseIndex.length - 1)
      navigateTo(verseIndex[currentIdx + 1].verse);
  }, [currentIdx, verseIndex, navigateTo]);

  return (
    <>
      {/* Structured data for the currently-shown verse (SSR'd for the initial
          verse, updates on client navigation). */}
      {currentVerse ? (
        <JsonLd
          data={articleJsonLd({
            path: `${basePath}/${currentVerseNum}`,
            headline: `${BOOK_NAMES[book] ?? book} ${currentVerse.reference}`,
            description: currentVerse.translation,
            isPartOf: BOOK_NAMES[book] ?? book,
          })}
        />
      ) : null}

      {/* ---- Sidebar: Verse Index ---- */}
      {/* Sticky sidebar. The max-h leaves 76px at the viewport bottom for
          the site footer so the sidebar doesn't slide behind it when the
          page is scrolled to the bottom. (89 sticky-top + 76 bottom gap
          = 165, hence calc(100vh - 165px).) */}
      <aside className="hidden lg:block w-64 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-165px)] overflow-y-auto py-8 pr-4">
        <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
          Verses
        </h2>
        <nav className="grid grid-cols-3 gap-1">
          {verseIndex.map((v) => {
            const isActive = currentVerseNum === v.verse;
            const label = v.verseEnd
              ? `${v.verse}–${v.verseEnd}`
              : String(v.verse);

            return (
              <a
                key={v.verse}
                href={`${basePath}/${v.verse}`}
                onClick={(e) => {
                  e.preventDefault();
                  navigateTo(v.verse);
                }}
                className={`px-2 py-1 rounded-md text-sm tabular-nums transition-colors ${
                  isActive
                    ? "bg-primary/10 text-primary font-medium"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground"
                }`}
              >
                {label}
              </a>
            );
          })}
        </nav>
      </aside>

      {/* ---- Main: Single Verse ---- */}
      <main className="flex-1 min-w-0 px-6 py-8 space-y-6">
        {/* Top navigation */}
        <VerseNav
          currentIdx={currentIdx}
          total={verseIndex.length}
          onPrev={goPrev}
          onNext={goNext}
          verseIndex={verseIndex}
          mobileNavGroups={mobileNavGroups}
          currentVerseSlug={String(currentVerseNum)}
          mobileNavBookTitle={mobileNavBookTitle}
        />

        {/* Verse content — id targeted by each page header's FindInPage. */}
        <div id="book-content">
        {loading && !currentVerse ? (
          <div className="flex items-center justify-center py-24 text-muted-foreground gap-2">
            <Loader2 className="size-5 animate-spin" />
            <span>Loading verse…</span>
          </div>
        ) : currentVerse ? (
          <VerseCard verse={currentVerse} showBengali={showBengali} />
        ) : (
          <div className="text-center py-24 text-muted-foreground">
            Verse not found.
          </div>
        )}
        </div>

        {/* Bottom navigation */}
        <VerseNav
          currentIdx={currentIdx}
          total={verseIndex.length}
          onPrev={goPrev}
          onNext={goNext}
          verseIndex={verseIndex}
          mobileNavGroups={mobileNavGroups}
          currentVerseSlug={String(currentVerseNum)}
          mobileNavBookTitle={mobileNavBookTitle}
        />
      </main>
    </>
  );
}