<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { clickOutside } from '$lib/shared/actions/clickOutside';

interface Correspondent {
	id: string;
	firstName?: string | null;
	lastName: string;
	displayName: string;
}

interface Props {
	correspondents: Correspondent[];
	loading: boolean;
	senderName: string;
	onselect: (id: string) => void;
	onclose: () => void;
}

let { correspondents, loading, senderName, onselect, onclose }: Props = $props();

function getOptionElements(container: HTMLElement): HTMLElement[] {
	return Array.from(container.querySelectorAll<HTMLElement>('[role="option"]'));
}

function handleKeydown(event: KeyboardEvent, container: HTMLElement) {
	const options = getOptionElements(container);
	const focused = document.activeElement as HTMLElement;
	const idx = options.indexOf(focused);

	if (event.key === 'ArrowDown') {
		event.preventDefault();
		const next = options[idx + 1] ?? options[0];
		next?.focus();
	} else if (event.key === 'ArrowUp') {
		event.preventDefault();
		const prev = options[idx - 1] ?? options[options.length - 1];
		prev?.focus();
	} else if (event.key === 'Escape') {
		onclose();
	}
}

function getInitials(person: Correspondent): string {
	if (person.firstName)
		return `${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase();
	return person.lastName.substring(0, 2).toUpperCase();
}
</script>

<div
	use:clickOutside
	onclickoutside={onclose}
	role="listbox"
	tabindex="-1"
	aria-label={m.conv_suggestions_heading()}
	class="absolute top-full right-0 left-0 z-30 mt-1 rounded-sm border border-line bg-surface shadow-lg"
	onkeydown={(e) => handleKeydown(e, e.currentTarget as HTMLElement)}
>
	<!-- Heading -->
	<div class="px-3 pt-2 pb-1 text-[10px] font-bold tracking-widest text-ink-3 uppercase">
		{m.conv_suggestions_heading()}
	</div>

	<!-- Correspondent rows -->
	{#if !loading}
		{#each correspondents as person (person.id)}
			<div
				role="option"
				aria-selected="false"
				tabindex="0"
				class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset"
				onclick={() => onselect(person.id)}
				onkeydown={(e) => e.key === 'Enter' && onselect(person.id)}
			>
				<!-- Avatar with initials -->
				<span
					class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-fg"
					aria-hidden="true"
				>
					{getInitials(person)}
				</span>
				<!-- Svelte auto-escapes — do not use {@html} here. -->
				{person.displayName}
			</div>
		{/each}
	{/if}

	<!-- Separator -->
	<div class="mt-1 border-t border-line"></div>

	<!-- "Alle Korrespondenten" row -->
	<div
		role="option"
		aria-selected="false"
		tabindex="0"
		class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset"
		onclick={() => onselect('')}
		onkeydown={(e) => e.key === 'Enter' && onselect('')}
	>
		{m.conv_suggestions_all_label({ name: senderName })}
	</div>
</div>
