<script lang="ts">
	import '../app.css';
	import type { Snippet } from 'svelte';
	import { onDestroy } from 'svelte';
	import { page } from '$app/stores';
	import Toast from '$lib/components/Toast.svelte';
	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
	import LocaleSwitcher from '$lib/components/LocaleSwitcher.svelte';
	import { IconDashboard, IconProjects, IconDeploy, IconProxies, IconEvents, IconSettings, IconMenu, IconX, IconLogout, IconGlobe } from '$lib/components/icons';
	import { connectGlobalEvents, type SSEConnection } from '$lib/sse';
	import { isAuthenticated, clearAuth } from '$lib/auth';
	import * as api from '$lib/api';
	import { instanceStatusStore } from '$lib/stores/instance-status';
	import { resolvedTheme, applyTheme } from '$lib/stores/theme';
	import { t } from '$lib/i18n';

	interface Props {
		children: Snippet;
	}

	const { children }: Props = $props();

	const navItems = [
		{ href: '/', labelKey: 'nav.dashboard', icon: 'dashboard' },
		{ href: '/projects', labelKey: 'nav.projects', icon: 'projects' },
		{ href: '/deploy', labelKey: 'nav.deploy', icon: 'deploy' },
		{ href: '/proxies', labelKey: 'nav.proxies', icon: 'proxies' },
		{ href: '/dns', labelKey: 'nav.dns', icon: 'globe' },
		{ href: '/events', labelKey: 'nav.events', icon: 'events' },
		{ href: '/settings', labelKey: 'nav.settings', icon: 'settings' }
	] as const;

	function isActive(href: string, pathname: string): boolean {
		if (href === '/') return pathname === '/';
		return pathname.startsWith(href);
	}

	import type { DockerHealth } from '$lib/types';

	let sseConnection: SSEConnection | null = null;
	let sidebarOpen = $state(false);
	let dockerHealth = $state<DockerHealth | null>(null);
	let healthChecked = $state(false);
	let healthInterval: ReturnType<typeof setInterval> | null = null;
	let hintsExpanded = $state(false);

	const dockerConnected = $derived(dockerHealth?.connected ?? false);

	// Hide sidebar and chrome on the login page.
	const isLoginPage = $derived($page.url.pathname === '/login');

	// Apply theme reactively.
	$effect(() => {
		applyTheme($resolvedTheme);
	});

	// Listen for system theme changes when in "system" mode.
	$effect(() => {
		if (typeof window === 'undefined') return;
		const mq = window.matchMedia('(prefers-color-scheme: dark)');
		const handler = () => applyTheme($resolvedTheme);
		mq.addEventListener('change', handler);
		return () => mq.removeEventListener('change', handler);
	});

	// Close sidebar on route change (mobile).
	$effect(() => {
		void $page.url.pathname;
		sidebarOpen = false;
	});

	function logout() {
		clearAuth();
		sseConnection?.close();
		sseConnection = null;
		window.location.href = '/login';
	}

	// Start SSE and health polling when authenticated.
	// Uses $effect to react to route changes (e.g., after login navigation).
	$effect(() => {
		// Read pathname to re-run on navigation.
		void $page.url.pathname;

		if (!isAuthenticated() || sseConnection) return;

		sseConnection = connectGlobalEvents({
			onInstanceStatus(payload) {
				instanceStatusStore.update(payload);
			},
			onDeployStatus(payload) {
				instanceStatusStore.notifyDeploy(payload);
			}
		});

		// Poll Docker health every 30s.
		async function checkHealth() {
			try {
				const h = await api.getHealth();
				dockerHealth = h.docker;
			} catch {
				dockerHealth = { connected: false };
			}
			healthChecked = true;
		}
		checkHealth();
		healthInterval = setInterval(checkHealth, 30_000);
	});

	onDestroy(() => {
		sseConnection?.close();
		sseConnection = null;
		if (healthInterval) clearInterval(healthInterval);
	});
</script>

{#if isLoginPage}
	<!-- Login page: no sidebar, no chrome -->
	{@render children()}
{:else}
<div class="flex h-screen overflow-hidden bg-[var(--surface-page)]">
	<!-- Mobile overlay -->
	{#if sidebarOpen}
		<div
			class="fixed inset-0 z-40 bg-[var(--surface-overlay)] lg:hidden animate-fade-in"
			role="presentation"
			onclick={() => { sidebarOpen = false; }}
		></div>
	{/if}

	<!-- Sidebar -->
	<aside
		class="fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-[var(--border-primary)] bg-[var(--surface-sidebar)] transition-transform duration-300 lg:static lg:translate-x-0
			{sidebarOpen ? 'translate-x-0' : '-translate-x-full'}"
	>
		<!-- Logo -->
		<div class="flex h-16 items-center gap-2.5 border-b border-[var(--border-primary)] px-5">
			<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--color-brand-600)]">
				<svg class="h-4.5 w-4.5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
				</svg>
			</div>
			<span class="text-base font-bold text-[var(--text-primary)]">{$t('app.name')}</span>

			<!-- Close sidebar (mobile) -->
			<button
				class="ml-auto rounded-md p-1 text-[var(--text-tertiary)] hover:text-[var(--text-primary)] lg:hidden"
				onclick={() => { sidebarOpen = false; }}
				aria-label="Close sidebar"
			>
				<IconX size={20} />
			</button>
		</div>

		<!-- Navigation -->
		<nav class="flex-1 space-y-0.5 px-3 py-3">
			{#each navItems as item}
				{@const active = isActive(item.href, $page.url.pathname)}
				<a
					href={item.href}
					class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
						{active
							? 'bg-[var(--color-brand-50)] text-[var(--color-brand-700)] shadow-sm'
							: 'text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)]'}"
				>
					{#if item.icon === 'dashboard'}
						<IconDashboard size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'projects'}
						<IconProjects size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'deploy'}
						<IconDeploy size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'proxies'}
						<IconProxies size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'globe'}
						<IconGlobe size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'events'}
						<IconEvents size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'settings'}
						<IconSettings size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{/if}
					{$t(item.labelKey)}
					{#if active}
						<div class="ml-auto h-1.5 w-1.5 rounded-full bg-[var(--color-brand-600)]"></div>
					{/if}
				</a>
			{/each}
		</nav>

		<!-- Footer controls -->
		<div class="space-y-3 border-t border-[var(--border-primary)] px-4 py-3">
			{#if healthChecked}
				<div class="rounded-md {dockerConnected ? '' : 'bg-red-50 dark:bg-red-950/30'}">
					<button
						type="button"
						class="flex w-full items-center gap-2 px-2 py-1.5 text-xs {dockerConnected ? 'text-emerald-600' : 'text-red-500 cursor-pointer'}"
						onclick={() => { if (!dockerConnected) hintsExpanded = !hintsExpanded; }}
						disabled={dockerConnected}
					>
						<span class="relative flex h-2 w-2">
							{#if dockerConnected}
								<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-50"></span>
							{/if}
							<span class="relative inline-flex h-2 w-2 rounded-full {dockerConnected ? 'bg-emerald-500' : 'bg-red-500'}"></span>
						</span>
						<span class="flex-1 text-left">Docker {dockerConnected ? $t('health.connected') : $t('health.disconnected')}</span>
						{#if !dockerConnected}
							<svg class="h-3 w-3 transition-transform {hintsExpanded ? 'rotate-180' : ''}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
						{/if}
					</button>
					{#if !dockerConnected && hintsExpanded && dockerHealth?.hints?.length}
						<div class="px-2 pb-2">
							<ul class="space-y-1 text-[11px] text-red-600 dark:text-red-400">
								{#each dockerHealth.hints as hint}
									<li class="flex gap-1.5">
										<span class="mt-0.5 shrink-0">•</span>
										<span>{hint}</span>
									</li>
								{/each}
							</ul>
							{#if dockerHealth.error}
								<details class="mt-1.5">
									<summary class="text-[10px] text-[var(--text-tertiary)] cursor-pointer">{$t('health.rawError')}</summary>
									<code class="mt-1 block text-[10px] text-[var(--text-tertiary)] break-all">{dockerHealth.error}</code>
								</details>
							{/if}
							<button
								type="button"
								class="mt-2 w-full rounded border border-red-300 dark:border-red-700 px-2 py-1 text-[11px] font-medium text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors"
								onclick={async () => {
									try {
										const h = await api.getHealth();
										dockerHealth = h.docker;
									} catch {
										dockerHealth = { connected: false };
									}
								}}
							>
								{$t('health.retryNow')}
							</button>
						</div>
					{/if}
				</div>
			{/if}
			<div class="flex items-center justify-between">
				<ThemeToggle />
				<LocaleSwitcher />
			</div>
			<div class="flex items-center justify-between">
				<p class="text-xs text-[var(--text-tertiary)]">{$t('app.name')} {$t('app.version')}</p>
				<button
					onclick={logout}
					class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-card-hover)] hover:text-[var(--color-danger)]"
					title={$t('nav.logout')}
				>
					<IconLogout size={14} />
					{$t('nav.logout')}
				</button>
			</div>
		</div>
	</aside>

	<!-- Main content -->
	<div class="flex flex-1 flex-col overflow-hidden">
		<!-- Top bar (mobile) -->
		<header class="flex h-14 items-center gap-3 border-b border-[var(--border-primary)] bg-[var(--surface-sidebar)] px-4 lg:hidden">
			<button
				class="rounded-md p-1.5 text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)] transition-colors"
				onclick={() => { sidebarOpen = true; }}
				aria-label="Open sidebar"
			>
				<IconMenu size={22} />
			</button>
			<div class="flex h-7 w-7 items-center justify-center rounded-lg bg-[var(--color-brand-600)]">
				<svg class="h-3.5 w-3.5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
				</svg>
			</div>
			<span class="text-sm font-bold text-[var(--text-primary)]">{$t('app.name')}</span>
		</header>

		<!-- Page content -->
		<main class="flex-1 overflow-y-auto">
			<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8">
				{@render children()}
			</div>
		</main>
	</div>
</div>
{/if}

<Toast />
