"use client";
import { FaMoneyBillWave } from "react-icons/fa";
import { GoCheckCircle } from "react-icons/go";
import { TbTruckDelivery } from "react-icons/tb";
import { BsBoxSeam } from "react-icons/bs";
import { MdCancel } from "react-icons/md";
import { useTranslations } from "next-intl";

// const steps = [
//   { label: "Paid", icon: <FaMoneyBillWave /> },
//   { label: "Received by Shipper", icon: <BsBoxSeam /> },
//   { label: "Shipping", icon: <TbTruckDelivery /> },
//   { label: "Delivered", icon: <GoCheckCircle /> },
// ];

const steps = (t: any) => [
  {
    label: t("order_card.order_stepper.pending_payment"),
    icon: <FaMoneyBillWave />,
    status: "pending",
  },
  {
    label: t("order_card.order_stepper.processing"),
    icon: <BsBoxSeam />,
    status: "processing",
  },
  {
    label: t("order_card.order_stepper.shipped"),
    icon: <TbTruckDelivery />,
    status: "shipped",
  },
  {
    label: t("order_card.order_stepper.out_for_delivery"),
    icon: <TbTruckDelivery />,
    status: "out_for_delivery",
  },
  {
    label: t("order_card.order_stepper.delivered"),
    icon: <GoCheckCircle />,
    status: "delivered",
  },
  {
    label: t("order_card.order_stepper.cancelled"),
    icon: <MdCancel />,
    status: "cancelled",
  },
];

interface OrderStepperProps {
  currentStep?: number;
  orderHistory: any;
  isDelivered?: boolean;
}

export default function OrderStepper({
  orderHistory,
  isDelivered,
}: OrderStepperProps) {
  const t = useTranslations();
  const stepLabels = steps(t);

  const lastOrderStatus = orderHistory?.[orderHistory.length - 1]?.status;

  let currentStepIndex;

  if (!isDelivered) {
    currentStepIndex = stepLabels.findIndex(
      (step) => step.status === lastOrderStatus
    );
  } else {
    currentStepIndex = stepLabels.findIndex(
      (step) => step.status === "delivered"
    );
  }

  const currentStep = currentStepIndex !== -1 ? currentStepIndex + 1 : 0;
  return (
    <div className="flex items-center justify-between pb-7">
      {stepLabels.map((step: any, index: number) => (
        <div
          className="flex items-center w-full last-of-type:w-fit"
          key={index}
        >
          {/* Step Circle */}
          <div className="flex flex-col items-center text-center relative">
            <div
              className={`w-12 h-12 text-xl rounded-full shadow-lg flex items-center justify-center border-2 max-[360px]:w-10 max-[360px]:h-10
                ${
                  index === currentStep
                    ? "bg-white text-neutrals500 border-white dark:bg-darkbg dark:border-darkborder dark:text-neutral-300"
                    : index < currentStep
                    ? "bg-primary500 text-white border-primary500 dark:border-primary400 dark:bg-primary400"
                    : "bg-white text-neutrals500 border-white dark:bg-darkbg dark:border-darkborder dark:text-neutral-300"
                }`}
            >
              {step?.icon}
            </div>
            <span
              className={`text-xs mt-2 transition-colors duration-200 absolute -bottom-7 text-center left-1/2 transform -translate-x-1/2 whitespace-nowrap max-md:whitespace-normal max-md:min-w-20 max-md:top-12 max-[360px]:top-10 max-[360px]:min-w-16 
                ${
                  index === currentStep
                    ? "text-neutrals500 dark:text-neutrals400"
                    : index < currentStep
                    ? "text-primary500 dark:text-primary400"
                    : "text-neutrals500 dark:text-neutrals400"
                }`}
            >
              {step?.label}
            </span>
          </div>

          {index < steps.length - 1 && (
            <div
              className={`flex-1 h-0.5 transition-all duration-300 ${
                index < currentStep
                  ? "bg-primary500 dark:bg-primary400"
                  : "bg-gray-200 dark:bg-darkborder"
              }`}
            />
          )}
        </div>
      ))}
    </div>
  );
}