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

import {
    Pagination,
    PaginationContent,
    PaginationEllipsis,
    PaginationItem,
    PaginationLink,
    PaginationNext,
    PaginationPrevious,
} from '@/components/ui/pagination';
import { describeLinks, getVisibleLinks } from '@/lib/pagination-window';
import type { PaginationData } from '@/types/pagination';

interface DataPaginationProps {
    pagination: PaginationData;
    /**
     * Nama prop Inertia yang di-reload saat pindah halaman.
     *
     * Sengaja wajib, tanpa default: prop yang tidak disebut tidak akan pernah
     * ikut pulang, dan partial reload Inertia me-*merge* alih-alih mengganti —
     * jadi halaman berpindah di URL sementara tabelnya diam, tanpa error apa
     * pun. Menuntutnya di sini memindahkan kegagalan itu ke `tsc`.
     */
    only: string[];
}

/**
 * Navigasi paginasi berbasis link Laravel untuk halaman yang dimuat via
 * Inertia. Perpindahan halaman memakai partial reload (`only`) tanpa memuat
 * ulang seluruh halaman.
 */
export function DataPagination({ pagination, only }: DataPaginationProps) {
    if (pagination.last_page <= 1) {
        return null;
    }

    const links = getVisibleLinks(pagination, describeLinks(pagination));

    const content = (
        <Pagination>
            <PaginationContent className="min-w-max">
                {links.map((link, index) => {
                    const isPrevious = link.kind === 'previous';
                    const isNext = link.kind === 'next';
                    const isDisabled = link.url === null;

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

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

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

                    if (isPrevious || isNext) {
                        const NavButton = isPrevious
                            ? PaginationPrevious
                            : PaginationNext;

                        return (
                            <PaginationItem key={index}>
                                <NavButton
                                    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'
                                }
                            >
                                {link.label}
                            </PaginationLink>
                        </PaginationItem>
                    );
                })}
            </PaginationContent>
        </Pagination>
    );

    return (
        <div className="p-4">
            <div className="flex justify-center overflow-x-auto">{content}</div>
        </div>
    );
}