const foodordAdminNavInit = () => {
	const navs = document.querySelectorAll('.foodord-admin-nav');
	if (!navs.length) {
		return;
	}

	const ensureActiveItemVisible = (nav) => {
		const list = nav.querySelector('.foodord-admin-nav__list');
		if (!list) {
			return;
		}

		const activeLink = list.querySelector('.foodord-admin-nav__link.is-active, .foodord-admin-nav__link[aria-current="page"]');
		if (!activeLink || !(activeLink instanceof HTMLElement)) {
			return;
		}

		const activeItem = activeLink.closest('.foodord-admin-nav__item');
		if (!activeItem || !(activeItem instanceof HTMLElement)) {
			return;
		}

		const listRect = list.getBoundingClientRect();
		const itemRect = activeItem.getBoundingClientRect();
		const isOutOfView = itemRect.left < listRect.left || itemRect.right > listRect.right;
		if (!isOutOfView) {
			return;
		}

		const centeredLeft = activeItem.offsetLeft - Math.max((list.clientWidth - activeItem.offsetWidth) / 2, 0);
		list.scrollLeft = Math.max(0, centeredLeft);
	};

	const setupNav = (nav) => {
		const list = nav.querySelector('.foodord-admin-nav__list');
		const dropdown = nav.querySelector('.foodord-admin-nav__dropdown');
		const toggleWrap = nav.querySelector('.foodord-admin-nav__toggle-wrap');
		const toggleBtn = toggleWrap ? toggleWrap.querySelector('.foodord-admin-nav__toggle') : null;

		if (!list || !dropdown || !toggleWrap || !toggleBtn) {
			return;
		}

		nav.classList.add('is-measuring');
		dropdown.innerHTML = '';
		toggleWrap.hidden = true;
		nav.classList.remove('is-collapsible', 'is-expanded');

		const items = Array.from(list.querySelectorAll('.foodord-admin-nav__item'));
		if (!items.length) {
			nav.classList.remove('is-measuring');
			nav.classList.add('is-ready');
			return;
		}

		const firstTop = items[0].offsetTop;
		let toWrap = items.filter((item) => item.offsetTop > firstTop + 5);
		if (toWrap.length > 0) {
			toggleWrap.hidden = false;
			nav.classList.add('is-collapsible');

			const currentItems = Array.from(list.querySelectorAll('.foodord-admin-nav__item'));
			if (currentItems.length > 0) {
				const currentTop = currentItems[0].offsetTop;
				toWrap = currentItems.filter((item) => item.offsetTop > currentTop + 5);
			}

			toWrap.forEach((item) => {
				dropdown.appendChild(item.cloneNode(true));
			});
		}

		nav.classList.remove('is-measuring');
		nav.classList.add('is-ready');
		window.requestAnimationFrame(() => {
			ensureActiveItemVisible(nav);
		});
	};

	const updateToggleLabel = (nav, toggleBtn) => {
		const textEl = toggleBtn.querySelector('.foodord-admin-nav__toggle-text');
		const moreText = toggleBtn.getAttribute('data-more-text') || 'More';
		const lessText = toggleBtn.getAttribute('data-less-text') || 'Less';
		const expanded = nav.classList.contains('is-expanded');

		toggleBtn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
		if (textEl) {
			textEl.textContent = expanded ? lessText : moreText;
		}
	};

	navs.forEach((nav) => {
		const toggleBtn = nav.querySelector('.foodord-admin-nav__toggle');
		if (!toggleBtn) {
			return;
		}

		setupNav(nav);
		updateToggleLabel(nav, toggleBtn);

		toggleBtn.addEventListener('click', (e) => {
			e.stopPropagation();
			const isExpanded = nav.classList.contains('is-expanded');
			nav.classList.toggle('is-expanded', !isExpanded);
			updateToggleLabel(nav, toggleBtn);
		});
	});

	document.addEventListener('click', (e) => {
		navs.forEach(nav => {
			if (nav.classList.contains('is-expanded') && !nav.contains(e.target)) {
				nav.classList.remove('is-expanded');
				const toggleBtn = nav.querySelector('.foodord-admin-nav__toggle');
				if (toggleBtn) updateToggleLabel(nav, toggleBtn);
			}
		});
	});

	let resizeTimer = 0;
	window.addEventListener('resize', () => {
		window.clearTimeout(resizeTimer);
		resizeTimer = window.setTimeout(() => {
			navs.forEach((nav) => setupNav(nav));
		}, 60);
	});

	window.addEventListener('load', () => {
		navs.forEach((nav) => setupNav(nav));
	});
};

document.addEventListener('DOMContentLoaded', foodordAdminNavInit);
