"use client";

import { Check, X } from "lucide-react";
import { OrderStatus } from "@/lib/types";
import { cn } from "@/lib/cn";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

export function OrderStepper({ status }: { status: OrderStatus }) {
  const { t } = useTranslation();

  const STEPS = [
    t("orderStepper.orderPlaced"),
    t("orderStepper.pendingVerification"),
    t("orderStepper.approved"),
    t("orderStepper.completed"),
  ];

  // Subtext shown per step, keyed by step index — this is the actual bug
  // fix: previously every current step reused the same "reviewing your
  // payment" copy no matter which step it was.
  const SUBTEXT: Record<number, string> = {
    1: t("orderStepper.pendingVerificationDesc"),
    2: t("orderStepper.approvedDesc"),
    3: t("orderStepper.completedDesc"),
  };

  const isRejected = status === "rejected";
  const isCompleted = status === "completed";
  const stepIndex = status === "pending" ? 1 : status === "approved" ? 2 : status === "completed" ? 3 : 1;

  return (
    <div className="flex flex-col">
      {STEPS.map((label, i) => {
        if (isRejected && i > 1) return null;

        const isRejectedNode = isRejected && i === 1;
        // Once an order is Completed, every step up to and including
        // "Completed" itself renders as done (checkmark) — that step no
        // longer sits in the "current" gold-dot state.
        const isDone = !isRejected && (isCompleted ? i <= stepIndex : i < stepIndex);
        const isCurrent = !isRejected && !isCompleted && i === stepIndex;
        const showSubtext = isCurrent || (isCompleted && i === stepIndex);
        const isLast = isRejected ? i === 1 : i === STEPS.length - 1;

        return (
          <div key={label} className="flex gap-3">
            <div className="flex flex-col items-center">
              <span
                className={cn(
                  "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 text-[10px]",
                  isRejectedNode
                    ? "border-danger bg-danger text-paper"
                    : isDone
                    ? "border-teal bg-teal text-ink"
                    : isCurrent
                    ? "border-gold bg-gold text-ink"
                    : "border-black/15 text-transparent dark:border-white/20"
                )}
              >
                {isRejectedNode ? (
                  <X size={13} strokeWidth={3} />
                ) : isDone ? (
                  <Check size={13} strokeWidth={3} />
                ) : (
                  <span className="h-1.5 w-1.5 rounded-full bg-current" />
                )}
              </span>
              {!isLast && (
                <span
                  className={cn(
                    "my-0.5 w-0.5 flex-1",
                    isDone ? "bg-teal" : "bg-black/10 dark:bg-white/10"
                  )}
                />
              )}
            </div>
            <div className="pb-7">
              <p
                className={cn(
                  "text-sm",
                  isDone || isCurrent || isRejectedNode
                    ? "font-semibold"
                    : "font-medium text-muted"
                )}
              >
                {isRejectedNode ? t("orderStepper.rejected") : label}
              </p>
              {showSubtext && (
                <p className="mt-0.5 text-xs text-muted">{SUBTEXT[i]}</p>
              )}
              {isRejectedNode && (
                <p className="mt-0.5 text-xs text-muted">{t("orderStepper.rejectedDesc")}</p>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}