<script lang="ts">
	import { page } from "$app/state";
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import { onMount } from "svelte";
	import ExclamationIcon from "~icons/heroicons/exclamation-triangle-20-solid";
	import ClockIcon from "~icons/heroicons/clock-20-solid";
	import SupportIcon from "~icons/heroicons/chat-bubble-left-right-20-solid";

	let canRedirect = $state(false);

	let sid = $derived(page.url.searchParams.get("sid") as any as string);
	let tid = $derived(page.url.searchParams.get("tid") as any as string);

	onMount(() => {
		if (sid && tid && sid.length > 0 && tid.length > 0) {
			canRedirect = true;
		}
	});
</script>

<div class="flex min-h-screen w-full items-center justify-center bg-gradient-to-br from-red-50 via-orange-50 to-yellow-50 p-4">
	<div class="w-full max-w-lg">
		<div class="animate-scale-in rounded-3xl bg-white p-8 shadow-2xl md:p-12">
			<!-- Error Icon with Animation -->
			<div class="mb-8 flex justify-center">
				<div class="animate-pulse-slow rounded-full bg-gradient-to-br from-red-400 to-red-600 p-4 shadow-lg">
					<Icon icon={ExclamationIcon} cls="h-16 w-16 text-white" />
				</div>
			</div>

			<!-- Title -->
			<Title size="h3" weight="medium" center>Session Terminated</Title>

			<!-- Description -->
			<p class="mb-8 mt-4 text-center text-base text-gray-600">
				Your checkout session has been terminated. This may have occurred due to inactivity or a connection issue.
			</p>

			<!-- Reason Cards -->
			<div class="mb-8 space-y-3">
				<div class="flex items-start gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
					<div class="flex-shrink-0">
						<div class="rounded-lg bg-orange-100 p-2">
							<Icon icon={ClockIcon} cls="h-5 w-5 text-orange-600" />
						</div>
					</div>
					<div class="flex-1">
						<p class="mb-1 text-sm font-semibold text-gray-900">
							Session Timeout
						</p>
						<p class="text-sm text-gray-600">
							Sessions expire after a period of inactivity for security.
						</p>
					</div>
				</div>

				<div class="flex items-start gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
					<div class="flex-shrink-0">
						<div class="rounded-lg bg-blue-100 p-2">
							<Icon icon={SupportIcon} cls="h-5 w-5 text-blue-600" />
						</div>
					</div>
					<div class="flex-1">
						<p class="mb-1 text-sm font-semibold text-gray-900">
							Need Help?
						</p>
						<p class="text-sm text-gray-600">
							Contact our support team to continue your order.
						</p>
					</div>
				</div>
			</div>

			
		</div>
	</div>
</div>

<style>
	@keyframes scale-in {
		from {
			opacity: 0;
			transform: scale(0.9);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes pulse-slow {
		0%, 100% {
			opacity: 1;
		}
		50% {
			opacity: 0.8;
		}
	}

	.animate-scale-in {
		animation: scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.animate-pulse-slow {
		animation: pulse-slow 2s ease-in-out infinite;
	}
</style>
