<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import { checkoutSessionIdStore } from "$lib/domains/checkout/sid.store";
	import { onMount } from "svelte";
	import { toast } from "svelte-sonner";
	import CheckCircleIcon from "~icons/heroicons/check-circle-20-solid";
	import ExclamationIcon from "~icons/heroicons/exclamation-triangle-20-solid";
	import type { PageData } from "./$types";

	let { data }: { data: PageData } = $props();

	onMount(() => {
		if (data.error) {
			return;
		}
		setTimeout(() => {
			if (!data.data) {
				toast.error("An error occurred during checkout", {
					description: "Please try again later or contact support",
				});
				return;
			}
			window.location.replace(
				`/checkout/${$checkoutSessionIdStore}/${data.data.linkId}`,
			);
		}, 2000);
	});
</script>

<div class="flex min-h-screen w-full items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-4">
	<div class="w-full max-w-md">
		{#if data.data}
			<!-- Valid Product Card -->
			<div class="animate-fade-in rounded-2xl bg-white p-8 shadow-xl">
				<div class="mb-6 flex justify-center">
					<div class="rounded-full bg-green-100 p-3">
						<Icon icon={CheckCircleIcon} cls="h-12 w-12 text-green-600" />
					</div>
				</div>
				
				<Title size="h4" weight="medium" center>
					{data.data.title}
				</Title>
				
				{#if data.data.description}
					<p class="mb-6 mt-3 text-center text-gray-600">
						{data.data.description}
					</p>
				{/if}
				
				<div class="mb-6 flex justify-center">
					<div class="flex space-x-1">
						<div class="h-2 w-2 animate-bounce rounded-full bg-primary [animation-delay:-0.3s]"></div>
						<div class="h-2 w-2 animate-bounce rounded-full bg-primary [animation-delay:-0.15s]"></div>
						<div class="h-2 w-2 animate-bounce rounded-full bg-primary"></div>
					</div>
				</div>
				
				<p class="text-center text-sm text-gray-500">
					Redirecting you to checkout...
				</p>
			</div>
		{:else}
			<!-- Error State -->
			<div class="animate-fade-in rounded-2xl bg-white p-8 shadow-xl">
				<div class="mb-6 flex justify-center">
					<div class="rounded-full bg-red-100 p-3">
						<Icon icon={ExclamationIcon} cls="h-12 w-12 text-red-600" />
					</div>
				</div>
				
				<Title size="h4" weight="medium" center>Page Not Found</Title>
				
				<p class="mb-6 mt-3 text-center text-gray-600">
					The link you followed may be expired or invalid. Please contact support for assistance.
				</p>
				
				<div class="flex justify-center">
					<a 
						href="/"
						class="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-primary/90"
					>
						Return Home
					</a>
				</div>
			</div>
		{/if}
	</div>
</div>

<style>
	@keyframes fade-in {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.animate-fade-in {
		animation: fade-in 0.5s ease-out;
	}
</style>
