import { Link } from "@inertiajs/react";
import { cn } from "@/lib/utils";
import { BedDouble, ClipboardList, CreditCard } from "lucide-react";

type Props = {
    activeStep: number;
};

export default function UiProgressBar({ activeStep }: Props) {
    const steps = [
        {
            step: "01",
            label: "Select Rooms",
            href: "/rooms",
            icon: BedDouble,
        },
        {
            step: "02",
            label: "Reservation Summary",
            href: "/summary",
            icon: ClipboardList,
        },
        {
            step: "03",
            label: "Checkout",
            href: "/checkout",
            icon: CreditCard,
        },
    ];

    const progressWidth = `${(100 / 6) * (1 + 2 * activeStep)}%`;

    return (
        <div className="flex justify-center items-center w-full">
            <div className="relative mb-6 w-full max-w-4xl">

                {/* Background Line */}
                <div className="absolute top-5.5 left-0 w-full h-1 bg-gray-200 rounded-full overflow-hidden" />

                {/* Animated Progress */}
                <div
                    className="absolute top-5.5 left-0 h-1 bg-linear-to-r from-main/70 via-main to-main rounded-full transition-all duration-700 ease-out shadow-[0_0_20px_rgba(212,175,55,0.35)]"
                    style={{ width: progressWidth }}
                />

                {/* Steps */}
                <div className="relative flex items-center justify-between">
                    {steps.map((item, i) => {
                        const Icon = item.icon;

                        const isActive = i === activeStep;
                        const isCompleted = i < activeStep;

                        return (
                            <Link
                                key={i}
                                href={item.href}
                                className="group flex flex-col items-center flex-1"
                            >
                                {/* Circle */}
                                <div
                                    className={cn(
                                        "relative z-10 flex items-center justify-center",
                                        "h-12 w-12 rounded-full border bg-white",
                                        "transition-all duration-500",
                                        "hover:scale-105 hover:-translate-y-1 hover:rotate-6",
                                        isCompleted
                                            ? "bg-main border-main text-white shadow-lg shadow-main/30"
                                            : isActive
                                                ? "border-main text-main shadow-[0_0_25px_rgba(212,175,55,0.35)] "
                                                : "border-gray-300 text-gray-400 group-hover:border-main/60 group-hover:text-main"
                                    )}
                                >
                                    {isCompleted ? (
                                        <span className="text-lg">✓</span>
                                    ) : (
                                        <Icon className="h-5 w-5" />
                                    )}

                                    {/* Active Ping */}
                                    {isActive && (
                                        <span className="absolute inline-flex h-full w-full rounded-full bg-main/20 animate-ping" />
                                    )}
                                </div>

                                {/* Label */}
                                <div className="mt-3 text-center">
                                    <p
                                        className={cn(
                                            "text-sm tracking-wide transition-all duration-300",
                                            isActive
                                                ? "text-main font-semibold"
                                                : isCompleted
                                                    ? "text-gray-700"
                                                    : "text-gray-400 group-hover:text-main"
                                        )}
                                    >
                                        {item.label}
                                    </p>

                                    {/* Mini underline animation */}
                                    <div
                                        className={cn(
                                            "mx-auto mt-1 h-0.5 rounded-full bg-main transition-all duration-500",
                                            isActive || isCompleted
                                                ? "w-8 opacity-100"
                                                : "w-0 opacity-0 group-hover:w-6 group-hover:opacity-70"
                                        )}
                                    />
                                </div>
                            </Link>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}