<script lang="ts">
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { resolve } from '$app/paths';
	import { format } from 'date-fns';
	import { ptBR } from 'date-fns/locale';
	import jsPDF from 'jspdf';
	import autoTable from 'jspdf-autotable';
	import Papa from 'papaparse';
	import logoGovPE from '$lib/assets/logo_governo_PE.png';
	import {
		FileText,
		Clipboard,
		LogIn,
		CheckCircle,
		XCircle,
		Download,
		Filter,
		ArrowLeft,
		Search,
		Calendar,
		User,
		X,
		Clock,
		Inbox,
		MapPin,
		Info,
		Mail
	} from 'lucide-svelte';

	let abaAtiva = $state<'atividades' | 'logins'>('atividades');
	let limite = $state(50);
	let mostrarFiltros = $state(false);
	let exportando = $state(false);
	const client = useConvexClient();

	// Filtros avançados
	let filtroDataInicio = $state<string>('');
	let filtroDataFim = $state<string>('');
	let filtroUsuario = $state<string>('');
	let filtroStatus = $state<'todos' | 'sucesso' | 'falha'>('todos');
	let filtroIP = $state<string>('');

	// Queries reativas do Convex - usar função para garantir reatividade do limite
	const atividadesQuery = useQuery(api.logsAtividades.listarAtividades, () => ({ limite }));
	const loginsQuery = useQuery(api.logsLogin.listarTodosLogins, () => ({ limite }));

	// Extrair dados das queries de forma robusta
	const atividadesRaw = $derived.by(() => {
		if (atividadesQuery === undefined || atividadesQuery === null) {
			return undefined;
		}
		if (typeof atividadesQuery === 'object' && Object.keys(atividadesQuery).length === 0) {
			return undefined;
		}
		if ('data' in atividadesQuery && atividadesQuery.data !== undefined) {
			return Array.isArray(atividadesQuery.data) ? atividadesQuery.data : undefined;
		}
		if (Array.isArray(atividadesQuery)) {
			return atividadesQuery;
		}
		return undefined;
	});

	const loginsRaw = $derived.by(() => {
		if (loginsQuery === undefined || loginsQuery === null) {
			return undefined;
		}
		if (typeof loginsQuery === 'object' && Object.keys(loginsQuery).length === 0) {
			return undefined;
		}
		if ('data' in loginsQuery && loginsQuery.data !== undefined) {
			return Array.isArray(loginsQuery.data) ? loginsQuery.data : undefined;
		}
		if (Array.isArray(loginsQuery)) {
			return loginsQuery;
		}
		return undefined;
	});

	// Aplicar filtros
	const atividades = $derived.by(() => {
		if (!atividadesRaw || !Array.isArray(atividadesRaw)) return [];
		let filtradas = [...atividadesRaw];

		if (filtroDataInicio) {
			const dataInicio = new Date(filtroDataInicio).getTime();
			filtradas = filtradas.filter((a) => a.timestamp >= dataInicio);
		}
		if (filtroDataFim) {
			const dataFim = new Date(filtroDataFim + 'T23:59:59').getTime();
			filtradas = filtradas.filter((a) => a.timestamp <= dataFim);
		}
		if (filtroUsuario) {
			const usuarioLower = filtroUsuario.toLowerCase();
			filtradas = filtradas.filter(
				(a) =>
					a.usuarioNome?.toLowerCase().includes(usuarioLower) ||
					a.usuarioMatricula?.toLowerCase().includes(usuarioLower)
			);
		}

		return filtradas;
	});

	const logins = $derived.by(() => {
		if (!loginsRaw || !Array.isArray(loginsRaw)) return [];
		let filtrados = [...loginsRaw];

		if (filtroDataInicio) {
			const dataInicio = new Date(filtroDataInicio).getTime();
			filtrados = filtrados.filter((l) => l.timestamp >= dataInicio);
		}
		if (filtroDataFim) {
			const dataFim = new Date(filtroDataFim + 'T23:59:59').getTime();
			filtrados = filtrados.filter((l) => l.timestamp <= dataFim);
		}
		if (filtroUsuario) {
			const usuarioLower = filtroUsuario.toLowerCase();
			filtrados = filtrados.filter((l) => {
				const nomeMatch = l.usuarioNome?.toLowerCase().includes(usuarioLower);
				const emailMatch = l.usuarioEmail?.toLowerCase().includes(usuarioLower);
				const matriculaMatch = l.matriculaOuEmail?.toLowerCase().includes(usuarioLower);
				return nomeMatch || emailMatch || matriculaMatch;
			});
		}
		if (filtroStatus !== 'todos') {
			filtrados = filtrados.filter((l) => (filtroStatus === 'sucesso' ? l.sucesso : !l.sucesso));
		}
		if (filtroIP) {
			filtrados = filtrados.filter((l) => l.ipAddress?.includes(filtroIP));
		}

		return filtrados;
	});

	function formatarData(timestamp: number) {
		return new Date(timestamp).toLocaleString('pt-BR', {
			day: '2-digit',
			month: '2-digit',
			year: 'numeric',
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
		});
	}

	function formatarLocalizacao(login: any): string {
		if (!login || typeof login !== 'object') return '-';

		// Priorizar localização GPS (mais precisa) quando disponível
		const usarGPS = login.latitudeGPS && login.longitudeGPS;

		if (usarGPS) {
			const partes: string[] = [];
			if (login.cidadeGPS && typeof login.cidadeGPS === 'string' && login.cidadeGPS.trim()) {
				partes.push(login.cidadeGPS.trim());
			}
			if (login.estadoGPS && typeof login.estadoGPS === 'string' && login.estadoGPS.trim()) {
				partes.push(login.estadoGPS.trim());
			}
			if (login.paisGPS && typeof login.paisGPS === 'string' && login.paisGPS.trim()) {
				partes.push(login.paisGPS.trim());
			}

			if (partes.length > 0) {
				return `${partes.join(', ')} (GPS)`;
			}

			// Se não tiver cidade/estado/pais GPS, mas tiver endereco GPS, mostrar endereco
			if (login.enderecoGPS && typeof login.enderecoGPS === 'string' && login.enderecoGPS.trim()) {
				return `${login.enderecoGPS.trim()} (GPS)`;
			}

			// Se tiver coordenadas mas não endereço, mostrar coordenadas
			if (login.latitudeGPS && login.longitudeGPS) {
				return `${login.latitudeGPS.toFixed(6)}, ${login.longitudeGPS.toFixed(6)} (GPS)`;
			}
		}

		// Fallback para localização por IP
		const partes: string[] = [];
		if (login.cidade && typeof login.cidade === 'string' && login.cidade.trim()) {
			partes.push(login.cidade.trim());
		}
		if (login.estado && typeof login.estado === 'string' && login.estado.trim()) {
			partes.push(login.estado.trim());
		}
		if (login.pais && typeof login.pais === 'string' && login.pais.trim()) {
			partes.push(login.pais.trim());
		}

		if (partes.length > 0) {
			return partes.join(', ');
		}

		// Se não tiver cidade/estado/pais, mas tiver endereco, mostrar endereco
		if (login.endereco && typeof login.endereco === 'string' && login.endereco.trim()) {
			return login.endereco.trim();
		}

		return '-';
	}

	function getAcaoColor(acao: string) {
		const colors: Record<string, string> = {
			criar: 'badge-success',
			editar: 'badge-warning',
			excluir: 'badge-error',
			bloquear: 'badge-error',
			desbloquear: 'badge-success',
			resetar_senha: 'badge-info'
		};
		return colors[acao] || 'badge-neutral';
	}

	function getAcaoLabel(acao: string) {
		const labels: Record<string, string> = {
			criar: 'Criar',
			editar: 'Editar',
			excluir: 'Excluir',
			bloquear: 'Bloquear',
			desbloquear: 'Desbloquear',
			resetar_senha: 'Resetar Senha'
		};
		return labels[acao] || acao;
	}

	// Estatísticas
	const totalAtividades = $derived(atividades?.length || 0);
	const totalLogins = $derived(logins?.length || 0);
	const loginsSucesso = $derived(logins?.filter((l) => l.sucesso).length || 0);
	const loginsFalha = $derived(logins?.filter((l) => !l.sucesso).length || 0);

	// Funções de exportação
	async function exportarCSV() {
		exportando = true;
		try {
			const dadosParaExportar = abaAtiva === 'atividades' ? atividades : logins;

			if (!dadosParaExportar || dadosParaExportar.length === 0) {
				alert('Nenhum dado para exportar');
				return;
			}

			let csvData: Record<string, string>[] = [];

			if (abaAtiva === 'atividades') {
				csvData = dadosParaExportar.map((atividade: any) => ({
					'Data/Hora': formatarData(atividade.timestamp),
					Usuário: atividade.usuarioNome || 'Sistema',
					Matrícula: atividade.usuarioMatricula || '-',
					Ação: getAcaoLabel(atividade.acao),
					Recurso: atividade.recurso,
					Detalhes: atividade.detalhes || '-'
				}));
			} else {
				csvData = dadosParaExportar.map((login: any) => {
					const usuarioInfo = [];
					if (login.usuarioNome) usuarioInfo.push(login.usuarioNome);
					if (login.usuarioEmail) usuarioInfo.push(login.usuarioEmail);
					if (!login.usuarioNome && !login.usuarioEmail && login.matriculaOuEmail) {
						usuarioInfo.push(login.matriculaOuEmail);
					}

					return {
						'Data/Hora': formatarData(login.timestamp),
						Usuário: login.usuarioNome || '-',
						Email: login.usuarioEmail || login.matriculaOuEmail || '-',
						Status: login.sucesso ? 'Sucesso' : 'Falhou',
						'Motivo Falha': login.motivoFalha || '-',
						IP: login.ipAddress || '-',
						Localização: formatarLocalizacao(login),
						Dispositivo: login.device || '-',
						Navegador: login.browser || '-',
						Sistema: login.sistema || '-'
					};
				});
			}

			const csv = Papa.unparse(csvData);
			const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
			const link = document.createElement('a');
			const url = URL.createObjectURL(blob);
			link.setAttribute('href', url);
			link.setAttribute(
				'download',
				`auditoria-${abaAtiva}-${format(new Date(), 'yyyy-MM-dd-HHmm', { locale: ptBR })}.csv`
			);
			link.style.visibility = 'hidden';
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			URL.revokeObjectURL(url);
		} catch (error) {
			console.error('Erro ao exportar CSV:', error);
			alert('Erro ao exportar CSV. Tente novamente.');
		} finally {
			exportando = false;
		}
	}

	async function exportarPDF() {
		exportando = true;
		try {
			const dadosParaExportar = abaAtiva === 'atividades' ? atividades : logins;

			if (!dadosParaExportar || dadosParaExportar.length === 0) {
				alert('Nenhum dado para exportar');
				return;
			}

			const doc = new jsPDF();

			// Adicionar logo no canto superior esquerdo
			let yPos = 20;
			try {
				const logoImg = await new Promise<HTMLImageElement>((resolve, reject) => {
					const img = new Image();
					img.crossOrigin = 'anonymous';
					img.onload = () => resolve(img);
					img.onerror = (err) => reject(err);
					setTimeout(() => reject(new Error('Timeout loading logo')), 3000);
					img.src = logoGovPE;
				});

				const logoWidth = 25;
				const aspectRatio = logoImg.height / logoImg.width;
				const logoHeight = logoWidth * aspectRatio;

				doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
				yPos = 10 + logoHeight + 10;
			} catch (err) {
				console.warn('Erro ao carregar logo:', err);
				yPos = 20;
			}

			// Título
			doc.setFontSize(20);
			doc.setTextColor(102, 126, 234);
			const titulo =
				abaAtiva === 'atividades'
					? 'Relatório de Atividades do Sistema'
					: 'Relatório de Histórico de Logins';
			doc.text(titulo, 14, yPos);

			// Informações gerais
			doc.setFontSize(12);
			doc.setTextColor(0, 0, 0);
			yPos += 8;
			doc.text(`Gerado em: ${format(new Date(), 'dd/MM/yyyy HH:mm', { locale: ptBR })}`, 14, yPos);
			yPos += 6;
			doc.text(`Total de registros: ${dadosParaExportar.length}`, 14, yPos);
			yPos += 10;

			if (abaAtiva === 'atividades') {
				// Tabela de atividades
				const atividadesData = dadosParaExportar.map((atividade: any) => [
					formatarData(atividade.timestamp),
					atividade.usuarioNome || 'Sistema',
					getAcaoLabel(atividade.acao),
					atividade.recurso,
					(atividade.detalhes || '-').substring(0, 50)
				]);

				autoTable(doc, {
					startY: yPos,
					head: [['Data/Hora', 'Usuário', 'Ação', 'Recurso', 'Detalhes']],
					body: atividadesData,
					theme: 'striped',
					headStyles: { fillColor: [102, 126, 234] },
					styles: { fontSize: 8 }
				});
			} else {
				// Tabela de logins
				const loginsData = dadosParaExportar.map((login: any) => {
					const usuarioInfo = [];
					if (login.usuarioNome) usuarioInfo.push(login.usuarioNome);
					if (login.usuarioEmail) usuarioInfo.push(login.usuarioEmail);
					if (!login.usuarioNome && !login.usuarioEmail && login.matriculaOuEmail) {
						usuarioInfo.push(login.matriculaOuEmail);
					}
					const usuarioStr = usuarioInfo.length > 0 ? usuarioInfo.join(' / ') : '-';

					return [
						formatarData(login.timestamp),
						usuarioStr,
						login.sucesso ? 'Sucesso' : 'Falhou',
						login.ipAddress || '-',
						formatarLocalizacao(login).substring(0, 30),
						login.device || '-',
						login.browser || '-'
					];
				});

				autoTable(doc, {
					startY: yPos,
					head: [
						[
							'Data/Hora',
							'Usuário/Email',
							'Status',
							'IP',
							'Localização',
							'Dispositivo',
							'Navegador'
						]
					],
					body: loginsData,
					theme: 'striped',
					headStyles: { fillColor: [102, 126, 234] },
					styles: { fontSize: 7 }
				});
			}

			// Footer
			const pageCount = doc.getNumberOfPages();
			for (let i = 1; i <= pageCount; i++) {
				doc.setPage(i);
				doc.setFontSize(8);
				doc.setTextColor(128, 128, 128);
				doc.text(
					`SGSE - Sistema de Gerenciamento de Secretaria | Página ${i} de ${pageCount}`,
					doc.internal.pageSize.getWidth() / 2,
					doc.internal.pageSize.getHeight() - 10,
					{ align: 'center' }
				);
			}

			doc.save(
				`auditoria-${abaAtiva}-${format(new Date(), 'yyyy-MM-dd-HHmm', { locale: ptBR })}.pdf`
			);
		} catch (error) {
			console.error('Erro ao exportar PDF:', error);
			alert('Erro ao exportar PDF. Tente novamente.');
		} finally {
			exportando = false;
		}
	}

	function limparFiltros() {
		filtroDataInicio = '';
		filtroDataFim = '';
		filtroUsuario = '';
		filtroStatus = 'todos';
		filtroIP = '';
	}
</script>

<main class="container mx-auto max-w-7xl px-4 py-6">
	<!-- Breadcrumb -->
	<div class="breadcrumbs mb-4 text-sm">
		<ul>
			<li><a href={resolve('/ti')} class="text-primary hover:underline">TI</a></li>
			<li>Auditoria e Logs</li>
		</ul>
	</div>

	<!-- Header -->
	<div class="mb-6">
		<div class="mb-2 flex items-center gap-4">
			<div class="rounded-xl bg-blue-500/20 p-3">
				<FileText class="h-8 w-8 text-blue-600" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-primary text-3xl font-bold">Auditoria e Logs</h1>
				<p class="text-base-content/70">
					Monitoramento completo de atividades e acessos do sistema
				</p>
			</div>
		</div>
	</div>

	<!-- Cards de Estatísticas -->
	<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
		<div class="stat bg-base-100 rounded-lg shadow-lg">
			<div class="stat-figure text-primary">
				<Clipboard class="h-8 w-8" strokeWidth={2} />
			</div>
			<div class="stat-title text-xs">Atividades</div>
			<div class="stat-value text-2xl">{totalAtividades}</div>
			<div class="stat-desc">Registros exibidos</div>
		</div>

		<div class="stat bg-base-100 rounded-lg shadow-lg">
			<div class="stat-figure text-success">
				<LogIn class="h-8 w-8" strokeWidth={2} />
			</div>
			<div class="stat-title text-xs">Logins Totais</div>
			<div class="stat-value text-2xl">{totalLogins}</div>
			<div class="stat-desc">Tentativas de acesso</div>
		</div>

		<div class="stat bg-base-100 rounded-lg shadow-lg">
			<div class="stat-figure text-success">
				<CheckCircle class="h-8 w-8" strokeWidth={2} />
			</div>
			<div class="stat-title text-xs">Logins Bem-sucedidos</div>
			<div class="stat-value text-success text-2xl">{loginsSucesso}</div>
			<div class="stat-desc">
				{totalLogins > 0 ? Math.round((loginsSucesso / totalLogins) * 100) : 0}% de sucesso
			</div>
		</div>

		<div class="stat bg-base-100 rounded-lg shadow-lg">
			<div class="stat-figure text-error">
				<XCircle class="h-8 w-8" strokeWidth={2} />
			</div>
			<div class="stat-title text-xs">Logins Falhados</div>
			<div class="stat-value text-error text-2xl">{loginsFalha}</div>
			<div class="stat-desc">
				{totalLogins > 0 ? Math.round((loginsFalha / totalLogins) * 100) : 0}% de falhas
			</div>
		</div>
	</div>

	<!-- Tabs -->
	<div class="tabs tabs-boxed bg-base-100 mb-6 p-1 shadow-lg">
		<button
			class="tab flex items-center gap-2 {abaAtiva === 'atividades' ? 'tab-active' : ''}"
			onclick={() => (abaAtiva = 'atividades')}
		>
			<Clipboard class="h-5 w-5" strokeWidth={2} />
			<span class="font-medium">Atividades no Sistema</span>
		</button>
		<button
			class="tab flex items-center gap-2 {abaAtiva === 'logins' ? 'tab-active' : ''}"
			onclick={() => (abaAtiva = 'logins')}
		>
			<LogIn class="h-5 w-5" strokeWidth={2} />
			<span class="font-medium">Histórico de Logins</span>
		</button>
	</div>

	<!-- Controles -->
	<div class="card bg-base-100 mb-6 shadow-xl">
		<div class="card-body py-4">
			<div class="flex flex-wrap items-center justify-between gap-4">
				<div class="form-control">
					<label class="label py-1">
						<span class="label-text font-medium">Quantidade de registros</span>
					</label>
					<select bind:value={limite} class="select select-bordered select-sm w-full max-w-xs">
						<option value={20}>20 registros</option>
						<option value={50}>50 registros</option>
						<option value={100}>100 registros</option>
						<option value={200}>200 registros</option>
					</select>
				</div>

				<div class="flex gap-2">
					<button
						class="btn btn-outline btn-primary btn-sm gap-2"
						onclick={exportarCSV}
						disabled={exportando ||
							(abaAtiva === 'atividades' ? !atividades?.length : !logins?.length)}
					>
						{#if exportando}
							<span class="loading loading-spinner loading-xs"></span>
						{:else}
							<Download class="h-4 w-4" strokeWidth={2} />
						{/if}
						Exportar CSV
					</button>
					<button
						class="btn btn-outline btn-secondary btn-sm gap-2"
						onclick={exportarPDF}
						disabled={exportando ||
							(abaAtiva === 'atividades' ? !atividades?.length : !logins?.length)}
					>
						{#if exportando}
							<span class="loading loading-spinner loading-xs"></span>
						{:else}
							<FileText class="h-4 w-4" strokeWidth={2} />
						{/if}
						Exportar PDF
					</button>
					<button
						class="btn btn-outline btn-secondary btn-sm gap-2"
						onclick={() => (mostrarFiltros = !mostrarFiltros)}
					>
						<Filter class="h-4 w-4" strokeWidth={2} />
						Filtros Avançados
					</button>
				</div>
			</div>

			<!-- Filtros Avançados -->
			{#if mostrarFiltros}
				<div class="divider my-4"></div>
				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
					<div class="form-control">
						<label class="label py-1">
							<span class="label-text font-medium">Data Início</span>
						</label>
						<input
							type="date"
							bind:value={filtroDataInicio}
							class="input input-bordered input-sm"
						/>
					</div>
					<div class="form-control">
						<label class="label py-1">
							<span class="label-text font-medium">Data Fim</span>
						</label>
						<input type="date" bind:value={filtroDataFim} class="input input-bordered input-sm" />
					</div>
					<div class="form-control">
						<label class="label py-1">
							<span class="label-text font-medium">Usuário</span>
						</label>
						<input
							type="text"
							bind:value={filtroUsuario}
							placeholder="Nome ou matrícula"
							class="input input-bordered input-sm"
						/>
					</div>
					{#if abaAtiva === 'logins'}
						<div class="form-control">
							<label class="label py-1">
								<span class="label-text font-medium">Status</span>
							</label>
							<select bind:value={filtroStatus} class="select select-bordered select-sm">
								<option value="todos">Todos</option>
								<option value="sucesso">Sucesso</option>
								<option value="falha">Falha</option>
							</select>
						</div>
						<div class="form-control">
							<label class="label py-1">
								<span class="label-text font-medium">IP Address</span>
							</label>
							<input
								type="text"
								bind:value={filtroIP}
								placeholder="Ex: 192.168.1.1"
								class="input input-bordered input-sm"
							/>
						</div>
					{/if}
					<div class="form-control flex items-end">
						<button class="btn btn-sm btn-ghost" onclick={limparFiltros}> Limpar Filtros </button>
					</div>
				</div>
			{/if}
		</div>
	</div>

	<!-- Conteúdo -->
	{#if abaAtiva === 'atividades'}
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<div class="mb-4 flex items-center justify-between">
					<h2 class="card-title text-xl">
						<Clipboard class="mr-2 h-5 w-5" strokeWidth={2} />
						Atividades Recentes
					</h2>
					{#if atividades}
						<div class="badge badge-outline badge-lg">
							{atividades.length} registro{atividades.length !== 1 ? 's' : ''}
						</div>
					{/if}
				</div>

				{#if atividadesRaw === undefined}
					<div class="flex flex-col items-center justify-center py-16">
						<span class="loading loading-spinner loading-lg text-primary mb-4"></span>
						<p class="text-base-content/60">Carregando atividades...</p>
					</div>
				{:else if atividades.length === 0}
					<div class="text-base-content/60 flex flex-col items-center justify-center py-16">
						<Inbox class="mb-4 h-16 w-16 opacity-50" strokeWidth={2} />
						<p class="text-lg font-medium">Nenhuma atividade registrada</p>
						<p class="mt-1 text-sm">As atividades do sistema aparecerão aqui</p>
					</div>
				{:else}
					<div class="overflow-x-auto rounded-lg">
						<table class="table-zebra table">
							<thead class="bg-base-200">
								<tr>
									<th class="font-semibold">Data/Hora</th>
									<th class="font-semibold">Usuário</th>
									<th class="font-semibold">Ação</th>
									<th class="font-semibold">Recurso</th>
									<th class="font-semibold">Detalhes</th>
								</tr>
							</thead>
							<tbody>
								{#each atividades as atividade}
									<tr class="hover transition-colors">
										<td>
											<div class="flex items-center gap-2">
												<Clock class="text-base-content/40 h-4 w-4" strokeWidth={2} />
												<span class="font-mono text-xs">{formatarData(atividade.timestamp)}</span>
											</div>
										</td>
										<td>
											<div class="flex flex-col">
												<div class="text-sm font-semibold">
													{atividade.usuarioNome || 'Sistema'}
												</div>
												{#if atividade.usuarioMatricula}
													<div class="text-base-content/50 font-mono text-xs">
														{atividade.usuarioMatricula}
													</div>
												{/if}
											</div>
										</td>
										<td>
											<span class="badge {getAcaoColor(atividade.acao)} badge-sm gap-1">
												{getAcaoLabel(atividade.acao)}
											</span>
										</td>
										<td>
											<span class="text-sm font-medium">{atividade.recurso}</span>
										</td>
										<td>
											<div class="max-w-md">
												{#if atividade.detalhes}
													<div
														class="text-base-content/70 truncate text-xs"
														title={atividade.detalhes}
													>
														{atividade.detalhes}
													</div>
												{:else}
													<span class="text-base-content/40 text-xs">-</span>
												{/if}
											</div>
										</td>
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				{/if}
			</div>
		</div>
	{:else}
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<div class="mb-4 flex items-center justify-between">
					<h2 class="card-title text-xl">
						<LogIn class="mr-2 h-5 w-5" strokeWidth={2} />
						Histórico de Logins
					</h2>
					{#if logins}
						<div class="badge badge-outline badge-lg">
							{logins.length} registro{logins.length !== 1 ? 's' : ''}
						</div>
					{/if}
				</div>

				{#if loginsRaw === undefined}
					<div class="flex flex-col items-center justify-center py-16">
						<span class="loading loading-spinner loading-lg text-primary mb-4"></span>
						<p class="text-base-content/60">Carregando logins...</p>
					</div>
				{:else if logins.length === 0}
					<div class="text-base-content/60 flex flex-col items-center justify-center py-16">
						<LogIn class="mb-4 h-16 w-16 opacity-50" strokeWidth={2} />
						<p class="text-lg font-medium">Nenhum login registrado</p>
						<p class="mt-1 text-sm">Os acessos ao sistema aparecerão aqui</p>
					</div>
				{:else}
					<div class="overflow-x-auto rounded-lg">
						<table class="table-zebra table">
							<thead class="bg-base-200">
								<tr>
									<th class="font-semibold">Data/Hora</th>
									<th class="font-semibold">Usuário/Email</th>
									<th class="font-semibold">Status</th>
									<th class="font-semibold">IP</th>
									<th class="font-semibold">Localização</th>
									<th class="font-semibold">Dispositivo</th>
									<th class="font-semibold">Navegador</th>
									<th class="font-semibold">Sistema</th>
								</tr>
							</thead>
							<tbody>
								{#each logins as login}
									<tr class="hover transition-colors">
										<td>
											<div class="flex items-center gap-2">
												<Clock class="text-base-content/40 h-4 w-4" strokeWidth={2} />
												<span class="font-mono text-xs">{formatarData(login.timestamp)}</span>
											</div>
										</td>
										<td>
											<div class="flex flex-col gap-1">
												{#if login.usuarioNome}
													<div class="flex items-center gap-2">
														<User class="text-base-content/40 h-4 w-4" strokeWidth={2} />
														<span class="text-sm font-semibold">{login.usuarioNome}</span>
													</div>
												{/if}
												{#if login.usuarioEmail || login.matriculaOuEmail}
													<div class="flex items-center gap-2">
														<Mail class="text-base-content/40 h-3 w-3" strokeWidth={2} />
														<span class="text-base-content/70 font-mono text-xs">
															{login.usuarioEmail ||
																(login.matriculaOuEmail &&
																typeof login.matriculaOuEmail === 'string'
																	? login.matriculaOuEmail
																	: '-')}
														</span>
													</div>
												{:else}
													<span class="text-base-content/40 text-xs">-</span>
												{/if}
											</div>
										</td>
										<td>
											<div class="flex flex-col gap-1">
												{#if login.sucesso}
													<span class="badge badge-success badge-sm gap-1">
														<CheckCircle class="h-3 w-3" strokeWidth={2} />
														Sucesso
													</span>
												{:else}
													<span class="badge badge-error badge-sm gap-1">
														<XCircle class="h-3 w-3" strokeWidth={2} />
														Falhou
													</span>
													{#if login.motivoFalha}
														<div class="text-error mt-1 text-xs font-medium">
															{login.motivoFalha}
														</div>
													{/if}
												{/if}
											</div>
										</td>
										<td>
											<span class="bg-base-200 rounded px-2 py-1 font-mono text-xs"
												>{login.ipAddress || '-'}</span
											>
										</td>
										<td>
											<div class="flex max-w-xs items-center gap-2">
												<MapPin class="text-base-content/40 h-4 w-4 flex-shrink-0" strokeWidth={2} />
												<span
													class="text-base-content/70 truncate text-xs"
													title={formatarLocalizacao(login)}
												>
													{formatarLocalizacao(login)}
												</span>
											</div>
										</td>
										<td>
											<div class="text-base-content/70 text-xs">{login.device || '-'}</div>
										</td>
										<td>
											<div class="text-base-content/70 text-xs">{login.browser || '-'}</div>
										</td>
										<td>
											<div class="text-base-content/70 text-xs">{login.sistema || '-'}</div>
										</td>
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				{/if}
			</div>
		</div>
	{/if}

	<!-- Informação -->
	<div class="alert alert-info mt-6 shadow-lg">
		<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
		<div>
			<h3 class="font-bold">Informação Importante</h3>
			<div class="text-sm">
				Os logs são armazenados permanentemente e não podem ser alterados ou excluídos.
			</div>
		</div>
	</div>
</main>
