<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/state';
import { SvelteURLSearchParams } from 'svelte/reactivity';
import { m } from '$lib/paraglide/messages.js';

type PersonType = 'PERSON' | 'INSTITUTION' | 'GROUP';

interface Props {
	type?: PersonType;
	familyOnly: boolean;
	hasDocuments: boolean;
	review: boolean;
	needsReviewCount: number;
	canWrite: boolean;
}

let { type, familyOnly, hasDocuments, review, needsReviewCount, canWrite }: Props = $props();

const typeChips: { value: PersonType; label: () => string }[] = [
	{ value: 'PERSON', label: m.persons_filter_type_person },
	{ value: 'GROUP', label: m.persons_filter_type_group },
	{ value: 'INSTITUTION', label: m.persons_filter_type_institution }
];

// Compose the next URL from the live params so a chip toggle never wipes q / page / other
// active chips. Any filter change resets to page 0.
function navigate(mutate: (params: SvelteURLSearchParams) => void) {
	const params = new SvelteURLSearchParams(page.url.searchParams);
	params.delete('page');
	mutate(params);
	const qs = params.toString();
	goto(qs ? `/persons?${qs}` : '/persons', { keepFocus: true, noScroll: true });
}

function toggleType(value: PersonType) {
	navigate((params) => {
		if (type === value) params.delete('type');
		else params.set('type', value);
	});
}

function toggleFlag(key: 'familyOnly' | 'hasDocuments', active: boolean) {
	navigate((params) => {
		if (active) params.delete(key);
		else params.set(key, 'true');
	});
}

function setReview(next: boolean) {
	navigate((params) => {
		if (next) params.set('review', 'true');
		else params.delete('review');
	});
}

const chipBase =
	'inline-flex min-h-[44px] min-w-[44px] items-center gap-1.5 rounded-sm border px-4 py-2 font-sans text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none';
const chipActive = 'border-brand-navy bg-brand-navy text-white';
const chipInactive = 'border-line bg-surface text-ink hover:bg-muted';
</script>

<div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
	<!-- Type + boolean filter chips -->
	<div role="group" aria-label={m.persons_filter_group_label()} class="flex flex-wrap gap-2">
		{#each typeChips as chip (chip.value)}
			{@const active = type === chip.value}
			<button
				type="button"
				aria-pressed={active}
				class={[chipBase, active ? chipActive : chipInactive]}
				onclick={() => toggleType(chip.value)}
			>
				{#if active}
					<svg
						class="h-3.5 w-3.5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						stroke-width="2.5"
						aria-hidden="true"
					>
						<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
					</svg>
				{/if}
				{chip.label()}
			</button>
		{/each}

		<button
			type="button"
			aria-pressed={familyOnly}
			class={[chipBase, familyOnly ? chipActive : chipInactive]}
			onclick={() => toggleFlag('familyOnly', familyOnly)}
		>
			{#if familyOnly}
				<svg
					class="h-3.5 w-3.5"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					stroke-width="2.5"
					aria-hidden="true"
				>
					<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
				</svg>
			{/if}
			{m.persons_filter_family_only()}
		</button>

		<button
			type="button"
			aria-pressed={hasDocuments}
			class={[chipBase, hasDocuments ? chipActive : chipInactive]}
			onclick={() => toggleFlag('hasDocuments', hasDocuments)}
		>
			{#if hasDocuments}
				<svg
					class="h-3.5 w-3.5"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					stroke-width="2.5"
					aria-hidden="true"
				>
					<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
				</svg>
			{/if}
			{m.persons_filter_has_documents()}
		</button>
	</div>

	<!-- Show-all / Zu prüfen toggle: transcriber-only, reveals the import noise. -->
	{#if canWrite}
		<!-- No aria-label: the visible text IS the accessible name (WCAG 2.5.3 Label in Name).
		     It flips between "Zu prüfen (N)" (off) and "Alle anzeigen" (on) and aria-checked
		     carries the toggle state, so the announced name always matches what the user reads. -->
		<button
			type="button"
			role="switch"
			aria-checked={review}
			class={[chipBase, 'sm:ml-auto', review ? chipActive : chipInactive]}
			onclick={() => setReview(!review)}
		>
			<svg
				class="h-3.5 w-3.5"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
				stroke-width="2"
				aria-hidden="true"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
				/>
			</svg>
			{review ? m.persons_toggle_show_all() : m.persons_toggle_needs_review({ count: needsReviewCount })}
		</button>
	{/if}
</div>
