<script lang="ts">
	/**
	 * Panneau de filtres à facettes.
	 *
	 * Chaque facette est un lien : la page fonctionne sans JavaScript, et l'état
	 * des filtres vit dans l'URL, donc se partage et se recharge à l'identique.
	 * Les compteurs sont recalculés sur le résultat filtré par les *autres*
	 * facettes — cocher un thème doit recompter les statuts encore disponibles.
	 */
	import type { Facette, Filtres, Resultats } from '$lib/types';

	interface Props {
		facettes: Resultats['facettes'];
		filtres: Filtres;
		lien: (champ: keyof Filtres, valeur: string) => string;
	}

	const { facettes, filtres, lien }: Props = $props();

	const GROUPES: { champ: keyof Filtres; titre: string; cle: keyof Resultats['facettes'] }[] = [
		{ champ: 'statut', titre: 'Statut', cle: 'statut' },
		{ champ: 'guadeloupe', titre: 'Pertinence Guadeloupe', cle: 'guadeloupe' },
		{ champ: 'impact', titre: 'Impact sur les libertés', cle: 'impact' },
		{ champ: 'theme', titre: 'Thème', cle: 'theme' },
		{ champ: 'type', titre: 'Type de texte', cle: 'type' },
		{ champ: 'confiance', titre: 'Niveau de confiance', cle: 'confiance' }
	];

	function ouvertParDefaut(champ: keyof Filtres, liste: Facette[]): boolean {
		return (filtres[champ] as string[]).length > 0 || liste.some((f) => f.actif) ||
			champ === 'statut' || champ === 'guadeloupe';
	}
</script>

<aside class="panneau-facettes" aria-label="Filtres">
	{#each GROUPES as groupe (groupe.champ)}
		{@const liste = facettes[groupe.cle]}
		{#if liste.length}
			<details class="groupe" open={ouvertParDefaut(groupe.champ, liste)}>
				<summary>
					{groupe.titre}
					{#if (filtres[groupe.champ] as string[]).length}
						<span class="compteur-actifs">{(filtres[groupe.champ] as string[]).length}</span>
					{/if}
				</summary>
				<ul>
					{#each liste as facette (facette.valeur)}
						<li>
							<!--
								Ce sont des liens, pas des cases à cocher : `aria-pressed` n'est pas
								valide sur le rôle `link`. L'état est donc porté par un texte
								réservé aux lecteurs d'écran, qui dit aussi ce que fera le clic.
							-->
							<a
								href={lien(groupe.champ, facette.valeur)}
								class="facette"
								class:actif={facette.actif}
								rel="nofollow"
							>
								<span class="case" aria-hidden="true">{facette.actif ? '×' : '+'}</span>
								<span class="libelle">{facette.libelle}</span>
								<span class="nombre">{facette.nombre}</span>
								<span class="visuellement-cache">
									{facette.actif
										? 'filtre actif, activer pour le retirer'
										: `${facette.nombre} résultats, activer pour filtrer`}
								</span>
							</a>
						</li>
					{/each}
				</ul>
			</details>
		{/if}
	{/each}
</aside>

<style>
	.panneau-facettes {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.groupe {
		border: var(--border-card);
		border-radius: var(--radius-md);
		background: var(--card-bg);
	}

	summary {
		cursor: pointer;
		padding: 0.6rem 0.8rem;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 0.78rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	summary::marker {
		color: var(--or-oki);
	}

	.compteur-actifs {
		background: var(--or-oki);
		color: var(--noir-oki);
		border-radius: var(--radius-sm);
		font-size: 0.7rem;
		padding: 0 0.4em;
		min-width: 1.3em;
		text-align: center;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0 0.5rem 0.5rem;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.facette {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.32rem 0.45rem;
		border-radius: var(--radius-sm);
		color: var(--blanc-creme);
		text-decoration: none;
		font-size: 0.85rem;
		border: 1px solid transparent;
	}
	.facette:hover {
		background: var(--card-bg-survol);
		border-color: var(--line);
	}
	.facette.actif {
		background: color-mix(in srgb, var(--or-oki) 14%, transparent);
		border-color: color-mix(in srgb, var(--or-oki) 60%, transparent);
	}

	.case {
		font-family: var(--font-mono);
		color: var(--or-oki);
		width: 1ch;
		flex: none;
	}
	.libelle {
		flex: 1;
	}
	.nombre {
		color: var(--muted-fort);
		font-size: 0.78rem;
		font-variant-numeric: tabular-nums;
	}
</style>
