<script lang="ts">
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import { useConvexClient, useQuery } from 'convex-svelte';
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
	import { parseLocalDate } from '$lib/utils/datas';
	import jsPDF from 'jspdf';
	import autoTable from 'jspdf-autotable';
	import { format } from 'date-fns';
	import { ptBR } from 'date-fns/locale';
	import ExcelJS from 'exceljs';
	import logoGovPE from '$lib/assets/logo_governo_PE.png';
	import { FileDown, FileSpreadsheet } from 'lucide-svelte';
	import { toast } from 'svelte-sonner';
	import { SvelteDate } from 'svelte/reactivity';

	const client = useConvexClient();
	const currentUser = useQuery(api.auth.getCurrentUser, {});

	// Buscar TODAS as solicitações de ausências
	const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});

	// Buscar funcionários para filtro
	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});

	let filtroStatus = $state<string>('todos');
	let filtroFuncionario = $state<string>('');
	let filtroPeriodoInicio = $state<string>('');
	let filtroPeriodoFim = $state<string>('');
	let gerandoRelatorio = $state(false);
	let solicitacaoSelecionada = $state<Id<'solicitacoesAusencias'> | null>(null);

	const ausencias = $derived(todasAusenciasQuery?.data || []);
	const funcionarios = $derived(
		Array.isArray(funcionariosQuery?.data)
			? funcionariosQuery.data
			: funcionariosQuery?.data?.data || []
	);

	// Filtrar solicitações
	let ausenciasFiltradas = $derived(
		ausencias.filter((a) => {
			// Filtro de status
			if (filtroStatus !== 'todos' && a.status !== filtroStatus) return false;

			// Filtro por funcionário
			if (filtroFuncionario) {
				if (a.funcionario?._id !== filtroFuncionario) return false;
			}

			// Filtro por período
			if (filtroPeriodoInicio) {
				const inicioFiltro = new Date(filtroPeriodoInicio);
				const inicioAusencia = parseLocalDate(a.dataInicio);
				if (inicioAusencia < inicioFiltro) return false;
			}

			if (filtroPeriodoFim) {
				const fimFiltro = new SvelteDate(filtroPeriodoFim);
				fimFiltro.setHours(23, 59, 59, 999); // Incluir o dia inteiro
				const fimAusencia = parseLocalDate(a.dataFim);
				if (fimAusencia > fimFiltro) return false;
			}

			return true;
		})
	);

	// Estatísticas gerais
	let stats = $derived({
		total: ausencias.length,
		aguardando: ausencias.filter((a) => a.status === 'aguardando_aprovacao').length,
		aprovadas: ausencias.filter((a) => a.status === 'aprovado').length,
		reprovadas: ausencias.filter((a) => a.status === 'reprovado').length
	});

	function getStatusBadge(status: string) {
		const badges: Record<string, string> = {
			aguardando_aprovacao: 'badge-warning',
			aprovado: 'badge-success',
			reprovado: 'badge-error'
		};
		return badges[status] || 'badge-neutral';
	}

	function getStatusTexto(status: string) {
		const textos: Record<string, string> = {
			aguardando_aprovacao: 'Aguardando',
			aprovado: 'Aprovado',
			reprovado: 'Reprovado'
		};
		return textos[status] || status;
	}

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

	async function selecionarSolicitacao(solicitacaoId: Id<'solicitacoesAusencias'>) {
		solicitacaoSelecionada = solicitacaoId;
	}

	async function recarregar() {
		solicitacaoSelecionada = null;
	}

	// Função para gerar PDF
	async function gerarPDF() {
		gerandoRelatorio = true;
		try {
			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 AUSÊNCIAS', 105, yPosition, { align: 'center' });

			yPosition += 10;

			// Filtros aplicados
			doc.setFontSize(10);
			doc.setTextColor(0, 0, 0);
			let filtrosTexto = 'Filtros aplicados: ';
			if (filtroStatus !== 'todos') filtrosTexto += `Status: ${getStatusTexto(filtroStatus)}; `;
			if (filtroFuncionario) {
				const func = funcionarios.find((f) => f._id === filtroFuncionario);
				filtrosTexto += `Funcionário: ${func?.nome || ''}; `;
			}
			if (filtroPeriodoInicio && filtroPeriodoFim) {
				filtrosTexto += `Período: ${format(new Date(filtroPeriodoInicio), 'dd/MM/yyyy', { locale: ptBR })} até ${format(new Date(filtroPeriodoFim), 'dd/MM/yyyy', { locale: ptBR })}; `;
			}

			if (filtrosTexto === 'Filtros aplicados: ') {
				filtrosTexto = 'Todos os registros';
			}

			doc.text(filtrosTexto, 105, yPosition, { align: 'center', maxWidth: 180 });

			yPosition += 8;

			// Data de geração
			doc.setFontSize(9);
			doc.setTextColor(100, 100, 100);
			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[][] = ausenciasFiltradas.map((a) => [
				a.funcionario?.nome || '-',
				a.funcionario?.matricula || '-',
				a.time?.nome || '-',
				parseLocalDate(a.dataInicio).toLocaleDateString('pt-BR'),
				parseLocalDate(a.dataFim).toLocaleDateString('pt-BR'),
				calcularDias(a.dataInicio, a.dataFim).toString(),
				a.motivo.substring(0, 40) + (a.motivo.length > 40 ? '...' : ''),
				getStatusTexto(a.status)
			]);

			// Tabela
			if (dadosTabela.length > 0) {
				autoTable(doc, {
					startY: yPosition,
					head: [
						[
							'Funcionário',
							'Matrícula',
							'Time',
							'Data Início',
							'Data Fim',
							'Dias',
							'Motivo',
							'Status'
						]
					],
					body: dadosTabela,
					theme: 'striped',
					headStyles: { fillColor: [41, 128, 185], textColor: 255, fontSize: 7, fontStyle: 'bold' },
					bodyStyles: { fontSize: 7 },
					alternateRowStyles: { fillColor: [245, 247, 250] },
					styles: { cellPadding: 1.5, overflow: 'linebreak' },
					margin: { top: yPosition, left: 10, right: 10 },
					tableWidth: 'wrap',
					columnStyles: {
						0: { cellWidth: 38, fontSize: 7 }, // Funcionário
						1: { cellWidth: 18, fontSize: 7 }, // Matrícula
						2: { cellWidth: 22, fontSize: 7 }, // Time
						3: { cellWidth: 20, fontSize: 7 }, // Data Início
						4: { cellWidth: 20, fontSize: 7 }, // Data Fim
						5: { cellWidth: 12, fontSize: 7 }, // Dias
						6: { cellWidth: 35, fontSize: 7, overflow: 'linebreak' }, // Motivo
						7: { cellWidth: 18, fontSize: 7 } // Status
					}
				});
			} else {
				doc.setFontSize(12);
				doc.setTextColor(100, 100, 100);
				doc.text('Nenhum registro encontrado com os filtros aplicados.', 105, yPosition + 20, {
					align: 'center'
				});
			}

			// Footer em todas as páginas
			const pageCount = doc.getNumberOfPages();
			for (let i = 1; i <= pageCount; i++) {
				doc.setPage(i);
				doc.setFontSize(7);
				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() - 8,
					{ align: 'center' }
				);
			}

			// Salvar
			const nomeArquivo = `relatorio-ausencias-${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 (ausenciasFiltradas.length === 0) {
			toast.error('Não há ausências para exportar com os filtros aplicados.');
			return;
		}

		gerandoRelatorio = true;
		try {
			// Preparar dados
			const dados: Array<Record<string, string | number>> = ausenciasFiltradas.map((a) => ({
				Funcionário: a.funcionario?.nome || '-',
				Matrícula: a.funcionario?.matricula || '-',
				Time: a.time?.nome || '-',
				'Data Início': parseLocalDate(a.dataInicio).toLocaleDateString('pt-BR'),
				'Data Fim': parseLocalDate(a.dataFim).toLocaleDateString('pt-BR'),
				Dias: calcularDias(a.dataInicio, a.dataFim),
				Motivo: a.motivo,
				Status: getStatusTexto(a.status),
				'Solicitado em': new Date(a.criadoEm).toLocaleDateString('pt-BR')
			}));

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

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

			// Carregar logo
			let logoBuffer: ArrayBuffer | null = null;
			try {
				const response = await fetch(logoGovPE);
				if (response.ok) {
					logoBuffer = await response.arrayBuffer();
				} else {
					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
			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'
				});
				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);
			worksheet.mergeCells(`C1:${lastCol}1`);
			const titleCell = worksheet.getCell('C1');
			titleCell.value = 'RELATÓRIO DE AUSÊNCIAS';
			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;
				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' ||
						header === 'Solicitado em'
					) {
						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 === 'Aprovado') {
							cell.fill = {
								type: 'pattern',
								pattern: 'solid',
								fgColor: { argb: 'FFD4EDDA' }
							};
							cell.font = { size: 10, color: { argb: 'FF155724' } };
						} else if (statusValue === 'Reprovado') {
							cell.fill = {
								type: 'pattern',
								pattern: 'solid',
								fgColor: { argb: 'FFF8D7DA' }
							};
							cell.font = { size: 10, color: { argb: 'FF721C24' } };
						} else if (statusValue === 'Aguardando') {
							cell.fill = {
								type: 'pattern',
								pattern: 'solid',
								fgColor: { argb: 'FFFFF3CD' }
							};
							cell.font = { size: 10, color: { argb: 'FF856404' } };
						}
					}
				});
			});

			// Ajustar largura das colunas
			worksheet.columns = [
				{ width: 30 }, // Funcionário
				{ width: 15 }, // Matrícula
				{ width: 20 }, // Time
				{ width: 12 }, // Data Início
				{ width: 12 }, // Data Fim
				{ width: 8 }, // Dias
				{ width: 40 }, // Motivo
				{ width: 15 }, // Status
				{ width: 15 } // Solicitado em
			];

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

			// Gerar arquivo
			const nomeArquivo = `relatorio-ausencias-${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;
		}
	}
</script>

<main class="container mx-auto max-w-7xl px-4 py-6">
	<!-- Breadcrumb -->
	<div class="breadcrumbs mb-4 text-sm">
		<ul>
			<li>
				<a href={resolve('/gestao-pessoas')} class="text-primary hover:underline"
					>Secretaria de Gestão de Pessoas</a
				>
			</li>
			<li>Gestão de Ausências</li>
		</ul>
	</div>

	<!-- Header -->
	<div class="mb-6">
		<div class="flex items-center justify-between">
			<div class="flex items-center gap-4">
				<div class="rounded-xl bg-orange-500/20 p-3">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-8 w-8 text-orange-600"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
						/>
					</svg>
				</div>
				<div>
					<h1 class="text-primary text-3xl font-bold">Gestão de Ausências</h1>
					<p class="text-base-content/70">Visão geral de todas as solicitações de ausências</p>
				</div>
			</div>
			<button class="btn gap-2" onclick={() => goto(resolve('/gestao-pessoas'))}>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-5 w-5"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M10 19l-7-7m0 0l7-7m-7 7h18"
					/>
				</svg>
				Voltar
			</button>
		</div>
	</div>

	<!-- Estatísticas -->
	<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-orange-500">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-8 w-8"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
					/>
				</svg>
			</div>
			<div class="stat-title">Total</div>
			<div class="stat-value text-orange-500">{stats.total}</div>
			<div class="stat-desc">Solicitações</div>
		</div>

		<div class="stat bg-base-100 rounded-box border-warning/30 border shadow-lg">
			<div class="stat-figure text-warning">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-8 w-8"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
			</div>
			<div class="stat-title">Pendentes</div>
			<div class="stat-value text-warning">{stats.aguardando}</div>
			<div class="stat-desc">Aguardando</div>
		</div>

		<div class="stat bg-base-100 rounded-box border-success/30 border shadow-lg">
			<div class="stat-figure text-success">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-8 w-8"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
			</div>
			<div class="stat-title">Aprovadas</div>
			<div class="stat-value text-success">{stats.aprovadas}</div>
			<div class="stat-desc">Deferidas</div>
		</div>

		<div class="stat bg-base-100 rounded-box border-error/30 border shadow-lg">
			<div class="stat-figure text-error">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-8 w-8"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
			</div>
			<div class="stat-title">Reprovadas</div>
			<div class="stat-value text-error">{stats.reprovadas}</div>
			<div class="stat-desc">Indeferidas</div>
		</div>
	</div>

	<!-- Filtros -->
	<div class="card bg-base-100 mb-6 shadow-lg">
		<div class="card-body">
			<div class="mb-4 flex items-center justify-between">
				<h2 class="card-title text-lg">Filtros</h2>
				<div class="flex gap-2">
					<button
						type="button"
						class="btn btn-primary btn-sm gap-2"
						onclick={gerarPDF}
						disabled={gerandoRelatorio || ausenciasFiltradas.length === 0}
					>
						{#if gerandoRelatorio}
							<span class="loading loading-spinner loading-xs"></span>
						{:else}
							<FileDown class="h-4 w-4" strokeWidth={2} />
						{/if}
						Gerar PDF
					</button>
					<button
						type="button"
						class="btn btn-success btn-sm gap-2"
						onclick={gerarExcel}
						disabled={gerandoRelatorio || ausenciasFiltradas.length === 0}
					>
						{#if gerandoRelatorio}
							<span class="loading loading-spinner loading-xs"></span>
						{:else}
							<FileSpreadsheet class="h-4 w-4" strokeWidth={2} />
						{/if}
						Gerar Excel
					</button>
				</div>
			</div>
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
				<div class="form-control">
					<label class="label" for="filtro-status">
						<span class="label-text">Status</span>
					</label>
					<select id="filtro-status" class="select select-bordered" bind:value={filtroStatus}>
						<option value="todos">Todos</option>
						<option value="aguardando_aprovacao">Aguardando Aprovação</option>
						<option value="aprovado">Aprovado</option>
						<option value="reprovado">Reprovado</option>
					</select>
				</div>
				<div class="form-control">
					<label class="label" for="filtro-funcionario">
						<span class="label-text">Funcionário</span>
					</label>
					<select
						id="filtro-funcionario"
						class="select select-bordered"
						bind:value={filtroFuncionario}
					>
						<option value="">Todos</option>
						{#each funcionarios as funcionario (funcionario._id)}
							<option value={funcionario._id}>{funcionario.nome}</option>
						{/each}
					</select>
				</div>
				<div class="form-control">
					<label class="label" for="filtro-periodo-inicio">
						<span class="label-text">Período - Início</span>
					</label>
					<input
						id="filtro-periodo-inicio"
						type="date"
						class="input input-bordered"
						bind:value={filtroPeriodoInicio}
					/>
				</div>
				<div class="form-control">
					<label class="label" for="filtro-periodo-fim">
						<span class="label-text">Período - Fim</span>
					</label>
					<input
						id="filtro-periodo-fim"
						type="date"
						class="input input-bordered"
						bind:value={filtroPeriodoFim}
					/>
				</div>
			</div>
		</div>
	</div>

	<!-- Lista de Solicitações -->
	<div class="card bg-base-100 shadow-lg">
		<div class="card-body">
			<h2 class="card-title mb-4 text-lg">
				Todas as Solicitações ({ausenciasFiltradas.length})
			</h2>

			{#if ausenciasFiltradas.length === 0}
				<div class="alert">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						class="stroke-info h-6 w-6 shrink-0"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
						></path>
					</svg>
					<span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
				</div>
			{:else}
				<div class="overflow-x-auto">
					<table class="table-zebra table">
						<thead>
							<tr>
								<th>Funcionário</th>
								<th>Time</th>
								<th>Período</th>
								<th>Dias</th>
								<th>Motivo</th>
								<th>Status</th>
								<th>Solicitado em</th>
								<th>Ações</th>
							</tr>
						</thead>
						<tbody>
							{#each ausenciasFiltradas as ausencia (ausencia._id)}
								<tr>
									<td class="font-semibold">
										{ausencia.funcionario?.nome || 'N/A'}
									</td>
									<td>
										{#if ausencia.time}
											<div
												class="badge badge-sm max-w-full overflow-hidden font-semibold text-ellipsis whitespace-nowrap"
												style="background-color: {ausencia.time.cor}20; border-color: {ausencia.time
													.cor}; color: {ausencia.time.cor}"
												title={ausencia.time.nome}
											>
												{ausencia.time.nome}
											</div>
										{:else}
											<span class="text-base-content/50">Sem time</span>
										{/if}
									</td>
									<td>
										{parseLocalDate(ausencia.dataInicio).toLocaleDateString('pt-BR')} até{' '}
										{parseLocalDate(ausencia.dataFim).toLocaleDateString('pt-BR')}
									</td>
									<td class="font-bold">
										{calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
									</td>
									<td class="max-w-xs truncate" title={ausencia.motivo}>
										{ausencia.motivo}
									</td>
									<td>
										<div class={`badge ${getStatusBadge(ausencia.status)}`}>
											{getStatusTexto(ausencia.status)}
										</div>
									</td>
									<td class="text-xs">
										{new Date(ausencia.criadoEm).toLocaleDateString('pt-BR')}
									</td>
									<td>
										{#if ausencia.status === 'aguardando_aprovacao'}
											<button
												type="button"
												class="btn btn-primary btn-sm gap-2"
												onclick={() => selecionarSolicitacao(ausencia._id)}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
													class="h-4 w-4"
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														stroke-width="2"
														d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
													/>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														stroke-width="2"
														d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
													/>
												</svg>
												Ver Detalhes
											</button>
										{:else}
											<button
												type="button"
												class="btn btn-sm gap-2"
												onclick={() => selecionarSolicitacao(ausencia._id)}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
													class="h-4 w-4"
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														stroke-width="2"
														d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
													/>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														stroke-width="2"
														d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
													/>
												</svg>
												Ver Detalhes
											</button>
										{/if}
									</td>
								</tr>
							{/each}
						</tbody>
					</table>
				</div>
			{/if}
		</div>
	</div>
</main>

<!-- Modal de Aprovação -->
{#if solicitacaoSelecionada && currentUser.data}
	{#await client.query( api.ausencias.obterDetalhes, { solicitacaoId: solicitacaoSelecionada } ) then detalhes}
		{#if detalhes}
			<dialog class="modal modal-open">
				<div class="modal-box max-h-[95vh] w-full max-w-2xl overflow-y-auto p-4 md:p-6">
					<AprovarAusencias
						solicitacao={detalhes}
						gestorId={currentUser.data._id}
						onSucesso={recarregar}
						onCancelar={() => (solicitacaoSelecionada = null)}
					/>
				</div>
				<form method="dialog" class="modal-backdrop">
					<button
						type="button"
						onclick={() => (solicitacaoSelecionada = null)}
						aria-label="Fechar modal">Fechar</button
					>
				</form>
			</dialog>
		{/if}
	{/await}
{/if}
