<script lang="ts">
	import CarteTexte from '$composants/CarteTexte.svelte';
	import PanneauFacettes from '$composants/PanneauFacettes.svelte';
	import { pluriel } from '$lib/format';
	import type { Filtres } from '$lib/types';
	import type { PageData } from './$types';

	const { data }: { data: PageData } = $props();

	const lien = (champ: keyof Filtres, valeur: string) =>
		(data.liens as Record<string, Record<string, string>>)[champ as string]?.[valeur] ??
		'/recherche';

	const chipsActifs = $derived(
		(['statut', 'guadeloupe', 'impact', 'theme', 'type', 'confiance'] as const).flatMap(
			(champ) =>
				data.resultats.facettes[champ]
					.filter((f) => f.actif)
					.map((f) => ({ champ, ...f }))
		)
	);

	function urlPage(numero: number): string {
		const parametres = new URLSearchParams(
			typeof window === 'undefined' ? '' : window.location.search
		);
		parametres.set('page', String(numero));
		return `/recherche?${parametres.toString()}`;
	}
</script>

<svelte:head>
	<title>
		{data.filtres.q ? `« ${data.filtres.q} » — recherche` : 'Recherche'} · Veille législative
	</title>
	<meta name="robots" content="noindex, follow" />
</svelte:head>

<h1>Recherche</h1>

<form class="recherche" action="/recherche" method="get" role="search">
	<label class="visuellement-cache" for="q">Rechercher</label>
	<input id="q" name="q" type="search" value={data.filtres.q} placeholder="Mot-clé, numéro de loi…" />
	{#each ['statut', 'theme', 'type', 'impact', 'guadeloupe', 'confiance'] as champ (champ)}
		{#each data.filtres[champ as keyof Filtres] as string[] as valeur (valeur)}
			<input type="hidden" name={champ} value={valeur} />
		{/each}
	{/each}
	<button class="bouton" type="submit"><span>Chercher</span></button>
</form>

{#if chipsActifs.length}
	<div class="ligne chips">
		<span class="etiquette">Filtres actifs :</span>
		{#each chipsActifs as chip (chip.champ + chip.valeur)}
			<a class="chip" href={lien(chip.champ as keyof Filtres, chip.valeur)} rel="nofollow">
				{chip.libelle}
				<span aria-hidden="true">×</span>
				<span class="visuellement-cache">Retirer ce filtre</span>
			</a>
		{/each}
		<a class="chip effacer" href={data.filtres.q ? `/recherche?q=${encodeURIComponent(data.filtres.q)}` : '/recherche'}>
			Tout effacer
		</a>
	</div>
{/if}

<div class="mise-en-page">
	<PanneauFacettes facettes={data.resultats.facettes} filtres={data.filtres} {lien} />

	<div class="resultats">
		<p class="total" role="status">
			<strong>{data.resultats.total}</strong>
			{pluriel(data.resultats.total, 'texte')}
			{#if data.filtres.q}pour « {data.filtres.q} »{/if}
		</p>

		{#if data.resultats.textes.length}
			<div class="liste">
				{#each data.resultats.textes as texte (texte.id)}
					<CarteTexte {texte} />
				{/each}
			</div>

			{#if data.resultats.pages > 1}
				<nav class="pagination" aria-label="Pagination">
					{#if data.resultats.page > 1}
						<a class="bouton bouton-discret" href={urlPage(data.resultats.page - 1)}>
							<span>← Précédent</span>
						</a>
					{/if}
					<span class="position">Page {data.resultats.page} sur {data.resultats.pages}</span>
					{#if data.resultats.page < data.resultats.pages}
						<a class="bouton bouton-discret" href={urlPage(data.resultats.page + 1)}>
							<span>Suivant →</span>
						</a>
					{/if}
				</nav>
			{/if}
		{:else}
			<div class="carte vide">
				<h2>Aucun résultat</h2>
				<p>
					Aucun texte ne correspond à cette combinaison de filtres. Essayez de retirer un
					critère, ou de chercher sur un mot plus général.
				</p>
				<a class="bouton" href="/recherche"><span>Repartir de zéro</span></a>
			</div>
		{/if}
	</div>
</div>

<style>
	.recherche {
		display: flex;
		gap: 0.5rem;
		margin-bottom: var(--space-2);
		max-width: 720px;
	}
	.recherche input[type='search'] {
		flex: 1;
		background: var(--card-bg);
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
		color: var(--blanc-creme);
		font: inherit;
		padding: 0.55rem 0.8rem;
	}
	.recherche input:focus {
		border-color: var(--or-oki);
	}

	.chips {
		margin-bottom: var(--space-2);
		gap: 0.35rem;
	}
	.etiquette {
		font-size: 0.78rem;
		color: var(--muted-fort);
	}
	.chip {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		background: color-mix(in srgb, var(--or-oki) 12%, transparent);
		border: 1px solid color-mix(in srgb, var(--or-oki) 55%, transparent);
		border-radius: var(--radius-sm);
		color: var(--blanc-creme);
		font-size: 0.78rem;
		padding: 0.18em 0.6em;
		text-decoration: none;
	}
	.chip:hover {
		background: color-mix(in srgb, var(--or-oki) 22%, transparent);
	}
	.chip.effacer {
		background: transparent;
		border-color: var(--line);
		color: var(--muted);
	}

	.mise-en-page {
		display: grid;
		grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
		gap: var(--space-3);
		align-items: start;
	}
	@media (max-width: 820px) {
		.mise-en-page {
			grid-template-columns: 1fr;
		}
	}

	.total {
		font-size: 0.9rem;
		color: var(--muted);
		margin-bottom: var(--space-2);
	}
	.total strong {
		color: var(--or-oki);
		font-size: 1.1rem;
	}

	.liste {
		display: flex;
		flex-direction: column;
		gap: 0.7rem;
	}

	.pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		margin-top: var(--space-3);
	}
	.position {
		font-size: 0.82rem;
		color: var(--muted-fort);
	}

	.vide {
		text-align: center;
		padding: var(--space-4) var(--space-2);
		border-left-color: var(--muted-fort);
	}
	.vide h2 {
		font-size: 1.05rem;
	}
	.vide p {
		color: var(--muted);
		max-width: 46ch;
		margin-inline: auto;
	}
</style>
