UHD_Media_Tool/apps/web/app/components/ui/pagination.tsx

import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
import { cn } from "~/lib/utils.ts";

const PAGE_SIZE_OPTIONS = [10, 15, 20, 50, 100];

type PaginationProps = {
  page: number;
  pageSize: number;
  total: number;
  onPageChange: (page: number) => void;
  onPageSizeChange?: (size: number) => void;
  className?: string;
};

export function Pagination({ page, pageSize, total, onPageChange, onPageSizeChange, className }: PaginationProps) {
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
  const to = Math.min(page * pageSize, total);

  const isFirst = page <= 1;
  const isLast = page >= totalPages;

  // 生成页码列表（最多显示 7 个按钮）
  function buildPages(): (number | "...")[] {
    if (totalPages <= 7) {
      return Array.from({ length: totalPages }, (_, i) => i + 1);
    }
    if (page <= 4) {
      return [1, 2, 3, 4, 5, "...", totalPages];
    }
    if (page >= totalPages - 3) {
      return [1, "...", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
    }
    return [1, "...", page - 1, page, page + 1, "...", totalPages];
  }

  const pages = buildPages();

  return (
    <div className={cn("flex flex-wrap items-center justify-between gap-3", className)}>
      {/* 左侧：总数 + 每页显示 */}
      <div className="flex items-center gap-3">
        <span className="text-xs text-muted-foreground whitespace-nowrap">
          共 <span className="font-medium text-foreground tabular-nums">{total}</span> 条 · 第{" "}
          <span className="font-medium text-foreground tabular-nums">{from}</span>
          {" 至 "}
          <span className="font-medium text-foreground tabular-nums">{to}</span> 条
        </span>

        {/* 每页条数 */}
        {onPageSizeChange && (
          <div className="flex items-center gap-1.5">
            <span className="text-xs text-muted-foreground/60 whitespace-nowrap">每页</span>
            <select
              value={pageSize}
              onChange={(e) => {
                onPageSizeChange(Number(e.target.value));
                onPageChange(1); // 切换页大小时回到第 1 页
              }}
              className="h-7 rounded-lg border border-foreground/10 bg-foreground/5 px-2 text-xs text-foreground outline-none transition-colors focus:border-primary/50 cursor-pointer appearance-none pr-6"
              style={{
                backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
                backgroundRepeat: "no-repeat",
                backgroundPosition: "right 6px center",
              }}
            >
              {PAGE_SIZE_OPTIONS.map((s) => (
                <option key={s} value={s} className="bg-card text-foreground">
                  {s} 条
                </option>
              ))}
            </select>
          </div>
        )}
      </div>

      {/* 右侧：页码导航 */}
      <div className="flex items-center gap-0.5">
        {/* 首页 */}
        <NavBtn onClick={() => onPageChange(1)} disabled={isFirst} title="第一页">
          <ChevronsLeft className="h-3.5 w-3.5" />
        </NavBtn>

        {/* 上一页 */}
        <NavBtn onClick={() => onPageChange(page - 1)} disabled={isFirst} title="上一页">
          <ChevronLeft className="h-3.5 w-3.5" />
        </NavBtn>

        {/* 页码按钮 */}
        <div className="flex items-center gap-0.5 mx-1">
          {pages.map((p, i) =>
            p === "..." ? (
              <span
                key={`ellipsis-${i}`}
                className="flex h-7 w-6 items-center justify-center text-xs text-muted-foreground/40 select-none"
              >
                ···
              </span>
            ) : (
              <button
                key={p}
                type="button"
                onClick={() => onPageChange(p as number)}
                className={cn(
                  "flex h-7 min-w-[28px] px-1.5 items-center justify-center rounded-full text-xs font-medium transition-all",
                  p === page ? "pill-selected" : "text-muted-foreground hover:bg-foreground/8 hover:text-foreground",
                )}
              >
                {p}
              </button>
            ),
          )}
        </div>

        {/* 下一页 */}
        <NavBtn onClick={() => onPageChange(page + 1)} disabled={isLast} title="下一页">
          <ChevronRight className="h-3.5 w-3.5" />
        </NavBtn>

        {/* 末页 */}
        <NavBtn onClick={() => onPageChange(totalPages)} disabled={isLast} title="最后一页">
          <ChevronsRight className="h-3.5 w-3.5" />
        </NavBtn>
      </div>
    </div>
  );
}

function NavBtn({
  children,
  onClick,
  disabled,
  title,
}: {
  children: React.ReactNode;
  onClick: () => void;
  disabled: boolean;
  title?: string;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      title={title}
      className={cn(
        "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-all",
        disabled ? "opacity-25 cursor-not-allowed" : "hover:bg-foreground/8 hover:text-foreground",
      )}
    >
      {children}
    </button>
  );
}