/* Lukenya Marathon — shared left sidebar.
 * Loaded once on every Desk page (see hooks.py: app_include_js).
 * Every lukenya-* page should render its sidebar by calling
 * lukenya.nav.render(activeRoute) instead of building its own <aside>.
 * Styling lives in public/css/lukenya_navigation.css — don't copy it
 * into individual page .css files.
 */
frappe.provide("lukenya.nav");

(function () {
	const ICON = {
		grid: '<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>',
		calendar: '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>',
		users: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
		flag: '<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/>',
		card: '<rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/>',
		chart: '<line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/>',
		sliders: '<line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>',
		run: '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>',
	};

	const svg = (name, size) =>
		`<svg class="lm-ico" width="${size || 18}" height="${size || 18}" viewBox="0 0 24 24" fill="none" ` +
		`stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICON[name]}</svg>`;

	const esc = (s) => frappe.utils.escape_html(s == null ? "" : String(s));

	// Single source of truth for every lukenya-* page's left sidebar.
	const NAV = [
		{ label: "Dashboard", icon: "grid", route: "lukenya-dashboard" },
		{ label: "Events", icon: "calendar", route: "lukenya-events" },
		{ label: "Participants", icon: "users", route: "lukenya-participants" },
		{ label: "Race Management", icon: "flag", route: "lukenya-race-management" },
		{ label: "Payments", icon: "card", route: "lukenya-payments" },
		{ label: "Reports", icon: "chart", route: "lukenya-reports" },
		{ label: "Settings", icon: "sliders", soon: true },
	];

	// activeRoute: the calling page's own route, e.g. "lukenya-payments".
	lukenya.nav.render = function (activeRoute) {
		const items = NAV.map((n) => {
			const attrs =
				n.route === activeRoute
					? 'class="lm-nav__item is-active" aria-current="page"'
					: n.soon
					? 'class="lm-nav__item is-soon" disabled title="' + esc(__("Coming soon")) + '"'
					: `class="lm-nav__item" data-route="${esc(n.route)}"`;
			return `<button type="button" ${attrs}>${svg(n.icon, 18)}<span>${esc(__(n.label))}</span></button>`;
		}).join("");

		return `
			<aside class="lm-side">
				<div class="lm-brand">
					<span class="lm-brand__mark"><img src="/assets/lukenya_marathon/images/lukenya-logo.png" alt="Lukenya Marathon"></span>
					<span class="lm-brand__name">${esc(__("Lukenya Marathon"))}</span>
				</div>
				<nav class="lm-nav" aria-label="${esc(__("Dashboard sections"))}">${items}</nav>
				<button type="button" class="lm-side__workspace" data-action="workspace">${esc(__("Open full workspace"))}</button>
				<div class="lm-side__promo">
					<p>${esc(__("Run for a healthier tomorrow"))}</p>
				</div>
			</aside>`;
	};

	// Bound once, globally, so "Open full workspace" works on every page that
	// renders the shared sidebar — no per-page wiring needed.
	$(document).on("click", '.lm-side [data-action="workspace"]', function () {
		frappe.set_route("Workspaces", "Lukenya Marathon");
	});
})();