"use client";

import { CHECKOUT_STEPS, type CheckoutStep } from "@/lib/checkout/constants";

const STEP_LABELS: Record<CheckoutStep, string> = {
  validation: "Review cart",
  "shipping-address": "Address",
  review: "Order review",
  payment: "Payment",
};

type CheckoutShellProps = {
  currentStep: CheckoutStep;
  children: React.ReactNode;
};

export function CheckoutShell({ currentStep, children }: CheckoutShellProps) {
  const currentIndex = CHECKOUT_STEPS.indexOf(currentStep);
  const stepNumber = currentIndex + 1;

  return (
    <div className="flex flex-col gap-6">
      {/* Mobile: compact step indicator */}
      <nav aria-label="Checkout progress" className="md:hidden">
        <p className="text-sm font-medium text-default-500">
          Step {stepNumber} of {CHECKOUT_STEPS.length}
          <span className="mx-1.5">&mdash;</span>
          <span className="text-foreground">{STEP_LABELS[currentStep]}</span>
        </p>
      </nav>

      {/* Tablet+: horizontal stepper bar */}
      <nav
        aria-label="Checkout progress"
        className="hidden md:block"
      >
        <ol className="flex items-center gap-1">
          {CHECKOUT_STEPS.map((step, i) => {
            const isActive = i === currentIndex;
            const isCompleted = i < currentIndex;

            return (
              <li
                key={step}
                className="flex items-center gap-1"
                aria-current={isActive ? "step" : undefined}
              >
                <span
                  className={`
                    flex size-7 items-center justify-center rounded-full text-xs font-semibold
                    ${isActive ? "bg-[#236f6b] text-white" : ""}
                    ${isCompleted ? "bg-[#e8f7f6] text-[#236f6b]" : ""}
                    ${!isActive && !isCompleted ? "bg-default-100 text-default-400" : ""}
                  `}
                >
                  {isCompleted ? (
                    <CheckIcon />
                  ) : (
                    i + 1
                  )}
                </span>
                <span
                  className={`
                    text-sm
                    ${isActive ? "font-semibold text-foreground" : ""}
                    ${isCompleted ? "font-medium text-default-600" : ""}
                    ${!isActive && !isCompleted ? "text-default-400" : ""}
                  `}
                >
                  {STEP_LABELS[step]}
                </span>
                {i < CHECKOUT_STEPS.length - 1 && (
                  <span
                    className={`mx-1 h-px w-4 lg:w-6 ${
                      i < currentIndex ? "bg-[#236f6b]" : "bg-default-200"
                    }`}
                    aria-hidden="true"
                  />
                )}
              </li>
            );
          })}
        </ol>
      </nav>

      {children}
    </div>
  );
}

function CheckIcon() {
  return (
    <svg
      width="14"
      height="14"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="3"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}
