<script lang="ts">
	import { onMount } from 'svelte';
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { Clock, Edit, TrendingUp, TrendingDown, Save, X, Trash2, Eye, MoreVertical } from 'lucide-svelte';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import { formatarHoraPonto, getTipoRegistroLabel } from '$lib/utils/ponto';
	import { toast } from 'svelte-sonner';

	const client = useConvexClient();

	// Estados
	let funcionarioSelecionado = $state<Id<'funcionarios'> | ''>('');
	let registroSelecionado = $state<Id<'registrosPonto'> | ''>('');
	let modoEdicao = $state(false);
	let abaAtiva = $state<'editar' | 'ajustar'>('editar');
	let homologacaoDetalhada = $state<Id<'homologacoesPonto'> | null>(null);
	let homologacaoParaExcluir = $state<Id<'homologacoesPonto'> | null>(null);
	let mostrandoModalDetalhes = $state(false);
	let mostrandoModalExcluir = $state(false);
	
	// Filtros de período
	const hoje = new Date();
	const trintaDiasAtras = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
	let dataInicioFiltro = $state(trintaDiasAtras.toISOString().split('T')[0]!);
	let dataFimFiltro = $state(hoje.toISOString().split('T')[0]!);

	// Monitorar mudanças em funcionarioSelecionado
	$effect(() => {
		console.log('🔄 [DEBUG] funcionarioSelecionado mudou:', funcionarioSelecionado, typeof funcionarioSelecionado);
	});

	// Formulário de edição
	let horaNova = $state(8);
	let minutoNova = $state(0);
	let motivoId = $state('');
	let motivoTipo = $state('');
	let motivoDescricao = $state('');
	let observacoes = $state('');

	// Campo de hora unificado (formato HH:mm)
	let novaHoraFormatada = $state('08:00');

	// Converter hora/minuto para formato HH:mm
	function horaMinutoParaTime(hora: number, minuto: number): string {
		return `${hora.toString().padStart(2, '0')}:${minuto.toString().padStart(2, '0')}`;
	}

	// Converter formato HH:mm para hora/minuto
	function timeParaHoraMinuto(time: string): { hora: number; minuto: number } {
		const [h, m] = time.split(':').map(Number);
		return { hora: h || 0, minuto: m || 0 };
	}

	// Calcular período entre duas datas/horas em dias, horas e minutos
	function calcularPeriodo(
		dataInicio: string,
		horaInicio: string,
		dataFim: string,
		horaFim: string
	): { dias: number; horas: number; minutos: number } {
		if (!dataInicio || !horaInicio || !dataFim || !horaFim) {
			return { dias: 0, horas: 0, minutos: 0 };
		}

		const inicio = new Date(`${dataInicio}T${horaInicio}:00`);
		const fim = new Date(`${dataFim}T${horaFim}:00`);

		if (fim < inicio) {
			return { dias: 0, horas: 0, minutos: 0 };
		}

		const diffMs = fim.getTime() - inicio.getTime();
		const diffMinutos = Math.floor(diffMs / (1000 * 60));

		const dias = Math.floor(diffMinutos / (24 * 60));
		const minutosRestantes = diffMinutos % (24 * 60);
		const horas = Math.floor(minutosRestantes / 60);
		const minutos = minutosRestantes % 60;

		return { dias, horas, minutos };
	}

	// Obter registro selecionado
	const registroEmEdicao = $derived.by(() => {
		if (!registroSelecionado) return null;
		return registros.find((r) => r._id === registroSelecionado) || null;
	});

	// Formatar data do registro
	const dataRegistroFormatada = $derived.by(() => {
		if (!registroEmEdicao) return '';
		const data = new Date(registroEmEdicao.data);
		return data.toLocaleDateString('pt-BR', {
			day: '2-digit',
			month: '2-digit',
			year: 'numeric',
		});
	});

	// Formulário de ajuste
	let tipoAjuste = $state<'compensar' | 'abonar' | 'descontar'>('compensar');
	let dataInicioAjuste = $state(new Date().toISOString().split('T')[0]!);
	let horaInicioAjuste = $state('08:00');
	let dataFimAjuste = $state(new Date().toISOString().split('T')[0]!);
	let horaFimAjuste = $state('18:00');

	// Queries
	const subordinadosQuery = useQuery(api.times.listarSubordinadosDoGestorAtual, {});
	const motivosQuery = useQuery(api.pontos.obterMotivosAtestados, {});

	// Parâmetros reativos para queries
	const homologacoesParams = $derived({
		funcionarioId: funcionarioSelecionado || undefined,
	});
	
	// Parâmetros para query de registros - só executa quando há funcionário selecionado
	const registrosQueryParams = $derived.by(() => {
		// Verificar se funcionarioSelecionado não é string vazia
		if (!funcionarioSelecionado || funcionarioSelecionado === '') {
			return undefined;
		}
		return {
			funcionarioId: funcionarioSelecionado as Id<'funcionarios'>,
			dataInicio: dataInicioFiltro,
			dataFim: dataFimFiltro,
		};
	});

	const homologacoesQuery = useQuery(api.pontos.listarHomologacoes, homologacoesParams);
	const registrosQuery = $derived(
		registrosQueryParams
			? useQuery(api.pontos.listarRegistrosPeriodo, registrosQueryParams)
			: null
	);

	const subordinados = $derived(subordinadosQuery?.data || []);
	const motivos = $derived(motivosQuery?.data);
	const homologacoes = $derived(homologacoesQuery?.data || []);
	
	// Registros já filtrados pela query no backend
	const registros = $derived.by(() => {
		if (!funcionarioSelecionado || funcionarioSelecionado === '' || !registrosQuery) {
			return [];
		}
		const dados = registrosQuery.data;
		if (!dados || !Array.isArray(dados)) {
			return [];
		}
		// A query do backend já filtra pelo funcionário, mas adicionamos verificação extra
		return dados.filter((r) => String(r.funcionarioId) === String(funcionarioSelecionado));
	});
	
	// Verificar se é gestor (tem subordinados)
	const isGestor = $derived(subordinados.length > 0);

	// Lista de funcionários do time
	const funcionarios = $derived.by(() => {
		const funcs: Array<{ _id: Id<'funcionarios'>; nome: string; matricula?: string }> = [];
		for (const time of subordinados) {
			for (const membro of time.membros) {
				if (membro.funcionario && !funcs.find((f) => f._id === membro.funcionario._id)) {
					funcs.push({
						_id: membro.funcionario._id,
						nome: membro.funcionario.nome,
						matricula: membro.funcionario.matricula,
					});
				}
			}
		}
		return funcs;
	});

	function abrirEdicao(registroId: Id<'registrosPonto'>) {
		const registro = registros.find((r) => r._id === registroId);
		if (!registro) return;

		registroSelecionado = registroId;
		horaNova = registro.hora;
		minutoNova = registro.minuto;
		novaHoraFormatada = horaMinutoParaTime(registro.hora, registro.minuto);
		motivoId = '';
		motivoTipo = '';
		motivoDescricao = '';
		observacoes = '';
		modoEdicao = true;
		abaAtiva = 'editar';
	}

	function abrirEdicaoComAjuste(registroId: Id<'registrosPonto'>) {
		const registro = registros.find((r) => r._id === registroId);
		if (!registro) return;

		registroSelecionado = registroId;
		horaNova = registro.hora;
		minutoNova = registro.minuto;
		novaHoraFormatada = horaMinutoParaTime(registro.hora, registro.minuto);
		motivoId = '';
		motivoTipo = '';
		motivoDescricao = '';
		observacoes = '';
		modoEdicao = true;
		abaAtiva = 'editar';
		
		// Resetar campos de ajuste
		tipoAjuste = 'compensar';
		const hoje = new Date().toISOString().split('T')[0]!;
		dataInicioAjuste = hoje;
		dataFimAjuste = hoje;
		horaInicioAjuste = '08:00';
		horaFimAjuste = '18:00';
	}

	function cancelar() {
		modoEdicao = false;
		registroSelecionado = '';
		abaAtiva = 'editar';
		novaHoraFormatada = '08:00';
		const hoje = new Date().toISOString().split('T')[0]!;
		dataInicioAjuste = hoje;
		dataFimAjuste = hoje;
		horaInicioAjuste = '08:00';
		horaFimAjuste = '18:00';
	}

	async function salvarEdicao() {
		if (!registroSelecionado || !funcionarioSelecionado) {
			toast.error('Selecione um funcionário e um registro');
			return;
		}

		// Converter hora formatada para hora/minuto
		const { hora, minuto } = timeParaHoraMinuto(novaHoraFormatada);

		try {
			await client.mutation(api.pontos.editarRegistroPonto, {
				registroId: registroSelecionado,
				horaNova: hora,
				minutoNova: minuto,
				motivoId: motivoId || undefined,
				motivoTipo: motivoTipo || undefined,
				motivoDescricao: motivoDescricao || undefined,
				observacoes: observacoes || undefined,
			});

			toast.success('Registro editado com sucesso');
			cancelar();
		} catch (error) {
			const errorMessage = error instanceof Error ? error.message : String(error);
			toast.error(`Erro ao editar registro: ${errorMessage}`);
		}
	}

	async function salvarAjuste() {
		if (!funcionarioSelecionado) {
			toast.error('Selecione um funcionário');
			return;
		}

		if (!dataInicioAjuste || !horaInicioAjuste || !dataFimAjuste || !horaFimAjuste) {
			toast.error('Preencha todas as datas e horários do período');
			return;
		}

		// Calcular período entre início e fim
		const { dias, horas, minutos } = calcularPeriodo(
			dataInicioAjuste,
			horaInicioAjuste,
			dataFimAjuste,
			horaFimAjuste
		);

		if (dias === 0 && horas === 0 && minutos === 0) {
			toast.error('A data/hora final deve ser maior que a inicial');
			return;
		}

		try {
			await client.mutation(api.pontos.ajustarBancoHoras, {
				funcionarioId: funcionarioSelecionado,
				tipoAjuste,
				periodoDias: dias,
				periodoHoras: horas,
				periodoMinutos: minutos,
				motivoId: motivoId || undefined,
				motivoTipo: motivoTipo || undefined,
				motivoDescricao: motivoDescricao || undefined,
				observacoes: observacoes || undefined,
			});

			toast.success('Banco de horas ajustado com sucesso');
			cancelar();
		} catch (error) {
			const errorMessage = error instanceof Error ? error.message : String(error);
			toast.error(`Erro ao ajustar banco de horas: ${errorMessage}`);
		}
	}

	function abrirDetalhes(homologacaoId: Id<'homologacoesPonto'>) {
		homologacaoDetalhada = homologacaoId;
		mostrandoModalDetalhes = true;
	}

	function fecharDetalhes() {
		mostrandoModalDetalhes = false;
		homologacaoDetalhada = null;
	}

	function abrirModalExcluir(homologacaoId: Id<'homologacoesPonto'>) {
		homologacaoParaExcluir = homologacaoId;
		mostrandoModalExcluir = true;
	}

	function fecharModalExcluir() {
		mostrandoModalExcluir = false;
		homologacaoParaExcluir = null;
	}

	async function excluirHomologacao() {
		if (!homologacaoParaExcluir) return;

		try {
			await client.mutation(api.pontos.excluirHomologacao, {
				homologacaoId: homologacaoParaExcluir,
			});

			toast.success('Homologação excluída com sucesso');
			fecharModalExcluir();
		} catch (error) {
			const errorMessage = error instanceof Error ? error.message : String(error);
			toast.error(`Erro ao excluir homologação: ${errorMessage}`);
		}
	}

	function editarHomologacao(homologacaoId: Id<'homologacoesPonto'>) {
		const homologacao = homologacoes.find((h) => h._id === homologacaoId);
		if (!homologacao) return;

		// Se for edição de registro, abrir edição do registro
		if (homologacao.registroId) {
			funcionarioSelecionado = homologacao.funcionarioId;
			abrirEdicaoComAjuste(homologacao.registroId);
		} else {
			// Se for ajuste de banco de horas, não há como editar diretamente
			toast.info('Ajustes de banco de horas não podem ser editados. Crie um novo ajuste para corrigir.');
		}
	}

	const homologacaoSelecionada = $derived.by(() => {
		if (!homologacaoDetalhada) return null;
		return homologacoes.find((h) => h._id === homologacaoDetalhada) || null;
	});
</script>

<div class="container mx-auto px-4 py-6">
	<!-- Header -->
	<div class="flex items-center justify-between mb-6">
		<div class="flex items-center gap-4">
			<div class="p-3 bg-primary/10 rounded-xl">
				<Clock class="h-8 w-8 text-primary" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-3xl font-bold text-base-content">Homologação de Registro</h1>
				<p class="text-base-content/60 mt-1">Edite registros de ponto e ajuste banco de horas</p>
			</div>
		</div>
	</div>

	<!-- Seleção de Funcionário -->
	<div class="card bg-base-100 shadow-xl mb-6">
		<div class="card-body">
			<h2 class="card-title mb-4">Selecionar Funcionário</h2>
			<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
				<div class="form-control">
					<label class="label">
						<span class="label-text font-medium">Funcionário</span>
					</label>
					<select
						class="select select-bordered w-full"
						bind:value={funcionarioSelecionado}
						disabled={modoEdicao}
					>
						<option value="">Selecione um funcionário</option>
						{#each funcionarios as funcionario}
							<option value={funcionario._id as string}>
								{funcionario.nome} {funcionario.matricula ? `(${funcionario.matricula})` : ''}
							</option>
						{/each}
					</select>
				</div>
				<div class="form-control">
					<label class="label">
						<span class="label-text font-medium">Data Início</span>
					</label>
					<input
						type="date"
						class="input input-bordered w-full"
						bind:value={dataInicioFiltro}
						disabled={modoEdicao}
						max={dataFimFiltro}
					/>
				</div>
				<div class="form-control">
					<label class="label">
						<span class="label-text font-medium">Data Fim</span>
					</label>
					<input
						type="date"
						class="input input-bordered w-full"
						bind:value={dataFimFiltro}
						disabled={modoEdicao}
						min={dataInicioFiltro}
					/>
				</div>
			</div>
		</div>
	</div>

	<!-- Formulário Unificado de Edição e Ajuste -->
	{#if modoEdicao && registroSelecionado}
		<div class="card bg-base-100 shadow-xl mb-6 border-2 border-primary/20">
			<div class="card-body p-8">
				<!-- Cabeçalho Elegante -->
				<div class="mb-8 pb-6 border-b border-base-300">
					<div class="flex items-start gap-4">
						<div class="p-3 bg-primary/10 rounded-xl">
							<Edit class="h-7 w-7 text-primary" strokeWidth={2} />
						</div>
						<div class="flex-1">
							<h2 class="text-3xl font-bold text-base-content mb-2">
								Homologar Registro de Ponto
							</h2>
							{#if dataRegistroFormatada}
								<div class="flex items-center gap-2 text-base-content/70">
									<Clock class="h-4 w-4" />
									<span class="text-sm">
										Registro do dia <span class="font-semibold text-primary">{dataRegistroFormatada}</span>
									</span>
								</div>
							{/if}
						</div>
					</div>
				</div>

				<!-- Abas Modernas -->
				<div class="tabs tabs-boxed mb-8 bg-base-200/50 p-1 rounded-lg">
					<button
						class="tab tab-lg flex-1 transition-all {abaAtiva === 'editar' ? 'tab-active bg-primary text-primary-content shadow-md' : 'hover:bg-base-300'}"
						onclick={() => (abaAtiva = 'editar')}
					>
						<Edit class="h-4 w-4 mr-2" />
						Editar Horário
					</button>
					<button
						class="tab tab-lg flex-1 transition-all {abaAtiva === 'ajustar' ? 'tab-active bg-primary text-primary-content shadow-md' : 'hover:bg-base-300'}"
						onclick={() => (abaAtiva = 'ajustar')}
					>
						<TrendingUp class="h-4 w-4 mr-2" />
						Ajustar Banco de Horas
					</button>
				</div>

				<!-- Conteúdo da Aba: Editar Horário -->
				{#if abaAtiva === 'editar'}
					<div class="space-y-8">
						<!-- Card: Nova Hora -->
						<div class="card bg-gradient-to-br from-primary/5 to-primary/10 border border-primary/20 shadow-sm">
							<div class="card-body p-6">
								<div class="flex items-center gap-3 mb-4">
									<div class="p-2 bg-primary/20 rounded-lg">
										<Clock class="h-5 w-5 text-primary" />
									</div>
									<div>
										<h3 class="text-lg font-semibold text-base-content">Nova Hora</h3>
										<p class="text-sm text-base-content/60">Defina o novo horário para este registro</p>
									</div>
								</div>
								<div class="form-control">
									<input
										type="time"
										class="input input-bordered input-primary w-full max-w-xs text-lg font-semibold"
										bind:value={novaHoraFormatada}
									/>
								</div>
							</div>
						</div>

						<!-- Card: Motivo e Justificativa -->
						<div class="card bg-base-50 border border-base-300 shadow-sm">
							<div class="card-body p-6">
								<h3 class="text-lg font-semibold text-base-content mb-6 flex items-center gap-2">
									<div class="w-1 h-6 bg-primary rounded-full"></div>
									Motivo e Justificativa
								</h3>
								<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
									<div class="form-control">
										<label class="label">
											<span class="label-text font-semibold">Tipo de Motivo</span>
											<span class="label-text-alt text-error font-bold">*</span>
										</label>
										<select class="select select-bordered select-primary w-full" bind:value={motivoTipo}>
											<option value="">Selecione um tipo</option>
											{#if motivos?.opcoesPadrao}
												{#each motivos.opcoesPadrao as opcao}
													<option value={opcao}>{opcao}</option>
												{/each}
											{/if}
										</select>
									</div>

									<div class="form-control">
										<label class="label">
											<span class="label-text font-semibold">Descrição do Motivo</span>
										</label>
										<input
											type="text"
											class="input input-bordered input-primary w-full"
											bind:value={motivoDescricao}
											placeholder="Informe detalhes adicionais sobre o motivo"
										/>
									</div>
								</div>
							</div>
						</div>

						<!-- Card: Observações -->
						<div class="card bg-base-50 border border-base-300 shadow-sm">
							<div class="card-body p-6">
								<h3 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
									<div class="w-1 h-6 bg-primary rounded-full"></div>
									Observações Adicionais
								</h3>
								<div class="form-control">
									<textarea
										class="textarea textarea-bordered textarea-primary w-full"
										bind:value={observacoes}
										rows="4"
										placeholder="Adicione observações relevantes sobre esta edição..."
									></textarea>
								</div>
							</div>
						</div>

						<!-- Botões de ação -->
						<div class="flex gap-3 justify-end pt-6 border-t border-base-300">
							<button class="btn btn-ghost gap-2 btn-lg" onclick={cancelar}>
								<X class="h-5 w-5" />
								Cancelar
							</button>
							<button class="btn btn-primary gap-2 btn-lg shadow-lg" onclick={salvarEdicao}>
								<Save class="h-5 w-5" />
								Salvar Alterações
							</button>
						</div>
					</div>
				{/if}

				<!-- Conteúdo da Aba: Ajustar Banco de Horas -->
				{#if abaAtiva === 'ajustar'}
					<div class="space-y-8">
						<!-- Card: Tipo de Ajuste -->
						<div class="card bg-gradient-to-br from-warning/5 to-warning/10 border border-warning/20 shadow-sm">
							<div class="card-body p-6">
								<div class="flex items-center gap-3 mb-4">
									<div class="p-2 bg-warning/20 rounded-lg">
										<TrendingUp class="h-5 w-5 text-warning" />
									</div>
									<div>
										<h3 class="text-lg font-semibold text-base-content">Tipo de Ajuste</h3>
										<p class="text-sm text-base-content/60">Selecione o tipo de ajuste a ser aplicado</p>
									</div>
								</div>
								<div class="form-control">
									<select class="select select-bordered select-warning w-full max-w-md text-base font-medium" bind:value={tipoAjuste}>
										<option value="compensar">🕐 Compensar</option>
										<option value="abonar">✅ Abonar</option>
										<option value="descontar">❌ Descontar em Folha</option>
									</select>
								</div>
							</div>
						</div>

						<!-- Card: Período com Data e Hora -->
						<div class="card bg-base-50 border border-base-300 shadow-sm">
							<div class="card-body p-6">
								<div class="flex items-center justify-between mb-6">
									<div class="flex items-center gap-3">
										<div class="p-2 bg-primary/20 rounded-lg">
											<Clock class="h-5 w-5 text-primary" />
										</div>
										<div>
											<h3 class="text-lg font-semibold text-base-content">Período do Ajuste</h3>
											<p class="text-sm text-base-content/60">Defina o período de início e fim do ajuste</p>
										</div>
									</div>
									<span class="badge badge-error badge-lg">Obrigatório</span>
								</div>

								<!-- Data e Hora Início -->
								<div class="mb-6 p-4 bg-primary/5 rounded-lg border border-primary/10">
									<h4 class="text-base font-semibold text-base-content mb-4 flex items-center gap-2">
										<div class="w-3 h-3 rounded-full bg-primary shadow-sm"></div>
										Início do Período
									</h4>
									<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
										<div class="form-control">
											<label class="label">
												<span class="label-text font-semibold">Data Início</span>
												<span class="label-text-alt text-error font-bold">*</span>
											</label>
											<input
												type="date"
												class="input input-bordered input-primary w-full"
												bind:value={dataInicioAjuste}
											/>
										</div>

										<div class="form-control">
											<label class="label">
												<span class="label-text font-semibold">Hora Início</span>
												<span class="label-text-alt text-error font-bold">*</span>
											</label>
											<input
												type="time"
												class="input input-bordered input-primary w-full"
												bind:value={horaInicioAjuste}
											/>
										</div>
									</div>
								</div>

								<!-- Separador Visual -->
								<div class="divider my-6">
									<Clock class="h-5 w-5 text-base-content/40" />
								</div>

								<!-- Data e Hora Fim -->
								<div class="p-4 bg-secondary/5 rounded-lg border border-secondary/10">
									<h4 class="text-base font-semibold text-base-content mb-4 flex items-center gap-2">
										<div class="w-3 h-3 rounded-full bg-secondary shadow-sm"></div>
										Fim do Período
									</h4>
									<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
										<div class="form-control">
											<label class="label">
												<span class="label-text font-semibold">Data Fim</span>
												<span class="label-text-alt text-error font-bold">*</span>
											</label>
											<input
												type="date"
												class="input input-bordered input-secondary w-full"
												bind:value={dataFimAjuste}
												min={dataInicioAjuste}
											/>
										</div>

										<div class="form-control">
											<label class="label">
												<span class="label-text font-semibold">Hora Fim</span>
												<span class="label-text-alt text-error font-bold">*</span>
											</label>
											<input
												type="time"
												class="input input-bordered input-secondary w-full"
												bind:value={horaFimAjuste}
											/>
										</div>
									</div>
								</div>

								<!-- Preview do Período Calculado -->
								{#if dataInicioAjuste && horaInicioAjuste && dataFimAjuste && horaFimAjuste}
									{@const periodoCalculado = calcularPeriodo(dataInicioAjuste, horaInicioAjuste, dataFimAjuste, horaFimAjuste)}
									{#if periodoCalculado.dias > 0 || periodoCalculado.horas > 0 || periodoCalculado.minutos > 0}
										<div class="mt-6 p-4 bg-info/10 rounded-lg border border-info/30 shadow-sm">
											<div class="flex items-center gap-2 mb-2">
												<Clock class="h-4 w-4 text-info" />
												<div class="text-sm font-semibold text-info">Período Calculado</div>
											</div>
											<div class="text-base font-bold text-base-content">
												{periodoCalculado.dias > 0 ? `${periodoCalculado.dias} dia${periodoCalculado.dias > 1 ? 's' : ''} ` : ''}
												{periodoCalculado.horas > 0 ? `${periodoCalculado.horas} hora${periodoCalculado.horas > 1 ? 's' : ''} ` : ''}
												{periodoCalculado.minutos > 0 ? `${periodoCalculado.minutos} minuto${periodoCalculado.minutos > 1 ? 's' : ''}` : ''}
											</div>
										</div>
									{/if}
								{/if}
							</div>
						</div>

						<!-- Card: Motivo e Justificativa -->
						<div class="card bg-base-50 border border-base-300 shadow-sm">
							<div class="card-body p-6">
								<h3 class="text-lg font-semibold text-base-content mb-6 flex items-center gap-2">
									<div class="w-1 h-6 bg-warning rounded-full"></div>
									Motivo e Justificativa
								</h3>
								<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
									<div class="form-control">
										<label class="label">
											<span class="label-text font-semibold">Tipo de Motivo</span>
											<span class="label-text-alt text-error font-bold">*</span>
										</label>
										<select class="select select-bordered select-warning w-full" bind:value={motivoTipo}>
											<option value="">Selecione um tipo</option>
											{#if motivos?.opcoesPadrao}
												{#each motivos.opcoesPadrao as opcao}
													<option value={opcao}>{opcao}</option>
												{/each}
											{/if}
										</select>
									</div>

									<div class="form-control">
										<label class="label">
											<span class="label-text font-semibold">Descrição do Motivo</span>
										</label>
										<input
											type="text"
											class="input input-bordered input-warning w-full"
											bind:value={motivoDescricao}
											placeholder="Informe detalhes adicionais sobre o motivo"
										/>
									</div>
								</div>
							</div>
						</div>

						<!-- Card: Observações -->
						<div class="card bg-base-50 border border-base-300 shadow-sm">
							<div class="card-body p-6">
								<h3 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
									<div class="w-1 h-6 bg-warning rounded-full"></div>
									Observações Adicionais
								</h3>
								<div class="form-control">
									<textarea
										class="textarea textarea-bordered textarea-warning w-full"
										bind:value={observacoes}
										rows="4"
										placeholder="Adicione observações relevantes sobre este ajuste..."
									></textarea>
								</div>
							</div>
						</div>

						<!-- Botões de ação -->
						<div class="flex gap-3 justify-end pt-6 border-t border-base-300">
							<button class="btn btn-ghost gap-2 btn-lg" onclick={cancelar}>
								<X class="h-5 w-5" />
								Cancelar
							</button>
							<button class="btn btn-warning gap-2 btn-lg shadow-lg" onclick={salvarAjuste}>
								<Save class="h-5 w-5" />
								Salvar Ajuste
							</button>
						</div>
					</div>
				{/if}
			</div>
		</div>
	{/if}

	<!-- Lista de Registros -->
	{#if funcionarioSelecionado}
		<div class="card bg-base-100 shadow-xl mb-6">
			<div class="card-body">
				<h2 class="card-title mb-4">Registros do Funcionário</h2>

				{#if registrosQuery?.status === 'Loading'}
					<div class="flex items-center justify-center py-8">
						<span class="loading loading-spinner loading-lg"></span>
					</div>
				{:else if registros.length === 0}
					<div class="alert alert-info">
						<span>Nenhum registro encontrado</span>
					</div>
				{:else}
					<div class="overflow-x-auto">
						<div class="max-h-[600px] overflow-y-auto border border-base-300 rounded-lg">
							<table class="table table-zebra">
								<thead class="sticky top-0 bg-base-200 z-10 shadow-sm">
									<tr>
										<th class="bg-base-200 whitespace-nowrap">Data</th>
										<th class="bg-base-200 whitespace-nowrap">Tipo</th>
										<th class="bg-base-200 whitespace-nowrap">Horário</th>
										<th class="bg-base-200 whitespace-nowrap">Status</th>
										<th class="bg-base-200 whitespace-nowrap">Ações</th>
									</tr>
								</thead>
								<tbody>
									{#each registros as registro}
										<tr>
											<td class="whitespace-nowrap">{registro.data}</td>
											<td class="whitespace-nowrap">
												{getTipoRegistroLabel(registro.tipo)}
											</td>
											<td class="whitespace-nowrap">{formatarHoraPonto(registro.hora, registro.minuto)}</td>
											<td class="whitespace-nowrap">
												<span
													class="badge {registro.dentroDoPrazo ? 'badge-success' : 'badge-error'}"
												>
													{registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'}
												</span>
											</td>
											<td class="whitespace-nowrap">
												<button
													class="btn btn-sm btn-outline btn-primary gap-2"
													onclick={() => abrirEdicaoComAjuste(registro._id)}
												>
													<Edit class="h-4 w-4" />
													Editar
												</button>
											</td>
										</tr>
									{/each}
								</tbody>
							</table>
						</div>
					</div>
				{/if}
			</div>
		</div>
	{/if}

	<!-- Histórico de Homologações -->
	<div class="card bg-base-100 shadow-xl">
		<div class="card-body">
			<h2 class="card-title mb-4">
				Histórico de Homologações
				{#if funcionarioSelecionado}
					<span class="text-sm font-normal text-base-content/70">
						- Funcionário selecionado
					</span>
				{:else}
					<span class="text-sm font-normal text-base-content/70">
						- Todas as homologações do seu time
					</span>
				{/if}
			</h2>

			{#if homologacoesQuery?.status === 'Loading'}
				<div class="flex items-center justify-center py-8">
					<span class="loading loading-spinner loading-lg"></span>
				</div>
			{:else if homologacoes.length === 0}
				<div class="alert alert-info">
					<span>Nenhuma homologação encontrada</span>
				</div>
			{:else}
					<div class="overflow-x-auto">
						<table class="table table-zebra">
							<thead>
								<tr>
									<th>Data</th>
									{#if !funcionarioSelecionado}
										<th>Funcionário</th>
									{/if}
									<th>Tipo</th>
									<th>Detalhes</th>
									<th>Motivo</th>
									<th>Observações</th>
									{#if isGestor}
										<th>Ações</th>
									{/if}
								</tr>
							</thead>
							<tbody>
								{#each homologacoes as homologacao}
									<tr>
										<td>
											{new Date(homologacao.criadoEm).toLocaleDateString('pt-BR')}
										</td>
										{#if !funcionarioSelecionado}
											<td>
												{homologacao.funcionario?.nome || '-'}
												{#if homologacao.funcionario?.matricula}
													<br />
													<span class="text-xs text-base-content/70">
														Mat: {homologacao.funcionario.matricula}
													</span>
												{/if}
											</td>
										{/if}
										<td>
											{#if homologacao.registroId}
												<span class="badge badge-info">Edição de Registro</span>
											{:else if homologacao.tipoAjuste}
												<span class="badge badge-warning">
													Ajuste: {homologacao.tipoAjuste}
												</span>
											{/if}
										</td>
										<td>
											{#if homologacao.horaAnterior !== undefined}
												<div class="text-sm">
													<span class="line-through opacity-70">
														{formatarHoraPonto(homologacao.horaAnterior, homologacao.minutoAnterior || 0)}
													</span>
													{' → '}
													<span>
														{formatarHoraPonto(homologacao.horaNova || 0, homologacao.minutoNova || 0)}
													</span>
												</div>
											{:else if homologacao.ajusteMinutos}
												<div class="text-sm">
													{homologacao.periodoDias || 0}d {homologacao.periodoHoras || 0}h{' '}
													{homologacao.periodoMinutos || 0}min
												</div>
											{/if}
										</td>
										<td>
											<div class="text-sm">
												{homologacao.motivoDescricao || homologacao.motivoTipo || '-'}
											</div>
										</td>
										<td>
											<div class="text-sm max-w-xs truncate" title={homologacao.observacoes || ''}>
												{homologacao.observacoes || '-'}
											</div>
										</td>
										{#if isGestor}
											<td>
												<div class="flex gap-1">
													<button
														class="btn btn-sm btn-outline btn-info btn-square hover:btn-info hover:scale-110 transition-transform"
														onclick={() => abrirDetalhes(homologacao._id)}
														title="Ver detalhes"
													>
														<Eye class="h-4 w-4" />
													</button>
													{#if homologacao.registroId}
														<button
															class="btn btn-sm btn-square bg-primary/10 text-primary border-primary/20 hover:bg-primary/20 hover:border-primary/40 hover:shadow-md transition-all"
															onclick={() => editarHomologacao(homologacao._id)}
															title="Editar"
														>
															<Edit class="h-4 w-4" />
														</button>
													{/if}
													<button
														class="btn btn-sm btn-square bg-error/10 text-error border-error/20 hover:bg-error/20 hover:border-error/40 hover:shadow-md transition-all"
														onclick={() => abrirModalExcluir(homologacao._id)}
														title="Excluir"
													>
														<Trash2 class="h-4 w-4" />
													</button>
												</div>
											</td>
										{/if}
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				{/if}
			</div>
		</div>

	<!-- Modal de Detalhes da Homologação -->
	{#if mostrandoModalDetalhes && homologacaoSelecionada}
		<div class="modal modal-open">
			<div class="modal-box max-w-3xl">
				<h3 class="font-bold text-lg mb-4">Detalhes da Homologação</h3>
				
				<div class="space-y-4">
					<!-- Informações Gerais -->
					<div class="card bg-base-200">
						<div class="card-body p-4">
							<h4 class="font-semibold mb-3">Informações Gerais</h4>
							<div class="grid grid-cols-2 gap-4 text-sm">
								<div>
									<span class="font-medium">Data:</span>{' '}
									{new Date(homologacaoSelecionada.criadoEm).toLocaleDateString('pt-BR', {
										day: '2-digit',
										month: '2-digit',
										year: 'numeric',
										hour: '2-digit',
										minute: '2-digit'
									})}
								</div>
								<div>
									<span class="font-medium">Funcionário:</span>{' '}
									{homologacaoSelecionada.funcionario?.nome || '-'}
									{#if homologacaoSelecionada.funcionario?.matricula}
										<br />
										<span class="text-xs text-base-content/70">
											Mat: {homologacaoSelecionada.funcionario.matricula}
										</span>
									{/if}
								</div>
								<div>
									<span class="font-medium">Gestor:</span>{' '}
									{homologacaoSelecionada.gestor?.nome || '-'}
								</div>
								<div>
									<span class="font-medium">Tipo:</span>{' '}
									{#if homologacaoSelecionada.registroId}
										<span class="badge badge-info">Edição de Registro</span>
									{:else if homologacaoSelecionada.tipoAjuste}
										<span class="badge badge-warning">
											Ajuste: {homologacaoSelecionada.tipoAjuste}
										</span>
									{/if}
								</div>
							</div>
						</div>
					</div>

					<!-- Detalhes do Registro ou Ajuste -->
					{#if homologacaoSelecionada.registroId}
						<div class="card bg-base-200">
							<div class="card-body p-4">
								<h4 class="font-semibold mb-3">Edição de Registro</h4>
								<div class="text-sm space-y-2">
									<div>
										<span class="font-medium">Horário Anterior:</span>{' '}
										<span class="line-through opacity-70">
											{formatarHoraPonto(homologacaoSelecionada.horaAnterior || 0, homologacaoSelecionada.minutoAnterior || 0)}
										</span>
									</div>
									<div>
										<span class="font-medium">Horário Novo:</span>{' '}
										<span>
											{formatarHoraPonto(homologacaoSelecionada.horaNova || 0, homologacaoSelecionada.minutoNova || 0)}
										</span>
									</div>
									{#if homologacaoSelecionada.registro}
										<div>
											<span class="font-medium">Data do Registro:</span>{' '}
											{new Date(homologacaoSelecionada.registro.data).toLocaleDateString('pt-BR')}
										</div>
										<div>
											<span class="font-medium">Tipo de Registro:</span>{' '}
											{getTipoRegistroLabel(homologacaoSelecionada.registro.tipo)}
										</div>
									{/if}
								</div>
							</div>
						</div>
					{:else if homologacaoSelecionada.tipoAjuste}
						<div class="card bg-base-200">
							<div class="card-body p-4">
								<h4 class="font-semibold mb-3">Ajuste de Banco de Horas</h4>
								<div class="text-sm space-y-2">
									<div>
										<span class="font-medium">Tipo de Ajuste:</span>{' '}
										{homologacaoSelecionada.tipoAjuste}
									</div>
									<div>
										<span class="font-medium">Período:</span>{' '}
										{homologacaoSelecionada.periodoDias || 0}d {homologacaoSelecionada.periodoHoras || 0}h{' '}
										{homologacaoSelecionada.periodoMinutos || 0}min
									</div>
									{#if homologacaoSelecionada.ajusteMinutos}
										<div>
											<span class="font-medium">Ajuste Total:</span>{' '}
											{homologacaoSelecionada.ajusteMinutos > 0 ? '+' : ''}
											{Math.floor(Math.abs(homologacaoSelecionada.ajusteMinutos) / 60)}h{' '}
											{Math.abs(homologacaoSelecionada.ajusteMinutos) % 60}min
										</div>
									{/if}
								</div>
							</div>
						</div>
					{/if}

					<!-- Motivo e Observações -->
					<div class="card bg-base-200">
						<div class="card-body p-4">
							<h4 class="font-semibold mb-3">Motivo e Observações</h4>
							<div class="text-sm space-y-2">
								<div>
									<span class="font-medium">Tipo de Motivo:</span>{' '}
									{homologacaoSelecionada.motivoTipo || '-'}
								</div>
								<div>
									<span class="font-medium">Descrição:</span>{' '}
									{homologacaoSelecionada.motivoDescricao || '-'}
								</div>
								{#if homologacaoSelecionada.observacoes}
									<div>
										<span class="font-medium">Observações:</span>
										<div class="mt-1 p-2 bg-base-100 rounded">
											{homologacaoSelecionada.observacoes}
										</div>
									</div>
								{/if}
							</div>
						</div>
					</div>
				</div>

				<div class="modal-action">
					<button class="btn" onclick={fecharDetalhes}>Fechar</button>
				</div>
			</div>
			<div class="modal-backdrop" onclick={fecharDetalhes}></div>
		</div>
	{/if}

	<!-- Modal de Confirmação de Exclusão -->
	{#if mostrandoModalExcluir && homologacaoParaExcluir}
		<div class="modal modal-open">
			<div class="modal-box">
				<h3 class="font-bold text-lg mb-4">Confirmar Exclusão</h3>
				<p class="mb-4">
					Tem certeza que deseja excluir esta homologação? Esta ação não pode ser desfeita.
				</p>
				<div class="modal-action">
					<button class="btn btn-ghost" onclick={fecharModalExcluir}>Cancelar</button>
					<button class="btn btn-error" onclick={excluirHomologacao}>
						<Trash2 class="h-4 w-4 mr-2" />
						Excluir
					</button>
				</div>
			</div>
			<div class="modal-backdrop" onclick={fecharModalExcluir}></div>
		</div>
	{/if}
</div>

