<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import { formatTime, type TimeSlotGroup } from '$lib/utils/timeSlots';
	import type { LunchProtectionResult } from '$lib/lunchProtection';

	interface Props {
		slots: TimeSlotGroup[];
		selectedTime: string | null;
		duration: number;
		protection: Map<string, LunchProtectionResult>;
		onSelect: (time: string) => void;
	}

	const { slots, selectedTime, duration, protection, onSelect }: Props = $props();
</script>

{#if slots.length > 0}
	<div class="grid gap-2">
		{#each slots as slot (slot.type + '-' + slot.startTime + '-' + slot.endTime)}
			{#if slot.type === 'available'}
				{@const p = protection.get(slot.startTime)}
				{#if p?.isBlocked}
					<Button
						variant="outline"
						class="w-full cursor-not-allowed opacity-50 hover:bg-gray-100"
						disabled
						title={p.warningMessage || 'Lunch protection'}
					>
						{formatTime(slot.startTime)}
						<span class="ml-2 text-gray-500">- {formatTime(slot.endTime)}</span>
						<span class="ml-auto text-xs text-gray-400">{duration} min</span>
					</Button>
				{:else}
					<Button
						variant="outline"
						onclick={() => onSelect(slot.startTime)}
						class={`w-full hover:bg-fuchsia-50 ${
							slot.outOfHours
								? slot.startTime === selectedTime
									? 'border-red-500 bg-red-100'
									: 'border-red-300 bg-red-50'
								: slot.startTime === selectedTime
									? p?.showWarning
										? 'border-amber-500 bg-fuchsia-200'
										: 'bg-fuchsia-100'
									: p?.showWarning
										? 'border-amber-400 bg-amber-100'
										: ''
						}`}
						title={slot.outOfHours ? 'Out-of-hours booking' : p?.warningMessage}
					>
						{#if slot.outOfHours}
							<span class="mr-1 text-red-500" title="Out-of-hours booking">
								<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>
						{:else if p?.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="ml-2 text-gray-500">- {formatTime(slot.endTime)}</span>
						<span class="ml-auto text-xs text-gray-400">{duration} min</span>
					</Button>
				{/if}
			{:else}
				<Button
					variant="outline"
					class="w-full cursor-not-allowed opacity-50 hover:bg-gray-100"
					disabled
				>
					{formatTime(slot.startTime)}
					<span class="ml-2 text-gray-500">- {formatTime(slot.endTime)}</span>
				</Button>
			{/if}
		{/each}
	</div>
{:else}
	<p class="py-4 text-center text-sm text-gray-500">No available slots for this date</p>
{/if}
