<script lang="ts">
	import Title from "$lib/components/atoms/title.svelte";
	import Button from "$lib/components/ui/button/button.svelte";
	import Icon from "$lib/components/atoms/icon.svelte";
	import EmailIcon from "~icons/solar/letter-broken";
	import TicketIcon from "~icons/solar/ticket-broken";
	import UsersIcon from "~icons/solar/users-group-rounded-broken";
	import BackpackIcon from "~icons/solar/backpack-linear";
	import BagIcon from "~icons/lucide/briefcase";
	import SuitcaseIcon from "~icons/bi/suitcase2";
	import SeatIcon from "~icons/solar/armchair-2-linear";
	import CreditCardIcon from "~icons/solar/card-broken";
	import ButtonLoadableText from "$lib/components/atoms/button-loadable-text.svelte";
	import TicketLegsOverview from "$lib/domains/ticket/view/ticket/ticket-legs-overview.svelte";
	import Badge from "$lib/components/ui/badge/badge.svelte";
	import { createOrderVM } from "./create.order.vm.svelte";
	import { capitalize, snakeToSpacedPascal } from "$lib/core/string.utils";
	import { passengerInfoVM } from "$lib/domains/passengerinfo/view/passenger.info.vm.svelte";

	let isCreatingOrder = $state(false);

	async function handleCreateOrder() {
		isCreatingOrder = true;
		await createOrderVM.createOrder();
		isCreatingOrder = false;
	}

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

<div class={cardStyle}>
	<div class="mb-4 flex items-center gap-2">
		<Icon icon={EmailIcon} cls="w-5 h-5" />
		<Title size="h5" color="black">Account Information</Title>
	</div>
	<p class="text-gray-800">{createOrderVM.accountInfo.email}</p>
</div>

{#if createOrderVM.ticketInfo}
	<div class={cardStyle}>
		<div class="flex flex-col items-center justify-between gap-2 md:flex-row">
			<div class="mb-4 flex items-center gap-2">
				<Icon icon={TicketIcon} cls="w-5 h-5" />
				<Title size="h5" color="black">Flight Details</Title>
			</div>

			<div class="flex gap-2">
				<Badge variant="outline">
					{snakeToSpacedPascal(
						createOrderVM.ticketInfo.flightType.toLowerCase(),
					)}
				</Badge>
				<Badge variant="secondary">
					{snakeToSpacedPascal(
						createOrderVM.ticketInfo.cabinClass.toLowerCase(),
					)}
				</Badge>
			</div>
		</div>

		{#if createOrderVM.ticketInfo}
			<TicketLegsOverview data={createOrderVM.ticketInfo} />
		{/if}
	</div>

	<div class={cardStyle}>
		<div class="mb-4 flex items-center gap-2">
			<Icon icon={UsersIcon} cls="w-5 h-5" />
			<Title size="h5" color="black">Passengers</Title>
		</div>

		{#each passengerInfoVM.passengerInfo as passenger, index}
			<div class="flex flex-col gap-4">
				<div class="flex items-center justify-between">
					<span class="font-semibold">
						Passenger {index + 1} ({capitalize(
							passenger.passengerType,
						)})
					</span>
				</div>

				<!-- Personal Info -->
				<div class="rounded-lg border bg-gray-50 p-4">
					<div class="grid grid-cols-2 gap-3 text-sm md:grid-cols-3">
						<div>
							<span class="text-gray-500">Name</span>
							<p class="font-medium">
								{passenger.passengerPii.firstName}
								{passenger.passengerPii.middleName}
								{passenger.passengerPii.lastName}
							</p>
						</div>
						<div>
							<span class="text-gray-500">Nationality</span>
							<p class="font-medium">
								{capitalize(passenger.passengerPii.nationality)}
							</p>
						</div>
						<div>
							<span class="text-gray-500">Date of Birth</span>
							<p class="font-medium">
								{passenger.passengerPii.dob}
							</p>
						</div>
					</div>
				</div>

				<!-- Baggage Selection -->
				<div class="flex flex-wrap gap-4 text-sm">
					{#if passenger.bagSelection.personalBags > 0}
						<div class="flex items-center gap-2">
							<Icon
								icon={BackpackIcon}
								cls="h-5 w-5 text-gray-600"
							/>
							<span>
								{passenger.bagSelection.personalBags}x Personal
								Item
							</span>
						</div>
					{/if}
					{#if passenger.bagSelection.handBags > 0}
						<div class="flex items-center gap-2">
							<Icon
								icon={SuitcaseIcon}
								cls="h-5 w-5 text-gray-600"
							/>
							<span>
								{passenger.bagSelection.handBags}x Cabin Bag
							</span>
						</div>
					{/if}
					{#if passenger.bagSelection.checkedBags > 0}
						<div class="flex items-center gap-2">
							<Icon icon={BagIcon} cls="h-5 w-5 text-gray-600" />
							<span>
								{passenger.bagSelection.checkedBags}x Checked Bag
							</span>
						</div>
					{/if}
				</div>

				<!-- Seat Selection -->
				{#if passenger.seatSelection.seatNumber}
					<div class="flex items-center gap-2 text-sm">
						<Icon icon={SeatIcon} cls="h-5 w-5 text-gray-600" />
						<span>Seat {passenger.seatSelection.seatNumber}</span>
					</div>
				{/if}
			</div>

			{#if index < passengerInfoVM.passengerInfos.length - 1}
				<div class="border-b border-dashed"></div>
			{/if}
		{/each}
	</div>
{/if}

{#if createOrderVM.ticketInfo}
	<div class={cardStyle}>
		<div class="mb-4 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>Ticket Price</span>
				<span>
					${createOrderVM.ticketInfo.priceDetails.basePrice.toFixed(2)}
				</span>
			</div>
			{#if createOrderVM.ticketInfo.priceDetails.discountAmount > 0}
				<div class="flex items-center justify-between">
					<span>Discount</span>
					<span class="text-green-600">
						-${createOrderVM.ticketInfo.priceDetails.discountAmount.toFixed(
							2,
						)}
					</span>
				</div>
			{/if}
			<div class="mt-2 flex items-center justify-between border-t pt-2">
				<span class="font-medium">Total Price</span>
				<span class="font-medium">
					${createOrderVM.ticketInfo.priceDetails.displayPrice.toFixed(
						2,
					)}
				</span>
			</div>
		</div>
	</div>
{/if}

<div class="flex flex-col items-center justify-between gap-4 lg:flex-row">
	<Button
		class="w-full lg:max-w-max"
		variant="white"
		onclick={() => {
			createOrderVM.setPrevStep();
		}}
	>
		Go Back
	</Button>

	<Button
		class="w-full lg:max-w-max"
		disabled={isCreatingOrder}
		onclick={handleCreateOrder}
	>
		<ButtonLoadableText
			loading={isCreatingOrder}
			loadingText="Creating Order"
			text="Confirm & Create Order"
		/>
	</Button>
</div>
