import { router } from '@inertiajs/react'
import { ChevronLeft, ChevronRight } from 'lucide-react'

import { cn } from '@/lib/utils'
import { Button } from './button'

export interface PaginationProps {
  currentPage: number
  lastPage: number
  onNext?: () => void
  onPrev?: () => void
  onPageChange?: (page: number) => void
  pageParamName?: string
  className?: string
}

export function Pagination({
  currentPage,
  lastPage,
  onNext,
  onPrev,
  onPageChange,
  pageParamName = 'page',
  className
}: PaginationProps) {
  // const pages: number[] = []

  // Show page numbers around current page
  const showPageNumbers = () => {
    const delta = 1 // Number of pages to show on each side
    const range = []
    const rangeWithDots = []
    let l

    for (let i = 1; i <= lastPage; i++) {
      if (
        i === 1 ||
        i === lastPage ||
        (i >= currentPage - delta && i <= currentPage + delta)
      ) {
        range.push(i)
      }
    }

    for (const i of range) {
      if (l) {
        if (i - l === 2) {
          rangeWithDots.push(l + 1)
        } else if (i - l !== 1) {
          rangeWithDots.push('...')
        }
      }
      rangeWithDots.push(i)
      l = i
    }

    return rangeWithDots
  }

  const pageNumbers = showPageNumbers()

  const goToPage = (page: number) => {
    if (onPageChange) {
      onPageChange(page)
      return
    }

    const url = new URL(window.location.href)
    url.searchParams.set(pageParamName, page.toString())
    router.visit(url.toString(), {
      preserveScroll: true,
      preserveState: true,
    })
  }

  return (
    <div className={cn('flex items-center justify-between gap-2 ', className)}>
      <div className="text-sm text-muted-foreground">
        Halaman {currentPage} dari {lastPage}
      </div>

      <div className="flex items-center gap-1">
        <Button
          variant="outline"
          size="icon"
          className="h-8 w-8"
          onClick={() => onPrev ? onPrev() : goToPage(currentPage - 1)}
          disabled={currentPage === 1}
        >
          <ChevronLeft className="h-4 w-4" />
          <span className="sr-only">Halaman sebelumnya</span>
        </Button>

        {pageNumbers.map((page, index) => (
          typeof page === 'number' ? (
            <Button
              key={index}
              variant={page === currentPage ? 'default' : 'outline'}
              size="icon"
              className="h-8 w-8"
              onClick={() => goToPage(page)}
            >
              {page}
            </Button>
          ) : (
            <div
              key={index}
              className="flex h-8 w-8 items-center justify-center text-sm text-muted-foreground"
            >
              {page}
            </div>
          )
        ))}

        <Button
          variant="outline"
          size="icon"
          className="h-8 w-8"
          onClick={() => onNext ? onNext() : goToPage(currentPage + 1)}
          disabled={currentPage === lastPage}
        >
          <ChevronRight className="h-4 w-4" />
          <span className="sr-only">Halaman selanjutnya</span>
        </Button>
      </div>
    </div>
  )
}