<script lang="ts">
	import { Separator } from '$lib/components/ui/separator';
	import type { LunchProtectionResult } from '$lib/lunchProtection';

	interface Props {
		selectedDate: string;
		selectedTime: string;
		endTime: string;
		duration: number;
		protection: LunchProtectionResult | undefined;
		outOfHours?: boolean;
	}

	const {
		selectedDate,
		selectedTime,
		endTime,
		duration,
		protection,
		outOfHours = false
	}: Props = $props();
</script>

<Separator class="my-4" />
{#if protection?.showWarning || protection?.isBlocked}
	<div
		class="rounded-lg border {protection?.isBlocked
			? 'border-red-200 bg-red-50'
			: 'border-amber-200 bg-amber-50'} p-4"
	>
		<div class="flex items-start gap-2">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="mt-0.5 h-4 w-4 shrink-0 {protection?.isBlocked ? 'text-red-600' : 'text-amber-600'}"
				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>
			<div>
				<div
					class="text-sm font-medium {protection?.isBlocked ? 'text-red-800' : 'text-amber-800'}"
				>
					{protection?.isBlocked ? 'Lunch break conflict' : 'Lunch break warning'}
				</div>
				<div class="mt-1 text-sm {protection?.isBlocked ? 'text-red-700' : 'text-amber-700'}">
					{protection?.warningMessage}
				</div>
			</div>
		</div>
	</div>
{/if}
{#if outOfHours}
	<div
		class="rounded-lg border border-red-200 bg-red-50 p-4 {protection?.showWarning ||
		protection?.isBlocked
			? 'mt-3'
			: ''}"
	>
		<div class="flex items-start gap-2">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="mt-0.5 h-4 w-4 shrink-0 text-red-600"
				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>
			<div>
				<div class="text-sm font-medium text-red-800">Out-of-hours booking</div>
				<div class="mt-1 text-sm text-red-700">
					This time slot is outside regular business hours (06:00-22:00).
				</div>
			</div>
		</div>
	</div>
{/if}
<div
	class="rounded-lg border border-emerald-200 bg-emerald-50 p-4 {protection?.showWarning ||
	protection?.isBlocked ||
	outOfHours
		? 'mt-3'
		: ''}"
>
	<div class="text-sm font-medium text-emerald-800">
		{#if protection?.isBlocked}Booking conflict{:else if protection?.showWarning}Lunch warning{:else}Time
			selected{/if}
	</div>
	<div class="mt-1 text-sm text-emerald-700">
		{selectedDate} at {selectedTime}
		—
		{endTime}
		({duration} min)
	</div>
</div>
