import { buildPaginationItems } from '@/utils/pagination'

interface PaginationControlsProps {
  page: number
  onPageChange: (page: number) => void
  label?: string
  className?: string
  disabled?: boolean
  ariaLabel?: string
  /** Known total pages for bounded pagination. Omit for cursor-style list pagination. */
  pageCount?: number
  /** Used when pageCount is omitted. */
  hasNextPage?: boolean
}

const buttonClassName =
  'rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-primary-400 hover:text-primary-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-300 dark:hover:text-primary-300'

const activeButtonClassName = 'rounded-lg bg-primary-600 px-3 py-2 text-sm font-semibold text-white'

export default function PaginationControls({
  page,
  pageCount,
  hasNextPage = false,
  onPageChange,
  label = 'Rows',
  className = '',
  disabled = false,
  ariaLabel,
}: PaginationControlsProps) {
  const isBounded = typeof pageCount === 'number'
  const boundedPageCount = pageCount ?? 1

  if (isBounded && boundedPageCount <= 1) {
    return null
  }

  if (!isBounded && page <= 1 && !hasNextPage) {
    return null
  }

  const paginationItems = isBounded ? buildPaginationItems(page, boundedPageCount) : []
  const canGoPrevious = page > 1
  const canGoNext = isBounded ? page < boundedPageCount : hasNextPage
  const navLabel = ariaLabel || `${label} pagination`
  const statusText = isBounded ? `${label}: page ${page} of ${boundedPageCount}` : `${label}: page ${page}`

  return (
    <nav
      className={`mt-4 flex flex-wrap items-center justify-between gap-3 ${className}`}
      aria-label={navLabel}
    >
      <div className="text-sm text-gray-600 dark:text-gray-400">{statusText}</div>
      <div className="flex flex-wrap items-center gap-2">
        <button
          type="button"
          onClick={() => onPageChange(Math.max(1, page - 1))}
          disabled={disabled || !canGoPrevious}
          className={buttonClassName}
        >
          Previous
        </button>
        {isBounded ? (
          <ul className="flex flex-wrap items-center gap-2">
            {paginationItems.map((item) =>
              item.type === 'ellipsis' ? (
                <li key={item.key} className="px-1 text-sm text-gray-500 dark:text-gray-400" aria-hidden="true">
                  …
                </li>
              ) : (
                <li key={item.page}>
                  <button
                    type="button"
                    onClick={() => onPageChange(item.page)}
                    disabled={disabled}
                    aria-current={item.page === page ? 'page' : undefined}
                    className={item.page === page ? activeButtonClassName : buttonClassName}
                  >
                    {item.page}
                  </button>
                </li>
              ),
            )}
          </ul>
        ) : null}
        <button
          type="button"
          onClick={() => onPageChange(isBounded ? Math.min(boundedPageCount, page + 1) : page + 1)}
          disabled={disabled || !canGoNext}
          className={buttonClassName}
        >
          Next
        </button>
      </div>
    </nav>
  )
}
