"use client";

import { useEffect, useState, useRef, useCallback } from "react";
import ResourceCard from "./ResourceCard";
import ResourceCardSkeleton from "./ResourceCardSkeleton";
import { Book } from "@/lib/schemas/books";

type PaginatedBookListProps = {
  books: Book[];
};

// Assuming 4 items per row, 4 rows = 16 items
const ITEMS_PER_PAGE = 16;

export default function PaginatedBookList({ books }: PaginatedBookListProps) {
  const [displayedCount, setDisplayedCount] = useState(ITEMS_PER_PAGE);
  const [isLoading, setIsLoading] = useState(false);
  
  const observerTarget = useRef<HTMLDivElement>(null);
  const hasMore = displayedCount < books.length;

  const loadMore = useCallback(() => {
    if (isLoading || !hasMore) return;
    
    setIsLoading(true);
    // Simulate network delay to show the lazy loading UI with skeletons
    setTimeout(() => {
      setDisplayedCount((prev) => Math.min(prev + ITEMS_PER_PAGE, books.length));
      setIsLoading(false);
    }, 800);
  }, [isLoading, hasMore, books.length]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasMore && !isLoading) {
          loadMore();
        }
      },
      { threshold: 0.1 }
    );

    if (observerTarget.current) {
      observer.observe(observerTarget.current);
    }

    return () => observer.disconnect();
  }, [hasMore, isLoading, loadMore]);

  // Reset pagination when books change (e.g., due to a new search query)
  useEffect(() => {
    setDisplayedCount(ITEMS_PER_PAGE);
  }, [books]);

  return (
    <>
      <ul className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-4 px-6 py-8 max-w-7xl mx-auto">
        {books.slice(0, displayedCount).map((book) => (
          <li key={book.id}>
            <ResourceCard book={book} />
          </li>
        ))}
        
        {/* Loading Skeletons */}
        {isLoading &&
          Array.from({ length: Math.min(ITEMS_PER_PAGE, books.length - displayedCount) }).map((_, i) => (
            <li key={`skeleton-${i}`}>
              <ResourceCardSkeleton />
            </li>
          ))}
      </ul>
      
      {/* Intersection Observer Target */}
      {hasMore && (
        <div ref={observerTarget} className="h-10 w-full" aria-hidden="true" />
      )}
    </>
  );
}