<script lang="ts">
	interface RuleWarning {
		ruleType: string;
		message: string;
		params: Record<string, unknown>;
	}

	let {
		warnings,
		suggestedDates = [],
		onSelectDate,
		onClose,
		onRequestException,
	}: {
		warnings: RuleWarning[];
		suggestedDates: string[];
		onSelectDate: (date: string) => void;
		onClose: () => void;
		onRequestException?: () => void;
	} = $props();

	let modalElement = $state<HTMLDivElement | null>(null);

	$effect(() => {
		if (modalElement) {
			modalElement.focus();
		}
	});

	function formatDate(dateStr: string): string {
		const date = new Date(dateStr + 'T00:00:00');
		return date.toLocaleDateString('fr-FR', {
			weekday: 'long',
			day: 'numeric',
			month: 'long',
			year: 'numeric',
		});
	}
</script>

<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-overlay" role="presentation">
	<div
		bind:this={modalElement}
		class="modal modal-confirm"
		role="alertdialog"
		aria-modal="true"
		aria-labelledby="rule-blocked-title"
		aria-describedby="rule-blocked-description"
		tabindex="-1"
		onclick={(e) => e.stopPropagation()}
		onkeydown={(e) => {
			if (e.key === 'Escape') onClose();
		}}
	>
		<header class="modal-header modal-header-blocked">
			<h2 id="rule-blocked-title">Impossible de créer ce devoir</h2>
		</header>

		<div class="modal-body">
			<p id="rule-blocked-description">
				Les règles de votre établissement interdisent la création de ce devoir :
			</p>
			<ul class="rule-blocked-list">
				{#each warnings as warning}
					<li class="rule-blocked-item">
						<span class="rule-blocked-icon">&#128683;</span>
						<span>{warning.message}</span>
					</li>
				{/each}
			</ul>

			{#if suggestedDates.length > 0}
				<div class="suggested-dates" role="group" aria-label="Dates conformes suggérées">
					<p class="suggested-dates-label">Dates conformes suggérées :</p>
					<div class="suggested-dates-list">
						{#each suggestedDates as date}
							<button
								type="button"
								class="suggested-date-btn"
								aria-label="Sélectionner {formatDate(date)}"
								onclick={() => onSelectDate(date)}
							>
								{formatDate(date)}
							</button>
						{/each}
					</div>
				</div>
			{/if}

			{#if onRequestException}
				<div class="rule-blocked-exception">
					<button type="button" class="btn-exception" onclick={onRequestException}>
						Demander une exception
					</button>
				</div>
			{/if}
		</div>

		<div class="modal-actions">
			<button type="button" class="btn-secondary" onclick={onClose}>
				Modifier la date
			</button>
		</div>
	</div>
</div>

<style>
	.modal-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
	}

	.modal {
		background: white;
		border-radius: 0.75rem;
		max-width: 500px;
		width: 95%;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	}

	.modal-header-blocked {
		background: #dc2626;
		color: white;
		padding: 1rem 1.5rem;
		border-radius: 0.75rem 0.75rem 0 0;
	}

	.modal-header-blocked h2 {
		margin: 0;
		font-size: 1.1rem;
	}

	.modal-body {
		padding: 1.5rem;
	}

	.rule-blocked-list {
		list-style: none;
		padding: 0;
		margin: 1rem 0;
	}

	.rule-blocked-item {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
		padding: 0.5rem;
		background: #fef2f2;
		border-radius: 0.5rem;
		margin-bottom: 0.5rem;
		border: 1px solid #fecaca;
	}

	.rule-blocked-icon {
		flex-shrink: 0;
	}

	.suggested-dates {
		margin: 1rem 0;
		padding: 1rem;
		background: #f0fdf4;
		border-radius: 0.5rem;
		border: 1px solid #bbf7d0;
	}

	.suggested-dates-label {
		font-weight: 600;
		margin: 0 0 0.5rem;
		color: #166534;
	}

	.suggested-dates-list {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.suggested-date-btn {
		display: block;
		width: 100%;
		padding: 0.5rem 1rem;
		background: white;
		border: 1px solid #86efac;
		border-radius: 0.375rem;
		cursor: pointer;
		text-align: left;
		font-size: 0.9rem;
		transition:
			background-color 0.15s,
			border-color 0.15s;
	}

	.suggested-date-btn:hover {
		background: #dcfce7;
		border-color: #22c55e;
	}

	.rule-blocked-exception {
		margin: 1rem 0 0;
		text-align: center;
	}

	.btn-exception {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		background: #fffbeb;
		color: #92400e;
		border: 1px solid #fde68a;
		border-radius: 0.375rem;
		font-weight: 500;
		font-size: 0.875rem;
		cursor: pointer;
		transition: all 0.2s;
	}

	.btn-exception:hover {
		background: #fef3c7;
		border-color: #f59e0b;
	}

	.btn-secondary {
		padding: 0.625rem 1.25rem;
		background: white;
		color: #374151;
		border: 1px solid #d1d5db;
		border-radius: 0.375rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s;
	}

	.btn-secondary:hover {
		background: #f3f4f6;
	}

	.modal-actions {
		display: flex;
		justify-content: flex-end;
		gap: 0.75rem;
		padding: 1rem 1.5rem;
		border-top: 1px solid #e5e7eb;
	}
</style>
