"use client"

import { ChevronLeft, ChevronRight } from "lucide-react"

import { Button } from "@/shared/components/ui/button"

/**
 * 分页组件：统一的"Showing X-Y of Z items + Page X of Y + 上一页/下一页按钮"布局。
 *
 * 覆盖以下重复模式（3 个审计表格逐行复制）：
 * - audit-log-table.tsx
 * - login-log-table.tsx
 * - data-change-log-table.tsx
 *
 * 结构：左侧"Showing X-Y of Z {itemLabel}"，右侧"Page X of Y + 上一页/下一页按钮"。
 */
interface PaginationProps {
  /** 当前页码（从 1 开始） */
  page: number
  /** 每页条数 */
  pageSize: number
  /** 总条数 */
  total: number
  /** 总页数 */
  totalPages: number
  /** 页码变更回调 */
  onPageChange: (page: number) => void
  /** 条目标签（默认 "logs"，可改为 "records"/"items"） */
  itemLabel?: string
}

export function Pagination({
  page,
  pageSize,
  total,
  totalPages,
  onPageChange,
  itemLabel = "logs",
}: PaginationProps) {
  const start = total === 0 ? 0 : (page - 1) * pageSize + 1
  const end = Math.min(page * pageSize, total)

  return (
    <div className="flex items-center justify-between px-2 py-4">
      <div className="text-sm text-muted-foreground">
        {total > 0 ? (
          <>
            Showing <span className="font-medium">{start}</span>-
            <span className="font-medium">{end}</span> of{" "}
            <span className="font-medium">{total}</span> {itemLabel}
          </>
        ) : (
          `No ${itemLabel}`
        )}
      </div>
      <div className="flex items-center space-x-2">
        <span className="text-sm font-medium">
          Page {page} of {Math.max(totalPages, 1)}
        </span>
        <Button
          variant="outline"
          className="h-8 w-8 p-0"
          onClick={() => onPageChange(page - 1)}
          disabled={page <= 1}
        >
          <span className="sr-only">Previous page</span>
          <ChevronLeft className="h-4 w-4" />
        </Button>
        <Button
          variant="outline"
          className="h-8 w-8 p-0"
          onClick={() => onPageChange(page + 1)}
          disabled={page >= totalPages}
        >
          <span className="sr-only">Next page</span>
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>
    </div>
  )
}
