import * as React from 'react'
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'

import { cn } from './utils'

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */

function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
  return (
    <nav
      data-slot="pagination"
      role="navigation"
      aria-label="Pagination"
      className={cn('mx-auto flex w-full justify-center', className)}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/* PaginationContent                                                   */
/* ------------------------------------------------------------------ */

function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="pagination-content"
      className={cn('flex flex-row items-center gap-1', className)}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/* PaginationItem                                                      */
/* ------------------------------------------------------------------ */

function PaginationItem({ className, ...props }: React.ComponentProps<'li'>) {
  return <li data-slot="pagination-item" className={cn('', className)} {...props} />
}

/* ------------------------------------------------------------------ */
/* PaginationLink                                                      */
/* ------------------------------------------------------------------ */

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

function PaginationLink({ className, isActive, ...props }: PaginationLinkProps) {
  return (
    <button
      data-slot="pagination-link"
      type="button"
      aria-current={isActive === true ? 'page' : undefined}
      className={cn(
        'inline-flex size-9 items-center justify-center rounded-lg text-sm font-medium transition-colors',
        'outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
        isActive === true
          ? 'bg-primary text-primary-foreground shadow-glow'
          : 'text-foreground-secondary hover:bg-glass-hover hover:text-foreground border border-transparent hover:border-border-glass',
        className
      )}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/* PaginationPrevious                                                  */
/* ------------------------------------------------------------------ */

function PaginationPrevious({ className, ...props }: React.ComponentProps<'button'>) {
  return (
    <button
      data-slot="pagination-previous"
      type="button"
      aria-label="Go to previous page"
      className={cn(
        'inline-flex h-9 items-center justify-center gap-1 rounded-lg px-3 text-sm font-medium transition-colors',
        'text-foreground-secondary hover:bg-glass-hover hover:text-foreground',
        'outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
        'disabled:pointer-events-none disabled:opacity-50',
        className
      )}
      {...props}
    >
      <ChevronLeftIcon className="size-4" />
      <span>Previous</span>
    </button>
  )
}

/* ------------------------------------------------------------------ */
/* PaginationNext                                                      */
/* ------------------------------------------------------------------ */

function PaginationNext({ className, ...props }: React.ComponentProps<'button'>) {
  return (
    <button
      data-slot="pagination-next"
      type="button"
      aria-label="Go to next page"
      className={cn(
        'inline-flex h-9 items-center justify-center gap-1 rounded-lg px-3 text-sm font-medium transition-colors',
        'text-foreground-secondary hover:bg-glass-hover hover:text-foreground',
        'outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
        'disabled:pointer-events-none disabled:opacity-50',
        className
      )}
      {...props}
    >
      <span>Next</span>
      <ChevronRightIcon className="size-4" />
    </button>
  )
}

/* ------------------------------------------------------------------ */
/* PaginationEllipsis                                                  */
/* ------------------------------------------------------------------ */

function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="pagination-ellipsis"
      aria-hidden
      className={cn('flex size-9 items-center justify-center text-foreground-muted', className)}
      {...props}
    >
      <MoreHorizontalIcon className="size-4" />
      <span className="sr-only">More pages</span>
    </span>
  )
}

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