<script lang="ts">
	import { goto } from '$app/navigation';
	import { animate } from 'motion';
	import { onMount } from 'svelte';

	// Form data store
	let travelerData = {
		name: '',
		intention: '',
		interests: [] as string[],
		travelStyle: ''
	};

	// DOM elements
	let welcomeEl: HTMLElement;
	let registerEl: HTMLElement;
	let intentionEl: HTMLElement;
	let interestsEl: HTMLElement;
	let finalEl: HTMLElement;
	let confettiContainer: HTMLElement;

	// Step management
	let currentStep = 0;
	const steps = ['welcome', 'register', 'intention', 'interests', 'final'];
	const stepElements = [welcomeEl, registerEl, intentionEl, interestsEl, finalEl];

	// Form options
	const travelIntentions = [
		'Seeking Adventure',
		'Cultural Exchange',
		'Personal Growth',
		'Meeting People',
		'Digital Nomad'
	];
	const travelInterests = [
		'Local Food',
		'Hiking',
		'Photography',
		'Language Exchange',
		'Art & Museums',
		'Sustainable Travel',
		'Local Markets',
		'Festivals & Events'
	];
	const travelStyles = [
		'Spontaneous',
		'Planned but Flexible',
		'Off the Beaten Path',
		'Mix of Everything'
	];

	// Animation controller
	const animateSequence = async (from: HTMLElement, to: HTMLElement) => {
		from.style.zIndex = '10';
		to.style.zIndex = '20';

		const fromAnimation = animate(
			from,
			{ y: [0, '-100vh'] },
			{ duration: 0.7, easing: [0.4, 0, 0.2, 1] }
		);
		const toAnimation = animate(
			to,
			{ y: ['100vh', 0] },
			{ duration: 0.7, easing: [0.4, 0, 0.2, 1] }
		);

		await Promise.all([fromAnimation, toAnimation]);
		from.style.zIndex = '0';
		currentStep = steps.indexOf(to.id);
	};

	const handleInterestToggle = (e: MouseEvent, interest: string) => {
		if (travelerData.interests.includes(interest)) {
			travelerData.interests = travelerData.interests.filter((i) => i !== interest);
		} else if (travelerData.interests.length < 3) {
			travelerData.interests = [...travelerData.interests, interest];
		}
		animate(e.currentTarget as HTMLElement, { scale: [1, 1.1, 1] }, { duration: 0.3 });
	};

	const isValid = () => {
		return (
			travelerData.name.length >= 2 &&
			travelerData.intention &&
			travelerData.interests.length > 0 &&
			travelerData.travelStyle
		);
	};

	const createConfetti = () => {
		for (let i = 0; i < 30; i++) {
			const confetti = document.createElement('div');
			confetti.className = 'absolute w-2 h-2 bg-white rounded-full';
			confetti.style.left = `${Math.random() * 100}%`;
			confetti.style.top = `${Math.random() * 100}%`;
			confettiContainer.appendChild(confetti);

			animate(
				confetti,
				{
					x: Math.random() * 400 - 200,
					y: Math.random() * -400 - 100,
					opacity: [1, 0],
					scale: [1, 1.5]
				},
				{ duration: 1.5, easing: 'ease-out' }
			).then(() => confetti.remove());
		}

		setTimeout(() => {
			goto('/home');
		}, 750);
	};

	onMount(() => {
		animate(welcomeEl, { scale: [0.8, 1], opacity: [0, 1] }, { duration: 0.5 });
	});
</script>

<!-- Progress Indicator -->
<div class="absolute top-6 z-30 w-full px-8">
	<div class="h-1.5 rounded-full bg-white/20">
		<div
			class="h-full rounded-full bg-white/80 transition-all duration-500"
			style={`width: ${(currentStep / (steps.length - 1)) * 100}%`}
		/>
	</div>
</div>

<!-- Welcome Screen -->
<div
	bind:this={welcomeEl}
	id="welcome"
	class="gradient-animate fixed inset-0 flex h-screen w-screen flex-col items-center justify-center bg-gradient-to-br from-pink-400 via-purple-400 to-indigo-400"
>
	{#each Array(12) as _, i}
		<div
			class="floating-shape absolute h-8 w-8 rounded-full bg-white/10"
			style={`left: ${Math.random() * 100}%; animation-delay: ${Math.random() * 2}s;`}
		/>
	{/each}

	<h1 class="mb-4 animate-[slideDown_0.5s] text-5xl font-bold text-white">Boundless 🌍✨</h1>
	<button
		on:click={() => animateSequence(welcomeEl, registerEl)}
		class="animate-[bounce_2s_infinite] rounded-full bg-white/20 px-8 py-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
	>
		Start Exploring →
	</button>
</div>

<!-- Name Input -->
<div
	bind:this={registerEl}
	id="register"
	class="gradient-animate fixed inset-0 flex h-screen w-screen translate-y-full flex-col items-center justify-center bg-gradient-to-br from-purple-400 via-pink-400 to-rose-400"
>
	<div class="space-y-8 text-center">
		<h2 class="text-3xl font-semibold text-white">What's your travel name?</h2>
		<label for="nameInput" class="sr-only">Enter your travel name</label>
		<input
			id="nameInput"
			bind:value={travelerData.name}
			class="w-64 rounded-full bg-white/20 px-6 py-3 text-center text-white placeholder-white/70 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-white/50"
			type="text"
			placeholder="Adventure Seeker"
		/>
		<button
			on:click={() => animateSequence(registerEl, intentionEl)}
			class="rounded-full bg-white/20 px-8 py-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
			disabled={!travelerData.name}
		>
			Next →
		</button>
	</div>
</div>

<!-- Travel Intention -->
<div
	bind:this={intentionEl}
	id="intention"
	class="gradient-animate fixed inset-0 flex h-screen w-screen translate-y-full flex-col items-center justify-center bg-gradient-to-br from-rose-400 via-orange-400 to-amber-400"
>
	<div class="space-y-8 text-center">
		<h2 class="text-3xl font-semibold text-white">Why do you wander?</h2>
		<div class="grid w-72 grid-cols-1 gap-3">
			{#each travelIntentions as intention}
				<button
					on:click={(e) => {
						travelerData.intention = intention;
						animate(e.currentTarget, { scale: [1, 0.95, 1] }, { duration: 0.3 });
					}}
					class="rounded-full bg-white/20 px-6 py-3 text-white backdrop-blur-sm transition-all hover:bg-white/30 {travelerData.intention ===
					intention
						? '!bg-white/40 ring-2 ring-white'
						: ''}"
				>
					{intention}
				</button>
			{/each}
		</div>
		<button
			on:click={() => animateSequence(intentionEl, interestsEl)}
			class="rounded-full bg-white/20 px-8 py-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
			disabled={!travelerData.intention}
		>
			Next →
		</button>
	</div>
</div>

<!-- Interests Selection -->
<div
	bind:this={interestsEl}
	id="interests"
	class="gradient-animate fixed inset-0 flex h-screen w-screen translate-y-full flex-col items-center justify-center bg-gradient-to-br from-purple-400 via-pink-400 to-gray-400"
>
	<div class="space-y-8 text-center">
		<h2 class="text-3xl font-semibold text-white">Pick your passions</h2>
		<div class="grid w-80 grid-cols-2 gap-3">
			{#each travelInterests as interest}
				<button
					on:click={(e) => handleInterestToggle(e, interest)}
					class="rounded-full bg-white/20 px-4 py-2 text-sm text-white backdrop-blur-sm transition-all hover:bg-white/30
						   {travelerData.interests.includes(interest) ? '!bg-white/40 ring-2 ring-white' : ''}"
					aria-pressed={travelerData.interests.includes(interest)}
				>
					{interest}
				</button>
			{/each}
		</div>
		<button
			on:click={() => animateSequence(interestsEl, finalEl)}
			class="rounded-full bg-white/20 px-8 py-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
			disabled={travelerData.interests.length === 0}
		>
			Next →
		</button>
	</div>
</div>

<!-- Final Step -->
<div
	bind:this={finalEl}
	id="final"
	class="gradient-animate fixed inset-0 flex h-screen w-screen translate-y-full flex-col items-center justify-center bg-gradient-to-br from-lime-400 via-emerald-400 to-cyan-400"
>
	<div class="space-y-8 text-center">
		<h2 class="text-3xl font-semibold text-white">Travel style?</h2>
		<div class="grid w-72 grid-cols-1 gap-3">
			{#each travelStyles as style}
				<button
					on:click={(e) => {
						travelerData.travelStyle = style;
						animate(e.currentTarget, { scale: [1, 0.95, 1] }, { duration: 0.3 });
					}}
					class="rounded-full bg-white/20 px-6 py-3 text-white backdrop-blur-sm transition-all hover:bg-white/30 {travelerData.travelStyle ===
					style
						? '!bg-white/40 ring-2 ring-white'
						: ''}"
				>
					{style}
				</button>
			{/each}
		</div>
		<div bind:this={confettiContainer} class="pointer-events-none absolute inset-0" />
		<button
			on:click={() => createConfetti()}
			class="rounded-full bg-white/20 px-8 py-3 text-white ring-2 ring-white/50 backdrop-blur-sm transition-all hover:bg-white/30 hover:ring-white/80 {isValid()
				? 'animate-pulse'
				: ''}"
			disabled={!isValid()}
		>
			Start Exploring 🌟
		</button>
	</div>
</div>

<style global>
	@keyframes gradient-pan {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}

	.gradient-animate {
		background-size: 200% 200%;
		animation: gradient-pan 10s ease infinite;
	}

	@keyframes float {
		0% {
			transform: translateY(100vh) rotate(0deg);
			opacity: 0;
		}
		100% {
			transform: translateY(-100vh) rotate(360deg);
			opacity: 0.4;
		}
	}

	.floating-shape {
		animation: float 8s linear infinite;
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
</style>
