import React from "react";

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

const Pagination: React.FC<PaginationProps> = ({
    currentPage,
    totalPages,
    onPageChange,
}) => {
    const getPageNumbers = () => {
        const pageNumbers: (number | string)[] = [];
        const maxVisiblePages = 5;

        if (totalPages <= maxVisiblePages) {
            // اگر تعداد صفحات کم است، همه را نشان بده
            for (let i = 1; i <= totalPages; i++) {
                pageNumbers.push(i);
            }
        } else {
            // همیشه صفحه اول را نشان بده
            pageNumbers.push(1);

            if (currentPage <= 3) {
                // در صفحات اولیه (1, 2, 3)
                for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
                    pageNumbers.push(i);
                }
                if (totalPages > 5) {
                    pageNumbers.push("...");
                }
                pageNumbers.push(totalPages);
            } else if (currentPage >= totalPages - 2) {
                // در صفحات آخر
                pageNumbers.push("...");
                for (let i = totalPages - 3; i <= totalPages; i++) {
                    pageNumbers.push(i);
                }
            } else {
                // در صفحات وسط
                pageNumbers.push("...");
                for (let i = currentPage - 1; i <= currentPage + 1; i++) {
                    pageNumbers.push(i);
                }
                pageNumbers.push("...");
                pageNumbers.push(totalPages);
            }
        }

        return pageNumbers;
    };

    const pageNumbers = getPageNumbers();

    return (
        <div className="flex gap-2 text-xs justify-center items-center mt-4">
            {/* دکمه قبلی */}
            {/* <button
                className={`px-3 py-1 rounded-md ${currentPage === 1
                        ? "text-gray-400 cursor-not-allowed"
                        : "text-blue-600 hover:bg-gray-100"
                    }`}
                onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
                disabled={currentPage === 1}
            >
                قبلی
            </button> */}

            {/* شماره صفحات */}
            {pageNumbers.map((page, index) =>
                typeof page === "number" ? (
                    <button
                        key={`page-${page}`}
                        className={`size-8 rounded-md ${currentPage === page
                            ? "bg-primary text-white"
                            : "text-primary bg-[#EAECF5] hover:bg-gray-100"
                            }`}
                        onClick={() => onPageChange(page)}
                    >
                        {page}
                    </button>
                ) : (
                    <span key={`ellipsis-${index}`} className="px-3 py-1 text-gray-500">
                        {page}
                    </span>
                )
            )}

            {/* دکمه بعدی */}
            {/* <button
                className={`px-3 py-1 rounded-md ${currentPage === totalPages
                        ? "text-gray-400 cursor-not-allowed"
                        : "text-blue-600 hover:bg-gray-100"
                    }`}
                onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
                disabled={currentPage === totalPages}
            >
                بعدی
            </button> */}
        </div>
    );
};

export default Pagination;