<script lang="ts">
	import type { Service, CustomerInfo } from '$lib/types/booking';
	import type { CalendarDate } from '@internationalized/date';
	import { getLocalTimeZone } from '@internationalized/date';
	import { Separator } from '$lib/components/ui/separator';

	const {
		services = [],
		date = undefined,
		time = null,
		customer = null,
		showCustomer = false
	}: {
		services?: Service[];
		date?: CalendarDate;
		time?: string | null;
		customer?: CustomerInfo | null;
		showCustomer?: boolean;
	} = $props();

	// Computed values
	const totalPrice = $derived(services.reduce((sum, service) => sum + service.price, 0));

	const totalDuration = $derived(
		services.reduce((sum, service) => sum + service.duration_minutes, 0)
	);

	function formatDuration(minutes: number): string {
		const hours = Math.floor(minutes / 60);
		const remainingMinutes = minutes % 60;

		if (hours === 0) {
			return `${remainingMinutes} minutes`;
		} else if (remainingMinutes === 0) {
			return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
		} else {
			return `${hours} ${hours === 1 ? 'hour' : 'hours'} ${remainingMinutes} minutes`;
		}
	}

	function formatTime(time: string): string {
		const parts = time.split(':').map(Number);
		const hours = parts[0];
		const minutes = parts.length > 1 ? parts[1] : 0;

		if (hours === 12 && minutes === 0) {
			return 'Noon';
		} else if (hours === 0 && minutes === 0) {
			return 'Midnight';
		}

		const period = hours >= 12 ? 'PM' : 'AM';
		const displayHours = hours % 12 || 12;
		return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`;
	}
</script>

<div class="rounded-lg bg-gray-50 p-4">
	<h4 class="mb-2 font-semibold">Booking Summary</h4>
	<div class="space-y-1 text-sm">
		{#if services.length > 0}
			<div>
				<span class="font-medium">Services:</span>
				<div class="mt-1 ml-4 space-y-1">
					{#each services as service (service.id)}
						<div class="flex justify-between">
							<span>{service.name}</span>
							<span>£{service.price}</span>
						</div>
					{/each}
				</div>
			</div>
		{/if}

		{#if date}
			<div class="flex justify-between">
				<span>Date:</span>
				<span class="font-medium">
					{date.toDate(getLocalTimeZone()).toLocaleDateString('en-US', {
						weekday: 'long',
						day: 'numeric',
						month: 'long'
					})}
				</span>
			</div>
		{/if}

		{#if time}
			<div class="flex justify-between">
				<span>Time:</span>
				<span class="font-medium">{formatTime(time)}</span>
			</div>
		{/if}

		{#if services.length > 0}
			<div class="flex justify-between">
				<span>Estimated Duration:</span>
				<span class="font-medium">{formatDuration(totalDuration)}</span>
			</div>
		{/if}

		{#if showCustomer && customer}
			<Separator class="my-2" />
			<div>
				<span class="font-medium">Contact Information:</span>
				<div class="mt-1 ml-4 space-y-1">
					<div>{customer.firstName} {customer.lastName}</div>
					<div>{customer.email}</div>
					<div>{customer.phone}</div>
					{#if customer.specialRequests}
						<div class="mt-2">
							<span class="font-medium">Special Requests:</span>
							<div class="text-gray-600">{customer.specialRequests}</div>
						</div>
					{/if}
				</div>
			</div>
		{/if}

		{#if services.length > 0}
			<Separator class="my-2" />
			<div class="flex justify-between font-semibold">
				<span>Total Cost:</span>
				<span>£{totalPrice}</span>
			</div>
		{/if}
	</div>
</div>
