/**
 * navigation.ts
 * Handles the Bulma navbar burger toggle + keyboard nav for dropdowns.
 */

interface NavbarBurger extends HTMLElement {
	dataset: DOMStringMap & { target?: string };
}

export function initNavigation(): void {
	// Hamburger burger toggle.
	const burgers = document.querySelectorAll<NavbarBurger>( '.navbar-burger' );

	burgers.forEach( ( burger ) => {
		burger.addEventListener( 'click', () => {
			const targetId = burger.dataset.target ?? burger.getAttribute( 'aria-controls' ) ?? '';
			const menu     = document.getElementById( targetId );

			if ( ! menu ) return;

			const isExpanded = burger.getAttribute( 'aria-expanded' ) === 'true';
			burger.setAttribute( 'aria-expanded', String( ! isExpanded ) );
			burger.classList.toggle( 'is-active' );
			menu.classList.toggle( 'is-active' );
		} );
	} );

	// Keyboard support for dropdown menus (Tab / Escape).
	const dropdowns = document.querySelectorAll<HTMLElement>( '.has-dropdown' );

	dropdowns.forEach( ( dropdown ) => {
		const trigger = dropdown.querySelector<HTMLElement>( '.navbar-link' );
		const menu    = dropdown.querySelector<HTMLElement>( '.navbar-dropdown' );

		if ( ! trigger || ! menu ) return;

		// Close when Escape is pressed inside the dropdown.
		dropdown.addEventListener( 'keydown', ( e: KeyboardEvent ) => {
			if ( e.key === 'Escape' ) {
				trigger.focus();
				dropdown.classList.remove( 'is-active' );
			}
		} );

		// Close when focus leaves the dropdown.
		dropdown.addEventListener( 'focusout', ( e: FocusEvent ) => {
			if ( ! dropdown.contains( e.relatedTarget as Node ) ) {
				dropdown.classList.remove( 'is-active' );
			}
		} );

		trigger.addEventListener( 'keydown', ( e: KeyboardEvent ) => {
			if ( e.key === 'Enter' || e.key === ' ' ) {
				e.preventDefault();
				dropdown.classList.toggle( 'is-active' );
			}
		} );
	} );

	// Sticky navbar scroll class.
	const navbar = document.querySelector<HTMLElement>( '.site-navbar' );

	if ( navbar ) {
		const onScroll = (): void => {
			navbar.classList.toggle( 'is-scrolled', window.scrollY > 10 );
		};

		window.addEventListener( 'scroll', onScroll, { passive: true } );
		onScroll();
	}

	// Navbar search toggle.
	const searchToggle = document.querySelector<HTMLButtonElement>( '.navbar-search-toggle' );
	const searchForm   = document.getElementById( 'navbar-search-form' );

	if ( searchToggle && searchForm ) {
		searchToggle.addEventListener( 'click', () => {
			const isHidden = searchForm.hidden;
			searchForm.hidden = ! isHidden;
			searchToggle.setAttribute( 'aria-expanded', String( isHidden ) );

			if ( isHidden ) {
				const input = searchForm.querySelector<HTMLInputElement>( 'input' );
				input?.focus();
			}
		} );

		// Close when clicking outside.
		document.addEventListener( 'click', ( e: MouseEvent ) => {
			const target = e.target as Node;
			if ( ! searchToggle.contains( target ) && ! searchForm.contains( target ) ) {
				searchForm.hidden = true;
				searchToggle.setAttribute( 'aria-expanded', 'false' );
			}
		} );
	}
}
