Pagination — পেজ ভাগ

type PaginationState = {
  pageIndex: number; // 0 থেকে শুরু
  pageSize: number;
};

// ৫ পেজ, ৩ নম্বর পেজে আছি (মানে তৃতীয় পেজ)
{ pageIndex: 2, pageSize: 20 }

"use client";

import { useState } from "react";
import {
  getCoreRowModel,
  getPaginationRowModel,
  useReactTable,
  type PaginationState,
} from "@tanstack/react-table";

export function DataTable({ data, columns }: DataTableProps) {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    state: { pagination },
    onPaginationChange: setPagination,
  });
}

export function TablePagination({
  table,
}: {
  table: Table<Product>;
}) {
  const { pageIndex, pageSize } = table.getState().pagination;
  const pageCount = table.getPageCount();

  const visible = table.getRowModel().rows.length;

  const from = visible === 0 ? 0 : pageIndex * pageSize + 1;
  const to = pageIndex * pageSize + visible;
  const total = table.getFilteredRowModel().rows.length;

  return (
    <div className="flex items-center justify-between border-t p-3">
      <p className="text-sm text-muted-foreground">
        {from}–{to} / {total}টি
      </p>

      <div className="flex items-center gap-3">
        <div className="flex items-center gap-1">
          <Button
            variant="outline"
            size="icon-sm"
            onClick={() => table.setPageIndex(0)}
            disabled={!table.getCanPreviousPage()}
            aria-label="প্রথম পেজ"
          >
            <ChevronsLeft className="size-4" />
          </Button>
          <Button
            variant="outline"
            size="icon-sm"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
            aria-label="আগের পেজ"
          >
            <ChevronLeft className="size-4" />
          </Button>

          <span className="px-2 text-sm">
            পেজ {pageIndex + 1} / {Math.max(pageCount, 1)}
          </span>

          <Button
            variant="outline"
            size="icon-sm"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
            aria-label="পরের পেজ"
          >
            <ChevronRight className="size-4" />
          </Button>
          <Button
            variant="outline"
            size="icon-sm"
            onClick={() => table.setPageIndex(pageCount - 1)}
            disabled={!table.getCanNextPage()}
            aria-label="শেষ পেজ"
          >
            <ChevronsRight className="size-4" />
          </Button>
        </div>

        <Select
          value={String(pageSize)}
          onValueChange={(v) => table.setPageSize(Number(v))}
        >
          <SelectTrigger className="w-28">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {[10, 20, 30, 50].map((size) => (
              <SelectItem key={size} value={String(size)}>
                {size}টি
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}

table.getCanPreviousPage()   // pageIndex > 0
table.getCanNextPage()       // pageIndex < pageCount - 1
table.getPageCount()         // মোট কয়টি পেজ
table.getState().pagination  // { pageIndex, pageSize }

// সরাসরি নেভিগেশন
table.setPageIndex(3);
table.nextPage();
table.previousPage();
table.firstPage();
table.lastPage();

// page size
table.setPageSize(50);
table.resetPageIndex();   // মোট অবস্থা রিসেট

// UI তে দেখাতে হলে
const label = pageIndex + 1;   // 0 → "1"

// API-তে পাঠাতে হলে
const apiPage = pageIndex + 1; // 0 → 1  (১-ভিত্তিক API)

// ভুল
const apiPage = pageIndex;      // 0 → 0  ← প্রথম request-এ 0 পাঠাবে!

// ৩য় পেজে কোন row দেখাবে
const pageIndex = 2;
const pageSize = 20;

const firstRowOnPage = pageIndex * pageSize;        // 40  (0-ভিত্তিক index)
const displayNumber  = firstRowOnPage + 1;         // 41  (মানুষ যা দেখে)
const lastRowOnPage  = (pageIndex + 1) * pageSize; // 60

// pageSize 10 → 50 করলে
// pageIndex: 4 (5ম পেজ)
// → নতুন 50টির পেজে 4 আর নেই
// TanStack অটো-শুধু করে না যদি manual না হয়, কিন্তু যাচাই করা ভালো

const handlePageSizeChange = (size: number) => {
  setPagination((old) => {
    const maxIndex = Math.max(0, Math.ceil(total / size) - 1);
    return {
      pageSize: size,
      pageIndex: Math.min(old.pageIndex, maxIndex),
    };
  });
}

useEffect(() => {
  setPagination((old) =>
    old.pageIndex === 0 ? old : { ...old, pageIndex: 0 },
  );
}, [search, category, sortKey, sortOrder]);

useReactTable({
  data: data?.items ?? [],
  columns,
  getCoreRowModel: getCoreRowModel(),

  manualPagination: true,
  rowCount: data?.total ?? -1,   // ← মোট কত row আছে
});

export function ProductsTable() {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
  const [sorting, setSorting] = useState<SortingState>([]);

  const params = {
    page: pagination.pageIndex + 1,     // ← 0 → 1
    pageSize: pagination.pageSize,
    sortBy: sorting[0]?.id ?? "createdAt",
    sortOrder: sorting[0]?.desc ? "desc" : "asc",
  };

  const { data, isPending, isFetching } = useProducts(params);

  const table = useReactTable({
    data: data?.items ?? [],
    columns,
    getCoreRowModel: getCoreRowModel(),
    state: { pagination, sorting },
    onPaginationChange: setPagination,
    onSortingChange: setSorting,
    manualSorting: true,
    manualPagination: true,
    rowCount: data?.total ?? -1,
  });
}