import type { ReactNode } from "react";
import { cn } from "../../lib/cn";
import { Select } from "../inputs";

function getVisiblePages(currentPage: number, totalPages: number, maxVisiblePages: number) {
  if (totalPages <= maxVisiblePages) {
    return Array.from({ length: totalPages }, (_, index) => index + 1);
  }

  const siblingCount = Math.max(1, Math.floor((maxVisiblePages - 3) / 2));
  const start = Math.max(2, currentPage - siblingCount);
  const end = Math.min(totalPages - 1, currentPage + siblingCount);
  const visiblePages: Array<number | "ellipsis-left" | "ellipsis-right"> = [1];

  if (start > 2) {
    visiblePages.push("ellipsis-left");
  }

  for (let page = start; page <= end; page += 1) {
    visiblePages.push(page);
  }

  if (end < totalPages - 1) {
    visiblePages.push("ellipsis-right");
  }

  visiblePages.push(totalPages);
  return visiblePages;
}

function TextSummary({ children }: { children: ReactNode }) {
  return <span className="text-sm text-[var(--uhuru-text-secondary)]">{children}</span>;
}

export function Pagination({
  className,
  currentPage,
  itemCount,
  maxVisiblePages = 5,
  totalPages,
  pageSize,
  pageSizeOptions = [10, 25, 50, 100],
  onPageChange,
  onPageSizeChange,
}: {
  className?: string;
  currentPage: number;
  itemCount?: number;
  maxVisiblePages?: number;
  pageSize?: number;
  pageSizeOptions?: number[];
  totalPages?: number;
  onPageChange?: (page: number) => void;
  onPageSizeChange?: (pageSize: number) => void;
}) {
  const resolvedTotalPages =
    itemCount !== undefined && pageSize
      ? Math.max(1, Math.ceil(itemCount / pageSize))
      : Math.max(1, totalPages ?? 1);
  const safeCurrentPage = Math.min(Math.max(1, currentPage), resolvedTotalPages);
  const pages = getVisiblePages(safeCurrentPage, resolvedTotalPages, maxVisiblePages);
  const startItem =
    itemCount && pageSize ? (safeCurrentPage - 1) * pageSize + 1 : undefined;
  const endItem =
    itemCount && pageSize
      ? Math.min(itemCount, safeCurrentPage * pageSize)
      : undefined;

  return (
    <div className={cn("flex flex-col gap-3 rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-3 sm:flex-row sm:items-center sm:justify-between", className)}>
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
        <div className="flex flex-wrap items-center gap-2">
          <button
            className="inline-flex h-9 items-center justify-center rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] px-3 text-sm text-[var(--uhuru-text-primary)] transition disabled:cursor-not-allowed disabled:opacity-50"
            disabled={safeCurrentPage <= 1}
            onClick={() => onPageChange?.(safeCurrentPage - 1)}
            type="button"
          >
            Previous
          </button>

          {pages.map((page) =>
            typeof page === "number" ? (
              <button
                className={cn(
                  "flex h-9 min-w-9 items-center justify-center rounded-[var(--uhuru-radius-control)] border px-3 text-sm transition",
                  page === safeCurrentPage
                    ? "border-[var(--uhuru-border-strong)] bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)]"
                    : "border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)]",
                )}
                key={page}
                onClick={() => onPageChange?.(page)}
                type="button"
              >
                {page}
              </button>
            ) : (
              <span
                className="inline-flex h-9 min-w-9 items-center justify-center px-1 text-sm text-[var(--uhuru-text-secondary)]"
                key={page}
              >
                ...
              </span>
            ),
          )}

          <button
            className="inline-flex h-9 items-center justify-center rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] px-3 text-sm text-[var(--uhuru-text-primary)] transition disabled:cursor-not-allowed disabled:opacity-50"
            disabled={safeCurrentPage >= resolvedTotalPages}
            onClick={() => onPageChange?.(safeCurrentPage + 1)}
            type="button"
          >
            Next
          </button>
        </div>

        {startItem && endItem && itemCount ? (
          <TextSummary>
            Showing {startItem}-{endItem} of {itemCount}
          </TextSummary>
        ) : null}
      </div>

      {onPageSizeChange ? (
        <div className="w-full sm:w-[170px]">
          <Select
            onChange={(event) => onPageSizeChange(Number(event.target.value))}
            options={pageSizeOptions.map((option) => ({
              label: `${option} / page`,
              value: String(option),
            }))}
            value={String(pageSize ?? pageSizeOptions[0] ?? 10)}
          />
        </div>
      ) : null}
    </div>
  );
}