<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 MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
	import Button from "$lib/components/ui/button/button.svelte";
	import CloseIcon from "~icons/mdi/window-close";
	import ArrowRightIcon from "~icons/solar/multiple-forward-right-line-duotone";
	import RestartIcon from "~icons/material-symbols/restart-alt-rounded";
	import { onMount } from "svelte";

	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="grid min-h-[80vh] w-full place-items-center">
	<MaxWidthWrapper
		cls="flex flex-col gap-8 items-center justify-center p-4 md:p-8"
	>
		<div
			class="flex w-full flex-col items-center justify-center gap-8 rounded-xl bg-white p-4 drop-shadow-lg md:p-8 md:py-12 lg:w-max"
		>
			<div
				class="rounded-full bg-rose-100 p-2 text-rose-600 drop-shadow-lg"
			>
				<Icon icon={CloseIcon} cls="w-12 h-12" />
			</div>

			<Title size="h3" center weight="medium">Session Terminated</Title>
			<p class="w-full max-w-prose text-center text-gray-600">
				Unfortunately, your session has been terminated due to inactivity
				or expiration of the booking.
			</p>
			<div class="flex w-full flex-col justify-center gap-4 md:flex-row">
				{#if canRedirect}
					<Button
						variant="default"
						size="lg"
						href={`/checkout/${sid}/${tid}`}
					>
						<Icon icon={RestartIcon} cls="w-auto h-6" />
						<span>Try Again</span>
					</Button>
				{/if}

				<Button variant="defaultInverted" size="lg" href="/search">
					<Icon icon={ArrowRightIcon} cls="w-auto h-6" />
					<span>Back To Search</span>
				</Button>
			</div>
		</div>
	</MaxWidthWrapper>
</div>
