document.addEventListener("DOMContentLoaded", function () {
	const tablist = document.querySelector(
		".statistiques-collections__toolbar .tablist",
	);
	if (!tablist) return;

	const tabsButtons = tablist.querySelectorAll("button");
	if (!tabsButtons.length) return;

	const blockSection =
		document.getElementById("statistiques-collections") ||
		tablist.closest("section.statistiques-collections");

	function setActiveTab(currentTab) {
		tabsButtons.forEach((tab) => {
			tab.setAttribute("aria-selected", "false");
			tab.setAttribute("tabindex", "-1");
		});
		currentTab.setAttribute("aria-selected", "true");
		currentTab.setAttribute("tabindex", "0");
	}

	function setActiveTabPanel(currentTabButton) {
		const currentTabPanelId = currentTabButton.getAttribute("aria-controls");
		const currentTabPanel = document.querySelector(
			`.statistiques-collections__stats-items #${currentTabPanelId}`,
		);
		if (!currentTabPanel) return;
		currentTabPanel.setAttribute("data-active", "true");
		animateBar(currentTabPanel);
	}

	function animateBar(currentTabPanel) {
		const bar = currentTabPanel.querySelector(".percentage-bar");
		if (!bar) return;
		const percentage = bar.getAttribute("data-percentage");
		bar.style.width = "0%";
		requestAnimationFrame(() => {
			bar.style.width = `${percentage}%`;
		});
	}

	function scrollToBlock() {
		if (!blockSection) return;
		blockSection.scrollIntoView({ behavior: "smooth", block: "start" });
	}

	function updateUrlTabParam(tab) {
		const tabKey = tab.getAttribute("data-tab-key");
		if (!tabKey) return;

		const url = new URL(window.location.href);
		url.searchParams.set("tab", tabKey);
		url.searchParams.delete("collection");
		url.searchParams.delete("stats_tab");

		window.history.replaceState(null, "", url);
	}

	function activateTab(tab, options = {}) {
		const { updateUrl = true } = options;
		setActiveTab(tab);
		hideAllTabPanels();
		setActiveTabPanel(tab);
		if (updateUrl) {
			updateUrlTabParam(tab);
		}
	}

	function getInitialTabFromUrl() {
		const params = new URLSearchParams(window.location.search);
		const rawValue =
			params.get("tab") || params.get("collection") || params.get("stats_tab");
		if (!rawValue) return null;
		return rawValue.trim().toLowerCase();
	}

	function findTabButtonByQueryValue(queryValue) {
		if (!queryValue) return null;
		return Array.from(tabsButtons).find((tab) => {
			const tabKey = (tab.getAttribute("data-tab-key") || "")
				.trim()
				.toLowerCase();
			const tabIndex = (tab.getAttribute("data-tab") || "")
				.trim()
				.toLowerCase();
			return tabKey === queryValue || tabIndex === queryValue;
		});
	}

	function hideAllTabPanels() {
		const tabPanels = document.querySelectorAll(
			".statistiques-collections__stats-items .statistiques-collections__stat-item",
		);
		tabPanels.forEach((tabPanel) => {
			tabPanel.setAttribute("data-active", "false");
		});
	}

	tabsButtons.forEach((tab) => {
		tab.addEventListener("click", () => {
			activateTab(tab);
		});
	});

	const initialTabValue = getInitialTabFromUrl();
	const initialTabButton = findTabButtonByQueryValue(initialTabValue);
	if (initialTabButton) {
		activateTab(initialTabButton, { updateUrl: false });
		const scrollAfterLoad = () => setTimeout(() => scrollToBlock(), 200);
		if (document.readyState === "complete") {
			scrollAfterLoad();
		} else {
			window.addEventListener("load", scrollAfterLoad, { once: true });
		}
	}
});