<script lang="ts">
import type { components } from '$lib/generated/api';
import { m } from '$lib/paraglide/messages.js';
import { clickOutside } from '$lib/shared/actions/clickOutside';
import type { PersonOption } from './personOption';
type Person = components['schemas']['Person'];

interface Props {
	selectedPersons?: PersonOption[];
	/** Name of the hidden inputs carrying selected ids. Mirrors DocumentMultiSelect. */
	hiddenInputName?: string;
	/** Empty-state text shown inside the chip container when nothing is selected. */
	emptyLabel?: string;
	/** id of the search input so a <label for=...> can be associated. */
	inputId?: string;
	/** Called when the selection changes (add/remove) — lets a parent track dirtiness. */
	onchange?: () => void;
}

let {
	selectedPersons = $bindable([]),
	hiddenInputName = 'receiverIds',
	emptyLabel = undefined,
	inputId = undefined,
	onchange = undefined
}: Props = $props();

let searchTerm = $state('');
let results: Person[] = $state([]);
let showDropdown = $state(false);
let loading = $state(false);
let debounceTimer: ReturnType<typeof setTimeout>;
let inputEl: HTMLInputElement;
let dropdownStyle = $state('');

function updateDropdownPosition() {
	if (!inputEl) return;
	const rect = inputEl.getBoundingClientRect();
	dropdownStyle = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;width:${rect.width}px`;
}

function handleInput() {
	showDropdown = true;
	clearTimeout(debounceTimer);
	debounceTimer = setTimeout(async () => {
		if (searchTerm.length < 1) {
			results = [];
			return;
		}
		loading = true;
		try {
			const res = await fetch(`/api/persons?review=true&q=${encodeURIComponent(searchTerm)}`);
			if (res.ok) {
				const body = await res.json();
				const all: Person[] = body.items ?? [];
				results = all.filter((p) => !selectedPersons.some((s) => s.id === p.id));
			}
		} catch {
			results = [];
		} finally {
			loading = false;
		}
	}, 300);
}

function selectPerson(person: Person) {
	selectedPersons = [...selectedPersons, person];
	searchTerm = '';
	showDropdown = false;
	results = [];
	onchange?.();
}

function removePerson(id: string | undefined) {
	selectedPersons = selectedPersons.filter((p) => p.id !== id);
	onchange?.();
}
</script>

<svelte:window onscroll={updateDropdownPosition} onresize={updateDropdownPosition} />

{#each selectedPersons as person (person.id)}
	<input type="hidden" name={hiddenInputName} value={person.id} />
{/each}

<div class="relative" use:clickOutside onclickoutside={() => (showDropdown = false)}>
	<div
		class="flex min-h-[38px] flex-wrap gap-2 rounded border border-line bg-surface p-2 shadow-sm focus-within:ring-2 focus-within:ring-focus-ring focus-within:outline-none"
	>
		{#each selectedPersons as person (person.id)}
			<span
				class="inline-flex items-center gap-1 rounded bg-muted px-2 py-1 text-sm font-medium text-ink"
			>
				{person.displayName}
				<button
					type="button"
					onclick={() => removePerson(person.id)}
					class="ml-0.5 inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-sm text-ink/50 hover:text-red-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
					aria-label={m.comp_multiselect_remove()}
				>
					<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M6 18L18 6M6 6l12 12"
						/>
					</svg>
				</button>
			</span>
		{/each}

		{#if emptyLabel && selectedPersons.length === 0}
			<span class="px-1 py-1 font-sans text-sm text-ink-3 italic">{emptyLabel}</span>
		{/if}

		<input
			bind:this={inputEl}
			id={inputId}
			type="text"
			autocomplete="off"
			bind:value={searchTerm}
			oninput={handleInput}
			onfocus={() => { updateDropdownPosition(); showDropdown = true; }}
			placeholder={selectedPersons.length === 0 ? m.comp_multiselect_placeholder() : ''}
			class="min-w-[120px] flex-1 border-none bg-transparent p-1 text-sm outline-none focus:ring-0"
		/>
	</div>

	{#if showDropdown && (results.length > 0 || loading)}
		<div
			style={dropdownStyle}
			class="ring-opacity-5 z-50 max-h-60 overflow-auto rounded-md bg-surface py-1 text-base shadow-lg ring-1 ring-black sm:text-sm"
		>
			{#if loading}
				<div class="p-2 text-sm text-ink-2">{m.comp_multiselect_loading()}</div>
			{:else}
				{#each results as person (person.id)}
					<div
						class="cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-muted"
						onclick={() => selectPerson(person)}
						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
						role="button"
						tabindex="0"
					>
						{person.displayName}
					</div>
				{/each}
			{/if}
		</div>
	{/if}
</div>
