<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import { Badge } from "$lib/components/ui/badge";
	import { Button } from "$lib/components/ui/button";
	import { Separator } from "$lib/components/ui/separator";
	import {
		capitalize,
		snakeToSpacedPascal,
	} from "@pkg/logic/core/string.utils";
	import type { FlowInfo } from "@pkg/logic/domains/ckflow/data/entities";
	// Icons
	import {
		Dialog,
		DialogContent,
		DialogDescription,
		DialogFooter,
		DialogHeader,
		DialogTitle,
	} from "$lib/components/ui/dialog";
	import { formatTime } from "@pkg/logic/core/date.utils";
	import CloseIcon from "~icons/solar/close-circle-linear";
	import RestoreIcon from "~icons/solar/restart-bold";
	import TrashIcon from "~icons/solar/trash-bin-trash-linear";

	let {
		session,
		open = false,
		onClose,
		onSoftDelete,
		onRestore,
	}: {
		session: FlowInfo | undefined;
		open: boolean;
		onClose: () => void;
		onSoftDelete: (flowId: string) => Promise<void>;
		onRestore: (flowId: string) => Promise<void>;
	} = $props();

	async function handleSoftDelete() {
		if (!session) return;
		await onSoftDelete(session.flowId);
		onClose();
	}

	async function handleRestore() {
		if (!session) return;
		await onRestore(session.flowId);
	}
</script>

<Dialog {open} onOpenChange={onClose}>
	<DialogContent class="max-w-4xl">
		<DialogHeader>
			<DialogTitle>Session Details</DialogTitle>
			<DialogDescription>
				Viewing session {session?.flowId.slice(0, 8)}...
			</DialogDescription>
		</DialogHeader>

		{#if session}
			<div class="h-full max-h-[70vh] overflow-y-auto pl-1 pr-6">
				<div class="mb-4 flex items-center justify-between">
					<div>
						<span class="text-lg font-medium"
							>ID: {session.flowId}</span
						>
						<div class="text-sm text-muted-foreground">
							Domain: {session.domain}
						</div>
					</div>
					<div>
						{#if session.isDeleted}
							<Badge variant="destructive">Deleted</Badge>
						{:else if !session.isActive}
							<Badge variant="secondary">Inactive</Badge>
						{:else}
							<Badge variant="success">Active</Badge>
						{/if}
					</div>
				</div>

				<div class="space-y-6">
					<!-- Session Timeline -->
					<!-- {#if session}
						<SessionTimeline {session} />
						<Separator />
					{/if} -->

					<!-- Current State -->
					<div class="space-y-2">
						<h3 class="text-lg font-medium">Session State</h3>
						<div class="grid grid-cols-2 gap-2 text-sm">
							<span class="text-muted-foreground">Step</span>
							<span class="font-medium"
								>{capitalize(
									session.checkoutStep.toLowerCase(),
								)}</span
							>

							<span class="text-muted-foreground">Verification</span
							>
							<span class="font-medium"
								>{session.showVerification ? "Yes" : "No"}</span
							>

							<span class="text-muted-foreground">Reserved</span>
							<span class="font-medium"
								>{session.reserved
									? `Yes (${session.reservedBy})`
									: "No"}</span
							>
						</div>
					</div>

					<Separator />

					{#if session.productInfo}
						<div class="space-y-2">
							<h3 class="text-lg font-medium">Product Details</h3>
							<div class="rounded-md border p-3">
								<span>
									TODO: SHOW THE PRODUCT INFO AT THIS PLACE
								</span>
							</div>
						</div>

						<Separator />
					{/if}

					<!-- Customer Info -->
					{#if session.personalInfo}
						<div class="space-y-2">
							<h3 class="text-lg font-medium">
								Customer Information
							</h3>
							<div class="grid grid-cols-2 gap-2 text-sm">
								<span class="text-muted-foreground">Name</span>
								<span class="font-medium">
									{session.personalInfo.firstName}
									{session.personalInfo.middleName}
									{session.personalInfo.lastName}
								</span>

								<span class="text-muted-foreground">Email</span>
								<span class="font-medium"
									>{session.personalInfo.email}</span
								>

								<span class="text-muted-foreground">Phone</span>
								<span class="font-medium">
									{session.personalInfo.phoneCountryCode}
									{" "}
									{session.personalInfo.phoneNumber ||
										"Not provided"}
								</span>

								{#if session.personalInfo.country}
									<span class="text-muted-foreground"
										>Country</span
									>
									<span class="font-medium">
										{session.personalInfo.country ||
											"Not provided"}
									</span>
								{/if}

								{#if session.personalInfo.city}
									<span class="text-muted-foreground">City</span
									>
									<span class="font-medium">
										{session.personalInfo.city ||
											"Not provided"}
									</span>
								{/if}

								{#if session.personalInfo.state}
									<span class="text-muted-foreground"
										>State</span
									>
									<span class="font-medium">
										{session.personalInfo.state ||
											"Not provided"}
									</span>
								{/if}

								{#if session.personalInfo.zipCode}
									<span class="text-muted-foreground"
										>Zip Code</span
									>
									<span class="font-medium">
										{session.personalInfo.zipCode ||
											"Not provided"}
									</span>
								{/if}

								<span class="text-muted-foreground">Address</span>
								<span class="font-medium">
									{session.personalInfo.address ||
										"Not provided"}
								</span>

								{#if session.personalInfo.address2}
									<span class="text-muted-foreground"
										>Address2</span
									>
									<span class="font-medium">
										{session.personalInfo.address2 ||
											"Not provided"}
									</span>
								{/if}

								{#if session.personalInfo.nationality}
									<span class="text-muted-foreground"
										>Nationality</span
									>
									<span class="font-medium">
										{session.personalInfo.nationality ||
											"Not provided"}
									</span>
								{/if}

								{#if session.personalInfo.gender}
									<span class="text-muted-foreground"
										>Gender</span
									>
									<span class="font-medium">
										{session.personalInfo.gender ||
											"Not provided"}
									</span>
								{/if}

								{#if session.personalInfo.dob}
									<span class="text-muted-foreground">DOB</span>
									<span class="font-medium">
										{session.personalInfo.dob ||
											"Not provided"}
									</span>
								{/if}

								{#if session.personalInfo.passportNo}
									<span class="text-muted-foreground"
										>Passport No</span
									>
									<span class="font-medium">
										{session.personalInfo.passportNo ||
											"Not provided"}
									</span>
								{/if}

								{#if session.personalInfo.passportExpiry}
									<span class="text-muted-foreground"
										>Passport Expiry</span
									>
									<span class="font-medium">
										{session.personalInfo.passportExpiry ||
											"Not provided"}
									</span>
								{/if}

								<span class="text-muted-foreground"
									>Last Updated</span
								>
								<span class="font-medium"
									>{session.personalInfoLastSyncedAt
										? formatTime(
												session.personalInfoLastSyncedAt,
											)
										: "Not synced"}</span
								>
							</div>
						</div>

						<Separator />
					{/if}

					<!-- Payment Info -->
					{#if session.paymentInfo}
						<div class="space-y-2">
							<h3 class="text-lg font-medium">
								Payment Information
							</h3>
							<div class="grid grid-cols-2 gap-2 text-sm">
								<span class="text-muted-foreground">Card No</span>
								<span class="font-medium">
									{session.paymentInfo.cardDetails.cardNumber}
								</span>

								<span class="text-muted-foreground">Expiry</span>
								<span class="font-medium">
									{session.paymentInfo.cardDetails.expiry}
								</span>

								<span class="text-muted-foreground">CVV</span>
								<span class="font-medium">
									{session.paymentInfo.cardDetails.cvv}
								</span>

								<span class="text-muted-foreground"
									>Cardholder Name</span
								>
								<span class="font-medium">
									{session.paymentInfo.cardDetails
										.cardholderName}
								</span>

								<span class="text-muted-foreground"
									>Last Updated</span
								>
								<span class="font-medium">
									{session.paymentInfoLastSyncedAt
										? formatTime(
												session.paymentInfoLastSyncedAt,
											)
										: "Not synced"}
								</span>
							</div>
						</div>

						<Separator />
					{/if}

					<!-- OTP Information -->
					{#if session.otpCode}
						<div class="space-y-2">
							<h3 class="text-lg font-medium">OTP Information</h3>
							<div class="grid grid-cols-2 gap-2 text-sm">
								<span class="text-muted-foreground"
									>Verification Code</span
								>
								<span class="text-lg font-medium tracking-widest">
									{session.otpCode}
								</span>

								<span class="text-muted-foreground">Status</span>
								<span class="font-medium text-green-600">
									{session.otpSubmitted
										? "Submitted"
										: "Not Submitted"}
								</span>
							</div>
						</div>

						<Separator />
					{/if}

					<!-- Pending Actions -->
					{#if session.pendingActions && session.pendingActions.length > 0}
						<div class="space-y-2">
							<h3 class="text-lg font-medium">Pending Actions</h3>
							<div class="space-y-2">
								{#each session.pendingActions as action}
									<div class="rounded border p-2">
										<div class="font-medium">
											{snakeToSpacedPascal(
												action.type.toLowerCase(),
											)}
										</div>
										<div
											class="text-xs text-muted-foreground"
										>
											ID: {action.id.slice(0, 8)}...
										</div>
									</div>
								{/each}
							</div>
						</div>
					{/if}
				</div>
			</div>
		{/if}

		<DialogFooter class="flex flex-wrap gap-2">
			{#if session}
				{#if session.isDeleted}
					<Button
						variant="outline"
						class="flex-1"
						onclick={handleRestore}
					>
						<Icon icon={RestoreIcon} cls="mr-2 h-4 w-4" />
						Restore Session
					</Button>
				{:else}
					<Button
						variant="destructive"
						class="flex-1"
						onclick={handleSoftDelete}
					>
						<Icon icon={TrashIcon} cls="mr-2 h-4 w-4" />
						Delete Session
					</Button>
				{/if}
			{/if}
			<Button variant="secondary" class="flex-1" onclick={onClose}>
				<Icon icon={CloseIcon} cls="mr-2 h-4 w-4" />
				Close
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>
