<script lang="ts">
	import { page } from '$app/stores';
	import { navbarExtra } from '$lib/stores/navbar-extra.svelte';
	import { sidebar } from '$lib/stores/sidebar.svelte';
	import {
		LayoutDashboard, Users, BarChart3, Key, ListTodo,
		Server, FileText, Network, Globe, Settings, Menu
	} from 'lucide-svelte';
	import type { Component } from 'svelte';

	type NavEntry = { label: string; icon: Component<{ size?: number }> };
	const routes: Record<string, NavEntry> = {
		'/': { label: 'Overview', icon: LayoutDashboard },
		'/tenants': { label: 'Tenants', icon: Users },
		'/usage': { label: 'Usage Analytics', icon: BarChart3 },
		'/credentials': { label: 'Credential Pool', icon: Key },
		'/tasks': { label: 'Task Board', icon: ListTodo },
		'/domains': { label: 'Domains', icon: Globe },
		'/service': { label: 'Service Management', icon: Server },
		'/logs': { label: 'Logs', icon: FileText },
		'/caddy': { label: 'Caddy', icon: Network },
		'/settings': { label: 'Settings', icon: Settings },
	};

	let currentPath = $derived($page.url.pathname);

	let breadcrumbs = $derived.by(() => {
		const parts = currentPath.split('/').filter(Boolean);
		if (parts.length === 0) {
			const e = routes['/'];
			return [{ label: e.label, icon: e.icon, href: null }];
		}
		if (parts.length === 1) {
			const e = routes['/' + parts[0]];
			return [{ label: e?.label ?? parts[0], icon: e?.icon ?? null, href: null }];
		}
		const crumbs: { label: string; icon: NavEntry['icon'] | null; href: string | null }[] = [];
		let acc = '';
		for (let i = 0; i < parts.length; i++) {
			acc += '/' + parts[i];
			const isLast = i === parts.length - 1;
			const e = routes[acc];
			crumbs.push({ label: e?.label ?? parts[i], icon: e?.icon ?? null, href: isLast ? null : acc });
		}
		return crumbs;
	});
</script>

<header class="navbar">
	<div class="navbar-left">
		<button class="hamburger icon-btn" onclick={() => sidebar.toggle()} aria-label="Toggle menu">
			<Menu size={18} />
		</button>
		<nav class="breadcrumb" aria-label="breadcrumb">
			{#each breadcrumbs as crumb, i}
				{#if i > 0}<span class="sep">/</span>{/if}
				{#if crumb.href}
					<a href={crumb.href} class="crumb-link">
						{#if crumb.icon}<svelte:component this={crumb.icon} size={15} />{/if}
						<span class="crumb-label">{crumb.label}</span>
					</a>
				{:else}
					<span class="crumb-current">
						{#if crumb.icon}<svelte:component this={crumb.icon} size={15} />{/if}
						<span class="crumb-label">{crumb.label}</span>
					</span>
				{/if}
			{/each}
		</nav>
	</div>
	{#if navbarExtra.snippet}
		<div class="navbar-actions">
			{@render navbarExtra.snippet()}
		</div>
	{/if}
</header>

<style>
	.navbar {
		height: var(--navbar-height);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		border-bottom: 1px solid var(--border);
		background: var(--surface-0);
	}
	.navbar-left {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: 0;
		flex: 1;
	}
	.breadcrumb {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: var(--font-size-md);
		font-weight: 600;
		min-width: 0;
	}
	.sep { color: var(--text-muted); font-weight: 400; }
	.crumb-link, .crumb-current {
		display: flex;
		align-items: center;
		gap: 5px;
	}
	.crumb-link {
		color: var(--text-dim);
		text-decoration: none;
		transition: color var(--duration) var(--ease);
	}
	.crumb-link:hover { color: var(--text); }
	.crumb-current { color: var(--text-bright); }
	.navbar-actions {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
	.icon-btn {
		background: none;
		border: none;
		color: var(--text-dim);
		cursor: pointer;
		padding: 6px;
		border-radius: var(--radius-sm);
		transition: all var(--duration) var(--ease);
		display: flex;
		align-items: center;
	}
	.icon-btn:hover { color: var(--text); background: var(--surface-2); }
	.hamburger { display: none; }
	@media (max-width: 768px) {
		.hamburger { display: flex; }
		.navbar-actions { display: none; }
		.sep { display: none; }
		.crumb-link { display: none; }
		.crumb-label { display: none; }
	}
</style>
