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

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

interface TasksPaginationProps {
    pagination: PaginationData;
}

function getVisibleLinks(pagination: PaginationData) {
    return pagination.links.filter((link) => {
        const label = link.label
            .replace('«', '')
            .replace('»', '')
            .trim();
        const page = Number(label);

        if (
            label === '...' ||
            label.toLowerCase() === 'previous' ||
            label.toLowerCase() === 'next' ||
            link.active
        ) {
            return true;
        }

        if (Number.isNaN(page)) {
            return false;
        }

        if (pagination.current_page <= 2) {
            return page <= 3 || page === pagination.last_page;
        }

        if (pagination.current_page >= pagination.last_page - 1) {
            return page >= pagination.last_page - 2 || page === 1;
        }

        return (
            page === 1 ||
            page === pagination.last_page ||
            Math.abs(page - pagination.current_page) <= 1
        );
    });
}

export function TasksPagination({ pagination }: TasksPaginationProps) {
    if (pagination.last_page <= 1) {
        return null;
    }

    const visibleLinks = getVisibleLinks(pagination);

    return (
        <div className="border-t bg-background px-5 py-4">
            <div className="flex justify-center overflow-x-auto">
                <div className="min-w-max">
                    <Pagination>
                        <PaginationContent className="min-w-max gap-1">
                            {visibleLinks.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 className="h-8 w-8" />
                                        </PaginationItem>
                                    );
                                }

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

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

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