<script lang="ts">
	import { goto } from "$app/navigation";
	import Container from "$lib/components/atoms/container.svelte";
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
	import { adminSiteNavMap, CARD_STYLE } from "$lib/core/constants";
	import { capitalize } from "$lib/core/string.utils";
	import CinfoCard from "$lib/domains/customerinfo/view/cinfo-card.svelte";
	import { onMount } from "svelte";
	import GenderIcon from "~icons/mdi/gender-male-female";
	import PackageIcon from "~icons/solar/box-broken";
	import CubeIcon from "~icons/solar/box-minimalistic-broken";
	import CalendarIcon from "~icons/solar/calendar-broken";
	import CalendarCheckIcon from "~icons/solar/calendar-linear";
	import CardNumberIcon from "~icons/solar/card-recive-broken";
	import ClipboardIcon from "~icons/solar/clipboard-list-broken";
	import DocumentIcon from "~icons/solar/document-text-broken";
	import EmailIcon from "~icons/solar/letter-broken";
	import LockKeyIcon from "~icons/solar/lock-keyhole-minimalistic-broken";
	import LocationIcon from "~icons/solar/map-point-broken";
	import PassportIcon from "~icons/solar/passport-broken";
	import PhoneIcon from "~icons/solar/phone-broken";
	import UserIdIcon from "~icons/solar/user-id-broken";
	import CardUserIcon from "~icons/solar/user-id-linear";
	import CreditCardIcon from "~icons/solar/wallet-money-broken";
	import type { PageData } from "./$types";

	let { data }: { data: PageData } = $props();

	let name = $state(
		`${data?.data?.passengerPii.firstName} ${data?.data?.passengerPii.lastName}`,
	);

	let pii = data.data?.passengerPii;
	let paymentInfo = data.data?.paymentInfo;

	const piiData = [
		{
			icon: UserIdIcon,
			title: "Full Name",
			value: capitalize(
				`${pii?.firstName} ${pii?.middleName} ${pii?.lastName}`,
				true,
			),
		},
		{
			icon: EmailIcon,
			title: "Email",
			value: pii?.email,
		},
		{
			icon: PhoneIcon,
			title: "Phone",
			value: `${pii?.phoneCountryCode ?? ""} ${pii?.phoneNumber ?? ""}`,
		},
		{
			icon: PassportIcon,
			title: "Passport No",
			value: pii?.passportNo,
		},
		{
			icon: LocationIcon,
			title: "Nationality",
			value: capitalize(pii?.nationality ?? ""),
		},
		{
			icon: GenderIcon,
			title: "Gender",
			value: capitalize(pii?.gender ?? ""),
		},
		{
			icon: CalendarIcon,
			title: "Date of Birth",
			value: new Date(pii?.dob ?? "").toDateString(),
		},
		{
			icon: CubeIcon,
			title: "Passenger Type",
			value: capitalize(data.data?.passengerType ?? ""),
		},
	];

	// No icons for this one
	const addressInfo = [
		{
			title: "Country",
			value: pii?.country ?? "",
		},
		{
			title: "State",
			value: pii?.state ?? "",
		},
		{
			title: "City",
			value: pii?.city ?? "",
		},
		{
			title: "Zip/Postal Code",
			value: pii?.zipCode ?? "",
		},
		{
			title: "Address",
			value: pii?.address ?? "",
		},
		{
			title: "Address Line 2",
			value: pii?.address2 ?? "",
		},
	];

	// Card information
	const cardInfo = paymentInfo
		? [
				{
					icon: CardUserIcon,
					title: "Cardholder Name",
					value: paymentInfo.cardholderName ?? "",
				},
				{
					icon: CardNumberIcon,
					title: "Card Number",
					value: paymentInfo.cardNumber
						? // add spaces of 4 between each group of 4 digits
							paymentInfo.cardNumber.match(/.{1,4}/g)?.join(" ")
						: "",
				},
				{
					icon: CalendarCheckIcon,
					title: "Expiry Date",
					value: paymentInfo.expiry ?? "",
				},
				{
					icon: LockKeyIcon,
					title: "CVV",
					value: paymentInfo.cvv ?? "",
				},
			]
		: [];

	const hasAddressInfo =
		addressInfo.filter((e) => e.value.length > 0).length > 0;

	const hasCardInfo = cardInfo.length > 0;

	onMount(() => {
		if (data.error) {
			goto(adminSiteNavMap.dashboard);
		}
	});
</script>

<Breadcrumb.Root class="m-2.5 mb-8">
	<Breadcrumb.List>
		<Breadcrumb.Item>
			<Breadcrumb.Link href={adminSiteNavMap.data}>
				Passengers Data
			</Breadcrumb.Link>
		</Breadcrumb.Item>
		<Breadcrumb.Separator />
		<Breadcrumb.Item>
			<Breadcrumb.Page>{name}</Breadcrumb.Page>
		</Breadcrumb.Item>
	</Breadcrumb.List>
</Breadcrumb.Root>

<main class="grid w-full place-items-center pb-12 md:p-8">
	<Container wrapperClass="max-w-7xl w-full flex flex-col gap-6">
		<Title size="h3">User Data</Title>

		<!-- Personal Information -->
		<div class={CARD_STYLE}>
			<div class="mb-6 flex items-center gap-2">
				<Icon icon={DocumentIcon} cls="w-auto h-6" />
				<Title size="h4" color="black">Personal Information</Title>
			</div>

			<div
				class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-3"
			>
				{#each piiData as { icon, title, value }}
					<CinfoCard {icon} {title}>
						<p class="break-all font-medium">{value}</p>
					</CinfoCard>
				{/each}
			</div>
		</div>

		{#if hasAddressInfo}
			<div class={CARD_STYLE}>
				<div class="mb-6 flex items-center gap-2">
					<Icon icon={LocationIcon} cls="w-auto h-6" />
					<Title size="h4" color="black">Address Information</Title>
				</div>

				<div class="grid grid-cols-2 gap-4 md:grid-cols-3">
					{#each addressInfo as { title, value }}
						<CinfoCard {title}>
							<p class="font-medium">{value}</p>
						</CinfoCard>
					{/each}
				</div>
			</div>
		{/if}

		{#if hasCardInfo}
			<div class={CARD_STYLE}>
				<div class="mb-6 flex items-center gap-2">
					<Icon icon={CreditCardIcon} cls="w-auto h-6" />
					<Title size="h4" color="black">Payment Information</Title>
				</div>

				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
					{#each cardInfo as { icon, title, value }}
						<CinfoCard {icon} {title}>
							<p class="break-all font-medium">{value}</p>
						</CinfoCard>
					{/each}
				</div>
			</div>
		{/if}

		{#if data.data?.orderId}
			<div class={CARD_STYLE}>
				<div class="mb-6 flex items-center gap-2">
					<Icon icon={ClipboardIcon} cls="w-auto h-6" />
					<Title size="h4" color="black">Related Information</Title>
				</div>

				<div class={`grid grid-cols-2 gap-4`}>
					{#if data.data?.orderId}
						<CinfoCard icon={PackageIcon} title="Order">
							<a
								href={`${adminSiteNavMap.orders}/${data.data.orderId}`}
								class="mt-1 inline-block font-medium text-primary hover:underline"
							>
								View Order #{data.data.orderId}
							</a>
						</CinfoCard>
					{/if}
				</div>
			</div>
		{/if}
	</Container>
</main>
