import { useQuery } from "@tanstack/react-query";
import confetti from "canvas-confetti";
import { useEffect, useRef, useState } from "react";
import { CountdownBanner } from "@/components/homepage/CountdownBanner";
import { PerformerForm } from "@/components/registration/PerformerForm";
import { TypeSelector } from "@/components/registration/TypeSelector";
import { WatcherForm } from "@/components/registration/WatcherForm";
import { useRegistrationOpen } from "@/lib/useRegistrationOpen";
import { orpc } from "@/utils/orpc";

function fireConfetti() {
	const colors = ["#d82560", "#52979b", "#d09035", "#214e51", "#ffffff"];

	confetti({
		particleCount: 120,
		spread: 80,
		origin: { x: 0.3, y: 0.6 },
		colors,
	});
	setTimeout(() => {
		confetti({
			particleCount: 120,
			spread: 80,
			origin: { x: 0.7, y: 0.6 },
			colors,
		});
	}, 200);
	setTimeout(() => {
		confetti({
			particleCount: 80,
			spread: 100,
			origin: { x: 0.5, y: 0.5 },
			colors,
		});
	}, 400);
}

type RegistrationType = "performer" | "watcher";

function redirectToSignup(email: string) {
	const params = new URLSearchParams({
		signup: "1",
		email,
		next: "/account",
	});
	window.location.href = `/login?${params.toString()}`;
}

export default function EventRegistrationForm() {
	const { isOpen } = useRegistrationOpen();
	const confettiFired = useRef(false);

	const { data: capacity } = useQuery(orpc.getWatcherCapacity.queryOptions());

	useEffect(() => {
		if (isOpen && !confettiFired.current) {
			confettiFired.current = true;
			fireConfetti();
		}
	}, [isOpen]);

	const [selectedType, setSelectedType] = useState<RegistrationType | null>(
		null,
	);

	if (!isOpen) {
		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">
					<CountdownBanner />
				</div>
			</section>
		);
	}

	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>

				{!selectedType && (
					<TypeSelector
						onSelect={setSelectedType}
						watcherIsFull={capacity?.isFull ?? false}
						watcherAvailable={capacity?.available ?? null}
					/>
				)}
				{selectedType === "performer" && (
					<PerformerForm
						onBack={() => setSelectedType(null)}
						onSuccess={(_token, email, _name) => redirectToSignup(email)}
					/>
				)}
				{selectedType === "watcher" && (
					<WatcherForm
						onBack={() => setSelectedType(null)}
						onSuccess={(_token, email, _name) => redirectToSignup(email)}
					/>
				)}
			</div>
		</section>
	);
}