import { Link } from "@tanstack/react-router";
import { useState } from "react";
import { PerformerForm } from "@/components/registration/PerformerForm";
import { SuccessScreen } from "@/components/registration/SuccessScreen";
import { TypeSelector } from "@/components/registration/TypeSelector";
import { WatcherForm } from "@/components/registration/WatcherForm";
import { authClient } from "@/lib/auth-client";

type RegistrationType = "performer" | "watcher";

interface SuccessState {
	token: string;
	email: string;
	name: string;
}

export default function EventRegistrationForm() {
	const { data: session } = authClient.useSession();
	const [selectedType, setSelectedType] = useState<RegistrationType | null>(
		null,
	);
	const [successState, setSuccessState] = useState<SuccessState | null>(null);

	const isLoggedIn = !!session?.user;
	const user = session?.user as { name?: string; email?: string } | undefined;

	// Split "Jan De Smet" → firstName="Jan", lastName="De Smet"
	const nameParts = (user?.name ?? "").trim().split(/\s+/);
	const prefillFirstName = nameParts[0] ?? "";
	const prefillLastName = nameParts.slice(1).join(" ");
	const prefillEmail = user?.email ?? "";

	if (successState) {
		return (
			<SuccessScreen
				token={successState.token}
				email={successState.email}
				name={successState.name}
				isLoggedIn={isLoggedIn}
				onReset={() => {
					setSuccessState(null);
					setSelectedType(null);
				}}
			/>
		);
	}

	return (
		<section
			id="registration"
			className="relative z-30 w-full bg-[#214e51]/96 px-6 py-16 md:px-12"
		>
			<div className="mx-auto w-full max-w-6xl">
				<h2 className="mb-2 font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
					Schrijf je nu in!
				</h2>
				<p className="mb-2 max-w-3xl text-lg text-white/80 md:text-xl">
					De Kunstenkamp jaarwerking organiseert een Open Mic
				</p>
				<p className="mb-8 max-w-3xl text-lg text-white/80 md:text-xl">
					Doe je mee of kom je kijken? Kies je rol en vul het formulier in.
				</p>
				{/* Login nudge — shown only to guests */}
				{!isLoggedIn && (
					<div className="mb-10 flex flex-col gap-3 rounded-lg border border-[#52979b]/40 bg-[#52979b]/10 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
						<p className="text-sm text-white/80">
							<span className="mr-1 font-semibold text-teal-300">
								Al een account?
							</span>
							Log in om je gegevens automatisch in te vullen en je Drinkkaart
							direct te activeren na registratie.
						</p>
						<div className="flex shrink-0 items-center gap-3 text-sm">
							<Link
								to="/login"
								className="font-medium text-teal-300 underline-offset-2 transition-colors hover:underline"
							>
								Inloggen
							</Link>
							<span className="text-white/30">·</span>
							<Link
								to="/login"
								search={{ signup: "1" }}
								className="text-white/60 transition-colors hover:text-white"
							>
								Nog geen account? Aanmaken
							</Link>
						</div>
					</div>
				)}
				{!selectedType && <TypeSelector onSelect={setSelectedType} />}
				{selectedType === "performer" && (
					<PerformerForm
						onBack={() => setSelectedType(null)}
						onSuccess={(token, email, name) =>
							setSuccessState({ token, email, name })
						}
						prefillFirstName={prefillFirstName}
						prefillLastName={prefillLastName}
						prefillEmail={prefillEmail}
						isLoggedIn={isLoggedIn}
					/>
				)}
				{selectedType === "watcher" && (
					<WatcherForm
						onBack={() => setSelectedType(null)}
						prefillFirstName={prefillFirstName}
						prefillLastName={prefillLastName}
						prefillEmail={prefillEmail}
						isLoggedIn={isLoggedIn}
					/>
				)}
			</div>
		</section>
	);
}
