<script>
	import '../app.css';
	import { page, navigating } from '$app/stores';
	import favicon from '$lib/assets/favicon.ico';
	import Navbar from '$lib/components/ui/Navbar.svelte';
	import NavigationDrawer from '$lib/components/layout/NavigationDrawer.svelte';
	import SearchModal from '$lib/components/ui/SearchModal.svelte';
	import { openDrawer } from '$lib/stores/drawer.js';
	import Spinner from '$lib/components/ui/Spinner.svelte';

	let { children } = $props();

	// Don't show navbar on landing pages
	let isLanding = $derived($page.url.pathname === '/' || $page.url.pathname === '/nuevo-buscador');

	// Global search modal state
	let searchModalOpen = $state(false);

	function openSearchModal() {
		searchModalOpen = true;
	}

	function handleGlobalKeydown(e) {
		// Cmd+K or Ctrl+K to open search
		if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
			e.preventDefault();
			searchModalOpen = true;
		}
	}

	// Navigation loading state
	let showLoader = $state(false);
	let loaderTimeout = null;
	let navStartTime = null;

	// Show loader after 150ms delay (avoid flash for fast navigations)
	$effect(() => {
		if ($navigating) {
			navStartTime = performance.now();
			console.log(`[NAV] Navigation started → ${$navigating.to?.url?.pathname}`);
			loaderTimeout = setTimeout(() => {
				showLoader = true;
			}, 150);
		} else {
			if (loaderTimeout) clearTimeout(loaderTimeout);
			if (navStartTime) {
				console.log(`[NAV] Navigation complete: ${(performance.now() - navStartTime).toFixed(0)}ms`);
				navStartTime = null;
			}
			showLoader = false;
		}
	});
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
</svelte:head>

<svelte:window onkeydown={handleGlobalKeydown} />

<!-- Navigation Drawer (siempre presente) -->
<NavigationDrawer />

<!-- Global Search Modal -->
<SearchModal bind:open={searchModalOpen} />

<!-- Floating controls bar (fixed position - no afecta el flujo) -->
{#if !isLanding}
	<Navbar onOpenDrawer={openDrawer} onOpenSearch={openSearchModal} />
{/if}

<!-- Navigation loading overlay -->
{#if showLoader}
	<div class="nav-loader">
		<div class="nav-loader-content">
			<Spinner size={32} color="#C9A751" />
			<span class="nav-loader-text">Cargando...</span>
		</div>
	</div>
{/if}

<div class="layout-wrapper">
	<main class="layout-main">
		{@render children()}
	</main>
</div>

<style>
	.layout-wrapper {
		min-height: 100vh;
		width: 100%;
		background-color: var(--theme-body);
	}

	.layout-main {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	.nav-loader {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(28, 28, 26, 0.85);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: fadeIn 0.15s ease-out;
	}

	.nav-loader-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.nav-loader-text {
		font-family: 'DM Mono', monospace;
		font-size: 13px;
		color: #B8B5AD;
		letter-spacing: 0.05em;
	}

	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}
</style>