import { Link } from '@inertiajs/react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';

interface PaginationLink {
    url: string | null;
    label: string;
    active: boolean;
}

/** Object form of the pagination links (Laravel resource response). */
interface PaginationLinksObject {
    first: string | null;
    last: string | null;
    prev: string | null;
    next: string | null;
}

interface PaginationProps {
    links: PaginationLinksObject;
    meta: {
        links: PaginationLink[];
        total: number;
        from: number | null;
        to: number | null;
    };
}

const ARROW_LABELS = new Set([
    '« Previous',
    '« Previous',
    '« Vorherige',
    '« Vorherige',
    'Next »',
    'Next »',
    'Nächste »',
    'Nächste »',
]);

/*
 * Paginator footer (Laravel pagination links, kept as plain Inertia links so
 * every page state is shareable via URL). Shows "X–Y of Z" plus prev/next.
 * Laravel resource collections deliver prev/next as the `links` object and
 * the numbered page links inside `meta.links`.
 */
export function Pagination({ links, meta }: PaginationProps) {
    const { total, from, to } = meta;

    if (total === 0) {
        return null;
    }

    const numberedLinks = meta.links.filter(
        (link) => !ARROW_LABELS.has(link.label),
    );

    return (
        <div className="flex items-center justify-between border-t border-gray-100 bg-neutral-50 px-4 py-2.5">
            <span className="text-[10px] font-bold tracking-widest text-gray-400 uppercase">
                {from !== null && to !== null
                    ? `${formatNumber(from)}–${formatNumber(to)} of ${formatNumber(total)}`
                    : `${formatNumber(total)} rows`}
            </span>
            <div className="flex items-center gap-1">
                {links.prev && (
                    <Link
                        href={links.prev}
                        className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-gray-500 transition-colors hover:bg-slate-200 hover:text-astara-purple"
                    >
                        <ChevronLeft size={14} />
                    </Link>
                )}
                {numberedLinks.map((link) =>
                    link.url ? (
                        <Link
                            key={link.label}
                            href={link.url}
                            className={cn(
                                'flex h-6 min-w-6 cursor-pointer items-center justify-center rounded px-1.5 text-[10px] font-bold transition-colors',
                                link.active
                                    ? 'bg-astara-orange text-white'
                                    : 'text-gray-500 hover:bg-slate-200 hover:text-astara-purple',
                            )}
                        >
                            {link.label}
                        </Link>
                    ) : (
                        <span
                            key={link.label}
                            className="flex h-6 min-w-6 items-center justify-center px-1.5 text-[10px] text-gray-300"
                        >
                            {link.label}
                        </span>
                    ),
                )}
                {links.next && (
                    <Link
                        href={links.next}
                        className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-gray-500 transition-colors hover:bg-slate-200 hover:text-astara-purple"
                    >
                        <ChevronRight size={14} />
                    </Link>
                )}
            </div>
        </div>
    );
}

function formatNumber(value: number): string {
    return new Intl.NumberFormat('de-CH').format(value);
}