/**
 * Pagination Component
 * 
 * Professional pagination with smart ellipsis logic and minimal design.
 * Handles large page counts gracefully and provides smooth interactions.
 */

"use client";

import React from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "@/components/Icon/General";
import { cn } from "@/lib/cn";

export interface PaginationProps {
  /** Current active page (1-based) */
  currentPage: number;
  /** Total number of pages */
  totalPages: number;
  /** Callback when page is changed */
  onPageChange: (page: number) => void;
  /** Whether to show UI when only 1 page exists (default: true) */
  showWhenSinglePage?: boolean;
  /** Extra container className */
  className?: string;
  /** Max buttons to show before using ellipses (default: 7) */
  maxVisible?: number;
}

export function Pagination({
  currentPage,
  totalPages,
  onPageChange,
  showWhenSinglePage = true,
  className = "",
  maxVisible = 7,
}: PaginationProps) {
  const current = Math.min(Math.max(1, currentPage), Math.max(1, totalPages));
  const total = Math.max(1, totalPages);

  if (!showWhenSinglePage && total <= 1) return null;

  // Logic to calculate which page numbers to show
  const getPageNumbers = () => {
    const pages: (number | string)[] = [];

    if (total <= maxVisible) {
      for (let i = 1; i <= total; i++) pages.push(i);
    } else {
      // Always show first page
      pages.push(1);

      const start = Math.max(2, current - 2);
      const end = Math.min(total - 1, current + 2);

      if (start > 2) pages.push("...");

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

      if (end < total - 1) pages.push("...");

      // Always show last page
      pages.push(total);
    }
    return pages;
  };

  const pageNumbers = getPageNumbers();

  const navButton =
    "flex size-9 cursor-pointer items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-700 transition-colors " +
    "hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 " +
    "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-slate-200 disabled:hover:bg-white";

  return (
    <nav
      className={cn("flex items-center justify-center gap-1.5 select-none", className)}
      aria-label="Pagination Navigation"
    >
      {/* Previous Button */}
      <button
        type="button"
        onClick={() => onPageChange(current - 1)}
        disabled={current <= 1}
        className={navButton}
        aria-label="Go to previous page"
      >
        <ChevronLeftIcon className="size-4" />
      </button>

      {/* Page Numbers */}
      <div className="flex items-center gap-1.5">
        {pageNumbers.map((p, idx) => {
          if (p === "...") {
            return (
              <span
                key={`dots-${idx}`}
                className="flex size-9 items-center justify-center text-sm font-medium text-slate-400"
              >
                •••
              </span>
            );
          }

          const isActive = p === current;

          return (
            <button
              key={p}
              type="button"
              onClick={() => onPageChange(p as number)}
              aria-current={isActive ? "page" : undefined}
              className={cn(
                "flex size-9 cursor-pointer items-center justify-center rounded-lg text-sm transition-colors",
                isActive
                  ? "bg-slate-900 font-bold text-white shadow-sm hover:bg-slate-800"
                  : "border border-slate-200 bg-white font-semibold text-slate-700 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900",
              )}
            >
              {p}
            </button>
          );
        })}
      </div>

      {/* Next Button */}
      <button
        type="button"
        onClick={() => onPageChange(current + 1)}
        disabled={current >= total}
        className={navButton}
        aria-label="Go to next page"
      >
        <ChevronRightIcon className="size-4" />
      </button>
    </nav>
  );
}