import { Check } from "lucide-react";
import type { ApiLiveOffer } from "@/lib/api/types";

type Stage = ApiLiveOffer["stage"];

const STEPS: { key: Stage; label: string }[] = [
  { key: "sent", label: "RFQ Sent" },
  { key: "bidding", label: "Seller Bidding" },
  { key: "best_found", label: "Best Price Found" },
  { key: "offer_ready", label: "Offer Ready" },
];

/**
 * How far a stage has progressed, as an index into STEPS.
 *
 * `closed` (the window lapsed with nobody bidding) stops at "Seller Bidding" —
 * calling it "Best Price Found" when there is no price would be a lie. `ordered`
 * completes the whole track.
 */
function stageIndex(stage: Stage): number {
  switch (stage) {
    case "sent":
      return 0;
    case "bidding":
    case "closed":
      return 1;
    case "best_found":
      return 2;
    case "offer_ready":
      return 3;
    case "ordered":
      return 4;
    default:
      return 0;
  }
}

/** The four dots the buyer watches while the auction runs. */
export default function BiddingStepper({ stage }: { stage: Stage }) {
  const current = stageIndex(stage);

  return (
    <ol className="flex items-start justify-between gap-1">
      {STEPS.map((step, i) => {
        const done = i < current;
        const active = i === current;

        return (
          <li key={step.key} className="relative flex flex-1 flex-col items-center gap-2 text-center">
            {/* Connector, drawn behind the dot and only between steps. */}
            {i > 0 && (
              <span
                aria-hidden
                className={`absolute right-1/2 top-3.5 h-0.5 w-full ${done || active ? "bg-emerald-500" : "bg-gray-200"}`}
              />
            )}

            <span
              className={`relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold ${
                done
                  ? "bg-emerald-500 text-white"
                  : active
                    ? "bg-[#CC1414] text-white"
                    : "bg-gray-200 text-gray-500"
              }`}
            >
              {done ? <Check className="h-4 w-4" /> : i + 1}
            </span>

            <span
              className={`text-[11px] leading-tight sm:text-xs ${
                done || active ? "font-medium text-gray-900" : "text-gray-500"
              }`}
            >
              {step.label}
            </span>
          </li>
        );
      })}
    </ol>
  );
}