
import { ChevronLeft, ChevronRight } from 'lucide-react';

interface PaginationProps {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
}

/**
 * Pagination component
 * @description Displays pagination controls with page numbers and navigation arrows
 * @param props - Component props
 * @returns Pagination element
 */
export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
    /**
     * Generate page numbers to display
     * @returns Array of page numbers and ellipsis markers
     */
    const getPageNumbers = (): (number | 'ellipsis')[] => {
        const pages: (number | 'ellipsis')[] = [];
        const maxVisible = 8;

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

            if (currentPage <= 3) {
                // Near the beginning: show 1, 2, 3, ..., last
                pages.push(2, 3);
                if (totalPages > 4) {
                    pages.push('ellipsis');
                }
                pages.push(totalPages);
            } else if (currentPage >= totalPages - 2) {
                // Near the end: show 1, ..., last-2, last-1, last
                pages.push('ellipsis');
                pages.push(totalPages - 2, totalPages - 1, totalPages);
            } else {
                // In the middle: show 1, ..., current-1, current, current+1, ..., last
                pages.push('ellipsis');
                pages.push(currentPage - 1, currentPage, currentPage + 1);
                if (currentPage + 1 < totalPages - 1) {
                    pages.push('ellipsis');
                }
                pages.push(totalPages);
            }
        }

        return pages;
    };

    /**
     * Handle previous page navigation
     */
    const handlePrevious = () => {
        if (currentPage > 1) {
            onPageChange(currentPage - 1);
        }
    };

    /**
     * Handle next page navigation
     */
    const handleNext = () => {
        if (currentPage < totalPages) {
            onPageChange(currentPage + 1);
        }
    };

    /**
     * Handle page number click
     * @param page - Page number to navigate to
     */
    const handlePageClick = (page: number) => {
        if (page !== currentPage && page >= 1 && page <= totalPages) {
            onPageChange(page);
        }
    };

    const pageNumbers = getPageNumbers();
    const isFirstPage = currentPage === 1;
    const isLastPage = currentPage === totalPages;

    return (
        <div className="flex gap-2 md:gap-3 items-center justify-end rounded-[6px]">
            {/* Previous Button */}
            <button
                onClick={handlePrevious}
                disabled={isFirstPage}
                className={`w-11 h-11 md:w-9 md:h-9 rounded-[6px] flex items-center justify-center transition-colors min-h-[44px] min-w-[44px] md:min-h-9 md:min-w-9 ${
                    isFirstPage
                        ? 'bg-white border border-[#e1e4ef] cursor-not-allowed opacity-60'
                        : 'bg-white border border-[#e1e4ef] hover:bg-gray-50 cursor-pointer'
                }`}
                aria-label="Previous page"
            >
                <ChevronLeft className="w-4 h-4 text-[#4A4F5C]" />
            </button>

            {/* Page Numbers */}
            {pageNumbers.map((page, index) => {
                if (page === 'ellipsis') {
                    return (
                        <div
                            key={`ellipsis-${index}`}
                            className="w-11 h-11 md:w-9 md:h-9 rounded-[6px] bg-white border border-[rgba(0,51,255,0.25)] flex items-center justify-center min-h-[44px] min-w-[44px] md:min-h-9 md:min-w-9"
                        >
                            <span className="text-[0.75rem] md:text-[0.75rem] font-black text-[#03f] tracking-[1.44px] leading-none">
                                ...
                            </span>
                        </div>
                    );
                }

                const isActive = page === currentPage;

                return (
                    <button
                        key={page}
                        onClick={() => handlePageClick(page)}
                        className={`w-11 h-11 md:w-9 md:h-9 rounded-[6px] flex items-center justify-center transition-colors min-h-[44px] min-w-[44px] md:min-h-9 md:min-w-9 ${
                            isActive
                                ? 'bg-[#03f] border border-[#03f]'
                                : 'bg-white border border-[rgba(0,51,255,0.25)] hover:bg-[#F5F8FF]'
                        }`}
                        aria-label={`Go to page ${page}`}
                        aria-current={isActive ? 'page' : undefined}
                    >
                        <span
                            className={`text-[0.875rem] md:text-[0.75rem] font-medium leading-none ${
                                isActive ? 'text-white' : 'text-[#03f]'
                            }`}
                        >
                            {page}
                        </span>
                    </button>
                );
            })}

            {/* Next Button */}
            <button
                onClick={handleNext}
                disabled={isLastPage}
                className={`w-11 h-11 md:w-9 md:h-9 rounded-[6px] flex items-center justify-center transition-colors min-h-[44px] min-w-[44px] md:min-h-9 md:min-w-9 ${
                    isLastPage
                        ? 'bg-white border border-[#e1e4ef] cursor-not-allowed opacity-60'
                        : 'bg-white border border-[#e1e4ef] hover:bg-gray-50 cursor-pointer'
                }`}
                aria-label="Next page"
            >
                <ChevronRight className="w-4 h-4 text-[#4A4F5C]" />
            </button>
        </div>
    );
}

