import React from "react";
import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
import { __ } from "@wordpress/i18n";

/**
 * Pagination component for navigating through paginated data
 */
export const Pagination = ({ pagination, onPageChange, className = "" }) => {
	if (!pagination || pagination.total_pages <= 1) {
		return null;
	}

	const { current_page, total_pages, per_page, total_items, has_prev, has_next } = pagination;

	// Calculate displayed range
	const start = (current_page - 1) * per_page + 1;
	const end = Math.min(current_page * per_page, total_items);

	// Generate page numbers to show
	const getPageNumbers = () => {
		const pages = [];
		const maxVisible = 5; // Show max 5 page numbers

		if (total_pages <= maxVisible) {
			// Show all pages if total is small
			for (let i = 1; i <= total_pages; i++) {
				pages.push(i);
			}
		} else {
			// Show smart pagination
			const start = Math.max(1, current_page - Math.floor(maxVisible / 2));
			const end = Math.min(total_pages, start + maxVisible - 1);

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

		return pages;
	};

	const pageNumbers = getPageNumbers();

	return (
		<div className={`flex items-center justify-between gap-2 ${className}`}>
			{/* Results info */}
			<div className="text-sm text-gray-700">
				{__("Showing", "socialpoll")} <span className="font-medium">{start}</span> {__("to", "socialpoll")}{" "}
				<span className="font-medium">{end}</span> {__("of", "socialpoll")}{" "}
				<span className="font-medium">{total_items}</span> {__("results", "socialpoll")}
			</div>

			{/* Pagination controls */}
			<div className="flex items-center gap-2">
				{/* First page */}
				<Button
					variant="outline"
					size="sm"
					disabled={!has_prev}
					onClick={() => onPageChange(1)}
					className="hidden sm:flex">
					<ChevronsLeft size={16} />
				</Button>

				{/* Previous page */}
				<Button variant="outline" size="sm" disabled={!has_prev} onClick={() => onPageChange(current_page - 1)}>
					<ChevronLeft size={16} />
					<span className="hidden sm:inline ml-1">{__("Previous", "socialpoll")}</span>
				</Button>

				{/* Page numbers */}
				<div className="hidden sm:flex items-center gap-1">
					{pageNumbers.map((page) => (
						<Button
							key={page}
							variant={page === current_page ? "default" : "outline"}
							size="sm"
							onClick={() => onPageChange(page)}
							className="min-w-[2.5rem]">
							{page}
						</Button>
					))}
				</div>

				{/* Current page indicator (mobile) */}
				<div className="sm:hidden text-sm text-gray-700">
					{__("Page", "socialpoll")} {current_page} {__("of", "socialpoll")} {total_pages}
				</div>

				{/* Next page */}
				<Button variant="outline" size="sm" disabled={!has_next} onClick={() => onPageChange(current_page + 1)}>
					<span className="hidden sm:inline mr-1">{__("Next", "socialpoll")}</span>
					<ChevronRight size={16} />
				</Button>

				{/* Last page */}
				<Button
					variant="outline"
					size="sm"
					disabled={!has_next}
					onClick={() => onPageChange(total_pages)}
					className="hidden sm:flex">
					<ChevronsRight size={16} />
				</Button>
			</div>
		</div>
	);
};

export default Pagination;