// components/table/Pagination.tsx

import { Button } from '../ui/button';
import {
	ChevronLeft,
	ChevronRight,
	ChevronsLeft,
	ChevronsRight,
} from 'lucide-react';

export const renderPageNumbers = (
	currentPage: number,
	totalPages: number,
	setCurrentPage: (page: number) => void
) => {
	const pageNumbers = [];
	const maxPageNumbersToShow = 5;

	let startPage = Math.max(
		1,
		currentPage - Math.floor(maxPageNumbersToShow / 2)
	);
	let endPage = startPage + maxPageNumbersToShow - 1;

	if (endPage > totalPages) {
		endPage = totalPages;
		startPage = Math.max(1, endPage - maxPageNumbersToShow + 1);
	}

	for (let i = startPage; i <= endPage; i++) {
		pageNumbers.push(i);
	}

	const showFirstPage = startPage > 1;
	const showEllipsesBefore = startPage > 2;
	const showLastPage = endPage < totalPages;
	const showEllipsesAfter = endPage < totalPages - 1;

	return (
		<div className="flex items-center space-x-2 my-4">
			{/* First Page Button */}
			<Button
				className="border-primary/20 bg-secondary/50 hover:bg-secondary hover:border-primary/40 disabled:opacity-50"
				variant="outline"
				size="icon"
				onClick={() => setCurrentPage(1)}
				disabled={currentPage === 1}
				aria-label="First Page"
			>
				<ChevronsLeft className="h-4 w-4 text-primary/70" />
			</Button>

			{/* Previous Button */}
			<Button
				className="border-primary/20 bg-secondary/50 hover:bg-secondary hover:border-primary/40 disabled:opacity-50"
				variant="outline"
				size="icon"
				onClick={() => setCurrentPage(currentPage - 1)}
				disabled={currentPage === 1}
				aria-label="Previous Page"
			>
				<ChevronLeft className="h-4 w-4 text-primary/70" />
			</Button>

			{showFirstPage && (
				<>
					<Button
						className="border-primary/20 bg-secondary/50 hover:bg-secondary hover:border-primary/40 font-sans text-sm"
						key={1}
						variant={currentPage === 1 ? 'default' : 'outline'}
						size="sm"
						onClick={() => setCurrentPage(1)}
					>
						1
					</Button>
					{showEllipsesBefore && (
						<span className="px-1 text-foreground/40 font-serif">
							...
						</span>
					)}
				</>
			)}

			{pageNumbers.map((page) => (
				<Button
					className={`font-sans text-sm ${
						page === currentPage
							? 'bg-primary text-primary-foreground gold-glow border-primary'
							: 'border-primary/20 bg-secondary/50 hover:bg-secondary hover:border-primary/40'
					}`}
					key={page}
					variant={page === currentPage ? 'default' : 'outline'}
					size="sm"
					onClick={() => setCurrentPage(page)}
				>
					{page}
				</Button>
			))}

			{showLastPage && (
				<>
					{showEllipsesAfter && (
						<span className="px-1 text-foreground/40 font-serif">
							...
						</span>
					)}
					<Button
						className={`font-sans text-sm ${
							currentPage === totalPages
								? 'bg-primary text-primary-foreground gold-glow border-primary'
								: 'border-primary/20 bg-secondary/50 hover:bg-secondary hover:border-primary/40'
						}`}
						key={totalPages}
						variant={currentPage === totalPages ? 'default' : 'outline'}
						size="sm"
						onClick={() => setCurrentPage(totalPages)}
					>
						{totalPages}
					</Button>
				</>
			)}

			{/* Next Button */}
			<Button
				className="border-primary/20 bg-secondary/50 hover:bg-secondary hover:border-primary/40 disabled:opacity-50"
				variant="outline"
				size="icon"
				onClick={() => setCurrentPage(currentPage + 1)}
				disabled={currentPage === totalPages}
				aria-label="Next Page"
			>
				<ChevronRight className="h-4 w-4 text-primary/70" />
			</Button>

			{/* Last Page Button */}
			<Button
				className="border-primary/20 bg-secondary/50 hover:bg-secondary hover:border-primary/40 disabled:opacity-50"
				variant="outline"
				size="icon"
				onClick={() => setCurrentPage(totalPages)}
				disabled={currentPage === totalPages}
				aria-label="Last Page"
			>
				<ChevronsRight className="h-4 w-4 text-primary/70" />
			</Button>
		</div>
	);
};