import { FC } from 'react'
import { Button } from '@/components/ui/button'
import { ChevronLeft, ChevronRight } from 'lucide-react'

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

const Pagination: FC<PaginationProps> = ({
    currentPage,
    totalPages,
    totalItems,
    itemsPerPage,
    onPageChange
}) => {
    if (totalPages <= 1) return null

    const startItem = (currentPage - 1) * itemsPerPage + 1
    const endItem = Math.min(currentPage * itemsPerPage, totalItems)

    const getPageNumbers = () => {
        const pages = []
        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 <= 5; i++) {
                    pages.push(i)
                }
            } else if (currentPage >= totalPages - 2) {
                for (let i = totalPages - 4; i <= totalPages; i++) {
                    pages.push(i)
                }
            } else {
                for (let i = currentPage - 2; i <= currentPage + 2; i++) {
                    pages.push(i)
                }
            }
        }

        return pages
    }

    const pageNumbers = getPageNumbers()

    return (
        <div className='mt-8'>
            {/* Pagination Info */}
            <div className='text-center text-sm text-muted-foreground mb-4'>
                نمایش {startItem} تا {endItem} از {totalItems} مطلب
            </div>

            {/* Pagination Controls */}
            <div className='flex items-center justify-center gap-2'>
                <Button
                    variant="outline"
                    size="sm"
                    onClick={() => onPageChange(currentPage - 1)}
                    disabled={currentPage === 1}
                    className='flex items-center gap-1'
                >
                    <ChevronRight className='h-4 w-4' />
                    قبلی
                </Button>

                <div className='flex items-center gap-1'>
                    {/* First page */}
                    {currentPage > 3 && totalPages > 5 && (
                        <>
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => onPageChange(1)}
                                className='w-10 h-10'
                            >
                                1
                            </Button>
                            {currentPage > 4 && (
                                <span className='px-2 text-muted-foreground'>...</span>
                            )}
                        </>
                    )}

                    {/* Page numbers */}
                    {pageNumbers.map((pageNumber) => (
                        <Button
                            key={pageNumber}
                            variant={currentPage === pageNumber ? "default" : "outline"}
                            size="sm"
                            onClick={() => onPageChange(pageNumber)}
                            className='w-10 h-10'
                        >
                            {pageNumber}
                        </Button>
                    ))}

                    {/* Last page */}
                    {currentPage < totalPages - 2 && totalPages > 5 && (
                        <>
                            {currentPage < totalPages - 3 && (
                                <span className='px-2 text-muted-foreground'>...</span>
                            )}
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => onPageChange(totalPages)}
                                className='w-10 h-10'
                            >
                                {totalPages}
                            </Button>
                        </>
                    )}
                </div>

                <Button
                    variant="outline"
                    size="sm"
                    onClick={() => onPageChange(currentPage + 1)}
                    disabled={currentPage === totalPages}
                    className='flex items-center gap-1'
                >
                    بعدی
                    <ChevronLeft className='h-4 w-4' />
                </Button>
            </div>
        </div>
    )
}

export default Pagination
