<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import { Badge } from "$lib/components/ui/badge";
	import type { FullOrderModel } from "$lib/domains/order/data/entities";
	import { OrderStatus } from "$lib/domains/order/data/entities";
	import CalendarIcon from "~icons/solar/calendar-broken";
	import InfoIcon from "~icons/solar/info-circle-broken";

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

	const cardStyle =
		"flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6 shadow-md";
	const stickyContainerStyle = "sticky top-4 flex flex-col gap-6";

	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(" ");
	}

	function formatDate(dateString: string): string {
		const date = new Date(dateString);
		return date.toLocaleDateString("en-US", {
			year: "numeric",
			month: "long",
			day: "numeric",
			hour: "2-digit",
			minute: "2-digit",
		});
	}
</script>

<div class={stickyContainerStyle}>
	<!-- Order Status -->
	<div class={cardStyle}>
		<div class="flex items-center gap-2">
			<Icon icon={InfoIcon} cls="w-5 h-5" />
			<Title size="h5" color="black">Order Status</Title>
		</div>

		<div class="flex flex-col gap-3">
			<div class="flex items-center justify-between">
				<span class="text-sm text-gray-500">Current Status</span>
				<Badge variant={getStatusVariant(order.status)}>
					{formatStatus(order.status)}
				</Badge>
			</div>

			<div class="flex items-center justify-between">
				<span class="text-sm text-gray-500">Order ID</span>
				<span class="font-medium">#{order.id}</span>
			</div>
		</div>
	</div>

	<!-- Timestamps -->
	<div class={cardStyle}>
		<div class="flex items-center gap-2">
			<Icon icon={CalendarIcon} cls="w-5 h-5" />
			<Title size="h5" color="black">Timeline</Title>
		</div>

		<div class="flex flex-col gap-3">
			<div>
				<span class="text-sm text-gray-500">Created At</span>
				<p class="mt-1 font-medium">{formatDate(order.createdAt)}</p>
			</div>

			<div>
				<span class="text-sm text-gray-500">Last Updated</span>
				<p class="mt-1 font-medium">{formatDate(order.updatedAt)}</p>
			</div>
		</div>
	</div>
</div>
