"use client"

import { useMemo } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
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">
      <div className="flex items-center gap-2">
        <Label className="text-sm whitespace-nowrap">Rows per page</Label>
        <Select
          value={String(resolvedPageSize)}
          onValueChange={(value) => onPageSizeChange?.(Number(value))}
          disabled={isLoading}
        >
          <SelectTrigger className="h-8 w-[72px]">
            <SelectValue placeholder={String(resolvedPageSize)} />
          </SelectTrigger>
          <SelectContent>
            {resolvedPageSizeOptions.map((size) => (
              <SelectItem key={size} value={String(size)}>
                {size}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="flex items-center gap-1">
        <Button
          variant="outline"
          size="icon"
          className="size-8"
          onClick={() => onPageChange?.(page - 1)}
          disabled={page <= 1 || isLoading}
        >
          <ChevronLeft className="size-4" />
        </Button>
        <span className="px-2 text-sm text-muted-foreground">
          Page {page} of {totalPages}
        </span>
        <Button
          variant="outline"
          size="icon"
          className="size-8"
          onClick={() => onPageChange?.(page + 1)}
          disabled={page >= totalPages || isLoading}
        >
          <ChevronRight className="size-4" />
        </Button>
      </div>
    </div>
  )
}