import { ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";

interface AdminTablePaginationProps {
  total: number;
  pageSize?: number;
  currentPage?: number;
  totalPages?: number;
  from?: number | null;
  to?: number | null;
  isLoading?: boolean;
  onPageChange?: (page: number) => void;
}

export function AdminTablePagination({
  total,
  pageSize = 6,
  currentPage = 1,
  totalPages,
  from,
  to,
  isLoading = false,
  onPageChange,
}: AdminTablePaginationProps) {
  const resolvedTotalPages =
    totalPages || Math.max(1, Math.ceil(total / pageSize));
  const shownFrom = from ?? (total > 0 ? (currentPage - 1) * pageSize + 1 : 0);
  const shownTo = to ?? Math.min(total, currentPage * pageSize);
  const maxVisiblePages = 10;
  const safeCurrentPage = Math.min(
    Math.max(currentPage, 1),
    resolvedTotalPages,
  );
  const startPage = Math.max(
    1,
    Math.min(
      safeCurrentPage - Math.floor(maxVisiblePages / 2),
      resolvedTotalPages - maxVisiblePages + 1,
    ),
  );
  const visiblePageCount = Math.min(maxVisiblePages, resolvedTotalPages);
  const visiblePages = Array.from(
    { length: visiblePageCount },
    (_, index) => startPage + index,
  );

  return (
    <div className="mx-6 mb-6 mt-4 flex flex-col gap-3 border-t border-[var(--theme-border-soft)] px-0 pt-4 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
      <p>
        Showing <span className="font-bold text-foreground">{shownFrom}</span>
        {" - "}
        <span className="font-bold text-foreground">{shownTo}</span> of{" "}
        <span className="font-bold text-foreground">{total}</span> entries
      </p>

      <div className="flex items-center gap-2">
        <Button
          variant="outline"
          size="icon"
          className="h-9 w-9 rounded-xl border-[var(--theme-border-soft)] bg-white"
          disabled={isLoading || safeCurrentPage <= 1}
          onClick={() => onPageChange?.(safeCurrentPage - 1)}
        >
          <ChevronLeft className="h-4 w-4" />
          <span className="sr-only">Previous page</span>
        </Button>
        {visiblePages.map((page) => {
          const isActive = page === safeCurrentPage;

          return (
            <Button
              key={page}
              variant={isActive ? "default" : "outline"}
              className={`h-9 min-w-9 rounded-xl px-3 ${
                isActive
                  ? ""
                  : "border-[var(--theme-border-soft)] bg-white text-foreground"
              }`}
              disabled={isLoading}
              onClick={() => onPageChange?.(page)}
            >
              {page}
              {isActive && (
                <span className="sr-only"> of {resolvedTotalPages}</span>
              )}
            </Button>
          );
        })}
        <Button
          variant="outline"
          size="icon"
          className="h-9 w-9 rounded-xl border-[var(--theme-border-soft)] bg-white"
          disabled={isLoading || safeCurrentPage >= resolvedTotalPages}
          onClick={() => onPageChange?.(safeCurrentPage + 1)}
        >
          <ChevronRight className="h-4 w-4" />
          <span className="sr-only">Next page</span>
        </Button>
      </div>
    </div>
  );
}