import { router } from '@inertiajs/react';

import {
    Pagination,
    PaginationContent,
    PaginationEllipsis,
    PaginationItem,
    PaginationLink,
    PaginationNext,
    PaginationPrevious,
} from '@/components/ui/pagination';
import type { PaginationData } from '@/types/recurring-task';

interface RecurringTasksPaginationProps {
    pagination: PaginationData;
}

export function RecurringTasksPagination({
    pagination,
}: RecurringTasksPaginationProps) {
    if (pagination.last_page <= 1) {
        return null;
    }

    return (
        <div className="border-t p-4">
            <div className="mb-3 text-center text-xs font-medium text-muted-foreground">
                Showing {pagination.from ?? 0}-{pagination.to ?? 0} of{' '}
                {pagination.total}
            </div>
            <Pagination>
                <PaginationContent>
                    {pagination.links.map((link, index) => {
                        const normalizedLabel = link.label
                            .replace('&laquo;', '')
                            .replace('&raquo;', '')
                            .trim();
                        const isPrevious =
                            normalizedLabel.toLowerCase() === 'previous';
                        const isNext = normalizedLabel.toLowerCase() === 'next';
                        const isDisabled = link.url === null;

                        const handlePageClick = () => {
                            if (isDisabled || !link.url) {
                                return;
                            }

                            router.get(
                                link.url,
                                {},
                                {
                                    only: ['data'],
                                    preserveScroll: true,
                                    preserveState: true,
                                    replace: true,
                                },
                            );
                        };

                        if (normalizedLabel === '...') {
                            return (
                                <PaginationItem key={index}>
                                    <PaginationEllipsis />
                                </PaginationItem>
                            );
                        }

                        if (isPrevious) {
                            return (
                                <PaginationItem key={index}>
                                    <PaginationPrevious
                                        onClick={handlePageClick}
                                        disabled={isDisabled}
                                        className={
                                            isDisabled
                                                ? 'pointer-events-none opacity-50'
                                                : 'cursor-pointer'
                                        }
                                    />
                                </PaginationItem>
                            );
                        }

                        if (isNext) {
                            return (
                                <PaginationItem key={index}>
                                    <PaginationNext
                                        onClick={handlePageClick}
                                        disabled={isDisabled}
                                        className={
                                            isDisabled
                                                ? 'pointer-events-none opacity-50'
                                                : 'cursor-pointer'
                                        }
                                    />
                                </PaginationItem>
                            );
                        }

                        return (
                            <PaginationItem key={index}>
                                <PaginationLink
                                    isActive={link.active}
                                    onClick={handlePageClick}
                                    disabled={isDisabled}
                                    className={
                                        isDisabled
                                            ? 'pointer-events-none opacity-50'
                                            : 'cursor-pointer'
                                    }
                                >
                                    {normalizedLabel}
                                </PaginationLink>
                            </PaginationItem>
                        );
                    })}
                </PaginationContent>
            </Pagination>
        </div>
    );
}