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

interface PaginationProps {
    currentPage: number;
    pageSize: number;
    totalItems: number;
    onPageChange: (page: number) => void;
    onPageSizeChange: (size: number) => void;
}

export function Pagination({
    currentPage,
    pageSize,
    totalItems,
    onPageChange,
    onPageSizeChange
}: PaginationProps) {
    const totalPages = Math.ceil(totalItems / pageSize) || 1;
    const startItem = (currentPage - 1) * pageSize + 1;
    const endItem = Math.min(currentPage * pageSize, totalItems);

    const getPageNumbers = () => {
        const pages: number[] = [];
        const maxVisible = 5;
        let start = Math.max(1, currentPage - 2);
        let end = Math.min(totalPages, start + maxVisible - 1);

        if (end - start < maxVisible - 1) {
            start = Math.max(1, end - maxVisible + 1);
        }

        for (let i = start; i <= end; i++) {
            pages.push(i);
        }
        return pages;
    };

    return (
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 p-4 border-t border-zinc-200/60 dark:border-zinc-800 bg-white/40 dark:bg-zinc-900/40 rounded-b-3xl">
            {/* Entry Summary statistics */}
            <div className="text-[11px] text-zinc-500 dark:text-zinc-400 font-semibold tracking-wide">
                Showing <span className="text-zinc-800 dark:text-zinc-200">{totalItems === 0 ? 0 : startItem}</span> to{' '}
                <span className="text-zinc-800 dark:text-zinc-200">{endItem}</span> of{' '}
                <span className="text-zinc-800 dark:text-zinc-200">{totalItems}</span> records
            </div>

            {/* Pagination Controls */}
            <div className="flex flex-wrap items-center gap-3">
                {/* Page Size Selector */}
                <div className="flex items-center gap-2">
                    <span className="text-[10px] text-zinc-400 font-bold uppercase tracking-wider">Show:</span>
                    <select
                        value={pageSize}
                        onChange={(e) => onPageSizeChange(Number(e.target.value))}
                        className="h-8 rounded-lg border border-zinc-200 bg-white px-2 py-1 text-[10px] font-bold text-zinc-700 focus:outline-none dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-350"
                    >
                        <option value={5}>5 Rows</option>
                        <option value={10}>10 Rows</option>
                        <option value={25}>25 Rows</option>
                        <option value={50}>50 Rows</option>
                    </select>
                </div>

                {/* Page Navigation Buttons */}
                <div className="flex items-center gap-1">
                    <Button
                        variant="outline"
                        size="icon"
                        disabled={currentPage <= 1}
                        onClick={() => onPageChange(currentPage - 1)}
                        className="size-8 rounded-lg border-zinc-200 dark:border-zinc-850 dark:bg-zinc-950/50"
                        title="Previous Page"
                    >
                        <ChevronLeft className="size-3.5" />
                    </Button>

                    {getPageNumbers().map((page) => (
                        <Button
                            key={page}
                            variant={page === currentPage ? 'default' : 'outline'}
                            onClick={() => onPageChange(page)}
                            className={`size-8 text-[10px] font-bold rounded-lg ${
                                page === currentPage 
                                ? 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-md shadow-indigo-600/10' 
                                : 'border-zinc-200 dark:border-zinc-850 dark:bg-zinc-950/50'
                            }`}
                        >
                            {page}
                        </Button>
                    ))}

                    <Button
                        variant="outline"
                        size="icon"
                        disabled={currentPage >= totalPages}
                        onClick={() => onPageChange(currentPage + 1)}
                        className="size-8 rounded-lg border-zinc-200 dark:border-zinc-850 dark:bg-zinc-950/50"
                        title="Next Page"
                    >
                        <ChevronRight className="size-3.5" />
                    </Button>
                </div>
            </div>
        </div>
    );
}