"use client";

import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
} from "lucide-react";
import type { Table } from "@tanstack/react-table";

import { PAGE_SIZE_OPTIONS } from "@/config/pagination";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

type Props<T> = {
  table: Table<T>;
  totalRows: number;
  itemNoun: string;
  /** Pluralized form (defaults to itemNoun + "s") */
  itemNounPlural?: string;
  pageSizes?: number[];
  /** Stable id prefix to avoid collisions when multiple tables share a page. */
  idPrefix?: string;
};

export function DataTablePagination<T>({
  table,
  totalRows,
  itemNoun,
  itemNounPlural,
  pageSizes = [...PAGE_SIZE_OPTIONS],
  idPrefix = "data-table",
}: Props<T>) {
  const noun = totalRows === 1 ? itemNoun : (itemNounPlural ?? `${itemNoun}s`);
  const pageSizeId = `${idPrefix}-page-size`;

  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p className="text-muted-foreground text-sm">
        {totalRows} {noun}
      </p>
      <div className="flex w-full flex-wrap items-center justify-end gap-4 sm:w-auto">
        <div className="flex items-center gap-2">
          <Label htmlFor={pageSizeId} className="font-medium text-sm whitespace-nowrap">
            Rows per page
          </Label>
          <Select
            value={`${table.getState().pagination.pageSize}`}
            onValueChange={(value) => table.setPageSize(Number(value))}
          >
            <SelectTrigger size="sm" className="w-20" id={pageSizeId}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent side="top">
              <SelectGroup>
                {pageSizes.map((size) => (
                  <SelectItem key={size} value={`${size}`}>
                    {size}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>
        <div className="font-medium text-sm tabular-nums">
          Page {table.getState().pagination.pageIndex + 1} of {Math.max(table.getPageCount(), 1)}
        </div>
        <div className="flex items-center gap-1">
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => table.setPageIndex(0)}
            disabled={!table.getCanPreviousPage()}
          >
            <ChevronsLeft className="size-4" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            <ChevronLeft className="size-4" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
          >
            <ChevronRight className="size-4" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
            disabled={!table.getCanNextPage()}
          >
            <ChevronsRight className="size-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}