<script lang="ts">
	import { useQuery } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import jsPDF from 'jspdf';
	import { Printer, X, User, Clock, CheckCircle2, XCircle, Calendar, MapPin } from 'lucide-svelte';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import { formatarDataHoraCompleta, getTipoRegistroLabel } from '$lib/utils/ponto';
	import logoGovPE from '$lib/assets/logo_governo_PE.png';
	import { onMount } from 'svelte';

	interface Props {
		registroId: Id<'registrosPonto'>;
		onClose: () => void;
	}

	let { registroId, onClose }: Props = $props();

	const registroQuery = useQuery(api.pontos.obterRegistro, { registroId });
	const configQuery = useQuery(api.configuracaoPonto.obterConfiguracao, {});

	let gerando = $state(false);
	let modalPosition = $state<{ top: number; left: number } | null>(null);

	// Função para calcular a posição baseada no relógio sincronizado
	function calcularPosicaoModal() {
		// Procurar pelo elemento do relógio sincronizado
		const relogioRef = document.getElementById('relogio-sincronizado-ref');
		
		if (relogioRef) {
			const rect = relogioRef.getBoundingClientRect();
			const viewportWidth = window.innerWidth;
			const viewportHeight = window.innerHeight;
			
			// Posicionar o modal na mesma posição do relógio sincronizado
			// Centralizado horizontalmente no card do relógio
			const left = rect.left + (rect.width / 2);
			// Posicionar abaixo do card do relógio com um pequeno espaçamento
			const top = rect.bottom + 20;
			
			return {
				top: top,
				left: left
			};
		}
		
		// Se não encontrar, usar posição padrão (centro da tela)
		return null;
	}

	onMount(() => {
		// Usar requestAnimationFrame para garantir que o DOM está completamente renderizado
		const updatePosition = () => {
			requestAnimationFrame(() => {
				const pos = calcularPosicaoModal();
				if (pos) {
					modalPosition = pos;
				}
			});
		};
		
		// Aguardar um pouco mais para garantir que o DOM está atualizado
		setTimeout(updatePosition, 50);
		
		// Adicionar listener de scroll para atualizar posição
		const handleScroll = () => {
			updatePosition();
		};
		
		window.addEventListener('scroll', handleScroll, true);
		window.addEventListener('resize', handleScroll);
		
		return () => {
			window.removeEventListener('scroll', handleScroll, true);
			window.removeEventListener('resize', handleScroll);
		};
	});

	// Função para obter estilo do modal baseado na posição calculada
	function getModalStyle() {
		if (modalPosition) {
			// Garantir que o modal não saia da viewport
			const viewportWidth = window.innerWidth;
			const viewportHeight = window.innerHeight;
			const modalWidth = 700; // Aproximadamente max-w-2xl
			const modalHeight = Math.min(viewportHeight * 0.9, 600);
			
			let left = modalPosition.left;
			let top = modalPosition.top;
			
			// Ajustar se o modal sair da viewport à direita
			if (left + (modalWidth / 2) > viewportWidth - 20) {
				left = viewportWidth - (modalWidth / 2) - 20;
			}
			// Ajustar se o modal sair da viewport à esquerda
			if (left - (modalWidth / 2) < 20) {
				left = (modalWidth / 2) + 20;
			}
			// Ajustar se o modal sair da viewport abaixo
			if (top + modalHeight > viewportHeight - 20) {
				top = viewportHeight - modalHeight - 20;
			}
			// Ajustar se o modal sair da viewport acima
			if (top < 20) {
				top = 20;
			}
			
			// Usar transform para centralizar horizontalmente baseado no left calculado
			return `position: fixed; top: ${top}px; left: ${left}px; transform: translateX(-50%); max-width: ${Math.min(modalWidth, viewportWidth - 40)}px;`;
		}
		// Se não houver posição calculada, centralizar na tela
		return 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);';
	}

	async function gerarPDF() {
		if (!registroQuery?.data) return;

		gerando = true;

		try {
			const registro = registroQuery.data;
			const doc = new jsPDF();

			// Logo
			let yPosition = 20;
			try {
				const logoImg = new Image();
				logoImg.src = logoGovPE;
				await new Promise<void>((resolve, reject) => {
					logoImg.onload = () => resolve();
					logoImg.onerror = () => reject();
					setTimeout(() => reject(), 3000);
				});

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

				doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
				yPosition = Math.max(20, 10 + logoHeight / 2);
			} catch (err) {
				console.warn('Não foi possível carregar a logo:', err);
			}

			// Cabeçalho
			doc.setFontSize(16);
			doc.setTextColor(41, 128, 185);
			doc.text('COMPROVANTE DE REGISTRO DE PONTO', 105, yPosition, { align: 'center' });

			yPosition += 15;

			// Informações do Funcionário
			doc.setFontSize(12);
			doc.setTextColor(0, 0, 0);
			doc.setFont('helvetica', 'bold');
			doc.text('DADOS DO FUNCIONÁRIO', 15, yPosition);
			doc.setFont('helvetica', 'normal');

			yPosition += 8;
			doc.setFontSize(10);

			if (registro.funcionario) {
				if (registro.funcionario.matricula) {
					doc.text(`Matrícula: ${registro.funcionario.matricula}`, 15, yPosition);
					yPosition += 6;
				}
				doc.text(`Nome: ${registro.funcionario.nome}`, 15, yPosition);
				yPosition += 6;
				if (registro.funcionario.descricaoCargo) {
					doc.text(`Cargo/Função: ${registro.funcionario.descricaoCargo}`, 15, yPosition);
					yPosition += 6;
				}
				if (registro.funcionario.simbolo) {
					doc.text(
						`Símbolo: ${registro.funcionario.simbolo.nome} (${registro.funcionario.simbolo.tipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'})`,
						15,
						yPosition
					);
					yPosition += 6;
				}
			}

			yPosition += 5;

			// Informações do Registro
			doc.setFont('helvetica', 'bold');
			doc.text('DADOS DO REGISTRO', 15, yPosition);
			doc.setFont('helvetica', 'normal');

			yPosition += 8;
			doc.setFontSize(10);

			const config = configQuery?.data;
			const tipoLabel = config
				? getTipoRegistroLabel(registro.tipo, {
						nomeEntrada: config.nomeEntrada,
						nomeSaidaAlmoco: config.nomeSaidaAlmoco,
						nomeRetornoAlmoco: config.nomeRetornoAlmoco,
						nomeSaida: config.nomeSaida,
					})
				: getTipoRegistroLabel(registro.tipo);
			doc.text(`Tipo: ${tipoLabel}`, 15, yPosition);
			yPosition += 6;

			const dataHora = formatarDataHoraCompleta(registro.data, registro.hora, registro.minuto, registro.segundo);
			doc.text(`Data e Hora: ${dataHora}`, 15, yPosition);
			yPosition += 6;

			doc.text(`Status: ${registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'}`, 15, yPosition);
			yPosition += 6;

			doc.text(`Tolerância: ${registro.toleranciaMinutos} minutos`, 15, yPosition);
			yPosition += 6;

			doc.text(
				`Sincronizado: ${registro.sincronizadoComServidor ? 'Sim (Servidor)' : 'Não (PC Local)'}`,
				15,
				yPosition
			);
			yPosition += 10;

			// Imagem capturada (se disponível)
			if (registro.imagemUrl) {
				yPosition += 10;
				// Verificar se precisa de nova página
				if (yPosition > 200) {
					doc.addPage();
					yPosition = 20;
				}

				doc.setFont('helvetica', 'bold');
				doc.text('FOTO CAPTURADA', 105, yPosition, { align: 'center' });
				doc.setFont('helvetica', 'normal');
				yPosition += 10;

				try {
					// Carregar imagem usando fetch para evitar problemas de CORS
					const response = await fetch(registro.imagemUrl);
					if (!response.ok) {
						throw new Error('Erro ao carregar imagem');
					}
					
					const blob = await response.blob();
					const reader = new FileReader();
					
					// Converter blob para base64
					const base64 = await new Promise<string>((resolve, reject) => {
						reader.onloadend = () => {
							if (typeof reader.result === 'string') {
								resolve(reader.result);
							} else {
								reject(new Error('Erro ao converter imagem'));
							}
						};
						reader.onerror = () => reject(new Error('Erro ao ler imagem'));
						reader.readAsDataURL(blob);
					});

					// Criar elemento de imagem para obter dimensões
					const img = new Image();
					await new Promise<void>((resolve, reject) => {
						img.onload = () => resolve();
						img.onerror = () => reject(new Error('Erro ao processar imagem'));
						img.src = base64;
						setTimeout(() => reject(new Error('Timeout ao processar imagem')), 10000);
					});

					// Calcular dimensões para caber na página (largura máxima 80mm, manter proporção)
					const maxWidth = 80;
					const maxHeight = 60;
					let imgWidth = img.width;
					let imgHeight = img.height;
					const aspectRatio = imgWidth / imgHeight;

					if (imgWidth > maxWidth || imgHeight > maxHeight) {
						if (aspectRatio > 1) {
							// Imagem horizontal
							imgWidth = maxWidth;
							imgHeight = maxWidth / aspectRatio;
						} else {
							// Imagem vertical
							imgHeight = maxHeight;
							imgWidth = maxHeight * aspectRatio;
						}
					}

					// Centralizar imagem
					const xPosition = (doc.internal.pageSize.getWidth() - imgWidth) / 2;
					
					// Verificar se cabe na página atual
					if (yPosition + imgHeight > doc.internal.pageSize.getHeight() - 20) {
						doc.addPage();
						yPosition = 20;
					}

					// Adicionar imagem ao PDF usando base64
					doc.addImage(base64, 'JPEG', xPosition, yPosition, imgWidth, imgHeight);
					yPosition += imgHeight + 10;
				} catch (error) {
					console.warn('Erro ao adicionar imagem ao PDF:', error);
					doc.setFontSize(10);
					doc.text('Foto não disponível para impressão', 105, yPosition, { align: 'center' });
					yPosition += 6;
				}
			}

			// Rodapé
			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' }
				);
			}

			// Salvar
			const nomeArquivo = `comprovante-ponto-${registro.data}-${registro.hora}${registro.minuto.toString().padStart(2, '0')}.pdf`;
			doc.save(nomeArquivo);
		} catch (error) {
			console.error('Erro ao gerar PDF:', error);
			alert('Erro ao gerar comprovante PDF. Tente novamente.');
		} finally {
			gerando = false;
		}
	}
</script>

<div 
	class="fixed inset-0 z-50 pointer-events-none"
	style="animation: fadeIn 0.2s ease-out;"
	onkeydown={(e) => e.key === 'Escape' && onClose()}
		role="dialog"
		aria-modal="true"
		aria-labelledby="modal-comprovante-title"
	>
	<!-- Backdrop leve -->
	<div 
		class="absolute inset-0 bg-black/20 transition-opacity duration-200 pointer-events-auto"
		onclick={onClose}
	></div>
	
	<!-- Modal Box -->
	<div 
		class="absolute bg-gradient-to-br from-base-100 via-base-100 to-primary/5 rounded-2xl shadow-2xl border-2 border-primary/20 max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col z-10 transform transition-all duration-300 pointer-events-auto"
		style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); {getModalStyle()}"
		onclick={(e) => e.stopPropagation()}
	>
		<!-- Header Premium com gradiente -->
		<div class="flex items-center justify-between px-6 py-5 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border-b-2 border-primary/20 flex-shrink-0">
			<div class="flex items-center gap-3">
				<div class="p-2.5 bg-primary/20 rounded-xl shadow-lg">
					<Clock class="h-6 w-6 text-primary" strokeWidth={2.5} />
				</div>
				<div>
					<h3 id="modal-comprovante-title" class="font-bold text-xl text-base-content">Comprovante de Registro de Ponto</h3>
					<p class="text-sm text-base-content/70 mt-0.5">Detalhes do registro realizado</p>
				</div>
			</div>
			<button class="btn btn-sm btn-circle btn-ghost hover:bg-base-300 transition-all" onclick={onClose}>
				<X class="h-5 w-5" />
			</button>
		</div>

		<!-- Conteúdo com rolagem -->
		<div class="flex-1 overflow-y-auto px-6 py-6 modal-scroll">
			{#if registroQuery === undefined}
				<div class="flex justify-center items-center py-12">
					<span class="loading loading-spinner loading-lg text-primary"></span>
				</div>
			{:else if !registroQuery?.data}
				<div class="alert alert-error shadow-lg">
					<XCircle class="h-5 w-5" />
					<span class="font-semibold">Erro ao carregar registro</span>
				</div>
			{:else}
				{@const registro = registroQuery.data}
				<div class="space-y-6">
					<!-- Informações do Funcionário -->
					<div class="card bg-gradient-to-br from-base-100 to-base-200 shadow-lg border-2 border-primary/10 hover:shadow-xl transition-all">
						<div class="card-body p-6">
							<div class="flex items-center gap-3 mb-4">
								<div class="p-2 bg-primary/10 rounded-lg">
									<User class="h-5 w-5 text-primary" strokeWidth={2} />
								</div>
								<h4 class="font-bold text-lg text-base-content">Dados do Funcionário</h4>
							</div>
							{#if registro.funcionario}
								<div class="space-y-3">
									{#if registro.funcionario.matricula}
										<div class="flex items-start gap-3 p-3 bg-base-100 rounded-lg border border-base-300">
											<div class="flex-1">
												<span class="text-xs font-semibold text-base-content/60 uppercase tracking-wide">Matrícula</span>
												<p class="text-base font-semibold text-base-content mt-1">{registro.funcionario.matricula}</p>
											</div>
										</div>
									{/if}
									<div class="flex items-start gap-3 p-3 bg-base-100 rounded-lg border border-base-300">
										<div class="flex-1">
											<span class="text-xs font-semibold text-base-content/60 uppercase tracking-wide">Nome</span>
											<p class="text-base font-semibold text-base-content mt-1">{registro.funcionario.nome}</p>
										</div>
									</div>
									{#if registro.funcionario.descricaoCargo}
										<div class="flex items-start gap-3 p-3 bg-base-100 rounded-lg border border-base-300">
											<div class="flex-1">
												<span class="text-xs font-semibold text-base-content/60 uppercase tracking-wide">Cargo/Função</span>
												<p class="text-base font-semibold text-base-content mt-1">{registro.funcionario.descricaoCargo}</p>
											</div>
										</div>
									{/if}
								</div>
							{/if}
						</div>
					</div>

					<!-- Informações do Registro -->
					<div class="card bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg border-2 border-primary/20 hover:shadow-xl transition-all">
						<div class="card-body p-6">
							<div class="flex items-center gap-3 mb-4">
								<div class="p-2 bg-primary/20 rounded-lg">
									<Clock class="h-5 w-5 text-primary" strokeWidth={2} />
								</div>
								<h4 class="font-bold text-lg text-base-content">Dados do Registro</h4>
							</div>
							<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
								<!-- Tipo -->
								<div class="bg-base-100 rounded-lg p-4 border border-base-300 shadow-sm">
									<span class="text-xs font-semibold text-base-content/60 uppercase tracking-wide">Tipo</span>
									<p class="text-lg font-bold text-primary mt-1">
										{configQuery?.data
											? getTipoRegistroLabel(registro.tipo, {
													nomeEntrada: configQuery.data.nomeEntrada,
													nomeSaidaAlmoco: configQuery.data.nomeSaidaAlmoco,
													nomeRetornoAlmoco: configQuery.data.nomeRetornoAlmoco,
													nomeSaida: configQuery.data.nomeSaida,
												})
											: getTipoRegistroLabel(registro.tipo)}
									</p>
								</div>

								<!-- Data e Hora -->
								<div class="bg-base-100 rounded-lg p-4 border border-base-300 shadow-sm">
									<span class="text-xs font-semibold text-base-content/60 uppercase tracking-wide">Data e Hora</span>
									<p class="text-lg font-bold text-base-content mt-1">
										{formatarDataHoraCompleta(registro.data, registro.hora, registro.minuto, registro.segundo)}
									</p>
								</div>

								<!-- Status -->
								<div class="bg-base-100 rounded-lg p-4 border border-base-300 shadow-sm">
									<span class="text-xs font-semibold text-base-content/60 uppercase tracking-wide">Status</span>
									<div class="mt-2">
										<span class="badge badge-lg gap-2 {registro.dentroDoPrazo ? 'badge-success' : 'badge-error'}">
											{#if registro.dentroDoPrazo}
												<CheckCircle2 class="h-4 w-4" />
											{:else}
												<XCircle class="h-4 w-4" />
											{/if}
											{registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'}
										</span>
									</div>
								</div>

								<!-- Tolerância -->
								<div class="bg-base-100 rounded-lg p-4 border border-base-300 shadow-sm">
									<span class="text-xs font-semibold text-base-content/60 uppercase tracking-wide">Tolerância</span>
									<p class="text-lg font-bold text-base-content mt-1">{registro.toleranciaMinutos} minutos</p>
								</div>
							</div>
						</div>
					</div>

					<!-- Imagem Capturada -->
					{#if registro.imagemUrl}
						<div class="card bg-gradient-to-br from-base-100 to-base-200 shadow-lg border-2 border-primary/10 hover:shadow-xl transition-all">
							<div class="card-body p-6">
								<div class="flex items-center gap-3 mb-4">
									<div class="p-2 bg-primary/10 rounded-lg">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											class="h-5 w-5 text-primary"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
											/>
										</svg>
									</div>
									<h4 class="font-bold text-lg text-base-content">Foto Capturada</h4>
								</div>
								<div class="flex justify-center bg-base-100 rounded-xl p-4 border-2 border-primary/20">
									<img
										src={registro.imagemUrl}
										alt="Foto do registro de ponto"
										class="max-w-full max-h-[300px] rounded-lg shadow-md object-contain"
										onerror={(e) => {
											console.error('Erro ao carregar imagem:', e);
											(e.target as HTMLImageElement).style.display = 'none';
										}}
									/>
								</div>
							</div>
						</div>
					{/if}
				</div>
			{/if}
		</div>

		<!-- Footer fixo com botões -->
		<div class="flex justify-end gap-3 px-6 py-4 border-t-2 border-primary/20 bg-base-100/50 backdrop-blur-sm flex-shrink-0">
			<button class="btn btn-outline gap-2" onclick={onClose}>
				<X class="h-4 w-4" />
				Fechar
			</button>
			<button class="btn btn-primary gap-2 shadow-lg hover:shadow-xl transition-all" onclick={gerarPDF} disabled={gerando}>
				{#if gerando}
					<span class="loading loading-spinner loading-sm"></span>
					Gerando...
				{:else}
					<Printer class="h-5 w-5" />
					Imprimir Comprovante
				{/if}
			</button>
		</div>
	</div>
</div>

<style>
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(20px) scale(0.95);
		}
		to {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	/* Scrollbar customizada para os modais */
	:global(.modal-scroll) {
		scrollbar-width: thin;
		scrollbar-color: hsl(var(--bc) / 0.3) transparent;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
	}

	:global(.modal-scroll::-webkit-scrollbar) {
		width: 8px;
	}

	:global(.modal-scroll::-webkit-scrollbar-track) {
		background: transparent;
		border-radius: 4px;
	}

	:global(.modal-scroll::-webkit-scrollbar-thumb) {
		background-color: hsl(var(--bc) / 0.3);
		border-radius: 4px;
		transition: background-color 0.2s ease;
	}

	:global(.modal-scroll::-webkit-scrollbar-thumb:hover) {
		background-color: hsl(var(--bc) / 0.5);
	}
</style>

