/**
 * 工单分页 — 页码窗口(最多展示 5 页)与上/下一页控制
 * 可见性由父组件控制(仅 totalPages > 1 时渲染)
 */

interface TicketPaginationProps {
  page: number;
  total: number;
  totalPages: number;
  /** 页码跳转(父级写入 URL query) */
  onPageChange: (page: number) => void;
}

export function TicketPagination({ page, total, totalPages, onPageChange }: TicketPaginationProps) {
  return (
    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 py-4 border-t border-[var(--dg-border)]">
      <span className="text-sm text-[var(--dg-text-muted)]">共 {total} 条</span>
      <div className="flex gap-1 overflow-x-auto">
        <button
          disabled={page <= 1}
          onClick={() => onPageChange(page - 1)}
          className="dg-btn dg-btn-ghost dg-btn-sm disabled:opacity-50"
        >
          上一页
        </button>
        {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
          let p: number;
          if (totalPages <= 5) {
            p = i + 1;
          } else if (page <= 3) {
            p = i + 1;
          } else if (page >= totalPages - 2) {
            p = totalPages - 4 + i;
          } else {
            p = page - 2 + i;
          }
          return (
            <button
              key={p}
              onClick={() => onPageChange(p)}
              className={`dg-btn dg-btn-sm dg-btn-ghost ${
                p === page ? 'bg-blue-500 text-white hover:bg-blue-500' : ''
              }`}
            >
              {p}
            </button>
          );
        })}
        <button
          disabled={page >= totalPages}
          onClick={() => onPageChange(page + 1)}
          className="dg-btn dg-btn-ghost dg-btn-sm disabled:opacity-50"
        >
          下一页
        </button>
      </div>
    </div>
  );
}