"use client";

/**
 * Onboarding Progress Indicator
 *
 * COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:37-67
 * Displays step progress as a series of bars
 */

import { usePathname } from "next/navigation";
import { cx } from "../lib/utils";
import type { OnboardingProgressProps, Step } from "../types/layout";

// Base steps that always appear
// COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:19-26
const baseSteps: Step[] = [
	{ name: "Business function", href: "/demo/onboarding/business-function" },
	{ name: "Systems to connect", href: "/demo/onboarding/systems-connect" },
	{ name: "API consumption", href: "/demo/onboarding/api-consumption" },
	{ name: "Expected scale", href: "/demo/onboarding/expected-scale" },
	{ name: "Authentication", href: "/demo/onboarding/auth-method" },
	{ name: "Project name", href: "/demo/onboarding/project-name" },
];

// Conditional steps that appear based on user selections
// COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:29-31
const conditionalSteps: Step[] = [
	{ name: "Cloud provider", href: "/demo/onboarding/cloud-provider" },
];

export { baseSteps, conditionalSteps };

/**
 * Step progress indicator component
 * COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:37-67
 */
export function OnboardingProgress({
	steps,
	currentStepIndex,
}: OnboardingProgressProps) {
	return (
		<div aria-label="Onboarding progress">
			<ol className="mx-auto flex w-24 flex-nowrap gap-1 md:w-fit">
				{steps.map((step, index) => (
					<li
						key={step.name}
						className={cx(
							"h-1 w-12 rounded-full",
							index <= currentStepIndex ? "bg-primary" : "bg-muted",
						)}
					>
						<span className="sr-only">
							{step.name}{" "}
							{index < currentStepIndex
								? "completed"
								: index === currentStepIndex
									? "current"
									: ""}
						</span>
					</li>
				))}
			</ol>
		</div>
	);
}

/**
 * Auto-detecting progress component that uses pathname
 * COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:37-67
 */
export function OnboardingProgressAuto({ steps }: { steps: Step[] }) {
	const pathname = usePathname();

	// Check if we're on a conditional step and build the active steps list
	const isOnConditionalStep = conditionalSteps.some((step) =>
		pathname.startsWith(step.href),
	);
	const activeSteps = isOnConditionalStep
		? [
				...baseSteps.slice(0, 3), // Business function, Systems, API consumption
				conditionalSteps[0], // AI provider (inserted after API consumption)
				...baseSteps.slice(3), // Expected scale, Authentication
			]
		: steps;

	const currentStepIndex = activeSteps.findIndex((step) =>
		pathname.startsWith(step.href),
	);

	return (
		<OnboardingProgress
			steps={activeSteps}
			currentStepIndex={currentStepIndex}
		/>
	);
}