<script lang="ts">
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { Clock, Save, CheckCircle2, AlertCircle, RefreshCw } from 'lucide-svelte';

	const client = useConvexClient();
	const configQuery = useQuery(api.configuracaoRelogio.obterConfiguracao, {});

	let servidorNTP = $state('pool.ntp.org');
	let portaNTP = $state(123);
	let usarServidorExterno = $state(false);
	let fallbackParaPC = $state(true);
	let gmtOffset = $state(-3); // Padrão GMT-3 para Brasília
	let processando = $state(false);
	let testando = $state(false);
	let mensagem = $state<{ tipo: 'success' | 'error'; texto: string } | null>(null);
	let statusSincronizacao = $state<{
		ultimaSincronizacao: number | null;
		offsetSegundos: number | null;
		usandoServidorExterno: boolean;
	} | null>(null);

	// Estados para os relógios
	let timestampOriginal = $state<number | null>(null);
	let timestampUTC = $state<number | null>(null);
	let intervaloRelogio: ReturnType<typeof setInterval> | null = null;
	let dataLoaded = $state(false);

	// Carregar dados apenas uma vez quando a query retornar
	$effect(() => {
		if (configQuery?.data && !dataLoaded) {
			servidorNTP = configQuery.data.servidorNTP || 'pool.ntp.org';
			portaNTP = configQuery.data.portaNTP || 123;
			usarServidorExterno = configQuery.data.usarServidorExterno || false;
			fallbackParaPC =
				configQuery.data.fallbackParaPC !== undefined ? configQuery.data.fallbackParaPC : true;
			gmtOffset = configQuery.data.gmtOffset ?? -3; // Padrão GMT-3 para Brasília

			// Atualizar status de sincronização
			statusSincronizacao = {
				ultimaSincronizacao: configQuery.data.ultimaSincronizacao ?? null,
				offsetSegundos: configQuery.data.offsetSegundos ?? null,
				usandoServidorExterno: configQuery.data.usarServidorExterno || false
			};

			dataLoaded = true; // Marcar como carregado para evitar sobrescrever mudanças do usuário
		}
	});

	// Função para obter tempo sincronizado
	async function obterTempoSincronizado() {
		try {
			if (usarServidorExterno) {
				// Se usar servidor externo, sincronizar com NTP
				const resultado = await client.action(api.configuracaoRelogio.sincronizarTempo, {});
				if (resultado.sucesso) {
					timestampUTC = resultado.timestamp; // Timestamp UTC da fonte
					// Calcular o timestamp original (antes do ajuste GMT)
					timestampOriginal = timestampUTC;
					// Atualizar status de sincronização
					statusSincronizacao = {
						ultimaSincronizacao: Date.now(),
						offsetSegundos: resultado.offsetSegundos ?? null,
						usandoServidorExterno: resultado.usandoServidorExterno || false
					};
				}
			} else {
				// Se não usar servidor externo, usar tempo do PC como base UTC
				// Date.now() retorna timestamp UTC (milissegundos desde epoch)
				timestampUTC = Date.now();
				timestampOriginal = timestampUTC;
				// Atualizar status para indicar que está usando relógio do PC
				statusSincronizacao = {
					ultimaSincronizacao: Date.now(),
					offsetSegundos: null,
					usandoServidorExterno: false
				};
			}
		} catch (error) {
			console.error('Erro ao obter tempo sincronizado:', error);
			// Fallback: usar tempo do PC
			timestampUTC = Date.now();
			timestampOriginal = timestampUTC;
			// Atualizar status para indicar fallback
			statusSincronizacao = {
				ultimaSincronizacao: Date.now(),
				offsetSegundos: null,
				usandoServidorExterno: false
			};
		}
	}

	// Atualizar relógio quando usarServidorExterno mudar (após carregamento inicial)
	$effect(() => {
		// Quando a opção de usar servidor externo mudar, atualizar o relógio
		// Só atualizar após os dados serem carregados para evitar atualizações desnecessárias
		if (dataLoaded) {
			// Usar usarServidorExterno como dependência reativa
			const _ = usarServidorExterno; // Forçar reatividade
			obterTempoSincronizado();
		}
	});

	// Inicializar e atualizar relógios periodicamente
	$effect(() => {
		// Obter tempo inicial quando configuração mudar
		if (configQuery?.data) {
			obterTempoSincronizado();
		}

		// Atualizar a cada segundo
		intervaloRelogio = setInterval(() => {
			if (timestampUTC !== null) {
				// Incrementar em 1 segundo
				timestampUTC += 1000;
				timestampOriginal = timestampUTC;
			} else {
				// Se ainda não temos timestamp, tentar obter novamente
				obterTempoSincronizado();
			}
		}, 1000);

		// Limpar intervalo quando componente for destruído
		return () => {
			if (intervaloRelogio) {
				clearInterval(intervaloRelogio);
			}
		};
	});

	// Funções para formatar os relógios
	function formatarRelogio(timestamp: number | null, ajusteGMT: number = 0): string {
		if (!timestamp) return '--:--:--';
		
		// Quando ajusteGMT = 0, usar UTC explícito (sem GMT)
		if (ajusteGMT === 0) {
			return new Date(timestamp).toLocaleTimeString('pt-BR', {
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit',
				hour12: false,
				timeZone: 'UTC' // Forçar UTC puro
			});
		}
		
		// Quando ajusteGMT ≠ 0, aplicar offset configurado ao timestamp UTC
		// O offset é aplicado manualmente, então usamos UTC como base para evitar conversão dupla
		const timestampAjustado = timestamp + ajusteGMT * 60 * 60 * 1000;
		return new Date(timestampAjustado).toLocaleTimeString('pt-BR', {
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit',
			hour12: false,
			timeZone: 'UTC' // Usar UTC como base pois já aplicamos o offset manualmente
		});
	}

	function formatarDataRelogio(timestamp: number | null, ajusteGMT: number = 0): string {
		if (!timestamp) return '--/--/----';
		
		// Quando ajusteGMT = 0, usar UTC explícito (sem GMT)
		if (ajusteGMT === 0) {
			return new Date(timestamp).toLocaleDateString('pt-BR', {
				day: '2-digit',
				month: '2-digit',
				year: 'numeric',
				timeZone: 'UTC' // Forçar UTC puro
			});
		}
		
		// Quando ajusteGMT ≠ 0, aplicar offset configurado ao timestamp UTC
		// O offset é aplicado manualmente, então usamos UTC como base para evitar conversão dupla
		const timestampAjustado = timestamp + ajusteGMT * 60 * 60 * 1000;
		return new Date(timestampAjustado).toLocaleDateString('pt-BR', {
			day: '2-digit',
			month: '2-digit',
			year: 'numeric',
			timeZone: 'UTC' // Usar UTC como base pois já aplicamos o offset manualmente
		});
	}

	// Função para formatar timestamp ISO
	function formatarTimestampISO(timestamp: number | null): string {
		if (!timestamp) return '--';
		return new Date(timestamp).toISOString();
	}

	// Função para obter nome do fuso horário baseado no offset
	function obterNomeFusoHorario(offset: number): string {
		const fusos: Record<number, string> = {
			'-12': 'IDLW (Linha Internacional de Data Oeste)',
			'-11': 'HST (Hawaii-Aleutian Standard Time)',
			'-10': 'HST (Hawaii Standard Time)',
			'-9': 'AKST (Alaska Standard Time)',
			'-8': 'PST (Pacific Standard Time)',
			'-7': 'MST (Mountain Standard Time)',
			'-6': 'CST (Central Standard Time)',
			'-5': 'EST (Eastern Standard Time)',
			'-4': 'AST (Atlantic Standard Time)',
			'-3': 'BRT (Brasília Time) / ART (Argentina Time)',
			'-2': 'GST (South Georgia Standard Time)',
			'-1': 'AZOT (Azores Standard Time)',
			'0': 'UTC / GMT (Greenwich Mean Time)',
			'1': 'CET (Central European Time)',
			'2': 'EET (Eastern European Time)',
			'3': 'MSK (Moscow Standard Time)',
			'4': 'GST (Gulf Standard Time)',
			'5': 'PKT (Pakistan Standard Time)',
			'6': 'BST (Bangladesh Standard Time)',
			'7': 'ICT (Indochina Time)',
			'8': 'CST (China Standard Time)',
			'9': 'JST (Japan Standard Time)',
			'10': 'AEST (Australian Eastern Standard Time)',
			'11': 'SBT (Solomon Islands Time)',
			'12': 'NZST (New Zealand Standard Time)'
		};
		return fusos[offset.toString()] || `UTC${offset >= 0 ? '+' : ''}${offset}`;
	}

	// Função para calcular diferença em horas e minutos
	function calcularDiferencaFuso(offset: number): string {
		const horas = Math.abs(offset);
		const minutos = 0; // Offset em horas completas
		return `${horas}h ${minutos}m ${offset < 0 ? 'atrás' : 'à frente'} de UTC`;
	}

	function mostrarMensagem(tipo: 'success' | 'error', texto: string) {
		mensagem = { tipo, texto };
		setTimeout(() => {
			mensagem = null;
		}, 5000);
	}

	async function salvarConfiguracao() {
		if (usarServidorExterno) {
			if (!servidorNTP || servidorNTP.trim() === '') {
				mostrarMensagem('error', 'Servidor NTP é obrigatório quando usar servidor externo');
				return;
			}
			if (portaNTP < 1 || portaNTP > 65535) {
				mostrarMensagem('error', 'Porta NTP deve estar entre 1 e 65535');
				return;
			}
		}

		processando = true;
		try {
			await client.mutation(api.configuracaoRelogio.salvarConfiguracao, {
				servidorNTP: usarServidorExterno ? servidorNTP : undefined,
				portaNTP: usarServidorExterno ? portaNTP : undefined,
				usarServidorExterno,
				fallbackParaPC,
				gmtOffset
			});

			mostrarMensagem('success', 'Configuração salva com sucesso!');

			// Recarregar configuração para atualizar status
			// A query será atualizada automaticamente pelo useQuery
		} catch (error) {
			console.error('Erro ao salvar configuração:', error);
			mostrarMensagem(
				'error',
				error instanceof Error ? error.message : 'Erro ao salvar configuração'
			);
		} finally {
			processando = false;
		}
	}

	async function testarSincronizacao() {
		testando = true;
		mensagem = null;
		try {
			const resultado = await client.action(api.configuracaoRelogio.sincronizarTempo, {});
			if (resultado.sucesso) {
				// Atualizar status de sincronização
				statusSincronizacao = {
					ultimaSincronizacao: Date.now(),
					offsetSegundos: resultado.offsetSegundos,
					usandoServidorExterno: resultado.usandoServidorExterno
				};

				// Atualizar timestamps dos relógios
				timestampUTC = resultado.timestamp;
				timestampOriginal = resultado.timestamp;

				// Calcular horário atual com GMT offset
				// Quando GMT é 0, usar timestamp UTC puro e deixar toLocaleTimeString() fazer a conversão automática
				let timestampAjustado: number;
				if (gmtOffset !== 0) {
					timestampAjustado = timestampUTC + gmtOffset * 60 * 60 * 1000;
				} else {
					// Quando GMT = 0, manter timestamp UTC puro
					// O toLocaleTimeString() converterá automaticamente para o timezone local do navegador
					timestampAjustado = timestampUTC;
				}
				const horarioAtual = new Date(timestampAjustado).toLocaleTimeString('pt-BR', {
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit'
				});

				mostrarMensagem(
					'success',
					resultado.usandoServidorExterno
						? `Sincronização bem-sucedida! Offset: ${resultado.offsetSegundos}s | Horário atual: ${horarioAtual}`
						: 'Usando relógio do PC (servidor externo não disponível)'
				);
			} else {
				mostrarMensagem('error', 'Falha na sincronização');
			}
		} catch (error) {
			console.error('Erro ao testar sincronização:', error);
			mostrarMensagem(
				'error',
				error instanceof Error ? error.message : 'Erro ao testar sincronização'
			);
		} finally {
			testando = false;
		}
	}

	// Função para atualizar relógios manualmente
	async function atualizarRelogios() {
		await obterTempoSincronizado();
		mostrarMensagem('success', 'Relógios atualizados!');
	}

	function formatarDataHora(timestamp: number | null): string {
		if (!timestamp) return 'Nunca';
		return new Date(timestamp).toLocaleString('pt-BR', {
			day: '2-digit',
			month: '2-digit',
			year: 'numeric',
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
		});
	}
</script>

<div class="container mx-auto max-w-4xl px-4 py-6">
	<!-- Header -->
	<div class="mb-6 flex items-center justify-between">
		<div class="flex items-center gap-4">
			<div class="bg-primary/10 rounded-xl p-3">
				<Clock class="text-primary h-8 w-8" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-base-content text-3xl font-bold">Configurações de Relógio</h1>
				<p class="text-base-content/60 mt-1">Configure a sincronização de tempo do sistema</p>
			</div>
		</div>
	</div>

	<!-- Mensagens -->
	{#if mensagem}
		<div
			class="alert mb-6"
			class:alert-success={mensagem.tipo === 'success'}
			class:alert-error={mensagem.tipo === 'error'}
		>
			{#if mensagem.tipo === 'success'}
				<CheckCircle2 class="h-6 w-6" />
			{:else}
				<AlertCircle class="h-6 w-6" />
			{/if}
			<span>{mensagem.texto}</span>
		</div>
	{/if}

	<!-- Relógios 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">
				<h2 class="card-title">Relógios Sincronizados</h2>
				<button
					class="btn btn-sm btn-outline btn-info"
					onclick={atualizarRelogios}
					disabled={testando || processando}
				>
					<RefreshCw class="h-4 w-4" />
					Atualizar Relógios
				</button>
			</div>
			<p class="text-base-content/70 mb-6 text-sm">
				Visualização em tempo real dos horários sincronizados. O primeiro relógio mostra o horário
				original (UTC) da fonte de sincronismo escolhida, e o segundo mostra o horário ajustado
				conforme o GMT configurado.
			</p>

			<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
				<!-- Relógio Original (UTC) -->
				<div
					class="rounded-xl border-2 border-blue-500/30 bg-gradient-to-br from-blue-500/10 to-blue-600/10 p-6"
				>
					<div class="text-center">
						<div class="mb-2 text-sm font-semibold tracking-wide text-blue-600 uppercase">
							Horário Original (UTC)
						</div>
						<div class="mb-2 font-mono text-5xl font-bold text-blue-700">
							{formatarRelogio(timestampOriginal, 0)}
						</div>
						<div class="mb-1 text-sm text-blue-600/80">
							{formatarDataRelogio(timestampOriginal, 0)}
						</div>

						<!-- Divider -->
						<div class="divider my-3 opacity-30"></div>

						<!-- Detalhes do Fuso Horário -->
						<div class="mt-4 space-y-2 text-left">
							<div class="text-xs">
								<span class="font-semibold text-blue-700">Fuso Horário:</span>
								<span class="ml-1 text-blue-600/90">UTC / GMT (Greenwich Mean Time)</span>
							</div>
							<div class="text-xs">
								<span class="font-semibold text-blue-700">Offset UTC:</span>
								<span class="ml-1 text-blue-600/90">±00:00 (Coordenado Universal)</span>
							</div>
							<div class="text-xs">
								<span class="font-semibold text-blue-700">Fonte:</span>
								<span class="ml-1 text-blue-600/90">
									{statusSincronizacao?.usandoServidorExterno
										? `Servidor NTP (${servidorNTP})`
										: 'Relógio do PC'}
								</span>
							</div>
							{#if statusSincronizacao?.offsetSegundos !== null && statusSincronizacao?.offsetSegundos !== undefined}
								<div class="text-xs">
									<span class="font-semibold text-blue-700">Offset Calculado:</span>
									<span class="ml-1 text-blue-600/90">
										{statusSincronizacao.offsetSegundos > 0
											? '+'
											: ''}{statusSincronizacao.offsetSegundos}s
									</span>
								</div>
							{/if}
							{#if timestampOriginal}
								<div class="text-xs">
									<span class="font-semibold text-blue-700">Timestamp UTC:</span>
									<span class="ml-1 font-mono text-[10px] text-blue-600/90">
										{formatarTimestampISO(timestampOriginal)}
									</span>
								</div>
							{/if}
							<div class="text-xs">
								<span class="font-semibold text-blue-700">Formato Recebido:</span>
								<span class="ml-1 text-blue-600/90">ISO 8601 (UTC)</span>
							</div>
						</div>
					</div>
				</div>

				<!-- Relógio com GMT Ajustado -->
				<div
					class="from-primary/10 to-primary/20 border-primary/30 rounded-xl border-2 bg-gradient-to-br p-6"
				>
					<div class="text-center">
						<div class="text-primary mb-2 text-sm font-semibold tracking-wide uppercase">
							Horário com GMT {gmtOffset >= 0 ? '+' : ''}{gmtOffset}
						</div>
						<div class="text-primary mb-2 font-mono text-5xl font-bold">
							{formatarRelogio(timestampUTC, gmtOffset)}
						</div>
						<div class="text-primary/80 mb-1 text-sm">
							{formatarDataRelogio(timestampUTC, gmtOffset)}
						</div>

						<!-- Divider -->
						<div class="divider my-3 opacity-30"></div>

						<!-- Detalhes do Fuso Horário Aplicado -->
						<div class="mt-4 space-y-2 text-left">
							<div class="text-xs">
								<span class="text-primary font-semibold">Fuso Horário:</span>
								<span class="text-primary/90 ml-1">{obterNomeFusoHorario(gmtOffset)}</span>
							</div>
							<div class="text-xs">
								<span class="text-primary font-semibold">Offset Configurado:</span>
								<span class="text-primary/90 ml-1">
									GMT{gmtOffset >= 0 ? '+' : ''}{gmtOffset} ({calcularDiferencaFuso(gmtOffset)})
								</span>
							</div>
							<div class="text-xs">
								<span class="text-primary font-semibold">Ajuste Aplicado:</span>
								<span class="text-primary/90 ml-1">
									{gmtOffset >= 0 ? '+' : ''}{gmtOffset}:00 UTC
								</span>
							</div>
							{#if timestampUTC}
								<div class="text-xs">
									<span class="text-primary font-semibold">Timestamp Local:</span>
									<span class="text-primary/90 ml-1 font-mono text-[10px]">
										{formatarTimestampISO(
											gmtOffset !== 0 ? timestampUTC + gmtOffset * 60 * 60 * 1000 : timestampUTC
										)}
									</span>
								</div>
							{/if}
							<div class="text-xs">
								<span class="text-primary font-semibold">Status:</span>
								<span class="text-primary/90 ml-1">Ajuste aplicado em tempo real</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Formulário -->
	<div class="card bg-base-100 shadow-xl">
		<div class="card-body">
			<h2 class="card-title mb-4">Sincronização de Tempo</h2>

			<!-- Usar Servidor Externo -->
			<div class="form-control mb-4">
				<label class="label cursor-pointer gap-3">
					<input
						type="checkbox"
						bind:checked={usarServidorExterno}
						class="checkbox checkbox-primary"
					/>
					<span class="label-text font-medium">Usar servidor NTP externo</span>
				</label>
				<div class="label">
					<span class="label-text-alt"
						>Sincronizar com servidor de tempo externo (NTP) em vez de usar o relógio do PC</span
					>
				</div>
			</div>

			{#if usarServidorExterno}
				<div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
					<!-- Servidor NTP -->
					<div class="form-control">
						<label class="label" for="servidor-ntp">
							<span class="label-text font-medium">Servidor NTP *</span>
						</label>
						<input
							id="servidor-ntp"
							type="text"
							bind:value={servidorNTP}
							placeholder="pool.ntp.org"
							class="input input-bordered"
						/>
						<div class="label">
							<span class="label-text-alt">Ex: pool.ntp.org, time.google.com, time.windows.com</span
							>
						</div>
					</div>

					<!-- Porta NTP -->
					<div class="form-control">
						<label class="label" for="porta-ntp">
							<span class="label-text font-medium">Porta NTP *</span>
						</label>
						<input
							id="porta-ntp"
							type="number"
							bind:value={portaNTP}
							placeholder="123"
							min="1"
							max="65535"
							class="input input-bordered"
						/>
						<div class="label">
							<span class="label-text-alt">Porta padrão: 123</span>
						</div>
					</div>
				</div>
			{/if}

			<!-- Fallback para PC -->
			<div class="form-control mb-4">
				<label class="label cursor-pointer gap-3">
					<input type="checkbox" bind:checked={fallbackParaPC} class="checkbox checkbox-primary" />
					<span class="label-text font-medium">Usar relógio do PC se servidor externo falhar</span>
				</label>
				<div class="label">
					<span class="label-text-alt"
						>Se marcado, o sistema usará o relógio do PC caso não consiga sincronizar com o servidor
						externo</span
					>
				</div>
			</div>

			<div class="divider"></div>

			<!-- Ajuste de Fuso Horário (GMT) -->
			<h2 class="card-title mb-4">Ajuste de Fuso Horário (GMT)</h2>
			<p class="text-base-content/70 mb-4 text-sm">
				Configure o fuso horário para ajustar o horário de registro. Use valores negativos para
				fusos a oeste de UTC e positivos para fusos a leste.
			</p>
			<div class="form-control">
				<label class="label" for="gmt-offset">
					<span class="label-text font-medium">GMT Offset (horas) *</span>
				</label>
				<select id="gmt-offset" bind:value={gmtOffset} class="select select-bordered">
					{#each Array.from({ length: 49 }, (_, i) => i - 12) as offset}
						<option value={offset} selected={gmtOffset === offset}>
							GMT{offset >= 0 ? '+' : ''}{offset}{offset === -3
								? ' (Brasil - Brasília)'
								: offset === 0
									? ' (UTC)'
									: ''}
						</option>
					{/each}
				</select>
				<div class="label">
					<span class="label-text-alt"
						>Ajuste em horas em relação ao UTC. Exemplo: -3 para horário de Brasília (GMT-3)</span
					>
				</div>
			</div>

			<!-- Status de Sincronização -->
			{#if statusSincronizacao}
				<div class="divider"></div>
				<h2 class="card-title mb-4">Status de Sincronização</h2>
				<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
					<div class="stat bg-base-200 rounded-lg p-4">
						<div class="stat-title text-xs">Última Sincronização</div>
						<div class="stat-value text-lg">
							{formatarDataHora(statusSincronizacao.ultimaSincronizacao)}
						</div>
					</div>
					<div class="stat bg-base-200 rounded-lg p-4">
						<div class="stat-title text-xs">Offset Calculado</div>
						<div class="stat-value text-lg">
							{statusSincronizacao.offsetSegundos !== null
								? `${statusSincronizacao.offsetSegundos > 0 ? '+' : ''}${statusSincronizacao.offsetSegundos}s`
								: 'N/A'}
						</div>
					</div>
					<div class="stat bg-base-200 rounded-lg p-4">
						<div class="stat-title text-xs">Fonte de Tempo</div>
						<div class="stat-value text-lg">
							{statusSincronizacao.usandoServidorExterno ? 'Servidor NTP' : 'Relógio do PC'}
						</div>
					</div>
				</div>
			{/if}

			<!-- Ações -->
			<div class="card-actions mt-6 justify-end gap-3">
				{#if usarServidorExterno}
					<button
						class="btn btn-outline btn-info"
						onclick={testarSincronizacao}
						disabled={testando || processando}
					>
						{#if testando}
							<span class="loading loading-spinner loading-sm"></span>
						{:else}
							<RefreshCw class="h-5 w-5" />
						{/if}
						Testar Sincronização
					</button>
				{/if}

				<button
					class="btn btn-primary"
					onclick={salvarConfiguracao}
					disabled={processando || testando}
				>
					{#if processando}
						<span class="loading loading-spinner loading-sm"></span>
					{:else}
						<Save class="h-5 w-5" />
					{/if}
					Salvar Configuração
				</button>
			</div>
		</div>
	</div>

	<!-- Informações -->
	<div class="card bg-base-100 mt-6 shadow-xl">
		<div class="card-body">
			<h2 class="card-title mb-4">Informações</h2>
			<div class="alert alert-info">
				<AlertCircle class="h-6 w-6" />
				<div>
					<p>
						<strong>Nota:</strong> O sistema usa uma API HTTP para sincronização de tempo como aproximação
						do protocolo NTP. Para sincronização NTP real, seria necessário uma biblioteca específica.
					</p>
					<p class="mt-1 text-sm">
						Servidores NTP recomendados: pool.ntp.org, time.google.com, time.windows.com, ntp.br
					</p>
					<p class="mt-2 text-sm">
						<strong>Como funciona:</strong> O servidor NTP configurado é mapeado para uma API HTTP que
						retorna UTC. O GMT offset configurado é então aplicado no frontend para exibir o horário
						correto.
					</p>
					<p class="mt-1 text-sm">
						<strong>Importante:</strong> Todos os servidores NTP retornam tempo em UTC. O GMT offset
						é aplicado apenas uma vez no frontend para ajustar ao fuso horário local (ex: GMT-3 para
						Brasília).
					</p>
				</div>
			</div>
		</div>
	</div>
</div>

