<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import { clickOutside } from '$lib/shared/actions/clickOutside';
import { getNotificationStore } from '$lib/notification/notifications.svelte';
import NotificationDropdown from './NotificationDropdown.svelte';

let open = $state(false);
let bellButtonEl: HTMLButtonElement | null = null;

const stream = getNotificationStore();

async function toggleDropdown() {
	open = !open;
	if (open) {
		await stream.fetchNotifications();
		setTimeout(() => {
			const firstBtn = document.querySelector<HTMLButtonElement>(
				'[role="dialog"] button, [role="dialog"] a'
			);
			firstBtn?.focus();
		}, 0);
	}
}

function closeDropdown() {
	open = false;
	bellButtonEl?.focus();
}

function handleKeydown(event: KeyboardEvent) {
	if (event.key === 'Escape' && open) {
		event.stopPropagation();
		closeDropdown();
	}
}

const bellLabel = $derived(
	stream.unreadCount > 0
		? m.notification_bell_unread_label({ count: stream.unreadCount })
		: m.notification_bell_label()
);

function attachBellButton(node: HTMLButtonElement) {
	bellButtonEl = node;
	return () => {
		bellButtonEl = null;
	};
}

onMount(() => {
	stream.init();
});

onDestroy(() => {
	stream.destroy();
});
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="relative" use:clickOutside onclickoutside={() => { if (open) closeDropdown(); }}>
	<!-- Bell button -->
	<button
		{@attach attachBellButton}
		type="button"
		onclick={toggleDropdown}
		aria-label={bellLabel}
		title={bellLabel}
		aria-expanded={open}
		aria-haspopup="true"
		class="relative cursor-pointer rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
	>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-5 w-5"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="2"
			aria-hidden="true"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
			/>
		</svg>

		<!-- Persistent aria-live wrapper — always in DOM so live region history is preserved -->
		<span
			aria-live="polite"
			aria-atomic="true"
			class="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-fg {stream.unreadCount > 0 ? '' : 'hidden'}"
		>
			{stream.unreadCount}
		</span>
	</button>

	{#if open}
		<NotificationDropdown
			notifications={stream.notifications}
			optimisticMarkRead={stream.optimisticMarkRead}
			optimisticMarkAllRead={stream.optimisticMarkAllRead}
			onClose={closeDropdown}
		/>
	{/if}
</div>
