<script lang="ts">
	import { dateLongue, joursRestants, mois as libelleMois } from '$lib/format';
	import type { PageData } from './$types';

	const { data }: { data: PageData } = $props();
</script>

<svelte:head>
	<title>Calendrier des échéances · Veille législative Gwadloup</title>
	<meta
		name="description"
		content="Décisions attendues du Conseil constitutionnel, entrées en vigueur du 1er septembre 2026, sénatoriales du 27 septembre, projet de loi de finances 2027."
	/>
</svelte:head>

<h1>Calendrier</h1>
<p class="intro">
	Échéances de la fenêtre de veille. Les dates postérieures au
	{dateLongue(data.dateArrete)} sont <strong>prévisionnelles</strong> : elles indiquent ce qui est
	attendu, jamais ce qui est acquis.
</p>

{#if data.decisions.length}
	<section class="section">
		<h2>Décisions attendues du Conseil constitutionnel</h2>
		<ul class="decisions">
			{#each data.decisions as decision (decision.numero_affaire)}
				<li class="carte">
					<span class="affaire">{decision.numero_affaire}</span>
					<div>
						{#if decision.texte_id}
							<a href="/textes/{decision.texte_id}">{decision.libelle}</a>
						{:else}
							<span>{decision.libelle}</span>
						{/if}
						{#if decision.date_echeance}
							<p class="quand">Attendue vers le {dateLongue(decision.date_echeance)}</p>
						{/if}
					</div>
				</li>
			{/each}
		</ul>
	</section>
{/if}

{#each data.mois as bloc (bloc.cle)}
	<section class="section mois">
		<h2>{libelleMois(bloc.cle + '-01')}</h2>
		<ol class="liste">
			{#each bloc.echeances as echeance (echeance.code)}
				{@const jours = joursRestants(echeance.date_echeance, data.dateArrete)}
				<li
					class="carte entree"
					class:gwada={echeance.concerne_guadeloupe === 1}
					class:hors-gwada={echeance.concerne_guadeloupe === 0}
					class:passe={jours < 0}
				>
					<div class="date">
						<time datetime={echeance.date_echeance}>{dateLongue(echeance.date_echeance)}</time>
						{#if echeance.previsionnel === 1}
							<span class="prevu">prévisionnel</span>
						{/if}
					</div>
					<div class="contenu">
						<h3>
							{#if echeance.texte_id}
								<a href="/textes/{echeance.texte_id}">{echeance.libelle}</a>
							{:else}
								{echeance.libelle}
							{/if}
						</h3>
						{#if echeance.description}<p>{echeance.description}</p>{/if}
						{#if echeance.concerne_guadeloupe === 0}
							<p class="mention-gwada negative">Ne concerne pas la Guadeloupe</p>
						{:else if echeance.concerne_guadeloupe === 1}
							<p class="mention-gwada positive">Concerne la Guadeloupe</p>
						{/if}
						{#if echeance.note_guadeloupe}<p class="note">{echeance.note_guadeloupe}</p>{/if}
						{#if echeance.source_extrait}
							<blockquote>{echeance.source_extrait}</blockquote>
						{/if}
						{#if echeance.source_url}
							<a class="source" href={echeance.source_url} rel="noopener nofollow" target="_blank">
								Source
							</a>
						{/if}
					</div>
				</li>
			{/each}
		</ol>
	</section>
{/each}

<style>
	.intro {
		max-width: 70ch;
		color: var(--muted);
	}
	.mois h2,
	.section h2 {
		font-size: 0.85rem;
		letter-spacing: 0.05em;
		color: var(--or-oki);
		border-bottom: 1px solid var(--line);
		padding-bottom: 0.35rem;
	}
	.liste,
	.decisions {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}
	.decisions li {
		display: flex;
		gap: 0.8rem;
		align-items: baseline;
		border-left-color: var(--orange-flamme);
	}
	.affaire {
		font-family: var(--font-mono);
		font-size: 0.82rem;
		color: var(--orange-flamme);
		flex: none;
	}
	.quand {
		font-size: 0.8rem;
		color: var(--muted-fort);
		margin: 0.2rem 0 0;
	}

	.entree {
		display: grid;
		grid-template-columns: minmax(150px, auto) 1fr;
		gap: var(--space-2);
		border-left-color: var(--muted-fort);
	}
	.entree.gwada {
		border-left-color: var(--turquoise-caraibes);
	}
	.entree.hors-gwada {
		border-left-color: var(--rouge-oki);
	}
	.entree.passe {
		opacity: 0.65;
	}
	.date {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
	}
	time {
		color: var(--or-oki);
		font-weight: 600;
		font-size: 0.85rem;
	}
	.prevu {
		font-size: 0.68rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--muted-fort);
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
		padding: 0 0.35em;
		align-self: flex-start;
	}
	.contenu h3 {
		font-size: 0.95rem;
		text-transform: none;
		margin-bottom: 0.3rem;
	}
	.contenu p {
		font-size: 0.85rem;
		color: var(--muted);
		margin: 0 0 0.35rem;
	}
	.mention-gwada {
		font-weight: 600;
		font-size: 0.82rem !important;
	}
	.mention-gwada.negative {
		color: var(--rouge-oki) !important;
	}
	.mention-gwada.positive {
		color: var(--turquoise-caraibes) !important;
	}
	.note {
		color: var(--turquoise-caraibes) !important;
	}
	blockquote {
		margin: 0.4rem 0;
		padding-left: 0.8rem;
		border-left: 2px solid var(--line);
		font-size: 0.82rem;
		color: var(--muted-fort);
		font-style: italic;
	}
	.source {
		font-size: 0.78rem;
	}
	@media (max-width: 620px) {
		.entree {
			grid-template-columns: 1fr;
			gap: 0.4rem;
		}
	}
</style>
