import Link from "next/link"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

type PaginationProps = React.ComponentProps<"nav">

export function Pagination({ className, ...props }: PaginationProps) {
  return <nav role="navigation" aria-label="Paginação" className={cn("mx-auto flex justify-center", className)} {...props} />
}

export function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
  return <ul className={cn("flex items-center gap-1", className)} {...props} />
}

export function PaginationItem({ className, ...props }: React.ComponentProps<"li">) {
  return <li className={cn("list-none", className)} {...props} />
}

type PaginationLinkBaseProps = {
  isActive?: boolean
  href?: string
  disabled?: boolean
} & React.ComponentProps<typeof Link>

export function PaginationLink({
  className,
  isActive,
  disabled,
  href = "#",
  ...props
}: PaginationLinkBaseProps) {
  const Component = disabled ? "span" : Link

  return (
    <Component
      aria-current={isActive ? "page" : undefined}
      className={cn(
        "inline-flex min-w-[36px] items-center justify-center rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:pointer-events-none disabled:opacity-50",
        isActive && "border-slate-900 bg-slate-900 text-white hover:border-slate-900 hover:bg-slate-900",
        disabled && "cursor-not-allowed text-neutral-400 hover:border-slate-200 hover:bg-white",
        className
      )}
      href={href}
      {...(Component === Link ? props : undefined)}
    >
      {props.children}
    </Component>
  )
}

type PaginationControlProps = {
  "aria-label": string
  disabled?: boolean
  onClick?: () => void
}

function ControlButton({ children, disabled, onClick, ...props }: PaginationControlProps & React.ComponentProps<"button">) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={onClick}
      className={cn(
        "inline-flex size-9 items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:cursor-not-allowed disabled:text-neutral-400"
      )}
      {...props}
    >
      {children}
    </button>
  )
}

export function PaginationPrevious({
  disabled,
  onClick,
  ...props
}: { disabled?: boolean; onClick?: () => void } & React.ComponentProps<"button">) {
  return (
    <ControlButton aria-label="Anterior" disabled={disabled} onClick={onClick} {...props}>
      <ChevronLeft className="size-4" />
    </ControlButton>
  )
}

export function PaginationNext({
  disabled,
  onClick,
  ...props
}: { disabled?: boolean; onClick?: () => void } & React.ComponentProps<"button">) {
  return (
    <ControlButton aria-label="Próxima" disabled={disabled} onClick={onClick} {...props}>
      <ChevronRight className="size-4" />
    </ControlButton>
  )
}

export function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span className={cn("inline-flex size-9 items-center justify-center text-neutral-500", className)} {...props}>
      <MoreHorizontal className="size-4" />
      <span className="sr-only">Mais páginas</span>
    </span>
  )
}
