import * as React from 'react'
import { cn } from '@/lib/utils'
import { ArrowLeftLine, ArrowRightLine } from './icons-inline'

const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn('flex w-full justify-center', className)}
    {...props}
  />
)
Pagination.displayName = 'Pagination'

const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
  ({ className, ...props }, ref) => (
    <ul
      ref={ref}
      className={cn('flex flex-row flex-wrap items-center gap-2', className)}
      {...props}
    />
  )
)
PaginationContent.displayName = 'PaginationContent'

const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
  ({ className, ...props }, ref) => (
    <li ref={ref} className={cn('list-none', className)} {...props} />
  )
)
PaginationItem.displayName = 'PaginationItem'

export interface PaginationLinkProps extends React.ComponentProps<'a'> {
  isActive?: boolean
}

const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
  ({ className, isActive, ...props }, ref) => (
    <a
      ref={ref}
      aria-current={isActive ? 'page' : undefined}
      className={cn(
        'inline-flex min-w-[var(--control-icon-size-md)] h-[var(--control-height-md)] items-center justify-center rounded-md border text-[length:var(--control-font-size-md)] leading-[var(--control-line-height-md)] font-medium transition-colors',
        'border-border-tertiary bg-bg-container text-text',
        'hover:bg-fill-secondary hover:text-text hover:border-border-tertiary',
        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base',
        'disabled:pointer-events-none disabled:opacity-50',
        isActive && 'bg-fill-secondary border-border-tertiary text-text',
        className
      )}
      {...props}
    />
  )
)
PaginationLink.displayName = 'PaginationLink'

export interface PaginationPreviousProps extends React.ComponentProps<'a'> {
  text?: string
}

const PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationPreviousProps>(
  ({ className, text = 'Previous', ...props }, ref) => (
    <a
      ref={ref}
      aria-label="Go to previous page"
      className={cn(
        'inline-flex h-[var(--control-height-md)] min-w-[var(--control-icon-size-md)] items-center justify-center gap-2 rounded-md border px-[var(--control-padding-x-md)] text-[length:var(--control-font-size-md)] leading-[var(--control-line-height-md)] font-medium transition-colors',
        'border-border-tertiary bg-bg-container text-text',
        'hover:bg-fill-secondary hover:text-text hover:border-border-tertiary',
        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base',
        'disabled:pointer-events-none disabled:opacity-50',
        className
      )}
      {...props}
    >
      <ArrowLeftLine className="h-4 w-4 shrink-0" />
      <span className="hidden sm:inline">{text}</span>
    </a>
  )
)
PaginationPrevious.displayName = 'PaginationPrevious'

export interface PaginationNextProps extends React.ComponentProps<'a'> {
  text?: string
}

const PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationNextProps>(
  ({ className, text = 'Next', ...props }, ref) => (
    <a
      ref={ref}
      aria-label="Go to next page"
      className={cn(
        'inline-flex h-[var(--control-height-md)] min-w-[var(--control-icon-size-md)] items-center justify-center gap-2 rounded-md border px-[var(--control-padding-x-md)] text-[length:var(--control-font-size-md)] leading-[var(--control-line-height-md)] font-medium transition-colors',
        'border-border-tertiary bg-bg-container text-text',
        'hover:bg-fill-secondary hover:text-text hover:border-border-tertiary',
        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base',
        'disabled:pointer-events-none disabled:opacity-50',
        className
      )}
      {...props}
    >
      <span className="hidden sm:inline">{text}</span>
      <ArrowRightLine className="h-4 w-4 shrink-0" />
    </a>
  )
)
PaginationNext.displayName = 'PaginationNext'

const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
  <span
    role="presentation"
    aria-hidden
    className={cn(
      'flex h-9 w-9 shrink-0 items-center justify-center text-text-secondary',
      className
    )}
    {...props}
  >
    &#8230;
  </span>
)
PaginationEllipsis.displayName = 'PaginationEllipsis'

export {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationEllipsis,
}