"use client";

import { Button } from "@mdxui/primitives/button";
import { ArrowLeft, Moon, Sun } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import { useScroll } from "./lib/use-scroll";
import { cx } from "./lib/utils";

interface Step {
	name: string;
	href: string;
}

// Base steps that always appear
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
const conditionalSteps: Step[] = [
	{ name: "Cloud provider", href: "/demo/onboarding/cloud-provider" },
];

interface StepProgressProps {
	steps: Step[];
}

function StepProgress({ steps }: StepProgressProps) {
	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 (
		<div>
			<ol className="mx-auto flex w-24 flex-nowrap gap-1 md:w-fit">
				{activeSteps.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>
	);
}

function ThemeToggle() {
	const { theme, setTheme } = useTheme();

	return (
		<Button
			variant="outline"
			size="icon"
			onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
		>
			<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
			<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
			<span className="sr-only">Toggle theme</span>
		</Button>
	);
}

interface OnboardingLayoutProps {
	children: React.ReactNode;
}

export function OnboardingLayout({ children }: OnboardingLayoutProps) {
	const scrolled = useScroll(15);

	return (
		<>
			<header
				className={cx(
					"fixed inset-x-0 top-0 isolate z-50 flex items-center justify-between border-b border-border bg-background px-4 transition-all md:grid md:grid-cols-[200px_auto_200px] md:px-6",
					scrolled ? "h-12" : "h-20",
				)}
			>
				<div className="flex flex-nowrap items-center gap-2">
					<Button variant="ghost" size="sm" asChild>
						<Link href="/">
							<ArrowLeft className="h-4 w-4" />
							<span className="hidden sm:inline">Home</span>
						</Link>
					</Button>
				</div>
				<div className="hidden flex-nowrap items-center gap-0.5 md:flex justify-center">
					<StepProgress steps={baseSteps} />
				</div>
				<div className="flex items-center justify-end gap-2">
					<ThemeToggle />
				</div>
			</header>
			<main id="main-content" className="mx-auto mb-20 mt-28 max-w-lg">
				{children}
			</main>
		</>
	);
}