<script lang="ts">
	import '../app.css';
	import { page } from '$app/state';
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';
	import { fade } from 'svelte/transition';
	import { api } from '$lib/api';
	import { getAuth, loadUser, logout } from '$lib/auth.svelte';
	import { t, initLocale, getLocale, setLocale, type Locale } from '$lib/i18n';
	import { getTheme, initTheme, setTheme, type Theme } from '$lib/theme.svelte';
	import Modal from '$lib/components/Modal.svelte';
	import MdiIcon from '$lib/components/MdiIcon.svelte';
	import Snackbar from '$lib/components/Snackbar.svelte';
	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';

	let { children } = $props();
	const auth = getAuth();
	const theme = getTheme();

	let showPasswordForm = $state(false);
	let pwdCurrent = $state('');
	let pwdNew = $state('');
	let pwdMsg = $state('');
	let pwdSuccess = $state(false);

	async function changePassword(e: SubmitEvent) {
		e.preventDefault(); pwdMsg = ''; pwdSuccess = false;
		try {
			await api('/auth/password', { method: 'PUT', body: JSON.stringify({ current_password: pwdCurrent, new_password: pwdNew }) });
			pwdMsg = t('common.passwordChanged');
			pwdSuccess = true;
			pwdCurrent = ''; pwdNew = '';
			snackSuccess(t('snack.passwordChanged'));
			setTimeout(() => { showPasswordForm = false; pwdMsg = ''; pwdSuccess = false; }, 2000);
		} catch (err: any) { pwdMsg = err.message; pwdSuccess = false; snackError(err.message); }
	}

	let collapsed = $state(false);

	const navItems = [
		{ href: '/', key: 'nav.dashboard', icon: 'mdiViewDashboard' },
		{ href: '/providers', key: 'nav.providers', icon: 'mdiServer' },
		{ href: '/trackers', key: 'nav.trackers', icon: 'mdiRadar' },
		{ href: '/tracking-configs', key: 'nav.trackingConfigs', icon: 'mdiCog' },
		{ href: '/template-configs', key: 'nav.templateConfigs', icon: 'mdiFileDocumentEdit' },
		{ href: '/telegram-bots', key: 'nav.telegramBots', icon: 'mdiRobot' },
		{ href: '/targets', key: 'nav.targets', icon: 'mdiTarget' },
	];

	const isAuthPage = $derived(
		page.url.pathname === '/login' || page.url.pathname === '/setup'
	);

	onMount(async () => {
		initLocale();
		initTheme();
		if (typeof localStorage !== 'undefined') {
			collapsed = localStorage.getItem('sidebar_collapsed') === 'true';
		}
		await loadUser();
		if (!auth.user && !isAuthPage) {
			goto('/login');
		}
	});

	function cycleTheme() {
		const order: Theme[] = ['light', 'dark', 'system'];
		const idx = order.indexOf(theme.current);
		setTheme(order[(idx + 1) % order.length]);
	}

	function toggleLocale() {
		setLocale(getLocale() === 'en' ? 'ru' : 'en');
	}

	function toggleSidebar() {
		collapsed = !collapsed;
		if (typeof localStorage !== 'undefined') {
			localStorage.setItem('sidebar_collapsed', String(collapsed));
		}
	}

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

{#if isAuthPage}
	{@render children()}
{:else if auth.loading}
	<div class="min-h-screen flex items-center justify-center">
		<div class="flex items-center gap-3">
			<div class="w-5 h-5 rounded-full border-2 border-[var(--color-primary)] border-t-transparent animate-spin"></div>
			<p class="text-sm text-[var(--color-muted-foreground)]">{t('common.loading')}</p>
		</div>
	</div>
{:else if auth.user}
	<div class="flex h-screen">
		<!-- Sidebar -->
		<aside
			class="sidebar {collapsed ? 'w-[3.75rem]' : 'w-[15rem]'} flex flex-col max-md:hidden"
			style="background: var(--color-sidebar); border-right: 1px solid var(--color-border); transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);"
		>
			<!-- Header -->
			<div class="flex items-center {collapsed ? 'justify-center p-2.5' : 'justify-between px-5 py-4'}" style="border-bottom: 1px solid var(--color-border);">
				{#if !collapsed}
					<div class="animate-fade-slide-in">
						<h1 class="text-base font-semibold tracking-tight" style="color: var(--color-foreground);">
							<span style="color: var(--color-primary);">Notify</span> Bridge
						</h1>
						<p class="text-[0.7rem] text-[var(--color-muted-foreground)] mt-0.5 tracking-wide uppercase">{t('app.tagline')}</p>
					</div>
				{/if}
				<button onclick={toggleSidebar}
					class="flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200"
					style="color: var(--color-muted-foreground); background: transparent;"
					onmouseenter={(e) => { e.currentTarget.style.background = 'var(--color-muted)'; e.currentTarget.style.color = 'var(--color-foreground)'; }}
					onmouseleave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--color-muted-foreground)'; }}
					title={collapsed ? t('common.expand') : t('common.collapse')}>
					<MdiIcon name={collapsed ? 'mdiChevronRight' : 'mdiChevronLeft'} size={18} />
				</button>
			</div>

			<!-- Nav -->
			<nav class="flex-1 p-2 space-y-0.5 overflow-y-auto">
				{#each navItems as item}
					<a
						href={item.href}
						class="nav-item group flex items-center gap-2.5 {collapsed ? 'justify-center px-2' : 'px-3'} py-2 rounded-lg text-sm transition-all duration-200 relative"
						style="color: {isActive(item.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'}; background: {isActive(item.href) ? 'var(--color-sidebar-active)' : 'transparent'}; font-weight: {isActive(item.href) ? '500' : '400'};"
						onmouseenter={(e) => { if (!isActive(item.href)) { e.currentTarget.style.background = 'var(--color-muted)'; e.currentTarget.style.color = 'var(--color-foreground)'; } }}
						onmouseleave={(e) => { if (!isActive(item.href)) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--color-muted-foreground)'; } }}
						title={collapsed ? t(item.key) : ''}
					>
						{#if isActive(item.href)}
							<div class="active-indicator" style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); box-shadow: 0 0 8px var(--color-glow-strong);"></div>
						{/if}
						<MdiIcon name={item.icon} size={18} />
						{#if !collapsed}<span class="truncate">{t(item.key)}</span>{/if}
					</a>
				{/each}
				{#if auth.isAdmin}
					<a
						href="/users"
						class="nav-item group flex items-center gap-2.5 {collapsed ? 'justify-center px-2' : 'px-3'} py-2 rounded-lg text-sm transition-all duration-200 relative"
						style="color: {isActive('/users') ? 'var(--color-primary)' : 'var(--color-muted-foreground)'}; background: {isActive('/users') ? 'var(--color-sidebar-active)' : 'transparent'}; font-weight: {isActive('/users') ? '500' : '400'};"
						onmouseenter={(e) => { if (!isActive('/users')) { e.currentTarget.style.background = 'var(--color-muted)'; e.currentTarget.style.color = 'var(--color-foreground)'; } }}
						onmouseleave={(e) => { if (!isActive('/users')) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--color-muted-foreground)'; } }}
						title={collapsed ? t('nav.users') : ''}
					>
						{#if isActive('/users')}
							<div style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); box-shadow: 0 0 8px var(--color-glow-strong);"></div>
						{/if}
						<MdiIcon name="mdiAccountGroup" size={18} />
						{#if !collapsed}<span class="truncate">{t('nav.users')}</span>{/if}
					</a>
				{/if}
			</nav>

			<!-- Footer -->
			<div style="border-top: 1px solid var(--color-border);">
				<!-- Theme & Language -->
				<div class="flex {collapsed ? 'flex-col items-center gap-1 p-2' : 'gap-1.5 px-4 py-2.5'}">
					<button onclick={toggleLocale}
						class="flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs font-medium transition-all duration-200"
						style="background: var(--color-muted); color: var(--color-muted-foreground);"
						onmouseenter={(e) => { e.currentTarget.style.color = 'var(--color-foreground)'; e.currentTarget.style.boxShadow = '0 0 8px var(--color-glow)'; }}
						onmouseleave={(e) => { e.currentTarget.style.color = 'var(--color-muted-foreground)'; e.currentTarget.style.boxShadow = 'none'; }}
						title={t('common.language')}>
						{getLocale().toUpperCase()}
					</button>
					<button onclick={cycleTheme}
						class="flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs transition-all duration-200"
						style="background: var(--color-muted); color: var(--color-muted-foreground);"
						onmouseenter={(e) => { e.currentTarget.style.color = 'var(--color-foreground)'; e.currentTarget.style.boxShadow = '0 0 8px var(--color-glow)'; }}
						onmouseleave={(e) => { e.currentTarget.style.color = 'var(--color-muted-foreground)'; e.currentTarget.style.boxShadow = 'none'; }}
						title={t('common.theme')}>
						<MdiIcon name={theme.resolved === 'dark' ? 'mdiWeatherNight' : theme.current === 'system' ? 'mdiDesktopTowerMonitor' : 'mdiWeatherSunny'} size={14} />
					</button>
				</div>

				<!-- User info -->
				<div class="p-2.5" style="border-top: 1px solid var(--color-border);">
					{#if collapsed}
						<button onclick={logout}
							class="w-full flex justify-center py-2 rounded-lg transition-all duration-200"
							style="color: var(--color-muted-foreground);"
							onmouseenter={(e) => { e.currentTarget.style.color = 'var(--color-foreground)'; e.currentTarget.style.background = 'var(--color-muted)'; }}
							onmouseleave={(e) => { e.currentTarget.style.color = 'var(--color-muted-foreground)'; e.currentTarget.style.background = 'transparent'; }}
							title={t('nav.logout')}>
							<MdiIcon name="mdiLogout" size={16} />
						</button>
					{:else}
						<div class="px-1.5">
							<div class="flex items-center justify-between">
								<div class="flex items-center gap-2.5">
									<div class="w-7 h-7 rounded-full flex items-center justify-center text-[0.7rem] font-semibold"
										style="background: var(--color-primary); color: var(--color-primary-foreground);">
										{auth.user.username[0].toUpperCase()}
									</div>
									<div>
										<p class="text-sm font-medium">{auth.user.username}</p>
										<p class="text-[0.65rem] tracking-wide uppercase" style="color: var(--color-muted-foreground);">{auth.user.role}</p>
									</div>
								</div>
								<button onclick={logout}
									class="p-1.5 rounded-lg transition-all duration-200"
									style="color: var(--color-muted-foreground);"
									onmouseenter={(e) => { e.currentTarget.style.color = 'var(--color-foreground)'; e.currentTarget.style.background = 'var(--color-muted)'; }}
									onmouseleave={(e) => { e.currentTarget.style.color = 'var(--color-muted-foreground)'; e.currentTarget.style.background = 'transparent'; }}
									title={t('nav.logout')}>
									<MdiIcon name="mdiLogout" size={15} />
								</button>
							</div>
							<button onclick={() => showPasswordForm = true}
								class="text-[0.7rem] mt-1.5 transition-colors duration-200 flex items-center gap-1"
								style="color: var(--color-muted-foreground);"
								onmouseenter={(e) => { e.currentTarget.style.color = 'var(--color-primary)'; }}
								onmouseleave={(e) => { e.currentTarget.style.color = 'var(--color-muted-foreground)'; }}>
								<MdiIcon name="mdiKeyVariant" size={12} />
								{t('common.changePassword')}
							</button>
						</div>
					{/if}
				</div>
			</div>
		</aside>

		<!-- Mobile bottom nav -->
		<nav class="mobile-nav" style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--color-sidebar); border-top: 1px solid var(--color-border); display: none; justify-content: space-around; padding: 0.375rem 0; backdrop-filter: blur(12px);">
			{#each navItems.slice(0, 5) as item}
				<a href={item.href}
					class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
					style="color: {isActive(item.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'};">
					<MdiIcon name={item.icon} size={20} />
				</a>
			{/each}
			<button onclick={logout}
				class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs" style="color: var(--color-muted-foreground);">
				<MdiIcon name="mdiLogout" size={20} />
			</button>
		</nav>

		<!-- Main content -->
		<main class="flex-1 overflow-auto pb-16 md:pb-0">
			{#key page.url.pathname}
				<div class="max-w-5xl mx-auto p-4 md:p-8" in:fade={{ duration: 200, delay: 50 }}>
					{@render children()}
				</div>
			{/key}
		</main>
	</div>
{:else}
	<div class="min-h-screen flex items-center justify-center">
		<div class="flex items-center gap-3">
			<div class="w-5 h-5 rounded-full border-2 border-[var(--color-primary)] border-t-transparent animate-spin"></div>
			<p class="text-sm text-[var(--color-muted-foreground)]">{t('common.loading')}</p>
		</div>
	</div>
{/if}

<!-- Password change modal -->
<Modal open={showPasswordForm} title={t('common.changePassword')} onclose={() => { showPasswordForm = false; pwdMsg = ''; pwdSuccess = false; }}>
	<form onsubmit={changePassword} class="space-y-3">
		<div>
			<label for="pwd-current" class="block text-sm font-medium mb-1">{t('common.currentPassword')}</label>
			<input id="pwd-current" type="password" bind:value={pwdCurrent} required
				class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
		</div>
		<div>
			<label for="pwd-new" class="block text-sm font-medium mb-1">{t('common.newPassword')}</label>
			<input id="pwd-new" type="password" bind:value={pwdNew} required
				class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
		</div>
		{#if pwdMsg}
			<p class="text-sm" style="color: var({pwdSuccess ? '--color-success-fg' : '--color-error-fg'});">{pwdMsg}</p>
		{/if}
		<button type="submit"
			class="w-full py-2.5 rounded-lg text-sm font-medium transition-all duration-200"
			style="background: var(--color-primary); color: var(--color-primary-foreground);"
			onmouseenter={(e) => { e.currentTarget.style.boxShadow = '0 0 16px var(--color-glow-strong)'; }}
			onmouseleave={(e) => { e.currentTarget.style.boxShadow = 'none'; }}>
			{t('common.save')}
		</button>
	</form>
</Modal>

<Snackbar />

<style>
	@media (max-width: 767px) {
		.mobile-nav { display: flex !important; }
	}
</style>
