<script lang="ts">
	import { page } from '$app/state';
	import {
		BookOpen,
		Brain,
		CalendarDays,
		CircleDot,
		Compass,
		Dumbbell,
		Landmark,
		LibraryBig,
		Menu,
		Package2,
		Search,
		Settings2,
		SquareCheckBig,
		X
	} from '@lucide/svelte';

	interface Props {
		children: any;
		userName?: string;
		visibleApps?: string[];
		onOpenCommand?: () => void;
	}

	let {
		children,
		userName = '',
		visibleApps = ['tasks', 'trips', 'fitness', 'inventory', 'budget', 'reader', 'media'],
		onOpenCommand
	}: Props = $props();

	const baseItems = [
		{ id: 'dashboard', href: '/', label: 'Overview', icon: CircleDot },
		{ id: 'tasks', href: '/tasks', label: 'Tasks', icon: SquareCheckBig },
		{ id: 'trips', href: '/trips', label: 'Trips', icon: Compass },
		{ id: 'fitness', href: '/fitness', label: 'Fitness', icon: Dumbbell },
		{ id: 'budget', href: '/budget', label: 'Budget', icon: Landmark },
		{ id: 'inventory', href: '/inventory', label: 'Inventory', icon: Package2 },
		{ id: 'reader', href: '/reader', label: 'Reader', icon: BookOpen },
		{ id: 'media', href: '/media', label: 'Media', icon: LibraryBig },
		{ id: 'brain', href: '/brain', label: 'Brain', icon: Brain },
		{ id: 'settings', href: '/settings', label: 'Settings', icon: Settings2 }
	];

	const navItems = $derived(
		baseItems.filter((item) => item.id === 'dashboard' || item.id === 'settings' || visibleApps.includes(item.id))
	);

	let mobileNavOpen = $state(false);

	function isActive(href: string): boolean {
		if (href === '/') return page.url.pathname === '/';
		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
	}
</script>

<div class="shell">
	<div class="shell-glow shell-glow-a"></div>
	<div class="shell-glow shell-glow-b"></div>

	<aside class="shell-rail reveal">
		<div class="rail-top">
			<a class="brand" href="/">
				<div class="brand-mark">P</div>
				<div>
					<div class="brand-name">Platform</div>
					<div class="brand-sub">ops workspace</div>
				</div>
			</a>

			<button class="command-trigger" onclick={onOpenCommand}>
				<Search size={15} strokeWidth={1.8} />
				<span>Assistant</span>
				<kbd>Ctrl K</kbd>
			</button>

			<nav class="rail-nav">
				{#each navItems as item}
					<a href={item.href} class:active={isActive(item.href)}>
						<item.icon size={16} strokeWidth={1.8} />
						<span>{item.label}</span>
					</a>
				{/each}
			</nav>
		</div>

		<div class="rail-bottom">
			<div class="rail-date">
				<CalendarDays size={14} strokeWidth={1.8} />
				<span>{new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric' }).format(new Date())}</span>
			</div>
			<div class="rail-user">{userName || 'Platform user'}</div>
		</div>
	</aside>

	<div class="shell-main">
		<header class="mobile-bar">
			<button class="mobile-menu-btn" onclick={() => (mobileNavOpen = true)} aria-label="Open navigation">
				<Menu size={18} strokeWidth={1.9} />
			</button>

			<a class="mobile-brand" href="/">
				<div class="brand-mark">P</div>
				<div>
					<div class="brand-name">Platform</div>
					<div class="brand-sub">ops workspace</div>
				</div>
			</a>
			<button class="command-trigger mobile" onclick={onOpenCommand}>
				<Search size={15} strokeWidth={1.8} />
			</button>
		</header>

		{#if mobileNavOpen}
			<button class="mobile-nav-overlay" aria-label="Close navigation" onclick={() => (mobileNavOpen = false)}></button>
			<aside class="mobile-nav-sheet">
				<div class="mobile-nav-head">
					<div>
						<div class="brand-name">Platform</div>
						<div class="brand-sub">ops workspace</div>
					</div>
					<button class="mobile-menu-btn" onclick={() => (mobileNavOpen = false)} aria-label="Close navigation">
						<X size={18} strokeWidth={1.9} />
					</button>
				</div>

				<nav class="mobile-nav-list">
					{#each navItems as item}
						<a href={item.href} class:active={isActive(item.href)} onclick={() => (mobileNavOpen = false)}>
							<item.icon size={16} strokeWidth={1.8} />
							<span>{item.label}</span>
						</a>
					{/each}
				</nav>
			</aside>
		{/if}

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

<style>
	:global(body) {
		background:
			radial-gradient(circle at top left, rgba(214, 120, 58, 0.08), transparent 22%),
			radial-gradient(circle at 85% 10%, rgba(65, 91, 82, 0.12), transparent 20%),
			linear-gradient(180deg, #f5efe6 0%, #efe6da 48%, #ede7de 100%);
	}

	.shell {
		--shell-ink: #1e1812;
		--shell-muted: #6b6256;
		--shell-line: rgba(35, 26, 17, 0.11);
		min-height: 100vh;
		display: grid;
		grid-template-columns: 270px minmax(0, 1fr);
		position: relative;
	}

	.shell-glow {
		position: fixed;
		border-radius: 999px;
		filter: blur(80px);
		pointer-events: none;
		opacity: 0.4;
	}

	.shell-glow-a {
		width: 340px;
		height: 340px;
		top: -120px;
		right: 12%;
		background: rgba(179, 92, 50, 0.16);
	}

	.shell-glow-b {
		width: 260px;
		height: 260px;
		bottom: 10%;
		left: 4%;
		background: rgba(68, 95, 86, 0.14);
	}

	.shell-rail {
		position: sticky;
		top: 0;
		height: 100vh;
		padding: 28px 20px 24px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: linear-gradient(180deg, rgba(250, 246, 239, 0.82), rgba(244, 237, 228, 0.66));
		border-right: 1px solid var(--shell-line);
		backdrop-filter: blur(20px);
	}

	.rail-top {
		display: grid;
		gap: 18px;
	}

	.brand,
	.mobile-brand {
		display: flex;
		align-items: center;
		gap: 14px;
	}

	.brand-mark {
		width: 42px;
		height: 42px;
		display: grid;
		place-items: center;
		border-radius: 14px;
		background: linear-gradient(135deg, #211912, #5d4c3f);
		color: white;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: 0.06em;
	}

	.brand-name {
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--shell-ink);
	}

	.brand-sub,
	.rail-user {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: var(--shell-muted);
	}

	.command-trigger {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 12px;
		border-radius: 999px;
		border: 1px solid rgba(35, 26, 17, 0.09);
		background: rgba(255, 255, 255, 0.56);
		color: var(--shell-muted);
		font-size: 13px;
	}

	.command-trigger kbd {
		margin-left: auto;
		font-family: var(--mono);
		font-size: 11px;
		color: var(--shell-muted);
	}

	.rail-nav {
		display: grid;
		gap: 8px;
	}

	.rail-nav a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		border-radius: 999px;
		color: var(--shell-muted);
		transition: background 160ms ease, color 160ms ease, transform 160ms ease;
	}

	.rail-nav a:hover,
	.rail-nav a.active {
		background: rgba(255, 255, 255, 0.62);
		color: var(--shell-ink);
		transform: translateX(3px);
	}

	.rail-bottom {
		display: grid;
		gap: 10px;
		padding-top: 18px;
		border-top: 1px solid var(--shell-line);
	}

	.rail-date {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: var(--shell-muted);
	}

	.shell-main {
		min-width: 0;
	}

	.mobile-bar {
		display: none;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
		border-bottom: 1px solid var(--shell-line);
		background: rgba(250, 246, 239, 0.78);
		backdrop-filter: blur(20px);
		position: sticky;
		top: 0;
		z-index: 20;
	}

	.command-trigger.mobile {
		width: 40px;
		height: 40px;
		justify-content: center;
		padding: 0;
	}

	.mobile-menu-btn {
		display: none;
		width: 40px;
		height: 40px;
		border-radius: 12px;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(35, 26, 17, 0.09);
		background: rgba(255, 255, 255, 0.56);
		color: var(--shell-muted);
	}

	.mobile-nav-overlay {
		position: fixed;
		inset: 0;
		border: 0;
		background: rgba(17, 13, 10, 0.28);
		backdrop-filter: blur(4px);
		z-index: 39;
	}

	.mobile-nav-sheet {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(320px, 86vw);
		padding: 18px 16px;
		background: linear-gradient(180deg, rgba(250, 246, 239, 0.96), rgba(244, 237, 228, 0.94));
		border-right: 1px solid var(--shell-line);
		backdrop-filter: blur(20px);
		z-index: 40;
		display: grid;
		align-content: start;
		gap: 18px;
	}

	.mobile-nav-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.mobile-nav-list {
		display: grid;
		gap: 8px;
	}

	.mobile-nav-list a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		border-radius: 16px;
		color: var(--shell-muted);
		background: transparent;
		transition: background 160ms ease, color 160ms ease;
	}

	.mobile-nav-list a.active {
		background: rgba(255, 255, 255, 0.62);
		color: var(--shell-ink);
	}

	.shell-content {
		min-width: 0;
	}

	@media (max-width: 900px) {
		.shell {
			grid-template-columns: 1fr;
		}

		.shell-rail {
			display: none;
		}

		.mobile-bar {
			display: flex;
		}

		.mobile-menu-btn {
			display: inline-flex;
		}
	}
</style>
