'use client'

import { FC } from 'react'
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { ArrowLeft2, ArrowRight2 } from 'iconsax-react'
import { Pager } from '@/types/products.types'

type PaginationProps = {
    pager?: Pager
}

const Pagination: FC<PaginationProps> = ({ pager }) => {
    const router = useRouter()
    const pathname = usePathname()
    const searchParams = useSearchParams()

    if (!pager || pager.totalPages <= 1) {
        return null
    }

    const handlePageChange = (page: number) => {
        const params = new URLSearchParams(searchParams.toString())
        params.set('page', page.toString())
        router.push(`${pathname}?${params.toString()}`)
    }

    const generatePageNumbers = () => {
        const pages = []
        const currentPage = pager.page
        const totalPages = pager.totalPages
        const maxVisiblePages = 5

        if (totalPages <= maxVisiblePages) {
            for (let i = 1; i <= totalPages; i++) {
                pages.push(i)
            }
        } else {
            if (currentPage <= 3) {
                for (let i = 1; i <= 4; i++) {
                    pages.push(i)
                }
                pages.push('...')
                pages.push(totalPages)
            } else if (currentPage >= totalPages - 2) {
                pages.push(1)
                pages.push('...')
                for (let i = totalPages - 3; i <= totalPages; i++) {
                    pages.push(i)
                }
            } else {
                pages.push(1)
                pages.push('...')
                for (let i = currentPage - 1; i <= currentPage + 1; i++) {
                    pages.push(i)
                }
                pages.push('...')
                pages.push(totalPages)
            }
        }

        return pages
    }

    const pageNumbers = generatePageNumbers()

    return (
        <div className="flex justify-center items-center gap-2 mt-8">
            {/* Previous Button */}
            <Button
                variant="outline"
                size="sm"
                onClick={() => handlePageChange(pager.page - 1)}
                disabled={!pager.prevPage}
                className="flex items-center gap-1"
            >
                <ArrowRight2 size={16} />
                قبلی
            </Button>

            {/* Page Numbers */}
            <div className="flex gap-1">
                {pageNumbers.map((page, index) => (
                    <div key={index}>
                        {page === '...' ? (
                            <span className="px-3 py-2 text-gray-500">...</span>
                        ) : (
                            <Button
                                variant={page === pager.page ? "default" : "outline"}
                                size="sm"
                                onClick={() => handlePageChange(page as number)}
                                className="min-w-[40px]"
                            >
                                {page}
                            </Button>
                        )}
                    </div>
                ))}
            </div>

            {/* Next Button */}
            <Button
                variant="outline"
                size="sm"
                onClick={() => handlePageChange(pager.page + 1)}
                disabled={!pager.nextPage}
                className="flex items-center gap-1"
            >
                بعدی
                <ArrowLeft2 size={16} />
            </Button>
        </div>
    )
}

export default Pagination
