Uecko_ERP/packages/rdx-ui/src/components/datatable/data-table-pagination.tsx

import { Table } from "@tanstack/react-table";
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronsLeftIcon,
  ChevronsRightIcon
} from "lucide-react";

import {
  Pagination, PaginationContent,
  PaginationItem, PaginationLink,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@repo/shadcn-ui/components';
import { cn } from '@repo/shadcn-ui/lib/utils';
import { useTranslation } from '../../locales/i18n.ts';
import { DataTableMeta } from './data-table.tsx';

interface DataTablePaginationProps<TData> {
  table: Table<TData>;
  className?: string;
}

export function DataTablePagination<TData>({ table, className }: DataTablePaginationProps<TData>) {
  const { t } = useTranslation();

  const { pageIndex, pageSize } = table.getState().pagination;
  const pageCount = table.getPageCount() || 1;
  const totalRows = (table.options.meta as DataTableMeta<TData>)?.totalItems ?? table.getFilteredRowModel().rows.length;
  const hasSelected = table.getFilteredSelectedRowModel().rows.length > 0;

  // Calcula rango visible (inicio-fin)
  const start = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
  const end = Math.min((pageIndex + 1) * pageSize, totalRows);

  return (
    <div className={cn(
      "flex items-center justify-between",
      className
    )}>
      {/* Información izquierda */}
      <div className="flex flex-col sm:flex-row items-center gap-4 flex-1 text-sm text-muted-foreground">
        {/* Rango visible */}
        <span aria-live="polite">
          {t("components.datatable.pagination.showing_range", {
            start,
            end,
            total: totalRows,
          })}
        </span>

        {/* Selección de filas */}
        {hasSelected && (
          <span aria-live="polite">
            {t("components.datatable.pagination.rows_selected", {
              count: table.getFilteredSelectedRowModel().rows.length,
              total: table.getFilteredRowModel().rows.length,
            })}
          </span>
        )}

        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground text-nowrap">
            {t("components.datatable.pagination.rows_per_page")}
          </span>
          <Select
            value={String(pageSize)}
            onValueChange={(value) => table.setPageSize(Number(value))}
          >
            <SelectTrigger className="w-20 h-8 bg-white border-gray-200">
              <SelectValue placeholder={String(pageSize)} />
            </SelectTrigger>
            <SelectContent>
              {[10, 20, 25, 30, 40, 50].map((size) => (
                <SelectItem key={size} value={String(size)}>
                  {size}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Controles derecha */}
      <div className="flex items-center gap-2">
        <Pagination>
          <PaginationContent>
            {/* Primera página */}
            <PaginationItem>
              <PaginationLink
                aria-label={t("components.datatable.pagination.goto_first_page")}
                onClick={() => table.setPageIndex(0)}
                isActive={!table.getCanPreviousPage()}
                size="sm"
                className="px-2.5"
              >
                <ChevronsLeftIcon className="size-4" />
              </PaginationLink>
            </PaginationItem>

            {/* Anterior */}
            <PaginationItem>
              <PaginationLink
                aria-label={t("components.datatable.pagination.goto_previous_page")}
                onClick={() => table.previousPage()}
                isActive={!table.getCanPreviousPage()}
                size="sm"
                className="px-2.5"
              >
                <ChevronLeftIcon className="size-4" />
              </PaginationLink>
            </PaginationItem>

            <span
              className="text-sm text-muted-foreground px-2"
              aria-live="polite"
            >
              {t("components.datatable.pagination.page_of", {
                page: pageIndex + 1,
                of: pageCount || 1,
              })}
            </span>

            {/* Siguiente */}
            <PaginationItem>
              <PaginationLink
                aria-label={t("components.datatable.pagination.goto_next_page")}
                onClick={() => table.nextPage()}
                isActive={!table.getCanNextPage()}
                size="sm"
                className="px-2.5"
              >
                <ChevronRightIcon className="size-4" />
              </PaginationLink>
            </PaginationItem>

            {/* Última página */}
            <PaginationItem>
              <PaginationLink
                aria-label={t("components.datatable.pagination.goto_last_page")}
                onClick={() => table.setPageIndex(pageCount - 1)}
                isActive={!table.getCanNextPage()}
                size="sm"
                className="px-2.5"
              >
                <ChevronsRightIcon className="size-4" />
              </PaginationLink>
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </div>
    </div>
  );
}