kunstenkamp/apps/web/src/components/registration/SuccessScreen.tsx

import { useState } from "react";

interface Props {
	token: string;
	email?: string;
	name?: string;
	onReset: () => void;
}

export function SuccessScreen({ token, email, name, onReset }: Props) {
	const manageUrl =
		typeof window !== "undefined"
			? `${window.location.origin}/manage/${token}`
			: `/manage/${token}`;

	const [drinkkaartPromptDismissed, setDrinkkaartPromptDismissed] = useState(
		() => {
			try {
				return (
					typeof localStorage !== "undefined" &&
					localStorage.getItem("drinkkaart_prompt_dismissed") === "1"
				);
			} catch {
				return false;
			}
		},
	);

	const handleDismissPrompt = () => {
		try {
			localStorage.setItem("drinkkaart_prompt_dismissed", "1");
		} catch {
			// ignore
		}
		setDrinkkaartPromptDismissed(true);
	};

	// Build signup URL with pre-filled email query param so /login can pre-fill
	const signupUrl = email
		? `/login?signup=1&email=${encodeURIComponent(email)}`
		: "/login?signup=1";

	return (
		<section
			id="registration"
			className="relative z-30 flex w-full items-center justify-center bg-[#214e51]/96 px-6 py-16 md:px-12"
		>
			<div className="mx-auto w-full max-w-3xl">
				<div className="rounded-lg border border-white/20 bg-white/5 p-8 md:p-12">
					<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20 text-green-400">
						<svg
							className="h-8 w-8"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
							strokeWidth={2}
							aria-label="Succes"
						>
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								d="M5 13l4 4L19 7"
							/>
						</svg>
					</div>
					<h2 className="mb-4 font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
						Gelukt!
					</h2>
					<p className="mb-6 text-lg text-white/80">
						Je inschrijving is bevestigd. We sturen je zo dadelijk een
						bevestigingsmail.
					</p>
					<div className="mb-8 rounded-lg border border-white/10 bg-white/5 p-6">
						<p className="mb-2 text-sm text-white/60">
							Geen mail ontvangen? Gebruik deze link:
						</p>
						<a
							href={manageUrl}
							className="break-all text-sm text-white/80 underline underline-offset-2 hover:text-white"
						>
							{manageUrl}
						</a>
					</div>
					<div className="flex flex-wrap items-center gap-4">
						<a
							href={manageUrl}
							className="inline-flex items-center bg-white px-6 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
						>
							Bekijk mijn inschrijving
						</a>
						<button
							type="button"
							onClick={onReset}
							className="text-white/60 underline underline-offset-2 transition-colors hover:text-white"
						>
							Nog een inschrijving
						</button>
					</div>

					{/* Account creation prompt */}
					{!drinkkaartPromptDismissed && (
						<div className="mt-8 rounded-xl border border-teal-400/30 bg-teal-400/10 p-6">
							<h3 className="mb-1 font-['Intro',sans-serif] text-lg text-white">
								Maak een gratis account aan
							</h3>
							<p className="mb-4 text-sm text-white/70">
								Met een account zie je je inschrijving, activeer je je
								Drinkkaart en laad je saldo op vóór het evenement.
							</p>
							<ul className="mb-5 space-y-1.5 text-sm text-white/70">
								<li className="flex items-center gap-2">
									<span className="text-teal-300">✓</span>
									Beheer je inschrijving op één plek
								</li>
								<li className="flex items-center gap-2">
									<span className="text-teal-300">✓</span>
									Digitale Drinkkaart met QR-code
								</li>
								<li className="flex items-center gap-2">
									<span className="text-teal-300">✓</span>
									Saldo opladen vóór het evenement
								</li>
							</ul>
							<div className="flex flex-wrap items-center gap-3">
								<a
									href={signupUrl}
									className="inline-flex items-center rounded-lg bg-white px-5 py-2.5 font-['Intro',sans-serif] text-[#214e51] text-sm transition-all hover:scale-105 hover:bg-gray-100"
								>
									Account aanmaken
									{name && (
										<span className="ml-1.5 font-normal text-xs opacity-60">
											als {name}
										</span>
									)}
								</a>
								<button
									type="button"
									onClick={handleDismissPrompt}
									className="text-sm text-white/40 underline underline-offset-2 transition-colors hover:text-white/70"
								>
									Overslaan
								</button>
							</div>
						</div>
					)}
				</div>
			</div>
		</section>
	);
}