import confetti from "canvas-confetti";
import { useEffect, useRef } from "react";
import { REGISTRATION_OPENS_AT } from "@/lib/opening";
import { useRegistrationOpen } from "@/lib/useRegistrationOpen";

function pad(n: number): string {
	return String(n).padStart(2, "0");
}

interface UnitBoxProps {
	value: string;
	label: string;
}

function UnitBox({ value, label }: UnitBoxProps) {
	return (
		<div className="flex flex-col items-center gap-1">
			<div className="flex items-center justify-center rounded-sm bg-white/10 px-4 py-3 font-['Intro',sans-serif] text-5xl text-white tabular-nums md:text-6xl lg:text-7xl">
				{value}
			</div>
			<span className="font-['Intro',sans-serif] text-white/50 text-xs uppercase tracking-widest">
				{label}
			</span>
		</div>
	);
}

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

	// Three bursts from different origins
	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);
}

/**
 * Shown in place of the registration form while registration is not yet open.
 * Fires confetti the moment the gate opens (without a page reload).
 */
export function CountdownBanner() {
	const { isOpen, days, hours, minutes, seconds } = useRegistrationOpen();
	const confettiFired = useRef(false);

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

	// Once open the parent component will unmount this — but render nothing just in case
	if (isOpen) return null;

	const openDate = REGISTRATION_OPENS_AT.toLocaleDateString("nl-BE", {
		weekday: "long",
		day: "numeric",
		month: "long",
		year: "numeric",
	});
	const openTime = REGISTRATION_OPENS_AT.toLocaleTimeString("nl-BE", {
		hour: "2-digit",
		minute: "2-digit",
	});

	return (
		<div className="flex flex-col items-center gap-8 py-4 text-center">
			<div>
				<p className="font-['Intro',sans-serif] text-lg text-white/70 md:text-xl">
					Inschrijvingen openen op
				</p>
				<p className="mt-1 font-['Intro',sans-serif] text-white text-xl capitalize md:text-2xl">
					{openDate} om {openTime}
				</p>
			</div>

			{/* Countdown boxes */}
			<div className="flex flex-wrap items-center justify-center gap-3 md:gap-6">
				<UnitBox value={String(days)} label="dagen" />
				<span className="mb-6 font-['Intro',sans-serif] text-4xl text-white/40">
					:
				</span>
				<UnitBox value={pad(hours)} label="uren" />
				<span className="mb-6 font-['Intro',sans-serif] text-4xl text-white/40">
					:
				</span>
				<UnitBox value={pad(minutes)} label="minuten" />
				<span className="mb-6 font-['Intro',sans-serif] text-4xl text-white/40">
					:
				</span>
				<UnitBox value={pad(seconds)} label="seconden" />
			</div>

			<p className="max-w-md text-sm text-white/50">
				Kom snel terug! Zodra de inschrijvingen openen kun je je hier
				registreren als toeschouwer of als artiest.
			</p>
		</div>
	);
}
