<script lang="ts">
	import { fade, scale } from 'svelte/transition';
	import type { AddressSchedule } from '$lib/graphql/queries/account';
	import { formatDate } from '$lib/utils/date';

	interface Props {
		open: boolean;
		title: string;
		schedules: AddressSchedule[];
		onClose: () => void;
	}

	let { open, title, schedules, onClose }: Props = $props();

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape') {
			onClose();
		}
	}

	function formatScheduleDays(schedule: AddressSchedule): string {
		const days: string[] = [];
		if (schedule.monday) days.push('Mon');
		if (schedule.tuesday) days.push('Tue');
		if (schedule.wednesday) days.push('Wed');
		if (schedule.thursday) days.push('Thu');
		if (schedule.friday) days.push('Fri');
		if (schedule.saturday) days.push('Sat');
		if (schedule.sunday) days.push('Sun');
		if (schedule.weekendService) days.push('Weekends');
		return days.join(', ') || 'No days selected';
	}

	function formatDateRange(schedule: AddressSchedule): string {
		const start = schedule.startDate ? formatDate(schedule.startDate) : 'No start date';
		const end = schedule.endDate ? formatDate(schedule.endDate) : 'Ongoing';
		return `${start} – ${end}`;
	}

	// Lock body scroll when open
	$effect(() => {
		if (open) {
			document.body.style.overflow = 'hidden';
			return () => {
				document.body.style.overflow = '';
			};
		}
	});
</script>

<svelte:window onkeydown={handleKeydown} />

{#if open}
	<!-- Backdrop -->
	<button
		type="button"
		class="fixed inset-0 z-50 cursor-default bg-overlay backdrop-blur-sm"
		onclick={onClose}
		aria-label="Close modal"
		transition:fade={{ duration: 200 }}
	></button>

	<!-- Modal -->
	<div
		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
		role="dialog"
		aria-modal="true"
		aria-labelledby="schedule-list-modal-title"
		tabindex="-1"
		transition:fade={{ duration: 200 }}
	>
		<div
			class="pointer-events-auto mx-4 w-full max-w-lg rounded-xl border border-primary-500/20 bg-theme-card shadow-2xl"
			transition:scale={{ start: 0.95, duration: 200 }}
		>
			<!-- Header -->
			<div
				class="border-b border-primary-500/20 bg-linear-to-r from-primary-500/10 to-transparent px-5 py-4"
			>
				<h2 id="schedule-list-modal-title" class="text-lg font-semibold text-theme">
					{title}
				</h2>
			</div>

			<!-- Body -->
			<div class="max-h-[60vh] overflow-y-auto px-5 py-5">
				{#if schedules.length > 0}
					<div class="space-y-4">
						{#each schedules as schedule (schedule.id)}
							<div class="bg-theme-secondary/30 rounded-lg border border-theme p-4">
								<h3 class="mb-2 font-medium text-theme">{schedule.name || 'Service Schedule'}</h3>
								<div class="space-y-2">
									<div>
										<p class="text-xs text-theme-muted">Days</p>
										<p class="text-sm text-theme">{formatScheduleDays(schedule)}</p>
									</div>
									<div>
										<p class="text-xs text-theme-muted">Date Range</p>
										<p class="text-sm text-theme-secondary">{formatDateRange(schedule)}</p>
									</div>
									{#if schedule.scheduleException}
										<div>
											<p class="text-xs text-theme-muted">Exceptions</p>
											<p class="text-sm text-theme-secondary">{schedule.scheduleException}</p>
										</div>
									{/if}
								</div>
							</div>
						{/each}
					</div>
				{:else}
					<p class="py-4 text-center text-theme-muted">No schedules to display.</p>
				{/if}
			</div>

			<!-- Footer -->
			<div class="flex justify-end border-t border-theme px-5 py-4">
				<button type="button" class="btn-primary" onclick={onClose}> Close </button>
			</div>
		</div>
	</div>
{/if}
