<script lang="ts">
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { toast } from 'svelte-sonner';
	import FuncionarioSelect from '$lib/components/FuncionarioSelect.svelte';
	import FuncionarioNomeAutocomplete from '$lib/components/FuncionarioNomeAutocomplete.svelte';
	import FuncionarioMatriculaAutocomplete from '$lib/components/FuncionarioMatriculaAutocomplete.svelte';
	import FileUpload from '$lib/components/FileUpload.svelte';
	import ErrorModal from '$lib/components/ErrorModal.svelte';
	import CalendarioAfastamentos from '$lib/components/CalendarioAfastamentos.svelte';
	import AreaChart from '$lib/components/ti/charts/AreaChart.svelte';
	import UserAvatar from '$lib/components/chat/UserAvatar.svelte';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import jsPDF from 'jspdf';
	import autoTable from 'jspdf-autotable';
	import ExcelJS from 'exceljs';
	import logoGovPE from '$lib/assets/logo_governo_PE.png';
	import { format } from 'date-fns';
	import { ptBR } from 'date-fns/locale';
	import {
		Calendar,
		ArrowLeft,
		BarChart3,
		FileText,
		Printer,
		XCircle,
		Clock,
		CheckCircle,
		X,
		Download,
		Filter,
		Eye,
		Edit,
		Trash2,
		Info,
		AlertTriangle,
		FileCheck,
		Baby,
		User,
		Heart,
		Check
	} from 'lucide-svelte';

	const client = useConvexClient();

	// Estado da aba ativa
	let abaAtiva = $state<
		'dashboard' | 'atestado' | 'declaracao' | 'maternidade' | 'paternidade' | 'relatorios'
	>('dashboard');

	// Queries
	const dadosQuery = useQuery(api.atestadosLicencas.listarTodos, {});
	const statsQuery = useQuery(api.atestadosLicencas.obterEstatisticas, {});
	const graficosQuery = useQuery(api.atestadosLicencas.obterDadosGraficos, {
		periodo: 30
	});

	// Estados dos formulários
	// Atestado Médico
	let atestadoMedico = $state({
		funcionarioId: '' as string | undefined,
		dataInicio: '',
		dataFim: '',
		cid: '',
		observacoes: '',
		documentoId: '' as string | undefined
	});

	// Declaração
	let declaracao = $state({
		funcionarioId: '' as string | undefined,
		dataInicio: '',
		dataFim: '',
		observacoes: '',
		documentoId: '' as string | undefined
	});

	// Licença Maternidade
	let licencaMaternidade = $state({
		funcionarioId: '' as string | undefined,
		dataInicio: '',
		dataFim: '',
		observacoes: '',
		documentoId: '' as string | undefined,
		ehProrrogacao: false,
		licencaOriginalId: undefined as string | undefined
	});

	// Licença Paternidade
	let licencaPaternidade = $state({
		funcionarioId: '' as string | undefined,
		dataInicio: '',
		dataFim: '',
		observacoes: '',
		documentoId: '' as string | undefined
	});

	// Filtros
	let filtroTipo = $state<string>('todos');
	let filtroFuncionario = $state<string>('');
	let filtroDataInicio = $state<string>('');
	let filtroDataFim = $state<string>('');

	// Query reativa para eventos do calendário - deve ser definida após os filtros
	const eventosQuery = useQuery(api.atestadosLicencas.obterEventosCalendario, () => ({
		tipoFiltro: filtroTipo === 'todos' ? undefined : filtroTipo,
		dataInicio: filtroDataInicio || undefined,
		dataFim: filtroDataFim || undefined
	}));

	// Estados de loading
	let salvandoAtestado = $state(false);
	let salvandoDeclaracao = $state(false);
	let salvandoMaternidade = $state(false);
	let salvandoPaternidade = $state(false);

	// Modal de erro
	let erroModal = $state({
		aberto: false,
		titulo: '',
		mensagem: '',
		detalhes: ''
	});

	// Licenças maternidade para prorrogação (derivar dos dados já carregados)
	const licencasMaternidade = $derived.by(() => {
		const dados = dadosQuery?.data;
		if (!dados) return [];
		return dados.licencas.filter((l) => l.tipo === 'maternidade' && !l.ehProrrogacao);
	});

	// Funções auxiliares
	function formatarData(data: string) {
		return new Date(data).toLocaleDateString('pt-BR');
	}

	function calcularDias(dataInicio: string, dataFim: string): number {
		const inicio = new Date(dataInicio);
		const fim = new Date(dataFim);
		const diffTime = Math.abs(fim.getTime() - inicio.getTime());
		return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
	}

	// Upload de documento
	async function handleDocumentoUpload(file: File): Promise<string | undefined> {
		try {
			const uploadUrl = await client.mutation(api.atestadosLicencas.generateUploadUrl, {});
			const response = await fetch(uploadUrl, {
				method: 'POST',
				headers: { 'Content-Type': file.type },
				body: file
			});
			const result = await response.json();
			return result.storageId;
		} catch (error) {
			console.error('Erro no upload:', error);
			throw error;
		}
	}

	// Função para mostrar erro em modal
	function mostrarErro(titulo: string, mensagem: string, detalhes?: string) {
		erroModal = {
			aberto: true,
			titulo,
			mensagem,
			detalhes: detalhes || ''
		};
	}

	// Dados para gráfico de área - Total de Dias por Tipo (Layerchart)
	const chartDataTotalDiasPorTipo = $derived.by(() => {
		if (!graficosQuery?.data?.totalDiasPorTipo) {
			return {
				labels: [],
				datasets: []
			};
		}

		const dados = graficosQuery.data.totalDiasPorTipo;
		const cores = ['#ef4444', '#f97316', '#ec4899', '#3b82f6', '#10b981'];

		return {
			labels: dados.map((d) => d.tipo),
			datasets: [
				{
					label: 'Total de Dias',
					data: dados.map((d) => d.dias),
					backgroundColor: dados.map((_, i) => `${cores[i % cores.length]}80`),
					borderColor: dados.map((_, i) => cores[i % cores.length]),
					borderWidth: 3,
					pointBackgroundColor: dados.map((_, i) => cores[i % cores.length]),
					pointBorderColor: '#ffffff',
					pointBorderWidth: 2,
					pointRadius: 6,
					pointHoverRadius: 8,
					pointHoverBackgroundColor: dados.map((_, i) => cores[i % cores.length]),
					pointHoverBorderColor: '#ffffff',
					pointHoverBorderWidth: 3,
					fill: true,
					tension: 0.4,
					spanGaps: false
				}
			]
		};
	});

	// Dados para gráfico de área - Tendências Mensais (Layerchart empilhado)
	const chartDataTendenciasMensais = $derived.by(() => {
		if (!graficosQuery?.data?.tendenciasMensais) {
			return {
				labels: [],
				datasets: []
			};
		}

		const tendencias = graficosQuery.data.tendenciasMensais;
		const tipos = [
			'atestado_medico',
			'declaracao_comparecimento',
			'maternidade',
			'paternidade',
			'ferias'
		];
		const cores = ['#ef4444', '#f97316', '#ec4899', '#3b82f6', '#10b981'];
		const nomes = ['Atestado Médico', 'Declaração', 'Maternidade', 'Paternidade', 'Férias'];

		return {
			labels: tendencias.map((t) => t.mes),
			datasets: tipos.map((tipo, idx) => ({
				label: nomes[idx],
				data: tendencias.map((t) => (t[tipo as keyof typeof t] as number) || 0),
				backgroundColor: `${cores[idx]}60`,
				borderColor: cores[idx],
				borderWidth: 2,
				pointBackgroundColor: cores[idx],
				pointBorderColor: '#ffffff',
				pointBorderWidth: 2,
				pointRadius: 4,
				pointHoverRadius: 6,
				pointHoverBackgroundColor: cores[idx],
				pointHoverBorderColor: '#ffffff',
				pointHoverBorderWidth: 3,
				fill: true,
				tension: 0.4,
				spanGaps: false
			}))
		};
	});

	// Salvar Atestado Médico
	async function salvarAtestadoMedico() {
		if (
			!atestadoMedico.funcionarioId ||
			!atestadoMedico.dataInicio ||
			!atestadoMedico.dataFim ||
			!atestadoMedico.cid
		) {
			mostrarErro(
				'Campos obrigatórios',
				'Preencha todos os campos obrigatórios antes de salvar.',
				'Campos obrigatórios: Funcionário, Data Início, Data Fim e CID'
			);
			return;
		}

		if (!atestadoMedico.documentoId) {
			mostrarErro(
				'Documento obrigatório',
				'É necessário anexar o documento do atestado médico.',
				'Por favor, faça o upload do arquivo PDF ou imagem do atestado antes de salvar.'
			);
			return;
		}

		try {
			salvandoAtestado = true;
			await client.mutation(api.atestadosLicencas.criarAtestadoMedico, {
				funcionarioId: atestadoMedico.funcionarioId as Id<'funcionarios'>,
				dataInicio: atestadoMedico.dataInicio,
				dataFim: atestadoMedico.dataFim,
				cid: atestadoMedico.cid,
				observacoes: atestadoMedico.observacoes || undefined,
				documentoId: atestadoMedico.documentoId as Id<'_storage'>
			});

			toast.success('Atestado médico registrado com sucesso!');
			resetarFormularioAtestado();
			abaAtiva = 'dashboard';
		} catch (error: any) {
			const mensagemErro = error?.message || 'Erro ao registrar atestado';
			const detalhesErro = error?.data?.message || error?.toString() || '';
			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
		} finally {
			salvandoAtestado = false;
		}
	}

	// Salvar Declaração
	async function salvarDeclaracao() {
		if (!declaracao.funcionarioId || !declaracao.dataInicio || !declaracao.dataFim) {
			mostrarErro(
				'Campos obrigatórios',
				'Preencha todos os campos obrigatórios antes de salvar.',
				'Campos obrigatórios: Funcionário, Data Início e Data Fim'
			);
			return;
		}

		if (!declaracao.documentoId) {
			mostrarErro(
				'Documento obrigatório',
				'É necessário anexar o documento da declaração.',
				'Por favor, faça o upload do arquivo PDF ou imagem da declaração antes de salvar.'
			);
			return;
		}

		try {
			salvandoDeclaracao = true;
			await client.mutation(api.atestadosLicencas.criarDeclaracaoComparecimento, {
				funcionarioId: declaracao.funcionarioId as Id<'funcionarios'>,
				dataInicio: declaracao.dataInicio,
				dataFim: declaracao.dataFim,
				observacoes: declaracao.observacoes || undefined,
				documentoId: declaracao.documentoId as Id<'_storage'>
			});

			toast.success('Declaração registrada com sucesso!');
			resetarFormularioDeclaracao();
			abaAtiva = 'dashboard';
		} catch (error: any) {
			const mensagemErro = error?.message || 'Erro ao registrar declaração';
			const detalhesErro = error?.data?.message || error?.toString() || '';
			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
		} finally {
			salvandoDeclaracao = false;
		}
	}

	// Salvar Licença Maternidade
	async function salvarLicencaMaternidade() {
		if (
			!licencaMaternidade.funcionarioId ||
			!licencaMaternidade.dataInicio ||
			!licencaMaternidade.dataFim
		) {
			mostrarErro(
				'Campos obrigatórios',
				'Preencha todos os campos obrigatórios antes de salvar.',
				'Campos obrigatórios: Funcionário, Data Início e Data Fim'
			);
			return;
		}

		if (licencaMaternidade.ehProrrogacao && !licencaMaternidade.licencaOriginalId) {
			mostrarErro(
				'Licença original obrigatória',
				'Para prorrogações, é necessário selecionar a licença original.',
				"Selecione a licença de maternidade original no campo 'Licença Original'."
			);
			return;
		}

		if (!licencaMaternidade.documentoId) {
			mostrarErro(
				'Documento obrigatório',
				'É necessário anexar o documento da licença de maternidade.',
				'Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar.'
			);
			return;
		}

		try {
			salvandoMaternidade = true;

			// Garantir que licencaOriginalId seja undefined quando não é prorrogação
			const licencaOriginalId =
				licencaMaternidade.ehProrrogacao && licencaMaternidade.licencaOriginalId
					? (licencaMaternidade.licencaOriginalId as Id<'licencas'>)
					: undefined;

			await client.mutation(api.atestadosLicencas.criarLicencaMaternidade, {
				funcionarioId: licencaMaternidade.funcionarioId as Id<'funcionarios'>,
				dataInicio: licencaMaternidade.dataInicio,
				dataFim: licencaMaternidade.dataFim,
				observacoes: licencaMaternidade.observacoes || undefined,
				documentoId: licencaMaternidade.documentoId as Id<'_storage'>,
				licencaOriginalId
			});

			toast.success('Licença maternidade registrada com sucesso!');
			resetarFormularioMaternidade();
			abaAtiva = 'dashboard';
		} catch (error: any) {
			const mensagemErro = error?.message || 'Erro ao registrar licença';
			const detalhesErro = error?.data?.message || error?.toString() || '';
			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
		} finally {
			salvandoMaternidade = false;
		}
	}

	// Salvar Licença Paternidade
	async function salvarLicencaPaternidade() {
		if (
			!licencaPaternidade.funcionarioId ||
			!licencaPaternidade.dataInicio ||
			!licencaPaternidade.dataFim
		) {
			mostrarErro(
				'Campos obrigatórios',
				'Preencha todos os campos obrigatórios antes de salvar.',
				'Campos obrigatórios: Funcionário, Data Início e Data Fim'
			);
			return;
		}

		if (!licencaPaternidade.documentoId) {
			mostrarErro(
				'Documento obrigatório',
				'É necessário anexar o documento da licença de paternidade.',
				'Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar.'
			);
			return;
		}

		try {
			salvandoPaternidade = true;
			await client.mutation(api.atestadosLicencas.criarLicencaPaternidade, {
				funcionarioId: licencaPaternidade.funcionarioId as Id<'funcionarios'>,
				dataInicio: licencaPaternidade.dataInicio,
				dataFim: licencaPaternidade.dataFim,
				observacoes: licencaPaternidade.observacoes || undefined,
				documentoId: licencaPaternidade.documentoId as Id<'_storage'>
			});

			toast.success('Licença paternidade registrada com sucesso!');
			resetarFormularioPaternidade();
			abaAtiva = 'dashboard';
		} catch (error: any) {
			const mensagemErro = error?.message || 'Erro ao registrar licença';
			const detalhesErro = error?.data?.message || error?.toString() || '';
			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
		} finally {
			salvandoPaternidade = false;
		}
	}

	// Resetar formulários
	function resetarFormularioAtestado() {
		atestadoMedico = {
			funcionarioId: undefined,
			dataInicio: '',
			dataFim: '',
			cid: '',
			observacoes: '',
			documentoId: undefined
		};
	}

	function resetarFormularioDeclaracao() {
		declaracao = {
			funcionarioId: undefined,
			dataInicio: '',
			dataFim: '',
			observacoes: '',
			documentoId: undefined
		};
	}

	function resetarFormularioMaternidade() {
		licencaMaternidade = {
			funcionarioId: undefined,
			dataInicio: '',
			dataFim: '',
			observacoes: '',
			documentoId: undefined,
			ehProrrogacao: false,
			licencaOriginalId: undefined
		};
	}

	function resetarFormularioPaternidade() {
		licencaPaternidade = {
			funcionarioId: undefined,
			dataInicio: '',
			dataFim: '',
			observacoes: '',
			documentoId: undefined
		};
	}

	// Limpar licencaOriginalId quando não é prorrogação
	$effect(() => {
		if (abaAtiva === 'maternidade' && !licencaMaternidade.ehProrrogacao) {
			licencaMaternidade.licencaOriginalId = undefined;
		}
	});

	// Calcular data fim automaticamente para licenças
	$effect(() => {
		if (
			abaAtiva === 'maternidade' &&
			licencaMaternidade.dataInicio &&
			!licencaMaternidade.ehProrrogacao &&
			!licencaMaternidade.dataFim
		) {
			const inicio = new Date(licencaMaternidade.dataInicio);
			if (!isNaN(inicio.getTime())) {
				inicio.setDate(inicio.getDate() + 120); // 120 dias
				licencaMaternidade.dataFim = inicio.toISOString().split('T')[0];
			}
		}
	});

	$effect(() => {
		if (
			abaAtiva === 'paternidade' &&
			licencaPaternidade.dataInicio &&
			!licencaPaternidade.dataFim
		) {
			const inicio = new Date(licencaPaternidade.dataInicio);
			if (!isNaN(inicio.getTime())) {
				inicio.setDate(inicio.getDate() + 20); // 20 dias
				licencaPaternidade.dataFim = inicio.toISOString().split('T')[0];
			}
		}
	});

	// Excluir registro
	async function excluirRegistro(tipo: 'atestado' | 'licenca', id: string) {
		if (!confirm(`Tem certeza que deseja excluir este ${tipo}?`)) return;

		try {
			if (tipo === 'atestado') {
				await client.mutation(api.atestadosLicencas.excluirAtestado, { id: id as Id<'atestados'> });
			} else {
				await client.mutation(api.atestadosLicencas.excluirLicenca, { id: id as Id<'licencas'> });
			}
			toast.success('Registro excluído com sucesso!');
		} catch (error: any) {
			toast.error(error?.message || 'Erro ao excluir registro');
		}
	}

	// Filtrar registros
	const registrosFiltrados = $derived.by(() => {
		const dados = dadosQuery?.data;
		if (!dados) return { atestados: [], licencas: [] };

		let atestados = dados.atestados;
		let licencas = dados.licencas;

		// Filtro por tipo
		if (filtroTipo !== 'todos') {
			if (filtroTipo === 'atestado_medico' || filtroTipo === 'declaracao_comparecimento') {
				atestados = atestados.filter((a) => a.tipo === filtroTipo);
				licencas = [];
			} else if (filtroTipo === 'maternidade' || filtroTipo === 'paternidade') {
				atestados = [];
				licencas = licencas.filter((l) => l.tipo === filtroTipo);
			}
		}

		// Filtro por funcionário
		if (filtroFuncionario) {
			const termo = filtroFuncionario.toLowerCase();
			atestados = atestados.filter((a) => a.funcionario?.nome?.toLowerCase().includes(termo));
			licencas = licencas.filter((l) => l.funcionario?.nome?.toLowerCase().includes(termo));
		}

		// Filtro por período
		if (filtroDataInicio && filtroDataFim) {
			const inicio = new Date(filtroDataInicio);
			const fim = new Date(filtroDataFim);
			atestados = atestados.filter((a) => {
				const aInicio = new Date(a.dataInicio);
				const aFim = new Date(a.dataFim);
				return (
					(aInicio >= inicio && aInicio <= fim) ||
					(aFim >= inicio && aFim <= fim) ||
					(aInicio <= inicio && aFim >= fim)
				);
			});
			licencas = licencas.filter((l) => {
				const lInicio = new Date(l.dataInicio);
				const lFim = new Date(l.dataFim);
				return (
					(lInicio >= inicio && lInicio <= fim) ||
					(lFim >= inicio && lFim <= fim) ||
					(lInicio <= inicio && lFim >= fim)
				);
			});
		}

		return { atestados, licencas };
	});

	// Limpar filtros
	function limparFiltros() {
		filtroTipo = 'todos';
		filtroFuncionario = '';
		filtroDataInicio = '';
		filtroDataFim = '';
	}

	// Estados para relatórios
	let relatorioPeriodoInicio = $state('');
	let relatorioPeriodoFim = $state('');
	let relatorioFuncionarioNome = $state('');
	let relatorioFuncionarioMatricula = $state('');
	let relatorioCampos = $state({
		atestados: false,
		licencaPaternidade: false,
		licencaMaternidade: false,
		declaracao: false,
		todos: false
	});
	let gerandoRelatorio = $state(false);

	// Efeito para marcar todos os campos quando "Princes Alves rocha wanderley" for selecionado
	$effect(() => {
		const nomeFuncionario = relatorioFuncionarioNome.toLowerCase().trim();
		if (nomeFuncionario === 'princes alves rocha wanderley') {
			relatorioCampos = {
				atestados: true,
				licencaPaternidade: true,
				licencaMaternidade: true,
				declaracao: true,
				todos: true
			};
		}
	});

	// Função para obter dados filtrados para relatório
	async function obterDadosRelatorio() {
		const dados = dadosQuery?.data;
		if (!dados) return { atestados: [], licencas: [] };

		let atestados = dados.atestados;
		let licencas = dados.licencas;

		// Filtro por período
		if (relatorioPeriodoInicio && relatorioPeriodoFim) {
			const inicio = new Date(relatorioPeriodoInicio);
			const fim = new Date(relatorioPeriodoFim);
			atestados = atestados.filter((a) => {
				const aInicio = new Date(a.dataInicio);
				const aFim = new Date(a.dataFim);
				return (
					(aInicio >= inicio && aInicio <= fim) ||
					(aFim >= inicio && aFim <= fim) ||
					(aInicio <= inicio && aFim >= fim)
				);
			});
			licencas = licencas.filter((l) => {
				const lInicio = new Date(l.dataInicio);
				const lFim = new Date(l.dataFim);
				return (
					(lInicio >= inicio && lInicio <= fim) ||
					(lFim >= inicio && lFim <= fim) ||
					(lInicio <= inicio && lFim >= fim)
				);
			});
		}

		// Filtro por funcionário (nome ou matrícula)
		if (relatorioFuncionarioNome || relatorioFuncionarioMatricula) {
			const termoNome = relatorioFuncionarioNome.toLowerCase();
			const termoMatricula = relatorioFuncionarioMatricula.toLowerCase();
			atestados = atestados.filter((a) => {
				const nomeMatch = !termoNome || a.funcionario?.nome?.toLowerCase().includes(termoNome);
				const matriculaMatch =
					!termoMatricula || a.funcionario?.matricula?.toLowerCase().includes(termoMatricula);
				return nomeMatch && matriculaMatch;
			});
			licencas = licencas.filter((l) => {
				const nomeMatch = !termoNome || l.funcionario?.nome?.toLowerCase().includes(termoNome);
				const matriculaMatch =
					!termoMatricula || l.funcionario?.matricula?.toLowerCase().includes(termoMatricula);
				return nomeMatch && matriculaMatch;
			});
		}

		// Filtro por campos selecionados
		if (!relatorioCampos.todos) {
			if (!relatorioCampos.atestados) {
				atestados = atestados.filter((a) => a.tipo !== 'atestado_medico');
			}
			if (!relatorioCampos.declaracao) {
				atestados = atestados.filter((a) => a.tipo !== 'declaracao_comparecimento');
			}
			if (!relatorioCampos.licencaMaternidade) {
				licencas = licencas.filter((l) => l.tipo !== 'maternidade');
			}
			if (!relatorioCampos.licencaPaternidade) {
				licencas = licencas.filter((l) => l.tipo !== 'paternidade');
			}
		}

		return { atestados, licencas };
	}

	// Função para gerar PDF
	async function gerarPDF() {
		if (!relatorioPeriodoInicio || !relatorioPeriodoFim) {
			toast.error('Selecione o período para gerar o relatório');
			return;
		}

		if (
			!relatorioCampos.todos &&
			!relatorioCampos.atestados &&
			!relatorioCampos.declaracao &&
			!relatorioCampos.licencaMaternidade &&
			!relatorioCampos.licencaPaternidade
		) {
			toast.error('Selecione pelo menos um tipo de campo para incluir no relatório');
			return;
		}

		gerandoRelatorio = true;
		try {
			const { atestados, licencas } = await obterDadosRelatorio();
			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 = 30;
				const aspectRatio = logoImg.height / logoImg.width;
				const logoHeight = logoWidth * aspectRatio;

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

			// Título
			doc.setFontSize(18);
			doc.setTextColor(41, 128, 185);
			doc.text('RELATÓRIO DE ATESTADOS E LICENÇAS', 105, yPosition, { align: 'center' });

			yPosition += 10;

			// Período
			doc.setFontSize(11);
			doc.setTextColor(0, 0, 0);
			doc.text(
				`Período: ${format(new Date(relatorioPeriodoInicio), 'dd/MM/yyyy', { locale: ptBR })} até ${format(new Date(relatorioPeriodoFim), 'dd/MM/yyyy', { locale: ptBR })}`,
				105,
				yPosition,
				{ align: 'center' }
			);

			yPosition += 8;

			// Filtros aplicados
			doc.setFontSize(9);
			doc.setTextColor(100, 100, 100);
			let filtrosTexto = 'Filtros: ';
			if (relatorioFuncionarioNome) filtrosTexto += `Nome: ${relatorioFuncionarioNome}; `;
			if (relatorioFuncionarioMatricula)
				filtrosTexto += `Matrícula: ${relatorioFuncionarioMatricula}; `;
			if (relatorioCampos.todos) filtrosTexto += 'Todos os tipos';
			else {
				const tipos = [];
				if (relatorioCampos.atestados) tipos.push('Atestados');
				if (relatorioCampos.declaracao) tipos.push('Declarações');
				if (relatorioCampos.licencaMaternidade) tipos.push('Licença Maternidade');
				if (relatorioCampos.licencaPaternidade) tipos.push('Licença Paternidade');
				filtrosTexto += tipos.join(', ');
			}
			doc.text(filtrosTexto, 105, yPosition, { align: 'center', maxWidth: 180 });

			yPosition += 10;

			// Data de geração
			doc.setFontSize(9);
			doc.text(
				`Gerado em: ${format(new Date(), 'dd/MM/yyyy HH:mm', { locale: ptBR })}`,
				15,
				yPosition
			);

			yPosition += 12;

			// Preparar dados para tabela
			const dadosTabela: string[][] = [];

			// Adicionar atestados
			if (relatorioCampos.todos || relatorioCampos.atestados || relatorioCampos.declaracao) {
				atestados.forEach((a) => {
					const tipo = a.tipo === 'atestado_medico' ? 'Atestado Médico' : 'Declaração';
					dadosTabela.push([
						a.funcionario?.nome || '-',
						a.funcionario?.matricula || '-',
						tipo,
						formatarData(a.dataInicio),
						formatarData(a.dataFim),
						a.dias.toString(),
						a.cid || '-',
						a.status === 'ativo' ? 'Ativo' : 'Finalizado'
					]);
				});
			}

			// Adicionar licenças
			if (
				relatorioCampos.todos ||
				relatorioCampos.licencaMaternidade ||
				relatorioCampos.licencaPaternidade
			) {
				licencas.forEach((l) => {
					const tipo = l.tipo === 'maternidade' ? 'Licença Maternidade' : 'Licença Paternidade';
					dadosTabela.push([
						l.funcionario?.nome || '-',
						l.funcionario?.matricula || '-',
						tipo + (l.ehProrrogacao ? ' (Prorrogação)' : ''),
						formatarData(l.dataInicio),
						formatarData(l.dataFim),
						l.dias.toString(),
						'-',
						l.status === 'ativo' ? 'Ativo' : 'Finalizado'
					]);
				});
			}

			// Ordenar por data de início
			dadosTabela.sort((a, b) => {
				const dataA = new Date(a[3].split('/').reverse().join('-'));
				const dataB = new Date(b[3].split('/').reverse().join('-'));
				return dataA.getTime() - dataB.getTime();
			});

			// Tabela
			if (dadosTabela.length > 0) {
				autoTable(doc, {
					startY: yPosition,
					head: [
						['Funcionário', 'Matrícula', 'Tipo', 'Data Início', 'Data Fim', 'Dias', 'CID', 'Status']
					],
					body: dadosTabela,
					theme: 'striped',
					headStyles: {
						fillColor: [41, 128, 185],
						textColor: [255, 255, 255],
						fontStyle: 'bold',
						fontSize: 7
					},
					styles: { fontSize: 7 },
					columnStyles: {
						0: { cellWidth: 45, fontSize: 7 }, // Funcionário
						1: { cellWidth: 20, fontSize: 7 }, // Matrícula
						2: { cellWidth: 35, fontSize: 7 }, // Tipo
						3: { cellWidth: 22, fontSize: 7 }, // Data Início
						4: { cellWidth: 22, fontSize: 7 }, // Data Fim
						5: { cellWidth: 12, fontSize: 7 }, // Dias
						6: { cellWidth: 18, fontSize: 7 }, // CID
						7: { cellWidth: 18, fontSize: 7 } // Status
					},
					margin: { top: yPosition, left: 10, right: 10 },
					tableWidth: 'wrap'
				});

				// 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' }
					);
				}
			} else {
				doc.setFontSize(12);
				doc.setTextColor(150, 150, 150);
				doc.text('Nenhum registro encontrado para os filtros selecionados', 105, yPosition + 20, {
					align: 'center'
				});
			}

			// Salvar
			const nomeArquivo = `relatorio-atestados-licencas-${format(new Date(), 'yyyy-MM-dd-HHmm')}.pdf`;
			doc.save(nomeArquivo);
			toast.success('Relatório PDF gerado com sucesso!');
		} catch (error) {
			console.error('Erro ao gerar PDF:', error);
			toast.error('Erro ao gerar relatório PDF. Tente novamente.');
		} finally {
			gerandoRelatorio = false;
		}
	}

	// Função para gerar Excel
	async function gerarExcel() {
		if (!relatorioPeriodoInicio || !relatorioPeriodoFim) {
			toast.error('Selecione o período para gerar o relatório');
			return;
		}

		if (
			!relatorioCampos.todos &&
			!relatorioCampos.atestados &&
			!relatorioCampos.declaracao &&
			!relatorioCampos.licencaMaternidade &&
			!relatorioCampos.licencaPaternidade
		) {
			toast.error('Selecione pelo menos um tipo de campo para incluir no relatório');
			return;
		}

		gerandoRelatorio = true;
		try {
			const { atestados, licencas } = await obterDadosRelatorio();

			// Preparar dados
			const dados: Array<Record<string, string | number>> = [];

			// Adicionar atestados
			if (relatorioCampos.todos || relatorioCampos.atestados || relatorioCampos.declaracao) {
				atestados.forEach((a) => {
					const tipo = a.tipo === 'atestado_medico' ? 'Atestado Médico' : 'Declaração';
					dados.push({
						Funcionário: a.funcionario?.nome || '-',
						Matrícula: a.funcionario?.matricula || '-',
						Tipo: tipo,
						'Data Início': formatarData(a.dataInicio),
						'Data Fim': formatarData(a.dataFim),
						Dias: a.dias,
						CID: a.cid || '-',
						Status: a.status === 'ativo' ? 'Ativo' : 'Finalizado'
					});
				});
			}

			// Adicionar licenças
			if (
				relatorioCampos.todos ||
				relatorioCampos.licencaMaternidade ||
				relatorioCampos.licencaPaternidade
			) {
				licencas.forEach((l) => {
					const tipo = l.tipo === 'maternidade' ? 'Licença Maternidade' : 'Licença Paternidade';
					dados.push({
						Funcionário: l.funcionario?.nome || '-',
						Matrícula: l.funcionario?.matricula || '-',
						Tipo: tipo + (l.ehProrrogacao ? ' (Prorrogação)' : ''),
						'Data Início': formatarData(l.dataInicio),
						'Data Fim': formatarData(l.dataFim),
						Dias: l.dias,
						CID: '-',
						Status: l.status === 'ativo' ? 'Ativo' : 'Finalizado'
					});
				});
			}

			// Ordenar por data de início
			dados.sort((a, b) => {
				const dataAStr = a['Data Início'] as string;
				const dataBStr = b['Data Início'] as string;
				const dataA = new Date(dataAStr.split('/').reverse().join('-'));
				const dataB = new Date(dataBStr.split('/').reverse().join('-'));
				return dataA.getTime() - dataB.getTime();
			});

			// Criar workbook com ExcelJS
			const workbook = new ExcelJS.Workbook();
			const worksheet = workbook.addWorksheet('Relatório');

			// Obter cabeçalhos
			const headers = Object.keys(dados[0] || {});

			// Carregar logo
			let logoBuffer: ArrayBuffer | null = null;
			try {
				// Tentar carregar a logo via fetch primeiro
				const response = await fetch(logoGovPE);
				if (response.ok) {
					logoBuffer = await response.arrayBuffer();
				} else {
					// Fallback: usar canvas
					const logoImg = new Image();
					logoImg.crossOrigin = 'anonymous';
					logoImg.src = logoGovPE;
					await new Promise<void>((resolve, reject) => {
						logoImg.onload = () => resolve();
						logoImg.onerror = () => reject();
						setTimeout(() => reject(), 3000);
					});

					const canvas = document.createElement('canvas');
					canvas.width = logoImg.width;
					canvas.height = logoImg.height;
					const ctx = canvas.getContext('2d');
					if (ctx) {
						ctx.drawImage(logoImg, 0, 0);
						const blob = await new Promise<Blob>((resolve, reject) => {
							canvas.toBlob((blob) => {
								if (blob) resolve(blob);
								else reject(new Error('Falha ao converter imagem'));
							}, 'image/png');
						});
						logoBuffer = await blob.arrayBuffer();
					}
				}
			} catch (err) {
				console.warn('Não foi possível carregar a logo:', err);
			}

			// Linha 1: Cabeçalho com logo e título
			// Mesclar A1:B1 para logo
			worksheet.mergeCells('A1:B1');
			const logoCell = worksheet.getCell('A1');
			logoCell.alignment = { vertical: 'middle', horizontal: 'left' };
			logoCell.border = {
				right: { style: 'thin', color: { argb: 'FFE0E0E0' } }
			};

			// Adicionar logo se disponível
			if (logoBuffer) {
				const logoId = workbook.addImage({
					buffer: new Uint8Array(logoBuffer),
					extension: 'png'
				});
				// Ajustar tamanho da logo para caber na linha com altura 60
				worksheet.addImage(logoId, {
					tl: { col: 0, row: 0 },
					ext: { width: 140, height: 55 }
				});
			}

			// Mesclar C1 até última coluna para título
			const lastCol = String.fromCharCode(65 + headers.length - 1); // A=65
			worksheet.mergeCells(`C1:${lastCol}1`);
			const titleCell = worksheet.getCell('C1');
			titleCell.value = 'RELATÓRIO DE ATESTADOS E LICENÇAS';
			titleCell.font = { bold: true, size: 18, color: { argb: 'FF2980B9' } };
			titleCell.alignment = { vertical: 'middle', horizontal: 'center' };

			// Ajustar altura da linha 1 para acomodar a logo
			worksheet.getRow(1).height = 60;

			// Linha 2: Cabeçalhos da tabela
			headers.forEach((header, index) => {
				const cell = worksheet.getCell(2, index + 1);
				cell.value = header;
				cell.font = { bold: true, size: 11, color: { argb: 'FFFFFFFF' } };
				cell.fill = {
					type: 'pattern',
					pattern: 'solid',
					fgColor: { argb: 'FF2980B9' }
				};
				cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
				cell.border = {
					top: { style: 'thin', color: { argb: 'FF000000' } },
					bottom: { style: 'thin', color: { argb: 'FF000000' } },
					left: { style: 'thin', color: { argb: 'FF000000' } },
					right: { style: 'thin', color: { argb: 'FF000000' } }
				};
			});

			// Ajustar altura da linha 2
			worksheet.getRow(2).height = 25;

			// Linhas 3+: Dados
			dados.forEach((rowData, rowIndex) => {
				const row = rowIndex + 3; // Começa na linha 3
				headers.forEach((header, colIndex) => {
					const cell = worksheet.getCell(row, colIndex + 1);
					cell.value = rowData[header];

					// Cor de fundo alternada (zebra striping)
					const isEvenRow = rowIndex % 2 === 1;
					cell.fill = {
						type: 'pattern',
						pattern: 'solid',
						fgColor: { argb: isEvenRow ? 'FFF8F9FA' : 'FFFFFFFF' }
					};

					// Alinhamento
					let alignment: 'left' | 'center' | 'right' = 'left';
					if (
						header === 'Dias' ||
						header === 'Data Início' ||
						header === 'Data Fim' ||
						header === 'Status'
					) {
						alignment = 'center';
					}
					cell.alignment = { vertical: 'middle', horizontal: alignment, wrapText: true };

					// Fonte
					cell.font = { size: 10, color: { argb: 'FF000000' } };

					// Bordas
					cell.border = {
						top: { style: 'thin', color: { argb: 'FFE0E0E0' } },
						bottom: { style: 'thin', color: { argb: 'FFE0E0E0' } },
						left: { style: 'thin', color: { argb: 'FFE0E0E0' } },
						right: { style: 'thin', color: { argb: 'FFE0E0E0' } }
					};

					// Formatação especial para Status
					if (header === 'Status') {
						const statusValue = rowData[header];
						if (statusValue === 'Ativo') {
							cell.fill = {
								type: 'pattern',
								pattern: 'solid',
								fgColor: { argb: 'FFD4EDDA' }
							};
							cell.font = { size: 10, color: { argb: 'FF155724' } };
						} else if (statusValue === 'Finalizado') {
							cell.fill = {
								type: 'pattern',
								pattern: 'solid',
								fgColor: { argb: 'FFF8D7DA' }
							};
							cell.font = { size: 10, color: { argb: 'FF721C24' } };
						}
					}
				});
			});

			// Ajustar largura das colunas
			worksheet.columns = [
				{ width: 30 }, // Funcionário
				{ width: 15 }, // Matrícula
				{ width: 25 }, // Tipo
				{ width: 12 }, // Data Início
				{ width: 12 }, // Data Fim
				{ width: 8 }, // Dias
				{ width: 12 }, // CID
				{ width: 12 } // Status
			];

			// Congelar linha 2 (cabeçalho da tabela)
			worksheet.views = [
				{
					state: 'frozen',
					ySplit: 2,
					topLeftCell: 'A3',
					activeCell: 'A3'
				}
			];

			// Gerar arquivo
			const nomeArquivo = `relatorio-atestados-licencas-${format(new Date(), 'yyyy-MM-dd-HHmm')}.xlsx`;
			const buffer = await workbook.xlsx.writeBuffer();
			const blob = new Blob([buffer], {
				type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
			});
			const url = window.URL.createObjectURL(blob);
			const link = document.createElement('a');
			link.href = url;
			link.download = nomeArquivo;
			link.click();
			window.URL.revokeObjectURL(url);

			toast.success('Relatório Excel gerado com sucesso!');
		} catch (error) {
			console.error('Erro ao gerar Excel:', error);
			toast.error('Erro ao gerar relatório Excel. Tente novamente.');
		} finally {
			gerandoRelatorio = false;
		}
	}

	// Efeito para sincronizar o checkbox "Todos" com os demais campos
	$effect(() => {
		if (relatorioCampos.todos) {
			// Se "Todos" está marcado, marcar todos os outros
			relatorioCampos.atestados = true;
			relatorioCampos.licencaPaternidade = true;
			relatorioCampos.licencaMaternidade = true;
			relatorioCampos.declaracao = true;
		} else {
			// Se "Todos" está desmarcado, desmarcar todos os outros
			relatorioCampos.atestados = false;
			relatorioCampos.licencaPaternidade = false;
			relatorioCampos.licencaMaternidade = false;
			relatorioCampos.declaracao = false;
		}
	});
</script>

<svelte:head>
	<title>Atestados & Licenças - Recursos Humanos</title>
</svelte:head>

<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('/recursos-humanos')} class="text-primary hover:underline"
					>Recursos Humanos</a
				>
			</li>
			<li>Atestados & Licenças</li>
		</ul>
	</div>

	<!-- Header -->
	<div class="mb-6">
		<div class="flex flex-wrap items-center justify-between gap-4">
			<div class="flex items-center gap-4">
				<div class="rounded-xl bg-purple-500/20 p-3">
					<FileCheck class="h-8 w-8 text-purple-600" strokeWidth={2} />
				</div>
				<div>
					<h1 class="text-primary text-3xl font-bold">Atestados & Licenças</h1>
					<p class="text-base-content/70">Registro de atestados médicos e licenças</p>
				</div>
			</div>
			<button class="btn gap-2" onclick={() => goto(resolve('/recursos-humanos'))}>
				<ArrowLeft class="h-5 w-5" strokeWidth={2} />
				Voltar
			</button>
		</div>
	</div>

	<!-- Tabs -->
	<div class="tabs tabs-boxed bg-base-100 mb-6 p-2 shadow-lg">
		<button
			class="tab gap-2 {abaAtiva === 'dashboard' ? 'tab-active' : ''}"
			onclick={() => (abaAtiva = 'dashboard')}
		>
			<BarChart3 class="h-5 w-5" strokeWidth={2} />
			<span class="font-medium">Dashboard</span>
		</button>
		<button
			class="tab gap-2 {abaAtiva === 'atestado' ? 'tab-active' : ''}"
			onclick={() => (abaAtiva = 'atestado')}
		>
			<FileText class="h-5 w-5" strokeWidth={2} />
			<span class="font-medium">Atestado Médico</span>
		</button>
		<button
			class="tab gap-2 {abaAtiva === 'declaracao' ? 'tab-active' : ''}"
			onclick={() => (abaAtiva = 'declaracao')}
		>
			<FileText class="h-5 w-5" strokeWidth={2} />
			<span class="font-medium">Declaração</span>
		</button>
		<button
			class="tab gap-2 {abaAtiva === 'maternidade' ? 'tab-active' : ''}"
			onclick={() => (abaAtiva = 'maternidade')}
		>
			<Baby class="h-5 w-5" strokeWidth={2} />
			<span class="font-medium">Licença Maternidade</span>
		</button>
		<button
			class="tab gap-2 {abaAtiva === 'paternidade' ? 'tab-active' : ''}"
			onclick={() => (abaAtiva = 'paternidade')}
		>
			<User class="h-5 w-5" strokeWidth={2} />
			<span class="font-medium">Licença Paternidade</span>
		</button>
		<button
			class="tab gap-2 {abaAtiva === 'relatorios' ? 'tab-active' : ''}"
			onclick={() => (abaAtiva = 'relatorios')}
		>
			<Printer class="h-5 w-5" strokeWidth={2} />
			<span class="font-medium">Imprimir Relatórios</span>
		</button>
	</div>

	<!-- Conteúdo das Abas -->
	{#if abaAtiva === 'dashboard'}
		<!-- Dashboard -->
		<!-- Estatísticas -->
		{#if statsQuery?.data}
			<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
					<div class="stat-figure text-error">
						<FileText class="h-8 w-8" strokeWidth={2} />
					</div>
					<div class="stat-title">Atestados Ativos</div>
					<div class="stat-value text-error">
						{statsQuery.data.totalAtestadosAtivos}
					</div>
				</div>

				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
					<div class="stat-figure text-secondary">
						<Calendar class="h-8 w-8" strokeWidth={2} />
					</div>
					<div class="stat-title">Licenças Ativas</div>
					<div class="stat-value text-secondary">
						{statsQuery.data.totalLicencasAtivas}
					</div>
				</div>

				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
					<div class="stat-figure text-warning">
						<User class="h-8 w-8" strokeWidth={2} />
					</div>
					<div class="stat-title">Afastados Hoje</div>
					<div class="stat-value text-warning">
						{statsQuery.data.funcionariosAfastadosHoje}
					</div>
				</div>

				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
					<div class="stat-figure text-info">
						<Calendar class="h-8 w-8" strokeWidth={2} />
					</div>
					<div class="stat-title">Dias no Mês</div>
					<div class="stat-value text-info">
						{statsQuery.data.totalDiasAfastamentoMes}
					</div>
				</div>
			</div>
		{/if}

		<!-- Filtros -->
		<div class="card bg-base-100 mb-6 shadow-xl">
			<div class="card-body">
				<h2 class="card-title mb-4">Filtros</h2>
				<div class="grid grid-cols-1 items-end gap-4 md:grid-cols-5">
					<div class="form-control">
						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-tipo">
							<span class="label-text">Tipo</span>
							<select id="filtro-tipo" class="select select-bordered" bind:value={filtroTipo}>
								<option value="todos">Todos</option>
								<option value="atestado_medico">Atestado Médico</option>
								<option value="declaracao_comparecimento">Declaração</option>
								<option value="maternidade">Licença Maternidade</option>
								<option value="paternidade">Licença Paternidade</option>
							</select>
						</label>
					</div>

					<div class="form-control">
						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-funcionario">
							<span class="label-text">Funcionário</span>
							<input
								id="filtro-funcionario"
								class="input input-bordered"
								type="text"
								bind:value={filtroFuncionario}
								placeholder="Nome do colaborador"
							/>
						</label>
					</div>

					<div class="form-control">
						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-data-inicio">
							<span class="label-text">Data Início</span>
							<input
								id="filtro-data-inicio"
								class="input input-bordered"
								type="date"
								bind:value={filtroDataInicio}
							/>
						</label>
					</div>

					<div class="form-control">
						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-data-fim">
							<span class="label-text">Data Fim</span>
							<input
								id="filtro-data-fim"
								class="input input-bordered"
								type="date"
								bind:value={filtroDataFim}
							/>
						</label>
					</div>

					<div class="flex justify-end gap-2">
						<button class="btn btn-outline" onclick={limparFiltros}>Limpar</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Calendário Interativo -->
		{#if eventosQuery?.data}
			{@const eventosFiltradosPorFuncionario = filtroFuncionario
				? eventosQuery.data.filter((e) =>
						e.funcionarioNome.toLowerCase().includes(filtroFuncionario.toLowerCase())
					)
				: eventosQuery.data}
			<div class="mb-6">
				<CalendarioAfastamentos eventos={eventosFiltradosPorFuncionario} tipoFiltro={filtroTipo} />
			</div>
		{/if}

		<!-- Lista de Funcionários Afastados -->
		{#if graficosQuery?.data}
			<div class="card bg-base-100 mb-6 shadow-xl">
				<div class="card-body">
					<h2 class="card-title mb-4">Funcionários Atualmente Afastados</h2>
					{#if graficosQuery.data.funcionariosAfastados.length > 0}
						<div class="overflow-x-auto">
							<table class="table-zebra table">
								<thead>
									<tr>
										<th>Funcionário</th>
										<th>Tipo</th>
										<th>Data Início</th>
										<th>Data Fim</th>
									</tr>
								</thead>
								<tbody>
									{#each graficosQuery.data.funcionariosAfastados as item}
										<tr>
											<td>{item.funcionarioNome}</td>
											<td>
												<span
													class="badge {item.tipo === 'atestado_medico'
														? 'badge-error'
														: item.tipo === 'declaracao_comparecimento'
															? 'badge-warning'
															: item.tipo === 'maternidade'
																? 'badge-secondary'
																: item.tipo === 'paternidade'
																	? 'badge-info'
																	: 'badge-success'}"
												>
													{item.tipo === 'atestado_medico'
														? 'Atestado Médico'
														: item.tipo === 'declaracao_comparecimento'
															? 'Declaração'
															: item.tipo === 'maternidade'
																? 'Licença Maternidade'
																: item.tipo === 'paternidade'
																	? 'Licença Paternidade'
																	: item.tipo}
												</span>
											</td>
											<td>{formatarData(item.dataInicio)}</td>
											<td>{formatarData(item.dataFim)}</td>
										</tr>
									{/each}
								</tbody>
							</table>
						</div>
					{:else}
						<div class="text-base-content/60 py-10 text-center">
							Nenhum funcionário afastado no momento
						</div>
					{/if}
				</div>
			</div>
		{/if}

		<!-- Tabela de Registros -->
		<div class="card bg-base-100 mb-6 shadow-xl">
			<div class="card-body">
				<h2 class="card-title mb-4">Registros</h2>
				<div class="overflow-x-auto">
					<table class="table-zebra table">
						<thead>
							<tr>
								<th>Funcionário</th>
								<th>Tipo</th>
								<th>Data Início</th>
								<th>Data Fim</th>
								<th>Dias</th>
								<th>Status</th>
								<th>Ações</th>
							</tr>
						</thead>
						<tbody>
							{#each registrosFiltrados.atestados as atestado}
								<tr>
									<td>
										<div class="flex items-center gap-3">
											<UserAvatar
												fotoPerfilUrl={atestado.fotoPerfilUrl}
												nome={atestado.funcionario?.nome || 'Funcionário'}
												size="sm"
											/>
											<span>{atestado.funcionario?.nome || '-'}</span>
										</div>
									</td>
									<td>
										<span
											class="badge {atestado.tipo === 'atestado_medico'
												? 'badge-error'
												: 'badge-warning'}"
										>
											{atestado.tipo === 'atestado_medico' ? 'Atestado Médico' : 'Declaração'}
										</span>
									</td>
									<td class="font-mono text-xs whitespace-nowrap"
										>{formatarData(atestado.dataInicio)}</td
									>
									<td class="font-mono text-xs whitespace-nowrap"
										>{formatarData(atestado.dataFim)}</td
									>
									<td>{atestado.dias}</td>
									<td>
										<span
											class="badge {atestado.status === 'ativo'
												? 'badge-success'
												: 'badge-neutral'}"
										>
											{atestado.status === 'ativo' ? 'Ativo' : 'Finalizado'}
										</span>
									</td>
									<td>
										<div class="flex gap-2">
											{#if atestado.documentoId}
												<button
													class="btn btn-xs btn-ghost"
													onclick={async () => {
														try {
															const url = await client.query(
																api.atestadosLicencas.obterUrlDocumento,
																{
																	storageId: atestado.documentoId as any
																}
															);
															if (url) {
																window.open(url, '_blank');
															} else {
																mostrarErro(
																	'Erro ao visualizar documento',
																	'Não foi possível obter a URL do documento.',
																	'O documento pode ter sido removido ou não existe mais.'
																);
															}
														} catch (err: any) {
															console.error('Erro ao obter URL do documento:', err);
															mostrarErro(
																'Erro ao visualizar documento',
																'Não foi possível abrir o documento.',
																err?.message || err?.toString() || 'Erro desconhecido'
															);
														}
													}}
												>
													Ver Doc
												</button>
											{/if}
											<button
												class="btn btn-xs btn-error"
												onclick={() => excluirRegistro('atestado', atestado._id)}
											>
												Excluir
											</button>
										</div>
									</td>
								</tr>
							{/each}
							{#each registrosFiltrados.licencas as licenca}
								<tr>
									<td>
										<div class="flex items-center gap-3">
											<UserAvatar
												fotoPerfilUrl={licenca.fotoPerfilUrl}
												nome={licenca.funcionario?.nome || 'Funcionário'}
												size="sm"
											/>
											<span>{licenca.funcionario?.nome || '-'}</span>
										</div>
									</td>
									<td>
										<span
											class="badge {licenca.tipo === 'maternidade'
												? 'badge-secondary'
												: 'badge-info'}"
										>
											Licença{' '}
											{licenca.tipo === 'maternidade' ? 'Maternidade' : 'Paternidade'}
											{licenca.ehProrrogacao ? ' (Prorrogação)' : ''}
										</span>
									</td>
									<td class="font-mono text-xs whitespace-nowrap"
										>{formatarData(licenca.dataInicio)}</td
									>
									<td class="font-mono text-xs whitespace-nowrap"
										>{formatarData(licenca.dataFim)}</td
									>
									<td>{licenca.dias}</td>
									<td>
										<span
											class="badge {licenca.status === 'ativo' ? 'badge-success' : 'badge-neutral'}"
										>
											{licenca.status === 'ativo' ? 'Ativo' : 'Finalizado'}
										</span>
									</td>
									<td>
										<div class="flex gap-2">
											{#if licenca.documentoId}
												<button
													class="btn btn-xs btn-ghost"
													onclick={async () => {
														try {
															const url = await client.query(
																api.atestadosLicencas.obterUrlDocumento,
																{
																	storageId: licenca.documentoId as any
																}
															);
															if (url) {
																window.open(url, '_blank');
															} else {
																mostrarErro(
																	'Erro ao visualizar documento',
																	'Não foi possível obter a URL do documento.',
																	'O documento pode ter sido removido ou não existe mais.'
																);
															}
														} catch (err: any) {
															console.error('Erro ao obter URL do documento:', err);
															mostrarErro(
																'Erro ao visualizar documento',
																'Não foi possível abrir o documento.',
																err?.message || err?.toString() || 'Erro desconhecido'
															);
														}
													}}
												>
													Ver Doc
												</button>
											{/if}
											<button
												class="btn btn-xs btn-error"
												onclick={() => excluirRegistro('licenca', licenca._id)}
											>
												Excluir
											</button>
										</div>
									</td>
								</tr>
							{/each}
						</tbody>
					</table>
					{#if registrosFiltrados.atestados.length === 0 && registrosFiltrados.licencas.length === 0}
						<div class="text-base-content/60 py-10 text-center">Nenhum registro encontrado</div>
					{/if}
				</div>
			</div>
		</div>

		<!-- Gráficos -->
		{#if graficosQuery?.data}
			<!-- Gráfico 1: Total de Dias por Tipo (Layerchart) -->
			<div class="card bg-base-100 mb-6 shadow-xl">
				<div class="card-body">
					<h2 class="card-title mb-4">Total de Dias por Tipo</h2>
					<div class="bg-base-200/30 w-full overflow-x-auto rounded-xl p-4">
						{#if chartDataTotalDiasPorTipo.labels.length === 0}
							<div class="flex h-96 items-center justify-center">
								<p class="text-base-content/60">Sem dados registrados até o momento.</p>
							</div>
						{:else}
							<AreaChart data={chartDataTotalDiasPorTipo} height={400} />
						{/if}
					</div>
				</div>
			</div>

			<!-- Gráfico 2: Tendências Mensais (Layerchart empilhado) -->
			<div class="card bg-base-100 mb-6 shadow-xl">
				<div class="card-body">
					<h2 class="card-title mb-4">Tendências Mensais (Últimos 6 Meses)</h2>
					<div class="bg-base-200/30 w-full overflow-x-auto rounded-xl p-4">
						{#if chartDataTendenciasMensais.labels.length === 0}
							<div class="flex h-96 items-center justify-center">
								<p class="text-base-content/60">Sem dados registrados até o momento.</p>
							</div>
						{:else}
							<AreaChart data={chartDataTendenciasMensais} height={400} />
						{/if}
					</div>
				</div>
			</div>
		{/if}
	{:else if abaAtiva === 'atestado'}
		<!-- Formulário Atestado Médico -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<div class="mb-6 flex items-center gap-3">
					<div class="bg-error/10 rounded-lg p-2">
						<FileText class="text-error h-6 w-6" strokeWidth={2} />
					</div>
					<div>
						<h2 class="card-title text-2xl">Registrar Atestado Médico</h2>
						<p class="text-base-content/70 text-sm">
							Preencha os dados do atestado médico do funcionário
						</p>
					</div>
				</div>

				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
					<div class="form-control md:col-span-2">
						<FuncionarioSelect bind:value={atestadoMedico.funcionarioId} required={true} />
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold"
								>Data Início <span class="text-error">*</span></span
							>
						</label>
						<input
							type="date"
							bind:value={atestadoMedico.dataInicio}
							class="input input-bordered w-full"
							required
						/>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold"
								>Data Fim <span class="text-error">*</span></span
							>
						</label>
						<input
							type="date"
							bind:value={atestadoMedico.dataFim}
							class="input input-bordered w-full"
							required
						/>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">CID <span class="text-error">*</span></span>
						</label>
						<input
							type="text"
							bind:value={atestadoMedico.cid}
							placeholder="Ex: A00.0"
							class="input input-bordered w-full"
							maxlength="10"
							required
						/>
					</div>

					<div class="form-control md:col-span-2">
						<FileUpload
							label="Anexar Atestado (PDF ou Imagem)"
							bind:value={atestadoMedico.documentoId}
							required={true}
							onUpload={async (file) => {
								atestadoMedico.documentoId = await handleDocumentoUpload(file);
							}}
							onRemove={async () => {
								atestadoMedico.documentoId = undefined;
							}}
						/>
					</div>

					<div class="form-control md:col-span-2">
						<label class="label">
							<span class="label-text font-semibold">Observações</span>
						</label>
						<textarea
							bind:value={atestadoMedico.observacoes}
							class="textarea textarea-bordered h-24 w-full"
							placeholder="Observações adicionais..."
						></textarea>
					</div>
				</div>

				<div class="divider my-6"></div>
				<div class="card-actions justify-end gap-3">
					<button class="btn btn-outline" onclick={resetarFormularioAtestado}>
						<X class="h-5 w-5" strokeWidth={2} />
						Cancelar
					</button>
					<button
						class="btn btn-primary gap-2"
						onclick={salvarAtestadoMedico}
						disabled={salvandoAtestado}
					>
						{#if salvandoAtestado}
							<span class="loading loading-spinner loading-sm"></span>
							Salvando...
						{:else}
							<Check class="h-5 w-5" strokeWidth={2} />
							Salvar
						{/if}
					</button>
				</div>
			</div>
		</div>
	{:else if abaAtiva === 'declaracao'}
		<!-- Formulário Declaração -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<div class="mb-6 flex items-center gap-3">
					<div class="bg-warning/10 rounded-lg p-2">
						<FileText class="text-warning h-6 w-6" strokeWidth={2} />
					</div>
					<div>
						<h2 class="card-title text-2xl">Registrar Declaração de Comparecimento</h2>
						<p class="text-base-content/70 text-sm">
							Preencha os dados da declaração de comparecimento
						</p>
					</div>
				</div>

				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
					<div class="form-control md:col-span-2">
						<FuncionarioSelect bind:value={declaracao.funcionarioId} required={true} />
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold"
								>Data Início <span class="text-error">*</span></span
							>
						</label>
						<input
							type="date"
							bind:value={declaracao.dataInicio}
							class="input input-bordered w-full"
							required
						/>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold"
								>Data Fim <span class="text-error">*</span></span
							>
						</label>
						<input
							type="date"
							bind:value={declaracao.dataFim}
							class="input input-bordered w-full"
							required
						/>
					</div>

					<div class="form-control md:col-span-2">
						<FileUpload
							label="Anexar Documento (PDF ou Imagem)"
							bind:value={declaracao.documentoId}
							required={true}
							onUpload={async (file) => {
								declaracao.documentoId = await handleDocumentoUpload(file);
							}}
							onRemove={async () => {
								declaracao.documentoId = undefined;
							}}
						/>
					</div>

					<div class="form-control md:col-span-2">
						<label class="label">
							<span class="label-text font-semibold">Observações</span>
						</label>
						<textarea
							bind:value={declaracao.observacoes}
							class="textarea textarea-bordered h-24 w-full"
							placeholder="Observações adicionais..."
						></textarea>
					</div>
				</div>

				<div class="divider my-6"></div>
				<div class="card-actions justify-end gap-3">
					<button class="btn btn-outline" onclick={resetarFormularioDeclaracao}>
						<X class="h-5 w-5" strokeWidth={2} />
						Cancelar
					</button>
					<button
						class="btn btn-primary gap-2"
						onclick={salvarDeclaracao}
						disabled={salvandoDeclaracao}
					>
						{#if salvandoDeclaracao}
							<span class="loading loading-spinner loading-sm"></span>
							Salvando...
						{:else}
							<Check class="h-5 w-5" strokeWidth={2} />
							Salvar
						{/if}
					</button>
				</div>
			</div>
		</div>
	{:else if abaAtiva === 'maternidade'}
		<!-- Formulário Licença Maternidade -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<div class="mb-6 flex items-center gap-3">
					<div class="bg-secondary/10 rounded-lg p-2">
						<Baby class="text-secondary h-6 w-6" strokeWidth={2} />
					</div>
					<div>
						<h2 class="card-title text-2xl">Registrar Licença Maternidade</h2>
						<p class="text-base-content/70 text-sm">
							Preencha os dados da licença maternidade (120 dias)
						</p>
					</div>
				</div>

				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
					<div class="form-control md:col-span-2">
						<FuncionarioSelect bind:value={licencaMaternidade.funcionarioId} required={true} />
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold"
								>Data Início <span class="text-error">*</span></span
							>
						</label>
						<input
							type="date"
							bind:value={licencaMaternidade.dataInicio}
							class="input input-bordered w-full"
							required
						/>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold"
								>Data Fim <span class="text-error">*</span></span
							>
						</label>
						<input
							type="date"
							bind:value={licencaMaternidade.dataFim}
							class="input input-bordered w-full"
							required
						/>
						<label class="label">
							<span class="label-text-alt text-base-content/60"
								>Calculado automaticamente (120 dias)</span
							>
						</label>
					</div>

					<div class="form-control md:col-span-2">
						<label
							class="label border-base-300 hover:bg-base-200 cursor-pointer justify-start gap-3 rounded-lg border p-4"
						>
							<input
								type="checkbox"
								bind:checked={licencaMaternidade.ehProrrogacao}
								class="checkbox checkbox-primary"
							/>
							<span class="label-text font-semibold">Esta é uma prorrogação?</span>
						</label>
					</div>

					{#if licencaMaternidade.ehProrrogacao}
						<div class="form-control md:col-span-2">
							<label class="label">
								<span class="label-text font-semibold"
									>Licença Original <span class="text-error">*</span></span
								>
							</label>
							<select
								bind:value={licencaMaternidade.licencaOriginalId}
								class="select select-bordered w-full"
								required
							>
								<option value="">Selecione a licença original</option>
								{#each licencasMaternidade as licenca}
									<option value={licenca._id}>
										{licenca.funcionario?.nome} -{' '}
										{formatarData(licenca.dataInicio)} até{' '}
										{formatarData(licenca.dataFim)}
									</option>
								{/each}
							</select>
						</div>
					{/if}

					<div class="form-control md:col-span-2">
						<FileUpload
							label="Anexar Documento (PDF ou Imagem)"
							bind:value={licencaMaternidade.documentoId}
							required={true}
							onUpload={async (file) => {
								licencaMaternidade.documentoId = await handleDocumentoUpload(file);
							}}
							onRemove={async () => {
								licencaMaternidade.documentoId = undefined;
							}}
						/>
					</div>

					<div class="form-control md:col-span-2">
						<label class="label">
							<span class="label-text font-semibold">Observações</span>
						</label>
						<textarea
							bind:value={licencaMaternidade.observacoes}
							class="textarea textarea-bordered h-24 w-full"
							placeholder="Observações adicionais..."
						></textarea>
					</div>
				</div>

				<div class="divider my-6"></div>
				<div class="card-actions justify-end gap-3">
					<button class="btn btn-outline" onclick={resetarFormularioMaternidade}>
						<X class="h-5 w-5" strokeWidth={2} />
						Cancelar
					</button>
					<button
						class="btn btn-primary gap-2"
						onclick={salvarLicencaMaternidade}
						disabled={salvandoMaternidade}
					>
						{#if salvandoMaternidade}
							<span class="loading loading-spinner loading-sm"></span>
							Salvando...
						{:else}
							<Check class="h-5 w-5" strokeWidth={2} />
							Salvar
						{/if}
					</button>
				</div>
			</div>
		</div>
	{:else if abaAtiva === 'paternidade'}
		<!-- Formulário Licença Paternidade -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<div class="mb-6 flex items-center gap-3">
					<div class="bg-info/10 rounded-lg p-2">
						<User class="text-info h-6 w-6" strokeWidth={2} />
					</div>
					<div>
						<h2 class="card-title text-2xl">Registrar Licença Paternidade</h2>
						<p class="text-base-content/70 text-sm">
							Preencha os dados da licença paternidade (20 dias)
						</p>
					</div>
				</div>

				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
					<div class="form-control md:col-span-2">
						<FuncionarioSelect bind:value={licencaPaternidade.funcionarioId} required={true} />
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold"
								>Data Início <span class="text-error">*</span></span
							>
						</label>
						<input
							type="date"
							bind:value={licencaPaternidade.dataInicio}
							class="input input-bordered w-full"
							required
						/>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold"
								>Data Fim <span class="text-error">*</span></span
							>
						</label>
						<input
							type="date"
							bind:value={licencaPaternidade.dataFim}
							class="input input-bordered w-full"
							required
						/>
						<label class="label">
							<span class="label-text-alt text-base-content/60"
								>Calculado automaticamente (20 dias)</span
							>
						</label>
					</div>

					<div class="form-control md:col-span-2">
						<FileUpload
							label="Anexar Documento (PDF ou Imagem)"
							bind:value={licencaPaternidade.documentoId}
							required={true}
							onUpload={async (file) => {
								licencaPaternidade.documentoId = await handleDocumentoUpload(file);
							}}
							onRemove={async () => {
								licencaPaternidade.documentoId = undefined;
							}}
						/>
					</div>

					<div class="form-control md:col-span-2">
						<label class="label">
							<span class="label-text font-semibold">Observações</span>
						</label>
						<textarea
							bind:value={licencaPaternidade.observacoes}
							class="textarea textarea-bordered h-24 w-full"
							placeholder="Observações adicionais..."
						></textarea>
					</div>
				</div>

				<div class="divider my-6"></div>
				<div class="card-actions justify-end gap-3">
					<button class="btn btn-outline" onclick={resetarFormularioPaternidade}>
						<X class="h-5 w-5" strokeWidth={2} />
						Cancelar
					</button>
					<button
						class="btn btn-primary gap-2"
						onclick={salvarLicencaPaternidade}
						disabled={salvandoPaternidade}
					>
						{#if salvandoPaternidade}
							<span class="loading loading-spinner loading-sm"></span>
							Salvando...
						{:else}
							<Check class="h-5 w-5" strokeWidth={2} />
							Salvar
						{/if}
					</button>
				</div>
			</div>
		</div>
	{:else if abaAtiva === 'relatorios'}
		<!-- Aba Imprimir Relatórios -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<div class="mb-6 flex items-center gap-3">
					<div class="bg-primary/10 rounded-lg p-2">
						<Printer class="text-primary h-6 w-6" strokeWidth={2} />
					</div>
					<div>
						<h2 class="card-title text-2xl">Imprimir Relatórios</h2>
						<p class="text-base-content/70 text-sm">
							Gere relatórios em PDF ou Excel com filtros personalizados
						</p>
					</div>
				</div>

				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
					<!-- Filtro de Período -->
					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold"
								>Data Início <span class="text-error">*</span></span
							>
						</label>
						<input
							type="date"
							bind:value={relatorioPeriodoInicio}
							class="input input-bordered w-full"
							required
						/>
					</div>

					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold"
								>Data Fim <span class="text-error">*</span></span
							>
						</label>
						<input
							type="date"
							bind:value={relatorioPeriodoFim}
							class="input input-bordered w-full"
							required
						/>
					</div>

					<!-- Filtro de Funcionário por Nome -->
					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Funcionário (Nome)</span>
						</label>
						<FuncionarioNomeAutocomplete
							bind:value={relatorioFuncionarioNome}
							placeholder="Digite o nome do funcionário"
						/>
					</div>

					<!-- Filtro de Funcionário por Matrícula -->
					<div class="form-control">
						<label class="label">
							<span class="label-text font-semibold">Funcionário (Matrícula)</span>
						</label>
						<FuncionarioMatriculaAutocomplete
							bind:value={relatorioFuncionarioMatricula}
							placeholder="Digite a matrícula do funcionário"
						/>
					</div>
				</div>

				<!-- Seleção de Campos -->
				<div class="divider my-6"></div>
				<div>
					<label class="label mb-4">
						<span class="label-text text-lg font-semibold"
							>Campos a incluir no relatório <span class="text-error">*</span></span
						>
					</label>
					<div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
						<label
							class="label border-base-300 hover:bg-base-200 cursor-pointer justify-start gap-3 rounded-lg border p-4"
						>
							<input
								type="checkbox"
								bind:checked={relatorioCampos.todos}
								class="checkbox checkbox-primary"
							/>
							<span class="label-text font-medium">Todos</span>
						</label>

						<label
							class="label border-base-300 hover:bg-base-200 cursor-pointer justify-start gap-3 rounded-lg border p-4"
						>
							<input
								type="checkbox"
								bind:checked={relatorioCampos.atestados}
								class="checkbox checkbox-primary"
								disabled={relatorioCampos.todos}
							/>
							<span class="label-text font-medium">Atestados</span>
						</label>

						<label
							class="label border-base-300 hover:bg-base-200 cursor-pointer justify-start gap-3 rounded-lg border p-4"
						>
							<input
								type="checkbox"
								bind:checked={relatorioCampos.licencaPaternidade}
								class="checkbox checkbox-primary"
								disabled={relatorioCampos.todos}
							/>
							<span class="label-text font-medium">Licença Paternidade</span>
						</label>

						<label
							class="label border-base-300 hover:bg-base-200 cursor-pointer justify-start gap-3 rounded-lg border p-4"
						>
							<input
								type="checkbox"
								bind:checked={relatorioCampos.licencaMaternidade}
								class="checkbox checkbox-primary"
								disabled={relatorioCampos.todos}
							/>
							<span class="label-text font-medium">Licença Maternidade</span>
						</label>

						<label
							class="label border-base-300 hover:bg-base-200 cursor-pointer justify-start gap-3 rounded-lg border p-4"
						>
							<input
								type="checkbox"
								bind:checked={relatorioCampos.declaracao}
								class="checkbox checkbox-primary"
								disabled={relatorioCampos.todos}
							/>
							<span class="label-text font-medium">Declaração</span>
						</label>
					</div>
				</div>

				<!-- Botões de Ação -->
				<div class="divider my-6"></div>
				<div class="card-actions justify-end gap-3">
					<button
						class="btn btn-outline btn-error gap-2"
						onclick={gerarPDF}
						disabled={gerandoRelatorio}
					>
						{#if gerandoRelatorio}
							<span class="loading loading-spinner loading-sm"></span>
						{:else}
							<FileText class="h-5 w-5" strokeWidth={2} />
						{/if}
						Imprimir PDF
					</button>
					<button
						class="btn btn-outline btn-success gap-2"
						onclick={gerarExcel}
						disabled={gerandoRelatorio}
					>
						{#if gerandoRelatorio}
							<span class="loading loading-spinner loading-sm"></span>
						{:else}
							<Download class="h-5 w-5" strokeWidth={2} />
						{/if}
						Exportar Excel
					</button>
				</div>
			</div>
		</div>
	{/if}
</main>

<!-- Modal de Erro -->
<ErrorModal
	bind:open={erroModal.aberto}
	title={erroModal.titulo}
	message={erroModal.mensagem}
	details={erroModal.detalhes}
	onClose={() => {
		erroModal.aberto = false;
	}}
/>
