<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";
	import BillingDetailsCard from "./billing-details-card.svelte";

	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-4">
			<div>
				<span class="text-sm text-gray-500">Product Name</span>
				<p class="mt-1 font-medium">{order.product.title}</p>
			</div>

			<div>
				<span class="text-sm text-gray-500">Description</span>
				<p class="mt-1 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="mt-1 font-semibold">
						${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="mt-1 font-semibold 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-3">
			<div class="flex items-center justify-between">
				<span class="text-gray-600">Base Price</span>
				<span class="font-medium">${order.basePrice.toFixed(2)}</span>
			</div>

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

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

			<div
				class="mt-2 flex items-center justify-between border-t border-gray-200 pt-3"
			>
				<span class="font-semibold">Order Price</span>
				<span class="text-lg font-bold"
					>${order.orderPrice.toFixed(2)}</span
				>
			</div>

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

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

	{#if order.paymentInfo}
		<!-- Billing Information -->
		<BillingDetailsCard paymentInfo={order.paymentInfo} />
	{/if}
</div>
