"use client";

import { CheckIcon } from "@heroicons/react/24/solid";
import { cn } from "@/shared/utils";
import type { OrderServiceCategory, OrderStatusState } from "@customer-portal/domain/orders";

interface TimelineStep {
  id: string;
  label: string;
}

interface OrderProgressTimelineProps {
  serviceCategory: OrderServiceCategory;
  currentState: OrderStatusState;
  className?: string;
}

/**
 * Timeline steps by service category
 */
const TIMELINE_STEPS: Record<OrderServiceCategory, TimelineStep[]> = {
  internet: [
    { id: "submitted", label: "Submitted" },
    { id: "review", label: "Under Review" },
    { id: "scheduled", label: "Scheduled" },
    { id: "active", label: "Active" },
  ],
  sim: [
    { id: "submitted", label: "Submitted" },
    { id: "processing", label: "Processing" },
    { id: "activating", label: "Activating" },
    { id: "active", label: "Active" },
  ],
  vpn: [
    { id: "submitted", label: "Submitted" },
    { id: "processing", label: "Processing" },
    { id: "active", label: "Active" },
  ],
  default: [
    { id: "submitted", label: "Submitted" },
    { id: "processing", label: "Processing" },
    { id: "active", label: "Active" },
  ],
};

/**
 * Map OrderStatusState to timeline step index
 */
function getStepIndex(state: OrderStatusState, serviceCategory: OrderServiceCategory): number {
  const steps = TIMELINE_STEPS[serviceCategory];

  switch (state) {
    case "active":
      return steps.length - 1; // Always the last step
    case "review":
      return 1; // "Under Review" step is always index 1
    case "scheduled":
      return serviceCategory === "internet" ? 2 : 1;
    case "activating":
      return serviceCategory === "sim" ? 2 : 1;
    case "processing":
    default:
      return 1; // Processing is the second step
  }
}

export function OrderProgressTimeline({
  serviceCategory,
  currentState,
  className,
}: OrderProgressTimelineProps) {
  const steps = TIMELINE_STEPS[serviceCategory];
  const currentStepIndex = getStepIndex(currentState, serviceCategory);
  const isComplete = currentState === "active";

  return (
    <div className={cn("w-full", className)}>
      <div className="flex items-start justify-between">
        {steps.map((step, index) => {
          const isCompleted = isComplete ? true : index < currentStepIndex;
          const isCurrent = !isComplete && index === currentStepIndex;
          const isUpcoming = !isComplete && index > currentStepIndex;
          const isLast = index === steps.length - 1;

          return (
            <div
              key={step.id}
              className={cn("flex flex-col items-center flex-1", !isLast && "relative")}
            >
              {/* Step indicator */}
              <div className="relative flex items-center justify-center">
                {isCompleted && (
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-success text-success-foreground shadow-sm">
                    <CheckIcon className="h-4 w-4" />
                  </div>
                )}
                {isCurrent && (
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm animate-pulse">
                    <div className="h-2.5 w-2.5 rounded-full bg-primary-foreground" />
                  </div>
                )}
                {isUpcoming && (
                  <div className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-dashed border-muted-foreground/40 bg-card">
                    <div className="h-2 w-2 rounded-full bg-muted-foreground/30" />
                  </div>
                )}
              </div>

              {/* Step label */}
              <span
                className={cn(
                  "mt-2 text-xs font-medium text-center",
                  isCompleted && "text-success",
                  isCurrent && "text-primary",
                  isUpcoming && "text-muted-foreground"
                )}
              >
                {step.label}
              </span>

              {/* Connecting line to next step */}
              {!isLast && (
                <div
                  className={cn(
                    "absolute top-4 w-full -translate-y-1/2",
                    index < currentStepIndex && "h-0.5 bg-success",
                    index === currentStepIndex && "h-0.5 bg-gradient-to-r from-primary to-muted",
                    index > currentStepIndex &&
                      "border-t-2 border-dashed border-muted-foreground/30"
                  )}
                  style={{ left: "calc(50% + 16px)", width: "calc(100% - 32px)" }}
                />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/**
 * Skeleton for the progress timeline
 */
export function OrderProgressTimelineSkeleton() {
  return (
    <div className="w-full">
      <div className="flex items-start justify-between">
        {[1, 2, 3, 4].map((_, index) => (
          <div key={index} className="flex flex-col items-center flex-1 relative">
            <div className="h-8 w-8 rounded-full bg-muted animate-pulse" />
            <div className="mt-2 h-3 w-16 rounded bg-muted animate-pulse" />
            {index < 3 && (
              <div
                className="absolute top-4 h-0.5 bg-muted animate-pulse -translate-y-1/2"
                style={{ left: "calc(50% + 16px)", width: "calc(100% - 32px)" }}
              />
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

export default OrderProgressTimeline;
