<script lang="ts">
	/** Carte compacte de résultat : titre, badges, date clé, résumé deux lignes. */
	import BadgeGuadeloupe from './BadgeGuadeloupe.svelte';
	import BadgeStatut from './BadgeStatut.svelte';
	import { LIBELLES_THEME, LIBELLES_TYPE } from '$lib/libelles';
	import { dateLongue, extrait } from '$lib/format';
	import type { Texte } from '$lib/types';

	const { texte }: { texte: Texte } = $props();

	const dateCle = $derived(
		texte.date_promulgation ?? texte.date_adoption ?? texte.statut_date ?? null
	);
	const libelleDate = $derived(
		texte.date_promulgation
			? `Promulguée le ${dateLongue(texte.date_promulgation)}`
			: texte.date_adoption
				? `Adoptée le ${dateLongue(texte.date_adoption)}`
				: dateCle
					? dateLongue(dateCle)
					: ''
	);
</script>

<article class="carte resultat">
	<h3>
		<a href="/textes/{texte.id}">
			{#if texte.numero_officiel}<span class="numero">n° {texte.numero_officiel}</span>{/if}
			{texte.titre_court}
		</a>
	</h3>

	<div class="ligne badges">
		<BadgeStatut statut={texte.statut} devantCc={texte.devant_cc === 1} compact />
		<BadgeGuadeloupe
			pertinence={texte.guadeloupe_pertinence}
			note={texte.guadeloupe_note}
			aVerifier={texte.a_verifier === 1}
		/>
		<span class="type">{LIBELLES_TYPE[texte.type] ?? texte.type}</span>
	</div>

	{#if libelleDate}<p class="date">{libelleDate}</p>{/if}

	{#if texte.extrait}
		<p class="resume">{@html texte.extrait}</p>
	{:else if texte.resume}
		<p class="resume">{extrait(texte.resume, 200)}</p>
	{:else if texte.points_cles.length}
		<p class="resume">{extrait(texte.points_cles[0], 200)}</p>
	{/if}

	{#if texte.themes.length}
		<div class="ligne themes">
			{#each texte.themes as theme (theme)}
				<span class="tag">{LIBELLES_THEME[theme] ?? theme}</span>
			{/each}
		</div>
	{/if}

	<p class="meta">
		{texte.nb_sources}
		{texte.nb_sources > 1 ? 'sources' : 'source'}
		{#if texte.a_verifier === 1}
			· <span class="verifier">à vérifier</span>
		{/if}
	</p>
</article>

<style>
	.resultat {
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
	}
	h3 {
		margin: 0;
		font-size: 1rem;
		line-height: 1.3;
		text-transform: none;
	}
	h3 a {
		color: var(--blanc-creme);
		text-decoration: none;
	}
	h3 a:hover {
		color: var(--or-oki);
		text-decoration: underline;
	}
	.numero {
		font-family: var(--font-mono);
		font-size: 0.82em;
		color: var(--or-oki);
		margin-right: 0.35em;
	}
	.badges {
		gap: 0.4rem;
	}
	.type {
		font-size: 0.76rem;
		color: var(--muted-fort);
	}
	.date {
		margin: 0;
		font-size: 0.82rem;
		color: var(--muted);
	}
	.resume {
		margin: 0;
		font-size: 0.9rem;
		color: var(--muted);
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.themes {
		gap: 0.3rem;
	}
	.meta {
		margin: 0;
		font-size: 0.75rem;
		color: var(--muted-fort);
	}
	.verifier {
		color: var(--or-oki);
	}
</style>
