<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import {
		formatDateTime,
		formatDuration,
		formatTime,
	} from "@pkg/logic/core/date.utils";
	import { capitalize } from "@pkg/logic/core/string.utils";
	import FlagIcon from "~icons/material-symbols/flag";
	import CardIcon from "~icons/solar/card-linear";
	import CheckIcon from "~icons/solar/check-read-linear";
	import ClockIcon from "~icons/solar/clock-circle-linear";
	import XIcon from "~icons/solar/close-circle-linear";
	import KeyIcon from "~icons/solar/key-linear";
	import UserIcon from "~icons/solar/user-circle-linear";
	import type { FlowInfo } from "../data";

	let { session }: { session: FlowInfo } = $props();
</script>

<div class="space-y-2">
	<h3 class="text-lg font-medium">Session Timeline</h3>
	<div class="rounded-lg border bg-card p-4 shadow-sm">
		<ol class="relative space-y-6">
			<!-- Creation -->
			<li class="ml-6">
				<span
					class="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-white shadow"
				>
					<Icon icon={FlagIcon} cls="h-3 w-3" />
				</span>
				<div class="flex flex-col">
					<h4 class="font-medium">Session Created</h4>
					<time class="text-sm text-muted-foreground">
						{formatDateTime(session.createdAt)}
					</time>
					<div class="mt-1 rounded bg-muted px-2 py-1 text-xs">
						Starting point
					</div>
				</div>
			</li>

			<!-- Personal Info -->
			{#if session.personalInfoLastSyncedAt}
				<li class="ml-6">
					<div
						class="absolute -left-3 h-full w-0.5"
						style="top: -1.5rem;"
					></div>
					<span
						class="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-sky-500 text-white shadow"
					>
						<Icon icon={UserIcon} cls="h-3 w-3" />
					</span>
					<div class="flex flex-col">
						<h4 class="font-medium">Personal Information Provided</h4>
						<time class="text-sm text-muted-foreground">
							{formatDateTime(session.personalInfoLastSyncedAt)}
						</time>
						{#if session.createdAt && session.personalInfoLastSyncedAt}
							<div class="mt-1 rounded bg-muted px-2 py-1 text-xs">
								<Icon
									icon={ClockIcon}
									cls="mr-1 h-3 w-3 inline"
								/>
								{formatDuration(
									new Date(
										session.personalInfoLastSyncedAt,
									).getTime() -
										new Date(session.createdAt).getTime(),
								)} after start
							</div>
						{/if}
					</div>
				</li>
			{/if}

			<!-- Payment Info -->
			{#if session.paymentInfoLastSyncedAt}
				<li class="ml-6">
					<div
						class="absolute -left-3 h-full w-0.5 bg-border"
						style="top: -1.5rem;"
					></div>
					<span
						class="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-amber-500 text-white shadow"
					>
						<Icon icon={CardIcon} cls="h-3 w-3" />
					</span>
					<div class="flex flex-col">
						<h4 class="font-medium">Payment Information Provided</h4>
						<time class="text-sm text-muted-foreground">
							{formatDateTime(session.paymentInfoLastSyncedAt)}
						</time>
						{#if session.personalInfoLastSyncedAt && session.paymentInfoLastSyncedAt}
							<div class="mt-1 rounded bg-muted px-2 py-1 text-xs">
								<Icon
									icon={ClockIcon}
									cls="mr-1 h-3 w-3 inline"
								/>
								{formatDuration(
									new Date(
										session.paymentInfoLastSyncedAt,
									).getTime() -
										new Date(
											session.personalInfoLastSyncedAt,
										).getTime(),
								)} after personal info
							</div>
						{/if}
					</div>
				</li>
			{/if}

			<!-- OTP Request/Submission -->
			{#if session.otpCode}
				<li class="ml-6">
					<div
						class="absolute -left-3 h-full w-0.5 bg-border"
						style="top: -1.5rem;"
					></div>
					<span
						class="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-violet-500 text-white shadow"
					>
						<Icon icon={KeyIcon} cls="h-3 w-3" />
					</span>
					<div class="flex flex-col">
						<h4 class="font-medium">
							Verification Code {session.otpSubmitted
								? "Submitted"
								: "Requested"}
						</h4>
						<time class="text-sm text-muted-foreground">
							{formatTime(session.lastSyncedAt)}
						</time>
						{#if session.otpSubmitted}
							<div class="mt-1 rounded bg-muted px-2 py-1 text-xs">
								Code: <span class="font-medium"
									>{session.otpCode}</span
								>
							</div>
						{/if}
					</div>
				</li>
			{/if}

			<!-- Completion -->
			{#if session.completedAt}
				<li class="ml-6">
					<div
						class="absolute -left-3 h-full w-0.5 bg-border"
						style="top: -1.5rem;"
					></div>
					<span
						class="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full text-white shadow"
						class:bg-green-500={session.sessionOutcome ===
							"COMPLETED"}
						class:bg-red-500={session.sessionOutcome !== "COMPLETED"}
					>
						<Icon
							icon={session.sessionOutcome === "COMPLETED"
								? CheckIcon
								: XIcon}
							cls="h-3 w-3"
						/>
					</span>
					<div class="flex flex-col">
						<h4 class="font-medium">
							Session {capitalize(
								session.sessionOutcome?.toLowerCase() || "ended",
							)}
						</h4>
						<time class="text-sm text-muted-foreground">
							{formatDateTime(session.completedAt)}
						</time>
						{#if session.createdAt && session.completedAt}
							<div class="mt-1 rounded bg-muted px-2 py-1 text-xs">
								<Icon
									icon={ClockIcon}
									cls="mr-1 h-3 w-3 inline"
								/>
								Total duration: {formatDuration(
									new Date(session.completedAt).getTime() -
										new Date(session.createdAt).getTime(),
								)}
							</div>
						{/if}
					</div>
				</li>
			{/if}
		</ol>
	</div>
</div>
