"use client"

import { CheckCircle2, Circle, Clock, Package, Truck, Flag } from "lucide-react"
import { motion } from "framer-motion"

interface OrderTimelineProps {
    status: string;
    orderDate: Date | string;
    paidAt?: Date | string;
    completedAt?: Date | string;
}

const steps = [
    { status: "unpaid", label: "Ordered", icon: Clock },
    { status: "paid", label: "Paid", icon: CheckCircle2 },
    { status: "acknowledged", label: "Processing", icon: Package },
    { status: "shipped", label: "Shipped", icon: Truck },
    { status: "completed", label: "Completed", icon: Flag },
]

export default function OrderTimeline({ status, orderDate, paidAt }: OrderTimelineProps) {
    const currentStatusIndex = steps.findIndex(step =>
        step.status === status ||
        (status === "confirming" && step.status === "unpaid") ||
        (status === "acknowledged" && step.status === "paid") // Processed is after paid
    );

    // If status is "confirming", it's basically "unpaid" for the timeline
    // If status is "acknowledged", it's "Processing"

    const getStepStatus = (index: number) => {
        // Basic logic to determine if a step is completed, current, or pending
        let effectiveIndex = currentStatusIndex;
        if (status === "confirming") effectiveIndex = 0;
        if (status === "paid") effectiveIndex = 1;
        if (status === "acknowledged") effectiveIndex = 2;
        if (status === "shipped") effectiveIndex = 3;
        if (status === "completed") effectiveIndex = 4;

        if (index < effectiveIndex) return "completed";
        if (index === effectiveIndex) return "current";
        return "pending";
    };

    return (
        <div className="relative flex justify-between items-center w-full px-4 py-8">
            {/* Connector Line */}
            <div className="absolute left-10 right-10 top-1/2 h-0.5 bg-muted -translate-y-1/2 z-0">
                <motion.div
                    className="h-full bg-primary"
                    initial={{ width: "0%" }}
                    animate={{ width: `${(Math.max(0, steps.findIndex(s => s.status === status)) / (steps.length - 1)) * 100}%` }}
                    transition={{ duration: 1, ease: "easeInOut" }}
                />
            </div>

            {steps.map((step, index) => {
                const stepStatus = getStepStatus(index);
                const Icon = step.icon;

                return (
                    <div key={step.label} className="relative flex flex-col items-center z-10">
                        <motion.div
                            initial={{ scale: 0.8, opacity: 0 }}
                            animate={{ scale: 1, opacity: 1 }}
                            transition={{ delay: index * 0.1 }}
                            className={`flex items-center justify-center w-10 h-10 rounded-full border-2 transition-colors duration-500 ${stepStatus === "completed"
                                    ? "bg-primary border-primary text-primary-foreground"
                                    : stepStatus === "current"
                                        ? "bg-background border-primary text-primary ring-4 ring-primary/10"
                                        : "bg-background border-muted text-muted-foreground"
                                }`}
                        >
                            <Icon className="h-5 w-5" />
                        </motion.div>
                        <div className="absolute top-12 whitespace-nowrap text-xs font-medium tracking-tight">
                            <p className={stepStatus === "pending" ? "text-muted-foreground" : "text-foreground"}>
                                {step.label}
                            </p>
                        </div>
                    </div>
                );
            })}
        </div>
    )
}