(function ($) {
	"use strict";

	const Router = {
		currentRoute: null,
		initialized: false,

		init: function () {
			if (this.initialized) return;

			let initialRoute =
				window.location.hash?.replace("#", "") || window.stwInitialRoute || "/";

			if (!initialRoute.startsWith("/")) {
				initialRoute = "/" + initialRoute;
			}

			if (!window.location.hash || window.location.hash === "#") {
				window.location.hash = initialRoute;
			}

			this.currentRoute = initialRoute;
			this.setupEventListeners();
			this.navigate(this.currentRoute, false);
			this.initialized = true;
		},

		setupEventListeners: function () {
			const self = this;

			$(window).on("hashchange", function () {
				let hash = window.location.hash;
				if (!hash || hash === "#") {
					hash = "#/";
				}
				const route = hash.replace("#", "") || "/";
				self.navigate(route, false);
			});

			$(document).on("click", ".stw-nav-tab", function (e) {
				e.preventDefault();
				const route = $(this).data("route") || "/";
				self.navigate(route, true);
			});

			$(document).on("click", "[data-stw-navigate]", function (e) {
				e.preventDefault();
				const route = $(this).data("stw-navigate");
				if (route) {
					self.navigate(route, true);
				}
			});
		},

		navigate: function (route, updateHash) {
			route = route || "/";
			if (!route.startsWith("/")) {
				route = "/" + route;
			}

			if (updateHash) {
				window.location.hash = route;
			}

			$(".stw-route-content").hide();

			const $targetContent = $(
				'.stw-route-content[data-route="' + route + '"]',
			);
			if ($targetContent.length) {
				$targetContent.show();
				this.currentRoute = route;
				this.updateActiveTab(route);
				setTimeout(() => this.initRoute(route), 50);
			} else if (route !== "/") {
				this.navigate("/", updateHash);
			}
		},

		updateActiveTab: function (route) {
			$(".stw-nav-tab").removeClass("active");
			$('.stw-nav-tab[data-route="' + route + '"]').addClass("active");
			this.updateAdminSubmenu(route);
		},

		updateAdminSubmenu: function (route) {
			// Map routes to WordPress submenu page slugs
			const routeToSlug = {
				"/": "3d-scan-and-show",
				"/settings": "3d-scan-and-show-settings",
				"/dashboard": "3d-scan-and-show-dashboard",
				"/contact": "3d-scan-and-show-contact",
			};

			const targetSlug = routeToSlug[route] || "3d-scan-and-show";

			// Get the plugin's submenu container
			const $submenu = $(
				"#adminmenu #toplevel_page_3d-scan-and-show .wp-submenu",
			);

			// Remove 'current' class from all submenu items
			$submenu.find("li").removeClass("current");
			$submenu.find("a").removeClass("current").attr("aria-current", false);

			// Find and highlight the matching submenu item
			$submenu.find("a").each(function () {
				const href = $(this).attr("href") || "";
				// Extract the page parameter value from the URL
				const match = href.match(/[?&]page=([^&]*)/);
				const pageSlug = match ? match[1] : "";
				// Only highlight if the page slug exactly matches
				if (pageSlug === targetSlug) {
					$(this).addClass("current").attr("aria-current", "page");
					$(this).parent("li").addClass("current");
				}
			});
		},

		initRoute: function (route) {
			const routes = {
				"/": window.STW_Landing,
				"/dashboard": window.STW_Dashboard,
				"/settings": window.STW_Settings,
				"/contact": window.STW_Contact,
			};

			const component = routes[route];
			if (component?.init) {
				component.init();
			}
		},

		getCurrentRoute: function () {
			return this.currentRoute || "/";
		},
	};

	$(document).ready(function () {
		Router.init();
	});

	window.STW_Router = Router;
})(jQuery);
