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

interface PaginationProps {
    links: {
        url: string | null;
        label: string;
        active: boolean;
    }[];
    className?: string;
}

export default function Pagination({ links, className }: PaginationProps) {
    // 如果只有一頁，不顯示分頁
    if (links.length <= 3) return null;

    return (
        <div className={cn("flex flex-wrap justify-center gap-1", className)}>
            {links.map((link, key) => {
                // 處理特殊標籤
                let label = link.label;
                if (label.includes("&laquo;")) label = "Previous";
                if (label.includes("&raquo;")) label = "Next";

                const isPrevious = label === "Previous";
                const isNext = label === "Next";

                // 如果是 Previous/Next 但沒有 URL，則不渲染（或者渲染為 disabled）
                if ((isPrevious || isNext) && !link.url) {
                    return (
                        <div
                            key={key}
                            className={cn(
                                "flex h-9 items-center justify-center rounded-md border border-input bg-transparent px-3 text-sm text-muted-foreground opacity-50 cursor-not-allowed",
                                isPrevious || isNext ? "px-2" : ""
                            )}
                        >
                            {isPrevious && <ChevronLeft className="h-4 w-4" />}
                            {isNext && <ChevronRight className="h-4 w-4" />}
                            {!isPrevious && !isNext && <span dangerouslySetInnerHTML={{ __html: link.label }} />}
                        </div>
                    );
                }

                return link.url ? (
                    <Link
                        key={key}
                        href={link.url}
                        preserveScroll
                        className={cn(
                            "flex h-9 items-center justify-center rounded-md border px-3 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
                            link.active
                                ? "border-primary bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground"
                                : "border-input bg-transparent text-foreground",
                            isPrevious || isNext ? "px-2" : ""
                        )}
                    >
                        {isPrevious && <ChevronLeft className="h-4 w-4" />}
                        {isNext && <ChevronRight className="h-4 w-4" />}
                        {!isPrevious && !isNext && <span dangerouslySetInnerHTML={{ __html: link.label }} />}
                    </Link>
                ) : (
                    <div
                        key={key}
                        className="flex h-9 items-center justify-center rounded-md border border-input bg-transparent px-3 text-sm text-foreground"
                    >
                        <span dangerouslySetInnerHTML={{ __html: link.label }} />
                    </div>
                );
            })}
        </div>
    );
}