<script lang="ts">
	import { Avatar } from "$lib/components/ui";

	interface Member {
		id: string;
		user_id: string;
		profiles: {
			id: string;
			full_name: string | null;
			email: string;
			avatar_url: string | null;
		};
	}

	interface Props {
		value: string | null;
		members: Member[];
		label?: string;
		onchange: (userId: string | null) => void;
	}

	let { value, members, label, onchange }: Props = $props();

	let isOpen = $state(false);
	let triggerEl = $state<HTMLButtonElement | null>(null);
	let dropdownStyle = $state("");

	function getAssignee(id: string | null) {
		if (!id) return null;
		return members.find((m) => m.user_id === id);
	}

	const assignee = $derived(getAssignee(value));

	function toggle() {
		if (!isOpen && triggerEl) {
			const rect = triggerEl.getBoundingClientRect();
			dropdownStyle = `top: ${rect.bottom + 8}px; left: ${rect.left}px; width: ${rect.width}px;`;
		}
		isOpen = !isOpen;
	}

	function select(userId: string | null) {
		onchange(userId);
		isOpen = false;
	}
</script>

<div class="flex flex-col gap-3 w-full">
	{#if label}
		<span class="px-3 font-bold font-body text-body text-white">
			{label}
		</span>
	{/if}

	<button
		type="button"
		bind:this={triggerEl}
		class="w-full p-3 bg-background text-white rounded-[32px]
			font-medium font-input text-body
			focus:outline-none focus:ring-2 focus:ring-primary
			transition-colors text-left flex items-center gap-2 overflow-hidden"
		onclick={toggle}
	>
		{#if assignee}
			<Avatar
				name={assignee.profiles.full_name || assignee.profiles.email}
				src={assignee.profiles.avatar_url}
				size="sm"
			/>
			<span class="truncate">
				{assignee.profiles.full_name || assignee.profiles.email}
			</span>
		{:else}
			<Avatar name="?" size="sm" />
			<span class="text-white/40 truncate">Unassigned</span>
		{/if}
	</button>

	{#if isOpen}
		<!-- svelte-ignore a11y_no_static_element_interactions -->
		<!-- svelte-ignore a11y_click_events_have_key_events -->
		<div
			class="fixed inset-0 z-[60]"
			onclick={() => (isOpen = false)}
		></div>
		<div
			class="fixed z-[70] bg-night border border-light/10 rounded-2xl shadow-xl max-h-48 overflow-y-auto py-1"
			style={dropdownStyle}
		>
			<button
				type="button"
				class="w-full px-4 py-2.5 text-left text-body-md text-white/60 hover:bg-dark transition-colors flex items-center gap-3"
				onclick={() => select(null)}
			>
				<Avatar name="?" size="sm" />
				Unassigned
			</button>
			{#each members as member}
				<button
					type="button"
					class="w-full px-4 py-2.5 text-left text-body-md hover:bg-dark transition-colors flex items-center gap-3
						{value === member.user_id ? 'bg-primary/10 text-primary' : 'text-white'}"
					onclick={() => select(member.user_id)}
				>
					<Avatar
						name={member.profiles.full_name ||
							member.profiles.email}
						src={member.profiles.avatar_url}
						size="sm"
					/>
					<span class="truncate">
						{member.profiles.full_name || member.profiles.email}
					</span>
				</button>
			{/each}
		</div>
	{/if}
</div>
