Row Selection — row বাছাই

// rowSelection state এর আকার
type RowSelectionState = Record<string, boolean>;

// {
//   "p-01": true,
//   "p-04": true,
//   "p-09": true,
// }
//
// ⚠️ key হলো row.id — তাই getRowId না দিলে index ("0", "1") হয়ে যায়

const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),

  enableRowSelection: true,   // default true, বন্ধ করতে চাইলে false
  state: { rowSelection },
  onRowSelectionChange: setRowSelection,

  getRowId: (row) => row.id,   // ← এটা না দিলে selection ভাঙবে
});

import { Checkbox } from "@/components/ui/checkbox";
import type { ColumnDef } from "@tanstack/react-table";

export const selectColumn: ColumnDef<Product> = {
  id: "select",
  header: ({ table }) => {
    const allSelected = table.getIsAllPageRowsSelected();
    const someSelected = table.getIsSomePageRowsSelected();

    return (
      <Checkbox
        aria-label="সব row নির্বাচন"
        checked={allSelected ? true : someSelected ? "indeterminate" : false}
        onCheckedChange={(checked) =>
          table.toggleAllPageRowsSelected(checked === true)
        }
      />
    );
  },
  cell: ({ row }) => (
    <Checkbox
      aria-label={`${row.original.name} নির্বাচন`}
      checked={row.getIsSelected()}
      onCheckedChange={(checked) => row.toggleSelected(checked === true)}
    />
  ),

  // এই কলামটা সাজানো/লুকানো হবে না
  enableSorting: false,
  enableHiding: false,
}

const columns: ColumnDef<Product>[] = [
  selectColumn,               // ← সবসময় প্রথমে
  { accessorKey: "name", header: "পণ্যের নাম" },
  // … বাকি কলাম
];

header: ({ table }) => {
  const all = table.getIsAllPageRowsSelected();
  const some = table.getIsSomePageRowsSelected();

  return (
    <div className="flex items-center gap-2">
      <Checkbox
        checked={all ? true : some ? "indeterminate" : false}
        onCheckedChange={(v) =>
          table.toggleAllPageRowsSelected(v === true)
        }
      />

      {/* সব পেজ ধরে বেছে নিতে চাইলে লিংক */}
      {some && !all && table.getFilteredRowModel().rows.length > table.getRowModel().rows.length && (
        <Button
          variant="link"
          size="sm"
          className="h-auto p-0 text-xs"
          onClick={() => table.toggleAllRowsSelected(true)}
        >
          সব {table.getFilteredRowModel().rows.length}টি বেছে নিন
        </Button>
      )}
    </div>
  );
}}

// রেন্ডার করা (যেমন selection-এর উপর ভিত্তি করে style)
row.getIsSelected()          // boolean
row.getToggleSelectedHandler()

// পুরো টেবিল থেকে
const selectedRows = table.getSelectedRowModel().rows;  // Row<Product>[]
const selectedIds = table.getSelectedRowModel().flatRows.map(
  (row) => row.id,
);

// state সরাসরি পড়া
Object.keys(table.getState().rowSelection);  // ⚠️ false ও থাকতে পারে

// ✅ নির্ভরযোগ্য উপায়
const ids = table
  .getSelectedRowModel()
  .rows.map((row) => row.original.id);

useEffect(() => {
  const ids = table.getSelectedRowModel().rows.map((r) => r.original.id);
  setSelectedCount(ids.length);
}, [table.getState().rowSelection]);

const selectedRows = table.getSelectedRowModel().rows;
const count = selectedRows.length;

{count > 0 && (
  <div className="flex items-center gap-3 border-b bg-muted/40 px-4 py-2">
    <span className="text-sm font-medium">
      {count}টি নির্বাচিত
    </span>

    <div className="ml-auto flex gap-2">
      <Button
        variant="outline"
        size="sm"
        onClick={async () => {
          const ids = selectedRows.map((r) => r.original.id);
          await deleteProducts(ids);
          table.resetRowSelection();
        }}
      >
        মুছে ফেলুন
      </Button>

      <Button
        variant="ghost"
        size="sm"
        onClick={() => table.resetRowSelection()}
      >
        বাতিল
      </Button>
    </div>
  </div>
)}

// নির্বাচিত সব বাদ দিতে চাইলে
row.toggleSelected(false);

// ঐ পেজের সব বাদ
table.toggleAllPageRowsSelected(false);

// পুরো ফলাফল বাদ
table.resetRowSelection();

{
  accessorKey: "name",
  cell: ({ row }) => (
    <Checkbox
      checked={row.getIsSelected()}
      disabled={!row.getCanSelect()}
      onCheckedChange={(v) => row.toggleSelected(v === true)}
    />
  ),
}

// কোনো শর্তে select বন্ধ
const table = useReactTable({
  // …
  enableRowSelection: (row) => row.original.isActive, // inactive select করা যাবে না
});

// নির্বাচিত id গুলো URL-এ
useEffect(() => {
  const ids = table.getSelectedRowModel().rows.map((r) => r.original.id);
  const params = new URLSearchParams();
  if (ids.length) params.set("ids", ids.join(","));
  router.replace(`?${params.toString()}`, { scroll: false });
}, [table.getState().rowSelection]);