<script lang="ts">
	import { useQuery } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { onMount } from 'svelte';
	import { goto, replaceState } from '$app/navigation';
	import { afterNavigate } from '$app/navigation';
	import { resolve } from '$app/paths';
	import { UserPlus, Mail, Clock, Award, TrendingUp, Zap, Users, Database } from 'lucide-svelte';
	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
	import { loginModalStore } from '$lib/stores/loginModal.svelte';

	// Queries para dados do dashboard
	const statsQuery = useQuery(api.dashboard.getStats, {});
	const activityQuery = useQuery(api.dashboard.getRecentActivity, {});

	// Queries para monitoramento em tempo real
	const statusSistemaQuery = useQuery(api.monitoramento.getStatusSistema, {});
	const atividadeBDQuery = useQuery(api.monitoramento.getAtividadeBancoDados, {});
	const distribuicaoQuery = useQuery(api.monitoramento.getDistribuicaoRequisicoes, {});

	// Estado para animações
	let currentTime = $state(new Date());
	let showAlert = $state(false);
	let alertType = $state<'auth_required' | 'access_denied' | 'invalid_token' | null>(null);
	let redirectRoute = $state('');

	// Limpar URL após navegação estar completa
	afterNavigate(({ to }) => {
		if (to?.url.searchParams.has('error')) {
			const error = to.url.searchParams.get('error');
			const route = to.url.searchParams.get('route') || to.url.searchParams.get('redirect') || '';

			if (error) {
				alertType = error as typeof alertType;
				redirectRoute = route;
				showAlert = true;

				// Se for erro de autenticação, abrir modal de login automaticamente
				if (error === 'auth_required') {
					loginModalStore.open(route || to.url.pathname);
				}

				// Limpar URL usando SvelteKit (após router estar inicializado)
				try {
					// eslint-disable-next-line @typescript-eslint/no-explicit-any
					replaceState(resolve(to.url.pathname as any), {});
				} catch {
					// Se ainda não estiver pronto, usar goto com replaceState
					// eslint-disable-next-line @typescript-eslint/no-explicit-any
					goto(resolve(to.url.pathname as any), { replaceState: true, noScroll: true });
				}

				// Auto-fechar após 10 segundos
				setTimeout(() => {
					showAlert = false;
				}, 10000);
			}
		}
	});

	onMount(() => {
		// Verificar se há erro na URL ao carregar a página
		const urlParams = new URLSearchParams(window.location.search);
		if (urlParams.has('error')) {
			const error = urlParams.get('error');
			const route = urlParams.get('route') || urlParams.get('redirect') || '';

			if (error === 'auth_required') {
				loginModalStore.open(route || window.location.pathname);
			}
		}

		// Atualizar relógio a cada segundo
		const interval = setInterval(() => {
			currentTime = new Date();
		}, 1000);

		return () => clearInterval(interval);
	});

	function closeAlert() {
		showAlert = false;
	}

	function getAlertMessage(): { title: string; message: string; icon: string } {
		switch (alertType) {
			case 'auth_required':
				return {
					title: 'Autenticação Necessária',
					message: `Para acessar "${redirectRoute}", você precisa fazer login no sistema.`,
					icon: '🔐'
				};
			case 'access_denied':
				return {
					title: 'Acesso Negado',
					message: `Você não tem permissão para acessar "${redirectRoute}". Entre em contato com a equipe de TI para solicitar acesso.`,
					icon: '⛔'
				};
			case 'invalid_token':
				return {
					title: 'Sessão Expirada',
					message: 'Sua sessão expirou. Por favor, faça login novamente.',
					icon: '⏰'
				};
			default:
				return {
					title: 'Aviso',
					message: 'Ocorreu um erro. Tente novamente.',
					icon: '⚠️'
				};
		}
	}

	// Função para formatar números
	function formatNumber(num: number): string {
		return new Intl.NumberFormat('pt-BR').format(num);
	}

	// Função para calcular porcentagem
	function calcPercentage(value: number, total: number): number {
		if (total === 0) return 0;
		return Math.round((value / total) * 100);
	}

	// Obter saudação baseada na hora
	function getSaudacao(): string {
		const hora = currentTime.getHours();
		if (hora < 12) return 'Bom dia';
		if (hora < 18) return 'Boa tarde';
		return 'Boa noite';
	}
</script>

<ProtectedRoute>
	<main class="container mx-auto px-4 py-4">
		<!-- Alerta de Acesso Negado / Autenticação -->
		{#if showAlert}
			{@const alertData = getAlertMessage()}
			<div
				class="alert {alertType === 'access_denied'
					? 'alert-error'
					: alertType === 'auth_required'
						? 'alert-warning'
						: 'alert-info'} mb-6 animate-pulse shadow-xl"
			>
				<div class="flex items-start gap-4">
					<span class="text-4xl">{alertData.icon}</span>
					<div class="flex-1">
						<h3 class="mb-1 text-lg font-bold">{alertData.title}</h3>
						<p class="text-sm">{alertData.message}</p>
						{#if alertType === 'access_denied'}
							<div class="mt-3 flex gap-2">
								<a href={resolve('/abrir-chamado')} class="btn btn-sm btn-primary">
									<UserPlus class="h-4 w-4" strokeWidth={2} />
									Abrir Chamado
								</a>
								<a href={resolve('/ti')} class="btn btn-sm btn-ghost">
									<Mail class="h-4 w-4" strokeWidth={2} />
									Contatar TI
								</a>
							</div>
						{/if}
					</div>
					<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={closeAlert}
						>✕</button
					>
				</div>
			</div>
		{/if}

		<!-- Cabeçalho com Boas-vindas -->
		<div class="from-primary/20 to-secondary/20 mb-6 rounded-2xl bg-linear-to-r p-8 shadow-lg">
			<div class="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
				<div>
					<h1 class="text-primary mb-2 text-4xl font-bold">
						{getSaudacao()}! 👋
					</h1>
					<p class="text-base-content/80 text-xl">
						Bem-vindo ao SGSE - Sistema de Gerenciamento de Secretaria
					</p>
					<p class="text-base-content/60 mt-2 text-sm">
						{currentTime.toLocaleDateString('pt-BR', {
							weekday: 'long',
							year: 'numeric',
							month: 'long',
							day: 'numeric'
						})}
						-
						{currentTime.toLocaleTimeString('pt-BR')}
					</p>
				</div>
				<div class="flex gap-2">
					<div class="badge badge-primary badge-lg">Sistema Online</div>
					<div class="badge badge-success badge-lg">Atualizado</div>
				</div>
			</div>
		</div>

		<!-- Cards de Estatísticas Principais -->
		{#if statsQuery.isLoading}
			<div class="flex items-center justify-center py-12">
				<span class="loading loading-spinner loading-lg text-primary"></span>
			</div>
		{:else if statsQuery.data}
			<div class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
				<!-- Total de Funcionários -->
				<div
					class="card transform bg-linear-to-br from-blue-500/10 to-blue-600/20 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
				>
					<div class="card-body">
						<div class="flex items-center justify-between">
							<div>
								<p class="text-base-content/70 text-sm font-semibold">Total de Funcionários</p>
								<h2 class="text-primary mt-2 text-4xl font-bold">
									{formatNumber(statsQuery.data.totalFuncionarios)}
								</h2>
								<p class="text-base-content/60 mt-1 text-xs">
									{statsQuery.data.funcionariosAtivos} ativos
								</p>
							</div>
							<div
								class="radial-progress text-primary"
								style="--value:{calcPercentage(
									statsQuery.data.funcionariosAtivos,
									statsQuery.data.totalFuncionarios
								)}; --size:4rem;"
							>
								<span class="text-xs font-bold"
									>{calcPercentage(
										statsQuery.data.funcionariosAtivos,
										statsQuery.data.totalFuncionarios
									)}%</span
								>
							</div>
						</div>
					</div>
				</div>

				<!-- Solicitações Pendentes -->
				<div
					class="card transform bg-linear-to-br from-yellow-500/10 to-yellow-600/20 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
				>
					<div class="card-body">
						<div class="flex items-center justify-between">
							<div>
								<p class="text-base-content/70 text-sm font-semibold">Solicitações Pendentes</p>
								<h2 class="text-warning mt-2 text-4xl font-bold">4</h2>
								<p class="text-base-content/60 mt-1 text-xs">de 5 total</p>
							</div>
							<div class="bg-warning/20 rounded-full p-4">
								<Clock class="text-warning h-8 w-8" strokeWidth={2} />
							</div>
						</div>
					</div>
				</div>

				<!-- Símbolos Cadastrados -->
				<div
					class="card transform bg-linear-to-br from-green-500/10 to-green-600/20 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
				>
					<div class="card-body">
						<div class="flex items-center justify-between">
							<div>
								<p class="text-base-content/70 text-sm font-semibold">Símbolos Cadastrados</p>
								<h2 class="text-success mt-2 text-4xl font-bold">
									{formatNumber(statsQuery.data.totalSimbolos)}
								</h2>
								<p class="text-base-content/60 mt-1 text-xs">
									{statsQuery.data.cargoComissionado} CC / {statsQuery.data.funcaoGratificada} FG
								</p>
							</div>
							<div class="bg-success/20 rounded-full p-4">
								<Award class="text-success h-8 w-8" strokeWidth={2} />
							</div>
						</div>
					</div>
				</div>

				<!-- Atividade 24h -->
				{#if activityQuery.data}
					<div
						class="card transform bg-linear-to-br from-purple-500/10 to-purple-600/20 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
					>
						<div class="card-body">
							<div class="flex items-center justify-between">
								<div>
									<p class="text-base-content/70 text-sm font-semibold">Atividade (24h)</p>
									<p class="text-base-content/60 mt-1 text-xs">
										{activityQuery.data.funcionariosCadastrados24h} cadastros
									</p>
								</div>
								<div class="bg-secondary/20 rounded-full p-4">
									<TrendingUp class="text-secondary h-8 w-8" strokeWidth={2} />
								</div>
							</div>
						</div>
					</div>
				{/if}
			</div>

			<!-- Monitoramento em Tempo Real -->
			{#if statusSistemaQuery?.data}
				{@const status = statusSistemaQuery.data}
				{@const atividade = atividadeBDQuery?.data || {
					historico: Array.from({ length: 30 }, () => ({ entradas: 0, saidas: 0 }))
				}}
				{@const distribuicao = distribuicaoQuery?.data || {
					queries: 0,
					mutations: 0,
					leituras: 0,
					escritas: 0
				}}
				{@const maxAtividade = atividade.historico && atividade.historico.length > 0
					? Math.max(1, ...atividade.historico.map((p) => Math.max(p.entradas || 0, p.saidas || 0)))
					: 1}

				<div class="mb-6">
					<div class="mb-4 flex items-center gap-3">
						<div class="bg-error/10 animate-pulse rounded-lg p-2">
							<Zap class="text-error h-6 w-6" strokeWidth={2} />
						</div>
						<div>
							<h2 class="text-base-content text-2xl font-bold">Monitoramento em Tempo Real</h2>
							<p class="text-base-content/60 text-sm">
								Atualizado a cada segundo • {new Date(status.ultimaAtualizacao).toLocaleTimeString(
									'pt-BR'
								)}
							</p>
						</div>
						<div class="badge badge-error badge-lg ml-auto gap-2">
							<span
								class="bg-error absolute inline-flex h-3 w-3 animate-ping rounded-full opacity-75"
							></span>
							<span class="bg-error relative inline-flex h-3 w-3 rounded-full"></span>
							LIVE
						</div>
					</div>

					<!-- Cards de Status do Sistema -->
					<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
						<!-- Usuários Online -->
						<div
							class="card from-primary/10 to-primary/5 border-primary/20 border-2 bg-linear-to-br shadow-lg"
						>
							<div class="card-body p-4">
								<div class="flex items-center justify-between">
									<div>
										<p class="text-base-content/70 text-xs font-semibold uppercase">
											Usuários Online
										</p>
										<h3 class="text-primary mt-1 text-3xl font-bold">
											{status.usuariosOnline}
										</h3>
										<p class="text-base-content/60 mt-1 text-xs">sessões ativas</p>
									</div>
									<div class="bg-primary/20 rounded-full p-3">
										<Users class="text-primary h-6 w-6" strokeWidth={2} />
									</div>
								</div>
							</div>
						</div>

						<!-- Total de Registros -->
						<div
							class="card from-success/10 to-success/5 border-success/20 border-2 bg-linear-to-br shadow-lg"
						>
							<div class="card-body p-4">
								<div class="flex items-center justify-between">
									<div>
										<p class="text-base-content/70 text-xs font-semibold uppercase">
											Total Registros
										</p>
										<h3 class="text-success mt-1 text-3xl font-bold">
											{status.totalRegistros.toLocaleString('pt-BR')}
										</h3>
										<p class="text-base-content/60 mt-1 text-xs">no banco de dados</p>
									</div>
									<div class="bg-success/20 rounded-full p-3">
										<Database class="text-success h-6 w-6" strokeWidth={2} />
									</div>
								</div>
							</div>
						</div>

						<!-- Tempo Médio de Resposta -->
						<div
							class="card from-info/10 to-info/5 border-info/20 border-2 bg-linear-to-br shadow-lg"
						>
							<div class="card-body p-4">
								<div class="flex items-center justify-between">
									<div>
										<p class="text-base-content/70 text-xs font-semibold uppercase">
											Tempo Resposta
										</p>
										<h3 class="text-info mt-1 text-3xl font-bold">
											{status.tempoMedioResposta}ms
										</h3>
										<p class="text-base-content/60 mt-1 text-xs">média atual</p>
									</div>
									<div class="bg-info/20 rounded-full p-3">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											class="text-info h-6 w-6"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M13 10V3L4 14h7v7l9-11h-7z"
											/>
										</svg>
									</div>
								</div>
							</div>
						</div>

						<!-- Uso de Sistema -->
						<div
							class="card from-warning/10 to-warning/5 border-warning/20 border-2 bg-linear-to-br shadow-lg"
						>
							<div class="card-body p-4">
								<div>
									<p class="text-base-content/70 mb-2 text-xs font-semibold uppercase">
										Uso do Sistema
									</p>
									<div class="space-y-2">
										<div>
											<div class="mb-1 flex justify-between text-xs">
												<span class="text-base-content/70">CPU</span>
												<span class="text-warning font-bold">{status.cpuUsada}%</span>
											</div>
											<progress
												class="progress progress-warning w-full"
												value={status.cpuUsada}
												max="100"
											></progress>
										</div>
										<div>
											<div class="mb-1 flex justify-between text-xs">
												<span class="text-base-content/70">Memória</span>
												<span class="text-warning font-bold">{status.memoriaUsada}%</span>
											</div>
											<progress
												class="progress progress-warning w-full"
												value={status.memoriaUsada}
												max="100"
											></progress>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Gráfico de Atividade do Banco de Dados em Tempo Real -->
					<div class="card bg-base-100 mb-6 shadow-xl">
						<div class="card-body">
							<div class="mb-4 flex items-center justify-between">
								<div>
									<h3 class="text-base-content text-xl font-bold">Atividade do Banco de Dados</h3>
									<p class="text-base-content/60 text-sm">
										Entradas e saídas em tempo real (último minuto)
									</p>
								</div>
								<div class="badge badge-success gap-2">
									<span class="loading loading-spinner loading-xs"></span>
									Atualizando
								</div>
							</div>

							<div class="relative h-64">
								<!-- Eixo Y -->
								<div
									class="absolute top-0 bottom-8 left-0 flex w-10 flex-col justify-between pr-2 text-right"
								>
									{#each [10, 8, 6, 4, 2, 0] as val (val)}
										<span class="text-base-content/60 text-xs">{val}</span>
									{/each}
								</div>

								<!-- Grid e Barras -->
								<div class="absolute top-0 right-4 bottom-8 left-12">
									<!-- Grid horizontal -->
									{#each [0, 1, 2, 3, 4, 5] as i (i)}
										<div
											class="border-base-content/10 absolute right-0 left-0 border-t"
											style="top: {(i / 5) * 100}%;"
										></div>
									{/each}

									<!-- Barras de atividade -->
									<div class="flex h-full items-end justify-around gap-1">
										{#each atividade.historico || [] as ponto, idx (idx)}
											{@const entradas = ponto?.entradas || 0}
											{@const saidas = ponto?.saidas || 0}
											<div class="group relative flex h-full flex-1 items-end gap-0.5">
												<!-- Entradas (verde) -->
												<div
													class="from-success to-success/70 flex-1 rounded-t bg-linear-to-t transition-all duration-300 hover:scale-110"
													style="height: {(entradas / maxAtividade) * 100}%; min-height: 2px;"
													title="Entradas: {entradas}"
												></div>
												<!-- Saídas (vermelho) -->
												<div
													class="from-error to-error/70 flex-1 rounded-t bg-linear-to-t transition-all duration-300 hover:scale-110"
													style="height: {(saidas / maxAtividade) * 100}%; min-height: 2px;"
													title="Saídas: {saidas}"
												></div>

												<!-- Tooltip no hover -->
												<div
													class="bg-base-300 text-base-content absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 rounded px-2 py-1 text-xs whitespace-nowrap opacity-0 shadow-lg transition-opacity group-hover:opacity-100"
												>
													<div>↑ {entradas} entradas</div>
													<div>↓ {saidas} saídas</div>
												</div>
											</div>
										{/each}
									</div>
								</div>

								<!-- Linha do eixo X -->
								<div
									class="border-base-content/30 absolute right-4 bottom-8 left-12 border-t-2"
								></div>

								<!-- Labels do eixo X -->
								<div
									class="text-base-content/60 absolute right-4 bottom-0 left-12 flex justify-between text-xs"
								>
									<span>-60s</span>
									<span>-30s</span>
									<span>agora</span>
								</div>
							</div>

							<!-- Legenda -->
							<div class="border-base-300 mt-4 flex justify-center gap-6 border-t pt-4">
								<div class="flex items-center gap-2">
									<div class="from-success to-success/70 h-4 w-4 rounded bg-linear-to-t"></div>
									<span class="text-base-content/70 text-sm">Entradas no BD</span>
								</div>
								<div class="flex items-center gap-2">
									<div class="from-error to-error/70 h-4 w-4 rounded bg-linear-to-t"></div>
									<span class="text-base-content/70 text-sm">Saídas do BD</span>
								</div>
							</div>
						</div>
					</div>

					<!-- Distribuição de Requisições -->
					<div class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2">
						<div class="card bg-base-100 shadow-xl">
							<div class="card-body">
								<h3 class="text-base-content mb-4 text-lg font-bold">Tipos de Operações</h3>
								<div class="space-y-3">
									<div>
										<div class="mb-1 flex justify-between text-sm">
											<span>Queries (Leituras)</span>
											<span class="text-primary font-bold">{distribuicao?.queries ?? 0}</span>
										</div>
										<progress
											class="progress progress-primary w-full"
											value={distribuicao?.queries ?? 0}
											max={Math.max((distribuicao?.queries ?? 0) + (distribuicao?.mutations ?? 0), 1)}
										></progress>
									</div>
									<div>
										<div class="mb-1 flex justify-between text-sm">
											<span>Mutations (Escritas)</span>
											<span class="text-secondary font-bold">{distribuicao?.mutations ?? 0}</span>
										</div>
										<progress
											class="progress progress-secondary w-full"
											value={distribuicao?.mutations ?? 0}
											max={Math.max((distribuicao?.queries ?? 0) + (distribuicao?.mutations ?? 0), 1)}
										></progress>
									</div>
								</div>
							</div>
						</div>

						<div class="card bg-base-100 shadow-xl">
							<div class="card-body">
								<h3 class="text-base-content mb-4 text-lg font-bold">Operações no Banco</h3>
								<div class="space-y-3">
									<div>
										<div class="mb-1 flex justify-between text-sm">
											<span>Leituras</span>
											<span class="text-info font-bold">{distribuicao?.leituras ?? 0}</span>
										</div>
										<progress
											class="progress progress-info w-full"
											value={distribuicao?.leituras ?? 0}
											max={Math.max((distribuicao?.leituras ?? 0) + (distribuicao?.escritas ?? 0), 1)}
										></progress>
									</div>
									<div>
										<div class="mb-1 flex justify-between text-sm">
											<span>Escritas</span>
											<span class="text-warning font-bold">{distribuicao?.escritas ?? 0}</span>
										</div>
										<progress
											class="progress progress-warning w-full"
											value={distribuicao?.escritas ?? 0}
											max={Math.max((distribuicao?.leituras ?? 0) + (distribuicao?.escritas ?? 0), 1)}
										></progress>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			{/if}

			<!-- Cards de Status -->
			<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
				<div class="card bg-base-100 shadow-xl">
					<div class="card-body">
						<h3 class="card-title text-lg">Status do Sistema</h3>
						<div class="mt-4 space-y-2">
							<div class="flex items-center justify-between">
								<span class="text-sm">Banco de Dados</span>
								<span class="badge badge-success">Online</span>
							</div>
							<div class="flex items-center justify-between">
								<span class="text-sm">API</span>
								<span class="badge badge-success">Operacional</span>
							</div>
							<div class="flex items-center justify-between">
								<span class="text-sm">Backup</span>
								<span class="badge badge-success">Atualizado</span>
							</div>
						</div>
					</div>
				</div>

				<div class="card bg-base-100 shadow-xl">
					<div class="card-body">
						<h3 class="card-title text-lg">Acesso Rápido</h3>
						<div class="mt-4 space-y-2">
							<a
								href={resolve('/recursos-humanos/funcionarios/cadastro')}
								class="btn btn-sm btn-primary w-full"
							>
								Novo Funcionário
							</a>
							<a
								href={resolve('/recursos-humanos/simbolos/cadastro')}
								class="btn btn-sm btn-primary w-full"
							>
								Novo Símbolo
							</a>
							<a href={resolve('/ti/painel-administrativo')} class="btn btn-sm btn-primary w-full">
								Painel Admin
							</a>
						</div>
					</div>
				</div>

				<div class="card bg-base-100 shadow-xl">
					<div class="card-body">
						<h3 class="card-title text-lg">Informações</h3>
						<div class="mt-4 space-y-2 text-sm">
							<p class="text-base-content/70">
								<strong>Versão:</strong> 1.0.0
							</p>
							<p class="text-base-content/70">
								<strong>Última Atualização:</strong>
								{new Date().toLocaleDateString('pt-BR')}
							</p>
							<p class="text-base-content/70">
								<strong>Suporte:</strong> TI SGSE
							</p>
						</div>
					</div>
				</div>
			</div>
		{:else}
			<!-- Mensagem de erro ou estado vazio -->
			<div class="alert alert-warning">
				<span>Não foi possível carregar os dados do dashboard.</span>
			</div>
		{/if}
	</main>
</ProtectedRoute>

<style>
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.card {
		animation: fadeIn 0.5s ease-out;
	}
</style>
