<script lang="ts">
	import BadgeGuadeloupe from '$composants/BadgeGuadeloupe.svelte';
	import BadgeStatut from '$composants/BadgeStatut.svelte';
	import { dateLongue } from '$lib/format';
	import {
		LIBELLES_CONFIANCE,
		LIBELLES_ETAPE,
		LIBELLES_IMPACT,
		LIBELLES_RESULTAT_CC,
		LIBELLES_THEME,
		LIBELLES_TYPE
	} from '$lib/libelles';
	import type { PageData } from './$types';

	const { data }: { data: PageData } = $props();
	const t = $derived(data.texte);

	const PUBLICS = ['individus', 'associations', 'entreprises'] as const;

	let copie = $state(false);

	function citation(): string {
		const nom = t.numero_officiel ? `Loi n° ${t.numero_officiel}` : t.titre_court;
		const date = t.date_promulgation
			? `, ${dateLongue(t.date_promulgation)}`
			: t.date_adoption
				? `, adoptée le ${dateLongue(t.date_adoption)}`
				: '';
		const url =
			typeof window === 'undefined' ? `/textes/${t.id}` : window.location.href;
		return `${nom} — ${t.titre_court}${date}. Veille législative Gwadloup, consulté le ${dateLongue(
			new Date().toISOString()
		)}. ${url}`;
	}

	async function copierCitation() {
		try {
			await navigator.clipboard.writeText(citation());
			copie = true;
			setTimeout(() => (copie = false), 2500);
		} catch {
			/* presse-papiers refusé : la citation reste sélectionnable à la main */
		}
	}
</script>

<svelte:head>
	<title>{t.titre_court} · Veille législative Gwadloup</title>
	<meta name="description" content={(t.resume ?? t.titre_court).slice(0, 180)} />
</svelte:head>

<nav class="fil" aria-label="Fil d'Ariane">
	<a href="/">Tableau de bord</a> ›
	<a href="/recherche">Recherche</a> ›
	<span aria-current="page">{t.numero_officiel ? `Loi n° ${t.numero_officiel}` : t.titre_court}</span>
</nav>

<article class="fiche">
	<header>
		{#if t.numero_officiel}<p class="numero">Loi n° {t.numero_officiel}</p>{/if}
		<h1>{t.titre_court}</h1>
		{#if t.titre_officiel && t.titre_officiel !== t.titre_court}
			<p class="titre-officiel">{t.titre_officiel}</p>
		{/if}

		<div class="ligne badges">
			<BadgeStatut statut={t.statut} devantCc={t.devant_cc === 1} />
			<BadgeGuadeloupe
				pertinence={t.guadeloupe_pertinence}
				note={t.guadeloupe_note}
				aVerifier={t.a_verifier === 1}
			/>
			<span class="tag">{LIBELLES_TYPE[t.type] ?? t.type}</span>
			<span class="tag confiance" data-niveau={t.confiance}>
				Confiance : {LIBELLES_CONFIANCE[t.confiance] ?? t.confiance}
			</span>
		</div>

		{#if t.a_verifier === 1 && t.motif_verification}
			<aside class="avertissement" role="note">
				<strong>À vérifier —</strong>
				{t.motif_verification}
			</aside>
		{/if}
	</header>

	<div class="corps">
		<div class="principal">
			{#if t.resume}
				<section>
					<h2>Résumé</h2>
					<p class="resume">{t.resume}</p>
				</section>
			{/if}

			{#if t.points_cles.length}
				<section>
					<h2>Points clés</h2>
					<ul class="points">
						{#each t.points_cles as point (point)}
							<li>{point}</li>
						{/each}
					</ul>
				</section>
			{/if}

			{#if Object.keys(t.impacts).length}
				<section>
					<h2>Effets sur les libertés</h2>
					<div class="impacts">
						{#each PUBLICS as pub (pub)}
							{@const impact = t.impacts[pub]}
							{#if impact}
								<div class="impact" data-sens={impact.sens}>
									<h3>{pub}</h3>
									<p class="sens">{LIBELLES_IMPACT[`${pub}:${impact.sens}`] ?? impact.sens}</p>
									{#if impact.note}<p class="note">{impact.note}</p>{/if}
								</div>
							{/if}
						{/each}
					</div>
				</section>
			{/if}

			{#if t.evenements.length}
				<section>
					<h2>Parcours du texte</h2>
					<ol class="timeline">
						{#each t.evenements as evenement (evenement.date_evenement + evenement.type_etape)}
							<li class:previsionnel={evenement.previsionnel === 1}>
								<time datetime={evenement.date_evenement}>
									{dateLongue(evenement.date_evenement)}
								</time>
								<div>
									<strong>{LIBELLES_ETAPE[evenement.type_etape] ?? evenement.type_etape}</strong>
									{#if evenement.previsionnel === 1}
										<span class="prevu">prévisionnel</span>
									{/if}
									<p>{evenement.description}</p>
								</div>
							</li>
						{/each}
					</ol>
				</section>
			{/if}

			{#if t.decisions_cc.length}
				<section>
					<h2>Conseil constitutionnel</h2>
					{#each t.decisions_cc as decision (decision.numero_affaire)}
						<div class="carte decision">
							<h3>Affaire n° {decision.numero_affaire}</h3>
							<dl>
								{#if decision.date_saisine}
									<dt>Saisine</dt>
									<dd>{dateLongue(decision.date_saisine)}</dd>
								{/if}
								{#if decision.date_decision}
									<dt>Décision</dt>
									<dd>{dateLongue(decision.date_decision)}</dd>
								{:else if decision.date_decision_attendue}
									<dt>Décision attendue</dt>
									<dd>{dateLongue(decision.date_decision_attendue)}</dd>
								{/if}
								{#if decision.resultat}
									<dt>Résultat</dt>
									<dd>{LIBELLES_RESULTAT_CC[decision.resultat] ?? decision.resultat}</dd>
								{/if}
								{#if decision.saisissants}
									<dt>Saisissants</dt>
									<dd>{decision.saisissants}</dd>
								{/if}
							</dl>
							{#if decision.resume}<p>{decision.resume}</p>{/if}
						</div>
					{/each}
				</section>
			{/if}

			<section>
				<h2>Sources ({t.sources.length})</h2>
				<p class="avant-sources">
					Chaque source est citée telle qu'elle a été consultée. Les sources primaires
					(Journal officiel, assemblées, Conseil constitutionnel, Conseil d'État) sont
					marquées T1, la presse et les analyses T2.
				</p>
				<ol class="sources">
					{#each t.sources as source (source.url + (source.marqueur ?? ''))}
						<li class="carte source" data-tier={source.tier}>
							<div class="ligne entete-source">
								<span class="tier">{source.tier}</span>
								{#if source.editeur}<span class="editeur">{source.editeur}</span>{/if}
								{#if source.date_publication}
									<time datetime={source.date_publication}>
										{dateLongue(source.date_publication)}
									</time>
								{/if}
							</div>
							{#if source.titre}<p class="titre-source">{source.titre}</p>{/if}
							{#if source.extrait_verbatim}
								<blockquote>{source.extrait_verbatim}</blockquote>
							{/if}
							{#if source.contexte}<p class="contexte">{source.contexte}</p>{/if}
							<a class="url" href={source.url} rel="noopener nofollow" target="_blank">
								{source.url}
							</a>
						</li>
					{/each}
				</ol>
			</section>
		</div>

		<aside class="lateral">
			<div class="carte encart">
				<h2>Repères</h2>
				<dl>
					{#if t.date_depot}
						<dt>Dépôt</dt>
						<dd>{dateLongue(t.date_depot)}</dd>
					{/if}
					{#if t.date_adoption}
						<dt>Adoption</dt>
						<dd>{dateLongue(t.date_adoption)}</dd>
					{/if}
					{#if t.date_promulgation}
						<dt>Promulgation</dt>
						<dd>{dateLongue(t.date_promulgation)}</dd>
					{/if}
					{#if t.date_entree_vigueur}
						<dt>Entrée en vigueur</dt>
						<dd>{dateLongue(t.date_entree_vigueur)}</dd>
					{/if}
					{#if t.prochaine_echeance_label}
						<dt>Prochaine étape</dt>
						<dd>{t.prochaine_echeance_label}</dd>
					{/if}
				</dl>
			</div>

			{#if t.guadeloupe_note}
				<div class="carte encart gwada">
					<h2>Guadeloupe</h2>
					<p>{t.guadeloupe_note}</p>
				</div>
			{/if}

			{#if t.themes.length}
				<div class="carte encart">
					<h2>Thèmes</h2>
					<div class="ligne">
						{#each t.themes as theme (theme)}
							<a class="tag" href="/recherche?theme={theme}">
								{LIBELLES_THEME[theme] ?? theme}
							</a>
						{/each}
					</div>
				</div>
			{/if}

			<div class="carte encart">
				<h2>Citer cette fiche</h2>
				<button type="button" class="bouton" onclick={copierCitation}>
					<span>{copie ? 'Copié' : 'Copier la citation'}</span>
				</button>
				{#if t.source_seed}
					<p class="provenance">Origine : <code>{t.source_seed}</code></p>
				{/if}
				{#if t.derniere_verif}
					<p class="provenance">Dernière vérification : {t.derniere_verif}</p>
				{/if}
			</div>
		</aside>
	</div>
</article>

<style>
	.fil {
		font-size: 0.78rem;
		color: var(--muted-fort);
		margin-bottom: var(--space-2);
	}
	.fil a {
		color: var(--muted);
	}

	.numero {
		font-family: var(--font-mono);
		color: var(--or-oki);
		margin: 0 0 0.2rem;
		font-size: 0.9rem;
	}
	.titre-officiel {
		color: var(--muted);
		font-size: 0.92rem;
		max-width: 72ch;
	}
	.badges {
		margin-bottom: var(--space-2);
	}
	.confiance[data-niveau='low'] {
		border-color: color-mix(in srgb, var(--rouge-oki) 55%, transparent);
		background: color-mix(in srgb, var(--rouge-oki) 10%, transparent);
	}

	.avertissement {
		border: 1px solid color-mix(in srgb, var(--or-oki) 55%, transparent);
		background: color-mix(in srgb, var(--or-oki) 9%, transparent);
		border-radius: var(--radius-md);
		padding: 0.7rem 0.9rem;
		font-size: 0.86rem;
		margin-bottom: var(--space-2);
	}

	.corps {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
		gap: var(--space-3);
		align-items: start;
	}
	@media (max-width: 900px) {
		.corps {
			grid-template-columns: 1fr;
		}
	}

	section {
		margin-bottom: var(--space-4);
	}
	section h2 {
		font-size: 0.85rem;
		letter-spacing: 0.05em;
		color: var(--or-oki);
		border-bottom: 1px solid var(--line);
		padding-bottom: 0.35rem;
		margin-bottom: var(--space-2);
	}

	.resume {
		font-size: 1rem;
		max-width: 70ch;
	}

	.points {
		margin: 0;
		padding-left: 1.1rem;
		display: flex;
		flex-direction: column;
		gap: 0.45rem;
		font-size: 0.92rem;
		max-width: 74ch;
	}
	.points li::marker {
		color: var(--or-oki);
	}

	.impacts {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 0.7rem;
	}
	.impact {
		border: var(--border-card);
		border-left: 4px solid var(--impact-neutre);
		border-radius: var(--radius-md);
		padding: 0.7rem 0.85rem;
		background: var(--card-bg);
	}
	.impact[data-sens='positif'] {
		border-left-color: var(--impact-positif);
	}
	.impact[data-sens='negatif'] {
		border-left-color: var(--impact-negatif);
	}
	.impact[data-sens='mixte'] {
		border-left-color: var(--impact-mixte);
	}
	.impact h3 {
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--muted-fort);
		margin-bottom: 0.2rem;
	}
	.impact .sens {
		font-weight: 600;
		font-size: 0.88rem;
		margin-bottom: 0.3rem;
	}
	.impact .note {
		font-size: 0.82rem;
		color: var(--muted);
		margin: 0;
	}

	.timeline {
		list-style: none;
		margin: 0;
		padding: 0 0 0 1rem;
		border-left: 2px solid var(--line);
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}
	.timeline li {
		position: relative;
		display: grid;
		grid-template-columns: minmax(120px, auto) 1fr;
		gap: 0.8rem;
		font-size: 0.88rem;
	}
	.timeline li::before {
		content: '';
		position: absolute;
		left: -1.35rem;
		top: 0.4rem;
		width: 8px;
		height: 8px;
		background: var(--or-oki);
		border-radius: 1px;
	}
	.timeline li.previsionnel::before {
		background: transparent;
		border: 2px solid var(--or-oki);
	}
	.timeline time {
		color: var(--or-oki);
		font-weight: 600;
		font-size: 0.82rem;
	}
	.timeline p {
		margin: 0.15rem 0 0;
		color: var(--muted);
		font-size: 0.85rem;
	}
	.prevu {
		font-size: 0.7rem;
		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;
		margin-left: 0.35em;
	}

	.decision {
		border-left-color: var(--orange-flamme);
		margin-bottom: 0.6rem;
	}
	.decision h3 {
		font-family: var(--font-mono);
		font-size: 0.9rem;
		text-transform: none;
	}

	dl {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.25rem 0.8rem;
		margin: 0 0 0.5rem;
		font-size: 0.85rem;
	}
	dt {
		color: var(--muted-fort);
	}
	dd {
		margin: 0;
	}

	.avant-sources {
		font-size: 0.82rem;
		color: var(--muted-fort);
		max-width: 68ch;
	}
	.sources {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}
	.source {
		border-left-color: var(--muted-fort);
		font-size: 0.86rem;
	}
	.source[data-tier='T1'] {
		border-left-color: var(--vert-oki);
	}
	.entete-source {
		gap: 0.5rem;
		font-size: 0.76rem;
		color: var(--muted-fort);
	}
	.tier {
		font-family: var(--font-mono);
		font-weight: 700;
		color: var(--vert-oki);
	}
	.source[data-tier='T2'] .tier {
		color: var(--muted-fort);
	}
	.editeur {
		font-weight: 600;
		color: var(--blanc-creme);
	}
	.titre-source {
		margin: 0.3rem 0;
	}
	blockquote {
		margin: 0.4rem 0;
		padding-left: 0.8rem;
		border-left: 2px solid var(--or-oki);
		color: var(--muted);
		font-style: italic;
	}
	.contexte {
		font-size: 0.82rem;
		color: var(--muted-fort);
		margin: 0.3rem 0;
	}
	.url {
		font-size: 0.75rem;
		word-break: break-all;
		font-family: var(--font-mono);
	}

	.lateral {
		display: flex;
		flex-direction: column;
		gap: 0.7rem;
		position: sticky;
		top: 5.5rem;
	}
	.encart h2 {
		font-size: 0.75rem;
		border: 0;
		padding: 0;
		margin-bottom: 0.5rem;
	}
	.encart.gwada {
		border-left-color: var(--turquoise-caraibes);
	}
	.encart p {
		font-size: 0.85rem;
		color: var(--muted);
		margin: 0;
	}
	.provenance {
		font-size: 0.74rem !important;
		color: var(--muted-fort) !important;
		margin-top: 0.5rem !important;
	}
	code {
		font-family: var(--font-mono);
		font-size: 0.9em;
		word-break: break-all;
	}

	@media (max-width: 900px) {
		.lateral {
			position: static;
		}
	}
	@media (max-width: 560px) {
		.timeline li {
			grid-template-columns: 1fr;
			gap: 0.15rem;
		}
	}
</style>
