import {
	Check,
	FolderCog,
	Languages as LanguagesIcon,
	LoaderCircleIcon,
	PartyPopper,
	UserRoundPlus,
} from "lucide-react";
import { useEffect, useEffectEvent, useMemo } from "react";
import { Outlet, useLocation, useNavigate } from "react-router";
import { OnboardProvider } from "@/components/providers/OnboardProvider";
import SetupHeader from "@/components/setup/header";
import {
	Stepper,
	StepperIndicator,
	StepperItem,
	StepperNav,
	StepperSeparator,
	StepperTitle,
	StepperTrigger,
} from "@/components/ui/stepper";
import { useOnboard } from "@/hooks/useOnboard";

const steps = [
	{
		title: "Create your account",
		description:
			"Set up the primary administrator credentials for your server.",
		icon: UserRoundPlus,
		to: "/onboard" as const,
	},
	{
		title: "Add media libraries",
		description:
			"Point Nontara to your movie and series folders so we can keep them in sync.",
		icon: FolderCog,
		to: "/onboard/setup" as const,
	},
	{
		title: "Language preferences",
		description:
			"Choose metadata languages from providers like TMDB or OMDB and add a fallback.",
		icon: LanguagesIcon,
		to: "/onboard/language" as const,
	},
	{
		title: "Wrap things up",
		description:
			"Review your setup summary and mark everything as complete before launch.",
		icon: PartyPopper,
		to: "/onboard/complete" as const,
	},
] as const;

let intialized = false;

export function OnboardLayout() {
	const { pathname } = useLocation();
	const navigate = useNavigate();
	const onboard = useOnboard();
	const activeIndex = useMemo(() => {
		const index = steps.findIndex((step) => step.to === pathname);
		const currentStep = onboard.getCurrentStep();
		// Allow navigation to previous or current steps, but not future steps
		if (index !== -1 && index <= currentStep) {
			return index;
		}
		return currentStep;
	}, [pathname, onboard]);
	const onCurrentStepChecking = useEffectEvent(() => {
		if (steps[activeIndex].to !== pathname) {
			console.debug(
				"Current page is not match with onboard current step, navigating...",
			);
			navigate(steps[activeIndex].to);
		}
	});
	useEffect(() => {
		if (!intialized) onCurrentStepChecking();
		intialized = true;
	});
	return (
		<OnboardProvider>
			<div className="flex h-full flex-col">
				<SetupHeader />
				<div className="mx-auto flex w-full max-w-5xl flex-col gap-10 pt-5">
					<Stepper
						value={activeIndex + 1}
						indicators={{
							completed: <Check className="size-4" />,
							loading: <LoaderCircleIcon className="size-4 animate-spin" />,
						}}
						className="w-full space-y-8"
					>
						<StepperNav className="w-full items-center gap-2 sm:gap-4 md:gap-6">
							{steps.map((step, index) => {
								const stepNumber = index + 1;

								return (
									<StepperItem
										key={step.to}
										step={stepNumber}
										className="relative"
									>
										<StepperTrigger
											aria-disabled="true"
											onClick={(event) => event.preventDefault()}
											onKeyDown={(event) => event.preventDefault()}
											className="flex cursor-default items-center justify-start gap-1.5"
										>
											<StepperIndicator className="size-8 border border-border bg-background font-semibold text-muted-foreground text-xs transition-colors group-data-[state=active]/step:border-blue-500 group-data-[state=completed]/step:border-green-500 group-data-[state=inactive]/step:border-border group-data-[state=active]/step:bg-blue-500/15 group-data-[state=completed]/step:bg-green-500/15 group-data-[state=active]/step:text-blue-500 group-data-[state=completed]/step:text-green-600">
												{stepNumber}
											</StepperIndicator>
											<StepperTitle className="font-medium text-muted-foreground text-sm group-data-[state=active]/step:text-blue-500 group-data-[state=completed]/step:text-green-500">
												{step.title}
											</StepperTitle>
										</StepperTrigger>

										{index < steps.length - 1 ? (
											<StepperSeparator className="bg-border group-data-[state=active]/step:bg-blue-500 group-data-[state=completed]/step:bg-green-500 md:mx-2.5" />
										) : null}
									</StepperItem>
								);
							})}
						</StepperNav>
					</Stepper>

					<div className="px-0 sm:px-4">
						<Outlet />
					</div>
				</div>
			</div>
		</OnboardProvider>
	);
}
