<script lang="ts">
	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 CheckoutConfirmationSection from "$lib/domains/checkout/checkout-confirmation-section.svelte";
	import CheckoutLoadingSection from "$lib/domains/checkout/checkout-loading-section.svelte";
	import CheckoutStepsIndicator from "$lib/domains/checkout/checkout-steps-indicator.svelte";
	import { checkoutVM } from "$lib/domains/checkout/checkout.vm.svelte";
	import InitialInfoSection from "$lib/domains/checkout/initial-info-section.svelte";
	import PaymentInfoSection from "$lib/domains/checkout/payment-info-section/index.svelte";
	import PaymentSummary from "$lib/domains/checkout/payment-summary.svelte";
	import PaymentVerificationSection from "$lib/domains/checkout/payment-verification-section.svelte";
	import { ckFlowVM } from "$lib/domains/ckflow/view/ckflow.vm.svelte";
	import { CheckoutStep } from "$lib/domains/order/data/entities";
	import { productStore } from "$lib/domains/product/store";
	import { onDestroy, onMount } from "svelte";
	import { toast } from "svelte-sonner";
	import SearchIcon from "~icons/solar/magnifer-linear";
	import type { PageData } from "./$types";

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

	onMount(() => {
		if (pageData.error) {
			toast.error(pageData.error.message, {
				description: pageData.error.userHint,
			});
			return;
		}
		if (!pageData.data) {
			return;
		}
		productStore.set(pageData.data);
		checkoutVM.loading = false;

		setTimeout(async () => {
			await ckFlowVM.initFlow();
		}, 2000);
	});

	onDestroy(() => {
		checkoutVM.reset();
	});
</script>

<div class="min-h-screen w-full bg-gradient-to-br from-gray-50 to-gray-100">
	{#if !pageData.data || !!pageData.error}
		<!-- Error State -->
		<div class="flex min-h-screen w-full items-center justify-center p-4">
			<div
				class="animate-fade-in w-full max-w-md 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={SearchIcon} cls="h-12 w-12 text-red-600" />
					</div>
				</div>
				<Title size="h4" weight="medium" center>Product Not Found</Title>
				<p class="mb-6 mt-3 text-center text-gray-600">
					Something went wrong. Please try again or contact support for
					assistance.
				</p>
				<div class="flex justify-center">
					<a
						href="/"
						class="inline-flex items-center justify-center rounded-lg bg-gray-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-gray-800"
					>
						Return Home
					</a>
				</div>
			</div>
		</div>
	{:else if checkoutVM.checkoutStep === CheckoutStep.Confirmation}
		<!-- Confirmation State -->
		<div class="flex min-h-screen w-full items-center justify-center p-4">
			<MaxWidthWrapper cls="w-full">
				<CheckoutConfirmationSection />
			</MaxWidthWrapper>
		</div>
	{:else}
		<!-- Checkout Flow -->
		<div class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8 lg:py-12">
			<!-- Steps Indicator -->
			<div class="mb-8 lg:mb-12">
				<CheckoutStepsIndicator />
			</div>

			<!-- Main Checkout Layout -->
			<div class="flex flex-col gap-6 lg:flex-row lg:gap-8">
				<!-- Left Column: Forms -->
				<div class="flex-1">
					<div
						class="rounded-2xl bg-white p-6 shadow-lg md:p-8 lg:p-10"
					>
						{#if checkoutVM.loading}
							<CheckoutLoadingSection />
						{:else if checkoutVM.checkoutStep === CheckoutStep.Initial}
							<InitialInfoSection />
						{:else if checkoutVM.checkoutStep === CheckoutStep.Payment}
							<PaymentInfoSection />
						{:else if checkoutVM.checkoutStep === CheckoutStep.Verification}
							<PaymentVerificationSection />
						{/if}
					</div>
				</div>

				<!-- Right Column: Summary (Sticky on larger screens) -->
				<div class="lg:w-[400px] xl:w-[440px]">
					<div class="lg:sticky lg:top-8">
						<div class="rounded-2xl bg-white p-6 shadow-lg md:p-8">
							<PaymentSummary />
						</div>
					</div>
				</div>
			</div>
		</div>
	{/if}
</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>
