import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "../../lib/utils";
import { formatNumber } from "./UserFormFields";

// ---------------------------------------------------------------------------
// Pagination Component
// ---------------------------------------------------------------------------

export function UserPagination({
  currentPage,
  totalPages,
  limit,
  total,
  onPageChange,
  onLimitChange,
}: {
  currentPage: number;
  totalPages: number;
  limit: number;
  total: number;
  onPageChange: (page: number) => void;
  onLimitChange: (limit: number) => void;
}) {
  const startItem = (currentPage - 1) * limit + 1;
  const endItem = Math.min(currentPage * limit, total);

  // Calculate page numbers to show
  const getPageNumbers = () => {
    const pages: (number | string)[] = [];
    const showPages = 5;
    const halfShow = Math.floor(showPages / 2);

    let start = Math.max(1, currentPage - halfShow);
    let end = Math.min(totalPages, start + showPages - 1);

    if (end - start < showPages - 1) {
      start = Math.max(1, end - showPages + 1);
    }

    if (start > 1) {
      pages.push(1);
      if (start > 2) pages.push("...");
    }

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

    if (end < totalPages) {
      if (end < totalPages - 1) pages.push("...");
      pages.push(totalPages);
    }

    return pages;
  };

  return (
    <div className="mt-4 flex flex-wrap gap-4 items-center justify-between">
      {/* Items info */}
      <p className="text-sm text-text-secondary">
        Showing {startItem}\u2013{endItem} of {formatNumber(total)} users
      </p>

      {/* Page controls */}
      <div className="flex items-center gap-2">
        {/* Previous button */}
        <button
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className={cn(
            "px-3 py-2 rounded-md text-sm font-medium transition-colors",
            currentPage === 1
              ? "bg-raised text-text-tertiary cursor-not-allowed"
              : "bg-input border border-border text-foreground hover:bg-raised"
          )}
        >
          <ChevronLeft className="w-4 h-4" />
        </button>

        {/* Page numbers */}
        {getPageNumbers().map((page, i) =>
          typeof page === "number" ? (
            <button
              key={i}
              onClick={() => onPageChange(page)}
              className={cn(
                "px-3 py-2 rounded-md text-sm font-medium transition-colors min-w-[40px]",
                page === currentPage
                  ? "bg-primary text-white"
                  : "bg-input border border-border text-foreground hover:bg-raised"
              )}
            >
              {page}
            </button>
          ) : (
            <span key={i} className="px-2 text-text-tertiary">
              {page}
            </span>
          )
        )}

        {/* Next button */}
        <button
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className={cn(
            "px-3 py-2 rounded-md text-sm font-medium transition-colors",
            currentPage === totalPages
              ? "bg-raised text-text-tertiary cursor-not-allowed"
              : "bg-input border border-border text-foreground hover:bg-raised"
          )}
        >
          <ChevronRight className="w-4 h-4" />
        </button>

        {/* Items per page */}
        <select
          value={limit}
          onChange={(e) => onLimitChange(Number(e.target.value))}
          className={cn(
            "ml-2 bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
            "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
            "transition-colors"
          )}
        >
          <option value="10">10 / page</option>
          <option value="25">25 / page</option>
          <option value="50">50 / page</option>
          <option value="100">100 / page</option>
        </select>
      </div>
    </div>
  );
}
