"use client";

/**
 * Onboarding Header
 *
 * COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:91-111
 * Fixed header with back button, progress indicator, and theme toggle
 */

import { Button } from "@mdxui/primitives/button";
import { ArrowLeft, Moon, Sun } from "lucide-react";
import Link from "next/link";
import { useTheme } from "next-themes";
import { cx } from "../lib/utils";
import type { OnboardingHeaderProps, Step } from "../types/layout";
import { baseSteps, OnboardingProgressAuto } from "./OnboardingProgress";

/**
 * Theme toggle button
 * COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:70-79
 */
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>
	);
}

export { ThemeToggle };

interface OnboardingHeaderFullProps extends OnboardingHeaderProps {
	/** Steps array for progress display */
	steps?: Step[];
}

/**
 * Onboarding header component
 * COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:91-111
 */
export function OnboardingHeader({
	backHref = "/",
	backText = "Home",
	collapsed = false,
	steps = baseSteps,
}: OnboardingHeaderFullProps) {
	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",
				collapsed ? "h-12" : "h-20",
			)}
		>
			<div className="flex flex-nowrap items-center gap-2">
				<Button variant="ghost" size="sm" asChild>
					<Link href={backHref}>
						<ArrowLeft className="h-4 w-4" />
						<span className="hidden sm:inline">{backText}</span>
					</Link>
				</Button>
			</div>
			<div className="hidden flex-nowrap items-center gap-0.5 md:flex justify-center">
				<OnboardingProgressAuto steps={steps} />
			</div>
			<div className="flex items-center justify-end gap-2">
				<ThemeToggle />
			</div>
		</header>
	);
}