<script lang="ts">
	import Container from "$lib/components/atoms/container.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import Badge from "$lib/components/ui/badge/badge.svelte";
	import { snakeToSpacedPascal } from "$lib/core/string.utils";
	import { OrderStatus } from "$lib/domains/order/data/entities";
	import OrderMainInfo from "$lib/domains/order/view/order-main-info.svelte";
	import OrderMiscInfo from "$lib/domains/order/view/order-misc-info.svelte";
	import { pageTitle } from "$lib/hooks/page-title.svelte";
	import { onMount } from "svelte";
	import { toast } from "svelte-sonner";
	import type { PageData } from "./$types";

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

	pageTitle.set("Order Details");

	function getStatusVariant(status: OrderStatus) {
		switch (status) {
			case OrderStatus.FULFILLED:
				return "success";
			case OrderStatus.CANCELLED:
				return "destructive";
			default:
				return "secondary";
		}
	}

	$inspect(data.data);

	onMount(() => {
		if (data.error) {
			toast.error(data.error.message, {
				description: data.error.userHint,
			});
			return;
		}
	});
</script>

{#if data.data}
	<main class="grid w-full place-items-center gap-4">
		<Container containerClass="w-full flex flex-col gap-6">
			<!-- Header Section -->
			<div
				class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"
			>
				<div class="flex flex-col gap-2">
					<Title size="h3">Order Details</Title>
					<p class="text-sm text-gray-500">Order #{data.data.id}</p>
				</div>
				<Badge
					variant={getStatusVariant(data.data?.status)}
					class="w-fit"
				>
					{snakeToSpacedPascal(data.data?.status.toLowerCase())}
				</Badge>
			</div>

			<!-- Main Content Grid -->
			<div class="grid h-full w-full grid-cols-1 gap-6 lg:grid-cols-3">
				<!-- Left Column - Main Info (2/3 width on large screens) -->
				<div class="lg:col-span-2">
					<OrderMainInfo order={data.data} />
				</div>

				<!-- Right Column - Misc Info (1/3 width on large screens) -->
				<div class="lg:col-span-1">
					<OrderMiscInfo order={data.data} />
				</div>
			</div>
		</Container>
	</main>
{/if}
