"use client";

import React from "react";
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  hasNext: boolean;
  hasPrev: boolean;
  onPageChange: (page: number) => void;
  isLoading?: boolean;
}

export function Pagination({
  currentPage,
  totalPages,
  hasNext,
  hasPrev,
  onPageChange,
  isLoading,
}: PaginationProps) {
  // Generate page numbers range
  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;
  };

  const pages = getPageNumbers();

  return (
    <div
      id="pagination-controls"
      className="w-full flex items-center justify-center gap-1.5 sm:gap-2 my-10 flex-wrap"
    >
      {/* First Page button */}
      {currentPage > 2 && (
        <button
          id="pagination-first-btn"
          onClick={() => onPageChange(1)}
          disabled={isLoading || currentPage === 1}
          aria-label="First page"
          className="p-2.5 rounded-xl bg-white/[0.04] hover:bg-white/[0.08] text-white/70 hover:text-white border border-white/10 disabled:opacity-30 disabled:pointer-events-none transition-colors"
        >
          <ChevronsLeft className="w-4 h-4" />
        </button>
      )}

      {/* Prev Page button */}
      <button
        id="pagination-prev-btn"
        onClick={() => onPageChange(currentPage - 1)}
        disabled={isLoading || !hasPrev}
        aria-label="Previous page"
        className="flex items-center gap-1 px-3.5 py-2.5 rounded-xl bg-white/[0.04] hover:bg-white/[0.08] text-white/80 hover:text-white border border-white/10 disabled:opacity-30 disabled:pointer-events-none transition-colors text-xs font-semibold"
      >
        <ChevronLeft className="w-4 h-4" />
        <span className="hidden sm:inline">Prev</span>
      </button>

      {/* Page Numbers */}
      {pages.map((p) => {
        const isCurrent = p === currentPage;
        return (
          <button
            key={p}
            id={`pagination-page-${p}`}
            onClick={() => onPageChange(p)}
            disabled={isLoading || isCurrent}
            className={`min-w-[40px] h-10 px-3 rounded-xl text-xs font-bold transition-all duration-200 ${
              isCurrent
                ? "bg-red-600 text-white shadow-md shadow-red-600/40 border border-red-400/40 scale-105"
                : "bg-white/[0.04] hover:bg-white/[0.08] text-white/80 hover:text-white border border-white/10"
            }`}
          >
            {p}
          </button>
        );
      })}

      {/* Next Page button */}
      <button
        id="pagination-next-btn"
        onClick={() => onPageChange(currentPage + 1)}
        disabled={isLoading || !hasNext}
        aria-label="Next page"
        className="flex items-center gap-1 px-3.5 py-2.5 rounded-xl bg-white/[0.04] hover:bg-white/[0.08] text-white/80 hover:text-white border border-white/10 disabled:opacity-30 disabled:pointer-events-none transition-colors text-xs font-semibold"
      >
        <span className="hidden sm:inline">Next</span>
        <ChevronRight className="w-4 h-4" />
      </button>
    </div>
  );
}