"use client";

import { useEffect, useState } from "react";
import { Pagination, PaginationContent, PaginationItem, PaginationEllipsis } from "@/components/ui/pagination";
import { Button } from "@/components/ui/button";

type PaginationProps = {
    currentPage: number;
    totalPages: number;
    onPageChange: (pageNum: number) => void
}
export default function PaginationComponent({currentPage, totalPages, onPageChange}: PaginationProps) {
  const [page, setPage] = useState(currentPage || 1);

  useEffect(() => {
    setPage(currentPage || 1);
  }, [currentPage]);

  const effectiveTotal = Math.max(1, totalPages || 1);

  const goTo = (next: number) => {
    const clamped = Math.min(Math.max(next, 1), effectiveTotal);
    if (clamped === page) return;
    setPage(clamped);
    onPageChange(clamped);
  };

  // Generate page numbers to display with ellipsis logic
  const getPageNumbers = () => {
    const pages = [];
    const maxVisible = 7; // Maximum number of page buttons to show

    if (totalPages <= maxVisible) {
      // Show all pages if total is small
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
      }
    } else {
      // Always show first page
      pages.push(1);

      if (page <= 3) {
        // Near the beginning
        for (let i = 2; i <= 4; i++) {
          pages.push(i);
        }
        pages.push('ellipsis-end');
        pages.push(totalPages);
      } else if (page >= totalPages - 2) {
        // Near the end
        pages.push('ellipsis-start');
        for (let i = totalPages - 3; i <= totalPages; i++) {
          pages.push(i);
        }
      } else {
        // In the middle
        pages.push('ellipsis-start');
        for (let i = page - 1; i <= page + 1; i++) {
          pages.push(i);
        }
        pages.push('ellipsis-end');
        pages.push(totalPages);
      }
    }

    return pages;
  };

  const pageNumbers = getPageNumbers();

  return (
    <div className="flex flex-row items-center gap-4 p-8 w-full justify-between">
      <div className="text-sm text-gray-600 w-2xl">
        Page {page} of {totalPages}
      </div>
      
      <Pagination>
        <PaginationContent>
          {/* Previous Button */}
          <PaginationItem>
            <Button
              variant="outline"
              size="sm"
              disabled={page === 1}
              onClick={() => goTo(page - 1)}
            >
              Previous
            </Button>
          </PaginationItem>

          {/* Page Numbers with Ellipsis */}
          {pageNumbers.map((pageNum, idx) => {
            if (pageNum === 'ellipsis-start' || pageNum === 'ellipsis-end') {
              return (
                <PaginationItem key={`ellipsis-${idx}`}>
                  <PaginationEllipsis />
                </PaginationItem>
              );
            }

            return (
              <PaginationItem key={pageNum}>
                <Button
                  variant={page === pageNum ? "primary" : "outline"}
                  size="sm"
                  onClick={() => goTo(Number(pageNum))}
                  className={page === pageNum ? "pointer-events-none" : ""}
                >
                  {pageNum}
                </Button>
              </PaginationItem>
            );
          })}

          {/* Next Button */}
          <PaginationItem>
            <Button
              variant="outline"
              size="sm"
              disabled={page >= effectiveTotal}
              onClick={() => goTo(page + 1)}
            >
              Next
            </Button>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  );
}