reader/components/reader-toc.tsx

"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetDescription } from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { List, Loader2, ChevronLeft, ChevronRight } from "lucide-react"

interface ReaderTOCProps {
  novelId: string
  novelSlug: string
  currentChapterNumber: number
}

interface TOCChapter {
  id: string
  number: number
  title: string
}

export function ReaderTOC({ novelId, novelSlug, currentChapterNumber }: ReaderTOCProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [chapters, setChapters] = useState<TOCChapter[]>([])
  const [loading, setLoading] = useState(false)
  const [currentPage, setCurrentPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)

  // Each page will fetch 100 chapters to make scrolling efficient
  const ITEMS_PER_PAGE = 100

  // Calculate the initial page where the current chapter belongs
  useEffect(() => {
    const initialPage = Math.ceil(currentChapterNumber / ITEMS_PER_PAGE)
    setCurrentPage(initialPage || 1)
  }, [currentChapterNumber])

  // Fetch chapters when page changes and TOC is open
  useEffect(() => {
    if (!isOpen) return

    const fetchChapters = async () => {
      setLoading(true)
      try {
        const res = await fetch(`/api/truyen/${novelId}/chapters?page=${currentPage}&limit=${ITEMS_PER_PAGE}`)
        if (res.ok) {
          const data = await res.json()
          setChapters(data.chapters)
          setTotalPages(data.totalPages)
        }
      } catch (error) {
        console.error("Failed to load chapters for TOC", error)
      } finally {
        setLoading(false)
      }
    }

    fetchChapters()
  }, [isOpen, currentPage, novelId])

  // Optional: Auto-scroll to the current chapter on initial load
  useEffect(() => {
    if (!loading && isOpen && chapters.length > 0) {
      setTimeout(() => {
        const activeItem = document.getElementById(`toc-chap-${currentChapterNumber}`)
        if (activeItem) {
          activeItem.scrollIntoView({ behavior: 'smooth', block: 'center' })
        }
      }, 100)
    }
  }, [loading, isOpen, chapters, currentChapterNumber])


  return (
    <Sheet open={isOpen} onOpenChange={setIsOpen}>
      <SheetTrigger asChild>
        <Button
          variant="secondary"
          size="icon"
          className="h-12 w-12 rounded-full shadow-md relative group"
        >
          <List className="h-5 w-5" />
          <span className="absolute right-full mr-3 whitespace-nowrap rounded bg-foreground/90 px-2 py-1 text-xs text-background opacity-0 transition-opacity group-hover:opacity-100">
            Mục lục
          </span>
        </Button>
      </SheetTrigger>

      <SheetContent side="left" className="w-[300px] sm:w-[350px] flex flex-col p-4">
        <SheetHeader className="pb-4 border-b">
          <SheetTitle>Mục lục chương</SheetTitle>
          <SheetDescription className="sr-only">Danh sách mục lục chương được liệt kê theo danh sách để điều hướng thuận tiện</SheetDescription>
        </SheetHeader>

        <div className="flex-1 overflow-y-auto custom-scrollbar -mx-4 px-4 py-2 space-y-1 relative">
          {loading ? (
            <div className="absolute inset-0 flex items-center justify-center bg-background/50">
              <Loader2 className="h-6 w-6 animate-spin text-primary" />
            </div>
          ) : (
            chapters.map((chap) => {
              const isActive = chap.number === currentChapterNumber
              return (
                <Link
                  key={chap.id}
                  id={`toc-chap-${chap.number}`}
                  href={`/truyen/${novelSlug}/${chap.number}`}
                  onClick={() => setIsOpen(false)}
                  className={`block px-3 py-2 text-sm rounded-md transition-colors ${
                    isActive 
                      ? 'bg-primary text-primary-foreground font-medium' 
                      : 'hover:bg-muted text-foreground/80'
                  }`}
                >
                  <span className={isActive ? "text-primary-foreground/90 font-bold mr-2 lg:mr-3" : "text-muted-foreground mr-2 lg:mr-3"}>
                    {chap.number}.
                  </span>
                  <span className="truncate inline-block align-bottom max-w-[80%]">{chap.title}</span>
                </Link>
              )
            })
          )}
        </div>

        {/* Pagination Details */}
        {totalPages > 1 && (
          <div className="pt-4 border-t flex items-center justify-between gap-2 mt-auto">
            <Button 
               variant="outline" 
               size="icon" 
               className="h-8 w-8"
               disabled={currentPage <= 1 || loading}
               onClick={() => setCurrentPage(p => p - 1)}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <span className="text-xs text-muted-foreground">
              Trang {currentPage} / {totalPages}
            </span>
            <Button 
               variant="outline" 
               size="icon" 
               className="h-8 w-8"
               disabled={currentPage >= totalPages || loading}
               onClick={() => setCurrentPage(p => p + 1)}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        )}
      </SheetContent>
    </Sheet>
  )
}