<script lang="ts">
	import type { CalendarDate } from '@internationalized/date';
	import { Button } from '$lib/components/ui/button';

	let {
		date,
		groupedTimeSlots = [],
		selectedTime = null,
		formattedDate,
		onselect,
		lunchProtectionStatus = new Map()
	}: {
		date: CalendarDate | undefined;
		groupedTimeSlots?: Array<{
			type: 'available' | 'unavailable';
			startTime: string;
			endTime: string;
			isGrouped?: boolean;
		}>;
		selectedTime?: string | null;
		formattedDate?: string;
		onselect?: (time: string) => void;
		lunchProtectionStatus?: Map<
			string,
			{ isBlocked: boolean; showWarning: boolean; warningMessage?: string }
		>;
	} = $props();

	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="no-scrollbar inset-y-0 right-0 flex max-h-40 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-56 md:border-t-0 md:border-l"
>
	{#if groupedTimeSlots.length > 0}
		{#if formattedDate}
			<div class="grid justify-center gap-2">{formattedDate}</div>
		{/if}

		<div class="grid gap-2">
			{#each groupedTimeSlots as slot (slot.type + '-' + slot.startTime + '-' + slot.endTime)}
				{#if slot.type === 'available'}
					{@const protection = lunchProtectionStatus.get(slot.startTime)}
					{#if protection?.isBlocked}
						<!-- Blocked by lunch protection -->
						<Button
							variant="outline"
							class="w-full cursor-not-allowed opacity-50 hover:bg-gray-100"
							disabled
							title={protection.warningMessage || 'Lunch protection'}
						>
							{formatTime(slot.startTime)}
							<span class="text-gray-500">- {formatTime(slot.endTime)}</span>
						</Button>
					{:else}
						<!-- Available slot (possibly with warning for admin) -->
						<Button
							variant="outline"
							onclick={() => {
								if (onselect) {
									onselect(slot.startTime);
								}
							}}
							class={`w-full hover:bg-fuchsia-50 ${
								slot.startTime === selectedTime ? 'bg-fuchsia-100' : ''
							} ${protection?.showWarning ? 'border-amber-400 bg-amber-50' : ''}`}
							title={protection?.warningMessage}
						>
							{#if protection?.showWarning}
								<span class="mr-1 text-amber-500">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										class="h-4 w-4"
										viewBox="0 0 20 20"
										fill="currentColor"
									>
										<path
											fill-rule="evenodd"
											d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
											clip-rule="evenodd"
										/>
									</svg>
								</span>
							{/if}
							{formatTime(slot.startTime)}
							<span class="text-gray-500">- {formatTime(slot.endTime)}</span>
						</Button>
					{/if}
				{:else}
					<!-- Unavailable slot (already booked) -->
					<Button
						variant="outline"
						class="w-full cursor-not-allowed opacity-50 hover:bg-gray-100"
						disabled
					>
						{formatTime(slot.startTime)}
						<span class="text-gray-500">- {formatTime(slot.endTime)}</span>
					</Button>
				{/if}
			{/each}
		</div>
	{:else if !date}
		<p class="text-center text-sm text-gray-500">Select a date first</p>
	{:else}
		<p class="text-center text-sm text-gray-500">No available slots</p>
	{/if}
</div>
