<script lang="ts">
	import Title from "$lib/components/atoms/title.svelte";
	import {
		convertAndFormatCurrency,
		currencyStore,
	} from "$lib/domains/currency/view/currency.vm.svelte";
	import { customerInfoVM } from "../customerinfo/view/customerinfo.vm.svelte";
	import { productStore } from "../product/store";
	import { calculateFinalPrices } from "./utils";

	let priceDetails = $state(
		calculateFinalPrices($productStore, customerInfoVM.customerInfo),
	);
	let calculating = $state(false);

	// Reactively update price details when product or customer info changes
	$effect(() => {
		calculating = true;
		priceDetails = calculateFinalPrices(
			$productStore,
			customerInfoVM.customerInfo,
		);
		calculating = false;
	});
</script>

<div class="flex flex-col gap-6">
	<Title size="h4" weight="medium">Order Summary</Title>

	{#if !calculating}
		<!-- Product Information -->
		{#if $productStore}
			<div class="flex flex-col gap-3 border-b border-gray-200 pb-6">
				<Title size="p" weight="medium">
					{$productStore.title}
				</Title>
				<p class="text-sm leading-relaxed text-gray-600">
					{$productStore.description}
				</p>
			</div>
		{/if}

		<!-- Price Breakdown -->
		<div class="flex flex-col gap-3 border-b border-gray-200 pb-6">
			<div class="flex items-center justify-between text-sm">
				<span class="text-gray-600">Base Price</span>
				<span class="font-medium text-gray-900">
					{convertAndFormatCurrency(priceDetails.basePrice)}
				</span>
			</div>

			{#if priceDetails.discountAmount > 0}
				<div class="flex items-center justify-between text-sm">
					<span class="text-gray-600">Discount</span>
					<span class="font-medium text-green-600">
						-{convertAndFormatCurrency(priceDetails.discountAmount)}
					</span>
				</div>
				<div class="flex items-center justify-between text-sm">
					<span class="text-gray-600">Display Price</span>
					<span class="font-medium text-gray-900">
						{convertAndFormatCurrency(priceDetails.displayPrice)}
					</span>
				</div>
			{/if}
		</div>

		<!-- Final Total -->
		<div class="flex items-center justify-between">
			<span class="text-base font-semibold text-gray-900">
				Total ({$currencyStore.code})
			</span>
			<span class="text-2xl font-bold text-gray-900">
				{convertAndFormatCurrency(priceDetails.orderPrice)}
			</span>
		</div>

		<!-- Security Badge -->
		<div class="mt-4 rounded-lg bg-blue-50 p-4">
			<div class="flex items-start gap-3">
				<svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
				</svg>
				<div class="flex-1">
					<p class="text-xs font-medium text-blue-900">Secure Checkout</p>
					<p class="mt-1 text-xs text-blue-700">
						Your payment information is encrypted and secure
					</p>
				</div>
			</div>
		</div>
	{:else}
		<div class="grid place-items-center py-12">
			<div class="flex items-center gap-3">
				<div class="h-5 w-5 animate-spin rounded-full border-2 border-gray-300 border-t-primary"></div>
				<span class="text-sm text-gray-600">Calculating...</span>
			</div>
		</div>
	{/if}
</div>
