interface PaginationProps {
  currentPage: number
  lastPage: number
  perPage: number
  total: number
  onPageChange: (page: number) => void
  onPerPageChange?: (perPage: number) => void
}

export const Pagination = ({
  currentPage,
  lastPage,
  perPage,
  total,
  onPageChange,
  onPerPageChange,
}: PaginationProps) => {
  if (!lastPage || lastPage <= 1 || !total || total === 0) return null

  const from = (currentPage - 1) * perPage + 1
  const to = Math.min(currentPage * perPage, total)

  // Generate page numbers to show
  const getPageNumbers = () => {
    const pages: (number | string)[] = []
    const showPages = 5 // Number of page buttons to show
    
    if (lastPage <= showPages + 2) {
      // Show all pages if total is small
      for (let i = 1; i <= lastPage; i++) {
        pages.push(i)
      }
    } else {
      // Always show first page
      pages.push(1)
      
      if (currentPage > 3) {
        pages.push('...')
      }
      
      // Show pages around current page
      const start = Math.max(2, currentPage - 1)
      const end = Math.min(lastPage - 1, currentPage + 1)
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      
      if (currentPage < lastPage - 2) {
        pages.push('...')
      }
      
      // Always show last page
      pages.push(lastPage)
    }
    
    return pages
  }

  const perPageOptions = [5, 10, 20, 50, 100]

  return (
    <div className="flex flex-wrap items-center justify-between gap-4 border-t border-gray-100 px-5 py-4 dark:border-gray-800">
      <div className="flex items-center gap-3">
        {onPerPageChange && (
          <div className="flex items-center gap-2">
            <span className="text-sm text-gray-500 dark:text-gray-400">نمایش</span>
            <select
              value={perPage}
              onChange={(e) => {
                const newPerPage = Number(e.target.value)
                onPerPageChange(newPerPage)
                onPageChange(1)
              }}
              className="h-9 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:border-gray-300 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-600 dark:focus:border-brand-400"
            >
              {perPageOptions.map((option) => (
                <option key={option} value={option}>
                  {option.toLocaleString('fa-IR')}
                </option>
              ))}
            </select>
            <span className="text-sm text-gray-500 dark:text-gray-400">مورد</span>
          </div>
        )}
        <div className="text-sm text-gray-500 dark:text-gray-400">
          نمایش {from.toLocaleString('fa-IR')} تا {to.toLocaleString('fa-IR')} از {total.toLocaleString('fa-IR')} مورد
        </div>
      </div>
      <div className="flex items-center gap-2">
        <button
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className="flex h-9 items-center justify-center rounded-lg border border-gray-200 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
        >
          قبلی
        </button>

        {/* Page numbers */}
        {getPageNumbers().map((page, index) => (
          typeof page === 'number' ? (
            <button
              key={index}
              onClick={() => onPageChange(page)}
              className={`flex h-9 min-w-[36px] items-center justify-center rounded-lg px-3 text-sm font-medium transition-colors ${
                currentPage === page
                  ? 'bg-brand-500 text-white'
                  : 'border border-gray-200 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800'
              }`}
            >
              {page.toLocaleString('fa-IR')}
            </button>
          ) : (
            <span key={index} className="px-2 text-gray-400">
              ...
            </span>
          )
        ))}

        <button
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === lastPage}
          className="flex h-9 items-center justify-center rounded-lg border border-gray-200 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
        >
          بعدی
        </button>
      </div>
    </div>
  )
}
