import {
	Pagination as UIPagination,
	PaginationContent,
	Button,
} from "@repo/ui";
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";

type PaginationProps = {
	page: number;
	totalPages: number;
	onPageChange: (page: number) => void;
	hasNextPage: boolean;
};

export function Pagination({
	page,
	totalPages,
	onPageChange,
	hasNextPage,
}: PaginationProps) {
	const totalButtons = 7;

	const renderPageButton = (pageNumber: number) => (
		<Button
			key={pageNumber}
			variant={page === pageNumber ? "default" : "outline"}
			size="icon"
			onClick={() => onPageChange(pageNumber)}
		>
			{pageNumber}
		</Button>
	);

	const renderEllipsis = (key: string) => (
		<Button key={key} variant="outline" size="icon" disabled>
			<MoreHorizontal className="h-4 w-4" />
		</Button>
	);

	const renderPaginationButtons = () => {
		const buttons = [];

		if (totalPages <= totalButtons) {
			for (let i = 1; i <= totalPages; i++) {
				buttons.push(renderPageButton(i));
			}
		} else {
			buttons.push(renderPageButton(1));

			if (page > 3) {
				buttons.push(renderEllipsis("start-ellipsis"));
			}

			let start = Math.max(2, page - 1);
			let end = Math.min(totalPages - 1, page + 1);

			if (page <= 3) {
				end = Math.min(totalPages - 1, totalButtons - 2);
			}

			if (page >= totalPages - 2) {
				start = Math.max(2, totalPages - (totalButtons - 2));
			}

			for (let i = start; i <= end; i++) {
				buttons.push(renderPageButton(i));
			}

			if (page < totalPages - 2) {
				buttons.push(renderEllipsis("end-ellipsis"));
			}

			buttons.push(renderPageButton(totalPages));
		}

		while (buttons.length < totalButtons) {
			buttons.push(
				<Button
					key={`filler-${buttons.length}`}
					variant="outline"
					size="icon"
					disabled
				>
					{" "}
				</Button>,
			);
		}

		return buttons;
	};

	return (
		<UIPagination className="select-none">
			<PaginationContent className="flex items-center justify-center space-x-2">
				<Button
					variant="outline"
					size="icon"
					onClick={() => onPageChange(Math.max(1, page - 1))}
					disabled={page === 1}
				>
					<ChevronLeft className="h-4 w-4" />
					<span className="sr-only">Previous page</span>
				</Button>
				{renderPaginationButtons()}
				<Button
					variant="outline"
					size="icon"
					onClick={() => onPageChange(Math.min(totalPages, page + 1))}
					disabled={!hasNextPage}
				>
					<ChevronRight className="h-4 w-4" />
					<span className="sr-only">Next page</span>
				</Button>
			</PaginationContent>
		</UIPagination>
	);
}