<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import { customerInfoVM } from "$lib/domains/customerinfo/view/customerinfo.vm.svelte";
	import { productStore } from "$lib/domains/product/store";
	import MailIcon from "~icons/lucide/mail";
	import MapPinIcon from "~icons/lucide/map-pin";
	import PackageIcon from "~icons/lucide/package";
	import PhoneIcon from "~icons/lucide/phone";
	import UserIcon from "~icons/lucide/user";
</script>

<div class="flex flex-col gap-6">
	<!-- Product Summary -->
	{#if $productStore}
		<div class="flex flex-col gap-3">
			<div class="flex items-center gap-2">
				<Icon icon={PackageIcon} cls="h-5 w-5 text-gray-600" />
				<Title size="p" weight="semibold">Product</Title>
			</div>
			<div class="rounded-lg border bg-gray-50 p-4">
				<p class="font-medium">{$productStore.title}</p>
				<p class="mt-1 text-sm text-gray-600">
					{$productStore.description}
				</p>
			</div>
		</div>
	{/if}

	<!-- Customer Information Summary -->
	{#if customerInfoVM.customerInfo}
		<div class="flex flex-col gap-3">
			<div class="flex items-center gap-2">
				<Icon icon={UserIcon} cls="h-5 w-5 text-gray-600" />
				<Title size="p" weight="semibold">Customer Information</Title>
			</div>

			<!-- Personal Info -->
			<div class="rounded-lg border bg-gray-50 p-4">
				<div class="flex flex-col gap-3">
					<!-- Name -->
					<div>
						<span class="text-xs text-gray-500">Full Name</span>
						<p class="font-medium">
							{customerInfoVM.customerInfo.firstName}
							{#if customerInfoVM.customerInfo.middleName}
								{customerInfoVM.customerInfo.middleName}
							{/if}
							{customerInfoVM.customerInfo.lastName}
						</p>
					</div>

					<!-- Email -->
					<div class="flex items-center gap-2">
						<Icon icon={MailIcon} cls="h-4 w-4 text-gray-500" />
						<div class="flex-1">
							<span class="text-xs text-gray-500">Email</span>
							<p class="text-sm">
								{customerInfoVM.customerInfo.email}
							</p>
						</div>
					</div>

					<!-- Phone -->
					<div class="flex items-center gap-2">
						<Icon icon={PhoneIcon} cls="h-4 w-4 text-gray-500" />
						<div class="flex-1">
							<span class="text-xs text-gray-500">Phone</span>
							<p class="text-sm">
								{customerInfoVM.customerInfo.phoneCountryCode}
								{customerInfoVM.customerInfo.phoneNumber}
							</p>
						</div>
					</div>

					<!-- Address -->
					<div class="flex items-start gap-2">
						<Icon
							icon={MapPinIcon}
							cls="h-4 w-4 text-gray-500 mt-1"
						/>
						<div class="flex-1">
							<span class="text-xs text-gray-500">Address</span>
							<p class="text-sm">
								{customerInfoVM.customerInfo.address}
								{#if customerInfoVM.customerInfo.address2}
									, {customerInfoVM.customerInfo.address2}
								{/if}
							</p>
							<p class="text-sm text-gray-600">
								{customerInfoVM.customerInfo.city},
								{customerInfoVM.customerInfo.state}
								{customerInfoVM.customerInfo.zipCode}
							</p>
							<p class="text-sm text-gray-600">
								{customerInfoVM.customerInfo.country}
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	{:else}
		<div class="rounded-lg border border-dashed p-6 text-center">
			<p class="text-sm text-gray-500">
				Customer information not yet provided
			</p>
		</div>
	{/if}
</div>
