<script lang="ts">
	import type { ScheduleSlot } from '$lib/features/schedule/api/schedule';

	let {
		slot,
		onClose
	}: {
		slot: ScheduleSlot;
		onClose: () => void;
	} = $props();

	let dialogRef = $state<HTMLDivElement | null>(null);
	let closeButtonRef = $state<HTMLButtonElement | null>(null);

	let dayLabel = $derived(
		new Date(slot.date + 'T00:00:00').toLocaleDateString('fr-FR', {
			weekday: 'long',
			day: 'numeric',
			month: 'long'
		})
	);

	// Focus the close button on mount for accessibility
	$effect(() => {
		closeButtonRef?.focus();
	});

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape') {
			onClose();
		}
		// Focus trap: keep focus inside the dialog
		if (event.key === 'Tab' && dialogRef) {
			const focusable = dialogRef.querySelectorAll<HTMLElement>(
				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
			);
			if (focusable.length === 0) return;
			const first = focusable[0]!;
			const last = focusable[focusable.length - 1]!;
			if (event.shiftKey && document.activeElement === first) {
				event.preventDefault();
				last.focus();
			} else if (!event.shiftKey && document.activeElement === last) {
				event.preventDefault();
				first.focus();
			}
		}
	}

	function handleOverlayClick(event: MouseEvent) {
		if (event.target === event.currentTarget) {
			onClose();
		}
	}
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="overlay" onclick={handleOverlayClick} role="presentation">
	<div
		bind:this={dialogRef}
		class="details-card"
		role="dialog"
		aria-modal="true"
		aria-label="Détails du cours"
	>
		<button
			bind:this={closeButtonRef}
			class="close-button"
			onclick={onClose}
			aria-label="Fermer">&times;</button
		>

		<h2 class="subject-name" class:has-color={slot.subjectColor} style:--slot-color={slot.subjectColor}>{slot.subjectName}</h2>

		<div class="detail-grid">
			<div class="detail-row">
				<span class="detail-label">Horaire</span>
				<span class="detail-value">{slot.startTime} - {slot.endTime}</span>
			</div>
			<div class="detail-row">
				<span class="detail-label">Date</span>
				<span class="detail-value" style="text-transform: capitalize">{dayLabel}</span>
			</div>
			<div class="detail-row">
				<span class="detail-label">Enseignant</span>
				<span class="detail-value">{slot.teacherName}</span>
			</div>
			{#if slot.room}
				<div class="detail-row">
					<span class="detail-label">Salle</span>
					<span class="detail-value">{slot.room}</span>
				</div>
			{/if}
		</div>

		{#if slot.isModified}
			<div class="modified-notice">
				Ce cours a été modifié par rapport à l'emploi du temps habituel.
			</div>
		{/if}
	</div>
</div>

<style>
	.overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 200;
		padding: 1rem;
	}

	.details-card {
		background: white;
		border-radius: 1rem;
		padding: 1.5rem;
		max-width: 24rem;
		width: 100%;
		position: relative;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
	}

	.close-button {
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		background: none;
		border: none;
		font-size: 1.5rem;
		color: #9ca3af;
		cursor: pointer;
		line-height: 1;
		padding: 0.25rem;
	}

	.close-button:hover {
		color: #374151;
	}

	.subject-name {
		font-size: 1.25rem;
		font-weight: 700;
		color: #1f2937;
		margin: 0 0 1.25rem 0;
		padding-right: 2rem;
	}

	.subject-name.has-color {
		border-left: 4px solid var(--slot-color);
		padding-left: 0.75rem;
	}

	.detail-grid {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.detail-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detail-label {
		font-size: 0.875rem;
		color: #6b7280;
		font-weight: 500;
	}

	.detail-value {
		font-size: 0.875rem;
		color: #1f2937;
		font-weight: 600;
	}

	.modified-notice {
		margin-top: 1rem;
		padding: 0.75rem;
		background: #fefce8;
		border: 1px solid #fcd34d;
		border-radius: 0.5rem;
		font-size: 0.75rem;
		color: #92400e;
	}
</style>
