"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";
import { motion } from "framer-motion";
import Link from "next/link";

interface PaginationProps {
  currentPage: number;
  lastPage: number;
  perPage: number;
  total: number;
  baseUrl: string;
}

export default function Pagination({
  currentPage,
  lastPage,
  baseUrl,
}: PaginationProps) {
  // Generate page numbers to display
  const getPageNumbers = () => {
    const pages = [];
    const maxPagesToShow = 5;

    if (lastPage <= maxPagesToShow) {
      // If we have fewer pages than our max, show all pages
      for (let i = 1; i <= lastPage; i++) {
        pages.push(i);
      }
    } else {
      // Always include first page
      pages.push(1);

      // Calculate start and end of page range
      let start = Math.max(2, currentPage - 1);
      let end = Math.min(lastPage - 1, currentPage + 1);

      // Adjust if we're at the beginning
      if (currentPage <= 3) {
        end = Math.min(lastPage - 1, 4);
      }

      // Adjust if we're at the end
      if (currentPage >= lastPage - 2) {
        start = Math.max(2, lastPage - 3);
      }

      // Add ellipsis after first page if needed
      if (start > 2) {
        pages.push("ellipsis-start");
      }

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

      // Add ellipsis before last page if needed
      if (end < lastPage - 1) {
        pages.push("ellipsis-end");
      }

      // Always include last page if it's not already included
      if (lastPage > 1) {
        pages.push(lastPage);
      }
    }

    return pages;
  };

  const pageNumbers = getPageNumbers();

  if (lastPage <= 1) return null;

  return (
    <div className="flex justify-center mt-12">
      <div className="flex items-center space-x-1">
        {/* Previous button */}
        <motion.div whileHover={{ x: -3 }} whileTap={{ scale: 0.95 }}>
          <Link
            href={currentPage > 1 ? `${baseUrl}?page=${currentPage - 1}` : "#"}
            className={`flex items-center justify-center w-10 h-10 rounded-md ${
              currentPage > 1
                ? "text-orange-600 hover:bg-orange-50"
                : "text-gray-300 cursor-not-allowed"
            }`}
            aria-disabled={currentPage <= 1}
            tabIndex={currentPage <= 1 ? -1 : 0}
          >
            <ChevronLeft className="w-5 h-5" />
            <span className="sr-only">Previous Page</span>
          </Link>
        </motion.div>

        {/* Page numbers */}
        {pageNumbers.map((page, index) => {
          if (page === "ellipsis-start" || page === "ellipsis-end") {
            return (
              <span
                key={`ellipsis-${index}`}
                className="flex items-center justify-center w-10 h-10 text-gray-500"
              >
                ...
              </span>
            );
          }

          return (
            <motion.div
              key={index}
              whileHover={{ y: -2 }}
              whileTap={{ scale: 0.95 }}
            >
              <Link
                href={`${baseUrl}?page=${page}`}
                className={`flex items-center justify-center w-10 h-10 rounded-md ${
                  currentPage === page
                    ? "bg-gradient-to-r from-orange-500 to-red-500 text-white font-medium shadow-md"
                    : "text-gray-700 hover:bg-orange-50"
                }`}
                aria-current={currentPage === page ? "page" : undefined}
              >
                {page}
              </Link>
            </motion.div>
          );
        })}

        {/* Next button */}
        <motion.div whileHover={{ x: 3 }} whileTap={{ scale: 0.95 }}>
          <Link
            href={
              currentPage < lastPage
                ? `${baseUrl}?page=${currentPage + 1}`
                : "#"
            }
            className={`flex items-center justify-center w-10 h-10 rounded-md ${
              currentPage < lastPage
                ? "text-orange-600 hover:bg-orange-50"
                : "text-gray-300 cursor-not-allowed"
            }`}
            aria-disabled={currentPage >= lastPage}
            tabIndex={currentPage >= lastPage ? -1 : 0}
          >
            <ChevronRight className="w-5 h-5" />
            <span className="sr-only">Next Page</span>
          </Link>
        </motion.div>
      </div>
    </div>
  );
}