"use client"

import { useMemo } from "react"

import { PageSizeSelect, PageStepButtons } from "@/components/ui/pagination-controls"
import { resolveListPageCount } from "@/lib/list-pagination"
import { formatPlainAmount } from "@/lib/format/numbers"

type XmlApiServerPaginationProps = {
  page: number
  pageSize: number
  pageCount: number
  totalCount: number
  isLoading?: boolean
  onPageChange?: (page: number) => void
  onPageSizeChange?: (pageSize: number) => void
  pageSizeOptions?: number[]
}

export function XmlApiPaginatedRange({
  page,
  pageSize,
  totalCount,
}: Pick<XmlApiServerPaginationProps, "page" | "pageSize" | "totalCount">) {
  const start = totalCount === 0 ? 0 : (page - 1) * pageSize + 1
  const end = Math.min(page * pageSize, totalCount)

  return (
    <p className="text-sm text-muted-foreground">
      Displaying {start}–{end} of {formatPlainAmount(totalCount)} results.
    </p>
  )
}

export function XmlApiServerPagination({
  page,
  pageSize,
  pageCount,
  totalCount,
  isLoading,
  onPageChange,
  onPageSizeChange,
  pageSizeOptions = [10, 20, 50],
}: XmlApiServerPaginationProps) {
  const totalPages = resolveListPageCount(totalCount, pageSize, pageCount)
  const resolvedPageSize = pageSize > 0 ? pageSize : pageSizeOptions[0]
  const resolvedPageSizeOptions = useMemo(() => {
    if (resolvedPageSize > 0 && !pageSizeOptions.includes(resolvedPageSize)) {
      return [...pageSizeOptions, resolvedPageSize].sort((a, b) => a - b)
    }
    return pageSizeOptions
  }, [pageSizeOptions, resolvedPageSize])

  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-end">
      <PageSizeSelect
        value={resolvedPageSize}
        options={resolvedPageSizeOptions}
        onValueChange={(size) => onPageSizeChange?.(size)}
        disabled={isLoading}
        labelClassName="text-sm whitespace-nowrap"
        placeholder={String(resolvedPageSize)}
      />
      <PageStepButtons
        canPrevious={page > 1 && !isLoading}
        canNext={page < totalPages && !isLoading}
        onPrevious={() => onPageChange?.(page - 1)}
        onNext={() => onPageChange?.(page + 1)}
      >
        <span className="px-2 text-sm text-muted-foreground">
          Page {page} of {totalPages}
        </span>
      </PageStepButtons>
    </div>
  )
}