import * as React from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { cn } from '../lib/cn'

export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
  page: number // 1-based current page
  pageCount: number
  onPageChange: (page: number) => void
  /** Accessible name for the nav landmark. */
  label?: string
}

function pageRange(current: number, total: number): number[] {
  const pages: number[] = []
  const start = Math.max(1, current - 2)
  const end = Math.min(total, current + 2)
  for (let i = start; i <= end; i++) pages.push(i)
  return pages
}

/**
 * Page controls. Active page exposes aria-current="page"; prev/next chevrons use
 * `rtl:rotate-180` so direction flips under dir="rtl".
 */
export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
  ({ page, pageCount, onPageChange, label = 'Pagination', className, ...props }, ref) => {
    const pages = pageRange(page, pageCount)
    const canPrev = page > 1
    const canNext = page < pageCount
    return (
      <nav ref={ref} aria-label={label} className={cn('flex items-center gap-2', className)} {...props}>
        <button
          type="button"
          onClick={() => canPrev && onPageChange(page - 1)}
          disabled={!canPrev}
          aria-label="Previous page"
          className="inline-flex h-8 w-8 items-center justify-center rounded text-ink hover:bg-hover disabled:opacity-50 disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-border"
        >
          <ChevronLeft className="h-4 w-4 rtl:rotate-180" aria-hidden="true" />
        </button>
        {pages.map((p) => (
          <button
            key={p}
            type="button"
            onClick={() => onPageChange(p)}
            aria-current={p === page ? 'page' : undefined}
            className={cn(
              'inline-flex h-8 min-w-8 items-center justify-center rounded px-2 text-body-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-border',
              p === page ? 'bg-accent text-ink-on-accent' : 'text-ink hover:bg-hover',
            )}
          >
            {p}
          </button>
        ))}
        <button
          type="button"
          onClick={() => canNext && onPageChange(page + 1)}
          disabled={!canNext}
          aria-label="Next page"
          className="inline-flex h-8 w-8 items-center justify-center rounded text-ink hover:bg-hover disabled:opacity-50 disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-border"
        >
          <ChevronRight className="h-4 w-4 rtl:rotate-180" aria-hidden="true" />
        </button>
      </nav>
    )
  },
)
Pagination.displayName = 'Pagination'