import { Table } from '@tanstack/react-table';

import { Button } from '@/components/ui/button';
import { PaginatedData } from '@/types';
import { router } from '@inertiajs/react';

const PER_PAGE_OPTIONS = [10, 15, 20, 25, 30, 40, 50, 100];

interface DataTablePaginationProps<TData> {
    table: Table<TData>;
    paginatedData: PaginatedData<TData>;
    navigate?: (params: Record<string, any>) => void;
}

export function DataTablePagination<TData>({ table, paginatedData, navigate }: DataTablePaginationProps<TData>) {
    const { meta, links, queryParams } = paginatedData || {};

    // If no pagination data, don't render anything
    if (!meta || !links) {
        return null;
    }

    // Per page change
    const handlePerPageChange = (value: number) => {
        if (navigate) {
            navigate({ ...queryParams, per_page: value, page: 1 });
        } else {
            router.get(
                route(route().current() ?? ''),
                {
                    ...queryParams,
                    per_page: value,
                    page: 1,
                },
                {
                    preserveScroll: true,
                },
            );
        }
    };

    return (
        <div className="flex items-center justify-between">
            <div className="hidden text-sm text-primary md:block">
                Showing {meta.from} to {meta.to} of {meta.total} results
            </div>
            <div className="flex items-center space-x-2">
                <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                        if (links.prev === null || meta.current_page === 1) return;
                        if (navigate) {
                            navigate({ ...queryParams, page: meta.current_page - 1 });
                        } else {
                            router.get(
                                route(route().current() ?? ''),
                                { ...queryParams, page: meta.current_page - 1 },
                                { preserveState: true, preserveScroll: true },
                            );
                        }
                    }}
                    disabled={links.prev === null || meta.current_page === 1}
                >
                    Previous
                </Button>

                {/* Page Numbers */}
                <div className="flex items-center space-x-1 text-primary">
                    {Array.from({ length: Math.min(5, meta.last_page) }, (_, i) => {
                        const page = i + 1;
                        return (
                            <Button
                                key={page}
                                variant={page === meta.current_page ? 'default' : 'outline'}
                                size="sm"
                                className={`${page === meta.current_page && 'bg-success text-white hover:bg-brand-800'} h-8 w-8`}
                                onClick={() => {
                                    if (navigate) {
                                        navigate({ ...queryParams, page });
                                        router.get(
                                            route(route().current() ?? ''),
                                            { ...queryParams, page },
                                            { preserveState: true, preserveScroll: true },
                                        );
                                    }
                                }}
                            >
                                {page}
                            </Button>
                        );
                    })}
                    {meta.last_page > 5 && (
                        <>
                            <span className="px-2 text-primary">...</span>
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                    if (navigate) {
                                        navigate({ ...queryParams, page: meta.last_page });
                                    } else {
                                        router.get(
                                            route(route().current() ?? ''),
                                            { ...queryParams, page: meta.last_page },
                                            { preserveState: true, preserveScroll: true },
                                        );
                                    }
                                }}
                            >
                                {meta.last_page}
                            </Button>
                        </>
                    )}
                </div>

                <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                        if (links.next === null || meta.current_page === meta.last_page) return;
                        if (navigate) {
                            navigate({ ...queryParams, page: meta.current_page + 1 });
                            router.get(
                                route(route().current() ?? ''),
                                { per_page: meta.per_page, page: meta.current_page + 1 },
                                { preserveState: true, preserveScroll: true },
                            );
                        } else {
                            router.get(
                                route(route().current() ?? ''),
                                { ...queryParams, page: meta.current_page + 1 },
                                { preserveState: true, preserveScroll: true },
                            );
                        }
                    }}
                    disabled={links.next === null || meta.current_page === meta.last_page}
                >
                    Next
                </Button>
            </div>
        </div>
    );
}