<script lang="ts">
	import Title from "$lib/components/atoms/title.svelte";
	import { TicketType, type FlightTicket } from "../../data/entities";
	import * as Accordion from "$lib/components/ui/accordion";
	import { Badge } from "$lib/components/ui/badge";
	import { formatDateTime } from "@pkg/logic/core/date.utils";

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

	const isReturnTicket = data.flightType === TicketType.Return;

	function formatDuration(seconds: number) {
		const hours = Math.floor(seconds / 3600);
		const minutes = Math.floor((seconds % 3600) / 60);
		return `${hours}h ${minutes}m`;
	}
</script>

<Title size="h4" color="black">Trip Details</Title>

<Accordion.Root type="single" class="flex w-full flex-col gap-4">
	<Accordion.Item
		value="outbound"
		class="rounded-lg border-2 border-gray-200 bg-white px-4 shadow-md"
	>
		<Accordion.Trigger class="w-full">
			<div class="flex w-full flex-col gap-2">
				<Badge variant="outline" class="w-max">Outbound</Badge>
				<div class="flex w-full items-center justify-between">
					<div class="flex items-center gap-4">
						<div class="flex items-center gap-2">
							<span class="font-medium">
								{data.flightIteneraries.outbound[0].departure
									.station.code}
							</span>
							<span class="text-gray-500">→</span>
							<span class="font-medium">
								{data.flightIteneraries.outbound[
									data.flightIteneraries.outbound.length - 1
								].destination.station.code}
							</span>
						</div>
						<span class="text-sm text-gray-600">
							{data.flightIteneraries.outbound[0].airline.name}
						</span>
					</div>
					<span>
						{formatDuration(
							data.flightIteneraries.outbound.reduce(
								(acc, curr) => acc + curr.durationSeconds,
								0,
							),
						)}
					</span>
				</div>
			</div>
		</Accordion.Trigger>
		<Accordion.Content>
			<div
				class="flex flex-col gap-4 border-t-2 border-dashed border-gray-200 p-4"
			>
				{#each data.flightIteneraries.outbound as flight, index}
					{#if index > 0}
						<div class="my-2 border-t border-dashed"></div>
					{/if}
					<div class="flex flex-col gap-2">
						<div class="flex items-center justify-between">
							<div class="flex items-center gap-2">
								<span>Flight {flight.flightNumber}</span>
								<span class="text-sm text-gray-500">
									• {flight.airline.name}
								</span>
							</div>
							<span>{formatDuration(flight.durationSeconds)}</span>
						</div>
						<div class="flex justify-between">
							<div class="flex flex-col">
								<span class="text-sm font-semibold">
									{formatDateTime(flight.departure.localTime)
										.time}
								</span>
								<span class="text-sm text-gray-500">
									{formatDateTime(flight.departure.localTime)
										.date}
								</span>
								<span class="mt-1 text-sm text-gray-600">
									{flight.departure.station.city} ({flight
										.departure.station.code})
								</span>
							</div>
							<div class="flex flex-col items-end">
								<span class="text-sm font-semibold">
									{formatDateTime(flight.destination.localTime)
										.time}
								</span>
								<span class="text-sm text-gray-500">
									{formatDateTime(flight.destination.localTime)
										.date}
								</span>
								<span class="mt-1 text-sm text-gray-600">
									{flight.destination.station.city} ({flight
										.destination.station.code})
								</span>
							</div>
						</div>
					</div>
				{/each}
			</div>
		</Accordion.Content>
	</Accordion.Item>

	{#if isReturnTicket && data.flightIteneraries.inbound.length > 0}
		<Accordion.Item
			value="inbound"
			class="rounded-lg border-2 border-gray-200 bg-white px-4 shadow-md"
		>
			<Accordion.Trigger class="w-full">
				<div class="flex w-full flex-col gap-2">
					<Badge variant="outline" class="w-max">Inbound</Badge>
					<div class="flex w-full items-center justify-between">
						<div class="flex items-center gap-4">
							<div class="flex items-center gap-2">
								<span class="font-medium">
									{data.flightIteneraries.inbound[0].departure
										.station.code}
								</span>
								<span class="text-gray-500">→</span>
								<span class="font-medium">
									{data.flightIteneraries.inbound[
										data.flightIteneraries.inbound.length - 1
									].destination.station.code}
								</span>
							</div>
							<span class="text-sm text-gray-600">
								{data.flightIteneraries.inbound[0].airline.name}
							</span>
						</div>
						<span>
							{formatDuration(
								data.flightIteneraries.inbound.reduce(
									(acc, curr) => acc + curr.durationSeconds,
									0,
								),
							)}
						</span>
					</div>
				</div>
			</Accordion.Trigger>

			<Accordion.Content>
				<div
					class="flex flex-col gap-4 border-t-2 border-dashed border-gray-200 p-4"
				>
					{#each data.flightIteneraries.inbound as flight, index}
						{#if index > 0}
							<div class="my-2 border-t border-dashed"></div>
						{/if}
						<div class="flex flex-col gap-2">
							<div class="flex items-center justify-between">
								<div class="flex items-center gap-2">
									<span>Flight {flight.flightNumber}</span>
									<span class="text-sm text-gray-500">
										• {flight.airline.name}
									</span>
								</div>
								<span
									>{formatDuration(
										flight.durationSeconds,
									)}</span
								>
							</div>
							<div class="flex justify-between">
								<div class="flex flex-col">
									<span class="text-sm font-semibold">
										{formatDateTime(
											flight.departure.localTime,
										).time}
									</span>
									<span class="text-sm text-gray-500">
										{formatDateTime(
											flight.departure.localTime,
										).date}
									</span>
									<span class="mt-1 text-sm text-gray-600">
										{flight.departure.station.city} ({flight
											.departure.station.code})
									</span>
								</div>
								<div class="flex flex-col items-end">
									<span class="text-sm font-semibold">
										{formatDateTime(
											flight.destination.localTime,
										).time}
									</span>
									<span class="text-sm text-gray-500">
										{formatDateTime(
											flight.destination.localTime,
										).date}
									</span>
									<span class="mt-1 text-sm text-gray-600">
										{flight.destination.station.city} ({flight
											.destination.station.code})
									</span>
								</div>
							</div>
						</div>
					{/each}
				</div>
			</Accordion.Content>
		</Accordion.Item>
	{/if}
</Accordion.Root>
