import { Link } from '@inertiajs/react';
import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { PaginatedData } from '@/types';

interface PaginationProps {
    links: PaginatedData<any>['links'];
    meta?: {
        current_page: number;
        last_page: number;
        from: number;
        to: number;
        total: number;
    };
    // Sometimes Inertia returns meta and links separately, or together inside pagination object.
    // Based on AdminController, it returns `users` which is a LengthAwarePaginator.
    // In Inertia, this usually comes as an object with `data`, `links`, `meta` (if using resources) or just `data`, `current_page`, `last_page`, etc.
    // The `PaginatedData` type likely has `links` array.
    // Let's check `types/index.d.ts` or `types/ticket.ts` to be sure about `PaginatedData`.
    // For now I'll support the standard Laravel pagination structure.
}

// I'll need to check `PaginatedData` type definition actually. 
// Assuming standard Laravel API Resource or Paginator response.

// Let's make it flexible.
export function Pagination({ links }: { links: { url: string | null; label: string; active: boolean }[] }) {
    if (links.length <= 3) return null; // Don't show if only previous/next and no pages or just one page

    return (
        <div className="flex items-center justify-center space-x-2">
            {links.map((link, key) => {
                const isPrevious = link.label.includes('Previous');
                const isNext = link.label.includes('Next');
                const isEllipsis = link.label === '...';

                if (isEllipsis) {
                    return (
                        <span key={key} className="flex h-9 w-9 items-center justify-center">
                            <MoreHorizontal className="h-4 w-4" />
                        </span>
                    );
                }

                if (link.url === null) {
                    return (
                        <Button
                            key={key}
                            variant="ghost"
                            size="icon"
                            className="h-9 w-9 text-muted-foreground opacity-50"
                            disabled
                        >
                            {isPrevious ? <ChevronLeft className="h-4 w-4" /> :
                                isNext ? <ChevronRight className="h-4 w-4" /> :
                                    <span dangerouslySetInnerHTML={{ __html: link.label }} />}
                        </Button>
                    );
                }

                return (
                    <Button
                        key={key}
                        variant={link.active ? "default" : "ghost"}
                        size="icon"
                        className={cn("h-9 w-9", link.active ? "pointer-events-none" : "")}
                        asChild
                    >
                        <Link href={link.url}>
                            {isPrevious ? <ChevronLeft className="h-4 w-4" /> :
                                isNext ? <ChevronRight className="h-4 w-4" /> :
                                    <span dangerouslySetInnerHTML={{ __html: link.label }} />}
                        </Link>
                    </Button>
                );
            })}
        </div>
    );
}

// Also useful to show summary
export function PaginationSummary({ from, to, total }: { from: number; to: number; total: number }) {
    return (
        <div className="text-sm text-muted-foreground">
            Showing <span className="font-medium">{from}</span> to <span className="font-medium">{to}</span> of{' '}
            <span className="font-medium">{total}</span> results
        </div>
    );
}