<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 CustomerDetailsCard from "$lib/domains/customerinfo/view/customer-details-card.svelte";
	import type { FullOrderModel } from "$lib/domains/order/data/entities";
	import ProductIcon from "~icons/solar/box-broken";
	import CreditCardIcon from "~icons/solar/card-broken";

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

	let discAmt = $derived(order.displayPrice - order.orderPrice);

	const cardStyle =
		"flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6 shadow-md";
</script>

<div class="flex flex-col gap-6">
	<!-- Product Info -->
	<div class={cardStyle}>
		<div class="flex items-center justify-between">
			<div class="flex items-center gap-2">
				<Icon icon={ProductIcon} cls="w-5 h-5" />
				<Title size="h5" color="black">Product Details</Title>
			</div>

			{#if order.product.discountPrice > 0 && order.product.discountPrice < order.product.price}
				<Badge variant="success">Discounted</Badge>
			{/if}
		</div>

		<div class="flex flex-col gap-3">
			<div>
				<span class="text-sm text-gray-500">Product Name</span>
				<p class="font-medium">{order.product.title}</p>
			</div>

			<div>
				<span class="text-sm text-gray-500">Description</span>
				<p class="text-gray-700">{order.product.description}</p>
			</div>

			<div class="grid grid-cols-2 gap-4">
				<div>
					<span class="text-sm text-gray-500">Regular Price</span>
					<p class="font-medium">${order.product.price.toFixed(2)}</p>
				</div>
				{#if order.product.discountPrice > 0}
					<div>
						<span class="text-sm text-gray-500">Discount Price</span>
						<p class="font-medium text-green-600">
							${order.product.discountPrice.toFixed(2)}
						</p>
					</div>
				{/if}
			</div>
		</div>
	</div>

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

		<div class="flex flex-col gap-2">
			<div class="flex items-center justify-between">
				<span>Base Price</span>
				<span>${order.basePrice.toFixed(2)}</span>
			</div>

			<div class="flex items-center justify-between">
				<span>Display Price</span>
				<span>${order.displayPrice.toFixed(2)}</span>
			</div>

			{#if discAmt > 0}
				<div class="flex items-center justify-between">
					<span>Discount</span>
					<span class="text-green-600">
						-${discAmt.toFixed(2)}
					</span>
				</div>
			{/if}

			<div class="mt-2 flex items-center justify-between border-t pt-2">
				<span class="font-medium">Order Price</span>
				<span class="font-medium">${order.orderPrice.toFixed(2)}</span>
			</div>

			<div class="flex items-center justify-between">
				<span class="text-sm text-gray-500">Fulfilled</span>
				<span class="text-sm">${order.fullfilledPrice.toFixed(2)}</span>
			</div>
		</div>
	</div>

	{#if order.customerInfo}
		<!-- Customer Information -->
		<CustomerDetailsCard customerInfo={order.customerInfo} />
	{/if}
</div>
