import type { Table } from '@tanstack/react-table';
import { Button } from '@/components/ui/button';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

const PAGE_SIZE_OPTIONS = [10, 15, 25, 50] as const;

type DataTablePaginationProps<TData> = {
    table: Table<TData>;
    totalRows?: number;
    manualPagination?: boolean;
};

export function DataTablePagination<TData>({
    table,
    totalRows,
    manualPagination = false,
}: DataTablePaginationProps<TData>) {
    const pageCount = table.getPageCount();
    const { pageIndex, pageSize } = table.getState().pagination;
    const filteredCount = table.getFilteredRowModel().rows.length;
    const count = manualPagination && totalRows !== undefined ? totalRows : filteredCount;

    return (
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <p className="text-sm text-muted-foreground">
                {count} résultat{count > 1 ? 's' : ''}
                {pageCount > 0
                    ? ` · page ${pageIndex + 1} / ${Math.max(pageCount, 1)}`
                    : null}
            </p>

            <div className="flex flex-wrap items-center gap-3">
                <div className="flex items-center gap-2">
                    <span className="text-sm text-muted-foreground">
                        Lignes
                    </span>
                    <Select
                        value={String(pageSize)}
                        onValueChange={(value) => {
                            table.setPageSize(Number(value));
                        }}
                    >
                        <SelectTrigger size="sm" className="w-[72px]">
                            <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                            {PAGE_SIZE_OPTIONS.map((size) => (
                                <SelectItem key={size} value={String(size)}>
                                    {size}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>

                <div className="flex items-center gap-2">
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => table.previousPage()}
                        disabled={!table.getCanPreviousPage()}
                    >
                        Précédent
                    </Button>
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => table.nextPage()}
                        disabled={!table.getCanNextPage()}
                    >
                        Suivant
                    </Button>
                </div>
            </div>
        </div>
    );
}

export { PAGE_SIZE_OPTIONS };