<script lang="ts">
	import { Badge } from "$lib/components/ui/badge";
	import { Separator } from "$lib/components/ui/separator";
	import type { FullOrderModel } from "$lib/domains/order/data/entities";
	import { OrderStatus } from "$lib/domains/order/data/entities";
	import OrderMainInfo from "./order-main-info.svelte";
	import OrderMiscInfo from "./order-misc-info.svelte";

	let { order }: { order?: FullOrderModel } = $props();

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

	function formatStatus(status: OrderStatus): string {
		return status
			.split("_")
			.map((word) => word.charAt(0) + word.slice(1).toLowerCase())
			.join(" ");
	}
</script>

{#if order}
	<div class="container mx-auto py-6">
		<!-- Order Header -->
		<div class="mb-6 flex items-center justify-between">
			<div class="flex flex-col gap-2">
				<h1 class="text-3xl font-bold">Order #{order.id}</h1>
				<p class="text-gray-600">
					Created on {new Date(order.createdAt).toLocaleDateString(
						"en-US",
						{
							year: "numeric",
							month: "long",
							day: "numeric",
						},
					)}
				</p>
			</div>
			<Badge
				variant={getStatusVariant(order.status)}
				class="px-4 py-2 text-base"
			>
				{formatStatus(order.status)}
			</Badge>
		</div>

		<Separator class="my-6" />

		<!-- Order Content Grid -->
		<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
			<!-- Main Info Column -->
			<div class="flex flex-col gap-6">
				<OrderMainInfo {order} />
			</div>

			<!-- Misc Info Column -->
			<div class="flex flex-col gap-6">
				<OrderMiscInfo {order} />
			</div>
		</div>
	</div>
{:else}
	<div class="container mx-auto py-12 text-center">
		<p class="text-xl text-gray-500">Order not found</p>
	</div>
{/if}
