<script lang="ts">
	import { useConvexClient, useQuery } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { resolve } from '$app/paths';
	import AprovarFerias from '$lib/components/AprovarFerias.svelte';
	import WizardSolicitacaoFerias from '$lib/components/ferias/WizardSolicitacaoFerias.svelte';
	import WizardSolicitacaoAusencia from '$lib/components/ausencias/WizardSolicitacaoAusencia.svelte';
	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
	import CalendarioAusencias from '$lib/components/ausencias/CalendarioAusencias.svelte';
	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import type { FunctionReturnType } from 'convex/server';
	import {
		X,
		Calendar,
		Users,
		Clock,
		CheckCircle2,
		Eye,
		FileCheck,
		CalendarDays,
		User,
		Mail,
		Shield,
		Briefcase,
		Hash,
		CreditCard,
		Building2,
		CheckCircle,
		ListChecks,
		Info,
		Fingerprint,
		Palette
	} from 'lucide-svelte';
	import RegistroPonto from '$lib/components/ponto/RegistroPonto.svelte';
	import TicketCard from '$lib/components/chamados/TicketCard.svelte';
	import TicketTimeline from '$lib/components/chamados/TicketTimeline.svelte';
	import { chamadosStore } from '$lib/stores/chamados';
	import {
		formatarData,
		getStatusBadge as getStatusBadgeChamado,
		getStatusDescription,
		getStatusLabel,
		prazoRestante
	} from '$lib/utils/chamados';
	import { useConvexWithAuth } from '$lib/hooks/useConvexWithAuth';
	import type { Doc } from '@sgse-app/backend/convex/_generated/dataModel';
	import { temasDisponiveis, aplicarTema, type Tema } from '$lib/utils/temas';

	const client = useConvexClient();
	// @ts-expect-error - Convex types issue with getCurrentUser
	const currentUser = useQuery(api.auth.getCurrentUser, {});

	type FuncionarioAtual = FunctionReturnType<typeof api.funcionarios.getCurrent>;
	type TimeAtual = FunctionReturnType<typeof api.times.obterTimeFuncionario>;
	type MinhasSolicitacoes = FunctionReturnType<typeof api.ferias.listarMinhasSolicitacoes>;
	type MinhasAusencias = FunctionReturnType<typeof api.ausencias.listarMinhasSolicitacoes>;
	let funcionarioEstavel = $state<FuncionarioAtual | null>(null);
	let meuTimeEstavel = $state<TimeAtual | null>(null);
	let minhasSolicitacoesEstaveis = $state<MinhasSolicitacoes>([]);
	let minhasAusenciasEstaveis = $state<MinhasAusencias>([]);

	let abaAtiva = $state<
		| 'meu-perfil'
		| 'meus-chamados'
		| 'minhas-ferias'
		| 'minhas-ausencias'
		| 'aprovar-ferias'
		| 'aprovar-ausencias'
		| 'meu-ponto'
		| 'aparencia'
	>('meu-perfil');

	let periodoSelecionado = $state<Id<'ferias'> | null>(null);

	let mostrarModalFoto = $state(false);
	let uploadandoFoto = $state(false);
	let erroUpload = $state('');
	let modoFoto = $state<'upload' | 'avatar'>('avatar');
	let mostrarBotaoCamera = $state(false);

	// Estados para Minhas Férias
	let mostrarWizard = $state(false);
	let filtroStatusFerias = $state<string>('todos');

	// Estados para Minhas Ausências
	let mostrarWizardAusencia = $state(false);
	let filtroStatusAusencias = $state<string>('todos');

	// Estados para Aprovar Ausências (Gestores)
	let solicitacaoAusenciaAprovar = $state<Id<'solicitacoesAusencias'> | null>(null);

	// Estados para Meus Chamados
	type Ticket = Doc<'tickets'>;
	const detalhesStore = chamadosStore.detalhes;
	let carregandoDetalheChamado = $state(false);
	let filtroStatusChamados = $state<'todos' | Ticket['status']>('todos');
	let filtroTipoChamados = $state<'todos' | Ticket['tipo']>('todos');
	let selectedTicketId = $state<Id<'tickets'> | null>(null);
	let mensagemChamado = $state('');
	let erroMensagemChamado = $state<string | null>(null);
	let sucessoMensagemChamado = $state<string | null>(null);

	// Estados para Aparência
	let temaSelecionado = $state<string | null>(null);
	let salvandoTema = $state(false);
	let sucessoSalvarTema = $state<string | null>(null);
	let erroSalvarTema = $state<string | null>(null);

	// Avatares padrão disponíveis
	const defaultAvatars = [
		'/avatars/avatar-1.png',
		'/avatars/avatar-2.png',
		'/avatars/avatar-3.png',
		'/avatars/avatar-4.png',
		'/avatars/avatar-5.png',
		'/avatars/avatar-6.png',
		'/avatars/avatar-7.png',
		'/avatars/avatar-8.png',
		'/avatars/avatar-9.png',
		'/avatars/avatar-10.png'
	];

	// FuncionarioId disponível diretamente do usuário atual
	const funcionarioIdDisponivel = $derived(currentUser?.data?.funcionarioId ?? null);
	const gestorIdDisponivel = $derived(currentUser?.data?._id ?? null);

	// Verificar autenticação antes de executar queries
	const usuarioAutenticado = $derived(currentUser?.data !== null && currentUser?.data !== undefined);

	// ✅ CORRIGIDO: Queries condicionais - só executar se usuário estiver autenticado
	// Queries que não requerem argumentos são criadas uma vez
	const funcionarioQuery = useQuery(
		api.funcionarios.getCurrent,
		usuarioAutenticado ? {} : 'skip'
	);
	const timesSubordinadosQuery = useQuery(
		api.times.listarSubordinadosDoGestorAtual,
		usuarioAutenticado ? {} : 'skip'
	);
	const chamadosQuery = useQuery(
		api.chamados.listarChamadosUsuario,
		usuarioAutenticado ? {} : 'skip'
	);

	// ✅ CORRIGIDO: Queries com argumentos obrigatórios usando $derived.by para estabilidade
	// Usamos uma chave estável baseada no ID para evitar recriação desnecessária
	const solicitacoesSubordinadosQuery = $derived.by(() => {
		if (!gestorIdDisponivel) return { data: [] };
		return useQuery(api.ferias.listarSolicitacoesSubordinados, {
			gestorId: gestorIdDisponivel as Id<'usuarios'>
		});
	});

	const ausenciasSubordinadosQuery = $derived.by(() => {
		if (!gestorIdDisponivel) return { data: [] };
		return useQuery(api.ausencias.listarSolicitacoesSubordinados, {
			gestorId: gestorIdDisponivel as Id<'usuarios'>
		});
	});

	// ✅ CORRIGIDO: Estados estáveis atualizados apenas quando há dados válidos
	// Não limpamos quando undefined (carregando), apenas quando explicitamente sem dados
	$effect(() => {
		if (funcionarioQuery?.data && funcionarioIdDisponivel) {
			funcionarioEstavel = funcionarioQuery.data;
		} else if (
			funcionarioQuery !== undefined &&
			funcionarioQuery?.data === null &&
			!funcionarioIdDisponivel
		) {
			// Só limpar se a query retornou explicitamente null e não há funcionarioId
			funcionarioEstavel = null;
		}
		// Se funcionarioQuery é undefined, ainda está carregando - manter estado atual
	});

	// Queries que dependem de funcionarioEstavel
	const funcionarioIdParaQueries = $derived(funcionarioEstavel?._id ?? null);

	const minhasSolicitacoesQuery = $derived.by(() => {
		if (!funcionarioIdParaQueries) return { data: [] };
		return useQuery(api.ferias.listarMinhasSolicitacoes, {
			funcionarioId: funcionarioIdParaQueries
		});
	});

	const minhasAusenciasQuery = $derived.by(() => {
		if (!funcionarioIdParaQueries) return { data: [] };
		return useQuery(api.ausencias.listarMinhasSolicitacoes, {
			funcionarioId: funcionarioIdParaQueries
		});
	});

	const meuTimeQuery = $derived.by(() => {
		if (!funcionarioIdParaQueries) return { data: null };
		return useQuery(api.times.obterTimeFuncionario, {
			funcionarioId: funcionarioIdParaQueries
		});
	});

	$effect(() => {
		if (meuTimeQuery?.data && funcionarioIdParaQueries) {
			meuTimeEstavel = meuTimeQuery.data;
		} else if (
			meuTimeQuery !== undefined &&
			meuTimeQuery?.data === null &&
			!funcionarioIdParaQueries
		) {
			meuTimeEstavel = null;
		}
	});

	$effect(() => {
		if (Array.isArray(minhasSolicitacoesQuery?.data) && funcionarioIdParaQueries) {
			minhasSolicitacoesEstaveis = minhasSolicitacoesQuery.data;
		} else if (
			minhasSolicitacoesQuery !== undefined &&
			minhasSolicitacoesQuery?.data === null &&
			!funcionarioIdParaQueries
		) {
			minhasSolicitacoesEstaveis = [];
		}
	});

	$effect(() => {
		if (Array.isArray(minhasAusenciasQuery?.data) && funcionarioIdParaQueries) {
			minhasAusenciasEstaveis = minhasAusenciasQuery.data;
		} else if (
			minhasAusenciasQuery !== undefined &&
			minhasAusenciasQuery?.data === null &&
			!funcionarioIdParaQueries
		) {
			minhasAusenciasEstaveis = [];
		}
	});

	// Deriveds - agora apenas extraem dados, não criam queries
	const funcionario = $derived(funcionarioEstavel);
	const solicitacoesSubordinados = $derived.by(() => {
		if (!gestorIdDisponivel) return [];
		return solicitacoesSubordinadosQuery?.data || [];
	});
	const ausenciasSubordinados = $derived.by(() => {
		if (!gestorIdDisponivel) return [];
		return ausenciasSubordinadosQuery?.data || [];
	});
	const meuTime = $derived(meuTimeEstavel);
	const minhasSolicitacoes = $derived(minhasSolicitacoesEstaveis);
	const minhasAusencias = $derived(minhasAusenciasEstaveis);
	const timesSubordinados = $derived(timesSubordinadosQuery?.data || []);
	const meusTimesGestor = $derived(timesSubordinados);

	const rolePermiteAprovacao = $derived(
		currentUser?.data?.role?.nome === 'TI_MASTER' || currentUser?.data?.role?.nome === 'TI_ADMIN'
	);

	const ehGestor = $derived((timesSubordinados || []).length > 0 || rolePermiteAprovacao);

	// Estados estáveis para Meus Chamados
	let chamadosEstaveis = $state<Array<Doc<'tickets'>>>([]);

	// ✅ CORRIGIDO: Sincronizar query com estado estável preservando durante carregamento
	$effect(() => {
		if (chamadosQuery && Array.isArray(chamadosQuery.data) && gestorIdDisponivel) {
			chamadosEstaveis = chamadosQuery.data;
			chamadosStore.setTickets(chamadosQuery.data);
			if (!selectedTicketId && chamadosQuery.data.length > 0) {
				selectedTicketId = chamadosQuery.data[0]._id;
			}
		} else if (chamadosQuery !== undefined && chamadosQuery?.data === null && !gestorIdDisponivel) {
			chamadosEstaveis = [];
			chamadosStore.setTickets([]);
		}
		// Se chamadosQuery é undefined, ainda está carregando - manter estado atual
	});

	// Deriveds para Meus Chamados
	const listaChamados = $derived(chamadosEstaveis);
	const carregandoListaChamados = $derived(
		chamadosQuery === undefined || chamadosQuery === null || chamadosQuery.data === undefined
	);
	const detalheAtualChamado = $derived(
		selectedTicketId ? ($detalhesStore[selectedTicketId] ?? null) : null
	);
	const ticketsFiltrados = $derived(
		listaChamados.filter((ticket) => {
			if (filtroStatusChamados !== 'todos' && ticket.status !== filtroStatusChamados) return false;
			if (filtroTipoChamados !== 'todos' && ticket.tipo !== filtroTipoChamados) return false;
			return true;
		})
	);

	// Funções para Meus Chamados
	async function recarregarChamados() {
		// A query é reativa e atualiza automaticamente
		// Esta função pode ser usada para forçar atualização se necessário
		if (chamadosQuery?.data) {
			chamadosEstaveis = chamadosQuery.data;
			chamadosStore.setTickets(chamadosQuery.data);
		}
	}

	async function selecionarChamado(ticketId: Id<'tickets'>) {
		selectedTicketId = ticketId;
		if (!$detalhesStore[ticketId]) {
			try {
				carregandoDetalheChamado = true;
				const detalhe = await client.query(api.chamados.obterChamado, { ticketId });
				if (detalhe) {
					chamadosStore.setDetalhe(ticketId, detalhe);
				}
			} catch (error) {
				console.error('Erro ao carregar detalhe:', error);
			} finally {
				carregandoDetalheChamado = false;
			}
		}
	}

	async function enviarMensagemChamado() {
		if (!selectedTicketId || !mensagemChamado.trim()) {
			erroMensagemChamado = 'Informe uma mensagem para atualizar o chamado.';
			return;
		}

		try {
			erroMensagemChamado = null;
			sucessoMensagemChamado = null;
			await client.mutation(api.chamados.registrarAtualizacao, {
				ticketId: selectedTicketId,
				conteudo: mensagemChamado.trim(),
				visibilidade: 'publico'
			});
			mensagemChamado = '';
			sucessoMensagemChamado = 'Atualização registrada com sucesso.';
			await selecionarChamado(selectedTicketId);
			// A query é reativa e atualiza automaticamente, mas podemos forçar atualização
			await recarregarChamados();
		} catch (error) {
			const mensagemErro =
				error instanceof Error ? error.message : 'Erro ao enviar atualização. Tente novamente.';
			erroMensagemChamado = mensagemErro;
		}
	}

	function statusAlertasChamado(ticket: Ticket) {
		const alertas: Array<{ label: string; tipo: 'success' | 'warning' | 'error' }> = [];
		if (ticket.prazoResposta) {
			const diff = ticket.prazoResposta - Date.now();
			if (diff < 0) alertas.push({ label: 'Prazo de resposta vencido', tipo: 'error' });
			else if (diff <= 4 * 60 * 60 * 1000)
				alertas.push({ label: 'Resposta vence em breve', tipo: 'warning' });
		}
		if (ticket.prazoConclusao) {
			const diff = ticket.prazoConclusao - Date.now();
			if (diff < 0) alertas.push({ label: 'Prazo de conclusão vencido', tipo: 'error' });
			else if (diff <= 24 * 60 * 60 * 1000)
				alertas.push({ label: 'Conclusão vence em breve', tipo: 'warning' });
		}
		return alertas;
	}

	// Garantir autenticação quando a aba for ativada
	$effect(() => {
		if (abaAtiva === 'meus-chamados') {
			useConvexWithAuth();
		}
	});

	// Filtrar minhas solicitações
	const solicitacoesFiltradas = $derived(
		minhasSolicitacoes.filter((s) => {
			if (filtroStatusFerias !== 'todos' && s.status !== filtroStatusFerias) return false;
			return true;
		})
	);

	// Filtrar minhas ausências
	const ausenciasFiltradas = $derived(
		minhasAusencias.filter((a) => {
			if (filtroStatusAusencias !== 'todos' && a.status !== filtroStatusAusencias) return false;
			return true;
		})
	);

	// Formatar ausências para o calendário
	const ausenciasParaCalendario = $derived(
		minhasAusencias.map((a) => ({
			dataInicio: a.dataInicio,
			dataFim: a.dataFim,
			status: a.status as 'aguardando_aprovacao' | 'aprovado' | 'reprovado'
		}))
	);

	// Estatísticas das minhas férias (períodos individuais)
	const statsMinhasFerias = $derived({
		total: minhasSolicitacoes.length,
		aguardando: minhasSolicitacoes.filter((s) => s.status === 'aguardando_aprovacao').length,
		aprovadas: minhasSolicitacoes.filter(
			(s) =>
				s.status === 'aprovado' || s.status === 'data_ajustada_aprovada' || s.status === 'EmFérias'
		).length,
		reprovadas: minhasSolicitacoes.filter((s) => s.status === 'reprovado').length,
		emFerias: funcionario?.statusFerias === 'em_ferias' ? 1 : 0
	});

	// Estatísticas das minhas ausências
	const statsMinhasAusencias = $derived({
		total: minhasAusencias.length,
		aguardando: minhasAusencias.filter((a) => a.status === 'aguardando_aprovacao').length,
		aprovadas: minhasAusencias.filter((a) => a.status === 'aprovado').length,
		reprovadas: minhasAusencias.filter((a) => a.status === 'reprovado').length
	});

	async function recarregar() {
		periodoSelecionado = null;
	}

	async function selecionarPeriodo(feriasId: Id<'ferias'>) {
		periodoSelecionado = feriasId;
	}

	// Função para formatar data sem problemas de timezone
	function formatarDataString(dataString: string): string {
		if (!dataString) return '';
		// Dividir a string da data (formato YYYY-MM-DD)
		const partes = dataString.split('-');
		if (partes.length !== 3) return dataString;
		// Retornar no formato DD/MM/YYYY
		return `${partes[2]}/${partes[1]}/${partes[0]}`;
	}

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

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

	async function handleUploadFoto(event: Event) {
		const input = event.target as HTMLInputElement;
		const file = input.files?.[0];

		if (!file) return;

		// Validar tipo de arquivo
		if (!file.type.startsWith('image/')) {
			erroUpload = 'Por favor, selecione uma imagem válida';
			return;
		}

		// Validar tamanho (max 5MB)
		if (file.size > 5 * 1024 * 1024) {
			erroUpload = 'A imagem deve ter no máximo 5MB';
			return;
		}

		await processarUploadFoto(file);
	}

	async function handleEscolherAvatarPadrao(avatarPath: string) {
		try {
			uploadandoFoto = true;
			erroUpload = '';

			// Buscar a imagem
			const response = await fetch(avatarPath);
			const blob = await response.blob();
			const file = new File([blob], avatarPath.split('/').pop() || 'avatar.png', {
				type: 'image/png'
			});

			await processarUploadFoto(file);
		} catch (e: unknown) {
			const errorMessage = e instanceof Error ? e.message : String(e);
			erroUpload = errorMessage || 'Erro ao processar avatar padrão';
			uploadandoFoto = false;
		}
	}

	async function processarUploadFoto(file: File) {
		uploadandoFoto = true;
		erroUpload = '';

		try {
			// 2. Gerar URL de upload
			const uploadUrl = await client.mutation(api.usuarios.uploadFotoPerfil, {});

			// 3. Upload do arquivo
			const response = await fetch(uploadUrl, {
				method: 'POST',
				headers: { 'Content-Type': file.type },
				body: file
			});

			if (!response.ok) {
				throw new Error('Falha no upload da imagem');
			}

			const { storageId } = await response.json();

			// 4. Atualizar perfil com o novo storageId
			await client.mutation(api.usuarios.atualizarPerfil, {
				fotoPerfil: storageId
			});

			// 5. Aguardar um pouco para garantir que o backend processou
			await new Promise((resolve) => setTimeout(resolve, 300));

			// 9. Fechar modal após sucesso
			mostrarModalFoto = false;

			// Toast de sucesso
			const toast = document.createElement('div');
			toast.className = 'toast toast-top toast-end';
			toast.innerHTML = `
        <div class="alert alert-success">
          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
            <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>
          <span>Foto de perfil atualizada com sucesso!</span>
        </div>
      `;
			document.body.appendChild(toast);
			setTimeout(() => toast.remove(), 3000);
		} catch (e: unknown) {
			const errorMessage = e instanceof Error ? e.message : String(e);
			erroUpload = errorMessage || 'Erro ao fazer upload da foto';
		}
		uploadandoFoto = false;
	}

	function abrirModalFoto() {
		erroUpload = '';
		modoFoto = 'avatar';
		mostrarModalFoto = true;
	}

	// Inicializar tema selecionado com o tema atual do usuário
	$effect(() => {
		if (currentUser?.data?.temaPreferido && !temaSelecionado) {
			temaSelecionado = currentUser.data.temaPreferido;
		} else if (!temaSelecionado && currentUser !== undefined) {
			// Só definir padrão se o usuário já foi carregado (mesmo que seja null)
			temaSelecionado = 'purple'; // Tema padrão
		}
	});

	// Função para selecionar e aplicar tema
	async function selecionarTema(temaId: string) {
		temaSelecionado = temaId;
		erroSalvarTema = null;
		sucessoSalvarTema = null;

		// Aplicar tema imediatamente (sem salvar ainda)
		aplicarTema(temaId);
	}

	// Função para salvar tema preferido
	async function salvarTema() {
		if (!temaSelecionado) return;

		try {
			salvandoTema = true;
			erroSalvarTema = null;
			sucessoSalvarTema = null;

			await client.mutation(api.usuarios.atualizarTema, {
				temaPreferido: temaSelecionado
			});

			// Garantir que o tema continue aplicado após salvar
			aplicarTema(temaSelecionado);

			sucessoSalvarTema = 'Tema salvo com sucesso! Sua preferência será aplicada em acessos futuros.';
			
			// Limpar mensagem após 3 segundos
			setTimeout(() => {
				sucessoSalvarTema = null;
			}, 3000);
		} catch (error) {
			const mensagemErro =
				error instanceof Error ? error.message : 'Erro ao salvar tema. Tente novamente.';
			erroSalvarTema = mensagemErro;
		} finally {
			salvandoTema = false;
		}
	}
</script>

<ProtectedRoute>
	<main class="min-h-screen pb-12">
		<!-- BANNER HERO PREMIUM -->
		<div class="relative mb-8 overflow-hidden">
			<!-- Background com gradiente animado -->
			<div
				class="animate-gradient absolute inset-0 bg-linear-to-br from-purple-600 via-blue-600 to-indigo-700"
			></div>

			<!-- Overlay pattern -->
			<div
				class="absolute inset-0 opacity-10"
				style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;1&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"
			></div>

			<!-- Conteúdo do Banner -->
			<div class="relative container mx-auto px-6 py-16">
				<div class="flex flex-col items-center gap-8 md:flex-row">
					<!-- Avatar PREMIUM -->
					<div
						class="group relative"
						role="button"
						tabindex="0"
						onmouseenter={() => (mostrarBotaoCamera = true)}
						onmouseleave={() => (mostrarBotaoCamera = false)}
					>
						<button
							type="button"
							class="avatar cursor-pointer border-0 bg-transparent p-0"
							onclick={abrirModalFoto}
						>
							<div
								class="animate-float flex h-40 w-40 items-center justify-center overflow-hidden rounded-full bg-white shadow-2xl ring-4 ring-white ring-offset-4 ring-offset-transparent transition-all duration-300 hover:scale-105 hover:ring-8"
							>
								{#if currentUser.data?.fotoPerfilUrl}
									<img
										src={currentUser.data.fotoPerfilUrl}
										alt="Foto de perfil"
										class="h-full w-full object-cover"
									/>
								{:else}
									<User class="h-20 w-20 text-purple-700" />
								{/if}
							</div>
						</button>

						<!-- Botão de editar MODERNO -->
						<button
							type="button"
							class={`absolute right-2 bottom-2 flex h-12 w-12 items-center justify-center rounded-full bg-white text-purple-600 shadow-2xl transition-all duration-300 hover:scale-110 ${mostrarBotaoCamera ? 'scale-100 opacity-100' : 'scale-50 opacity-0'}`}
							onclick={abrirModalFoto}
							aria-label="Editar foto de perfil"
						>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="h-6 w-6"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
								stroke-width="2.5"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
								/>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
								/>
							</svg>
						</button>
					</div>

					<!-- Informações do Usuário PREMIUM -->
					<div class="flex-1 text-center text-white md:text-left">
						<h1 class="mb-3 text-5xl font-black drop-shadow-lg">
							{currentUser.data?.nome}
						</h1>

						{#if funcionario?.descricaoCargo}
							<p
								class="mb-3 flex items-center justify-center gap-2 text-2xl font-semibold text-white/90 md:justify-start"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									class="h-6 w-6"
									fill="none"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
									/>
								</svg>
								{funcionario.descricaoCargo}
							</p>
						{/if}

						<p
							class="mb-4 flex items-center justify-center gap-2 text-lg text-white/80 md:justify-start"
						>
							<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
								/>
							</svg>
							{currentUser.data?.email}
						</p>

						<div class="flex flex-wrap items-center justify-center gap-3 md:justify-start">
							<div
								class="badge badge-lg border-0 bg-white/90 px-4 font-bold text-purple-700 shadow-lg"
							>
								{currentUser.data?.role?.nome || 'Usuário'}
							</div>

							{#if meuTime}
								<div
									class="badge badge-lg border-0 bg-white/80 px-4 font-semibold shadow-lg"
									style="color: {meuTime.cor}"
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										class="mr-2 h-4 w-4"
										fill="none"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
										/>
									</svg>
									{meuTime.nome}
								</div>
							{/if}

							{#if funcionario?.statusFerias === 'em_ferias'}
								<div
									class="badge badge-lg animate-pulse border-0 bg-yellow-400 px-4 font-bold text-yellow-900 shadow-lg"
								>
									🏖️ Em Férias
								</div>
							{:else}
								<div
									class="badge badge-lg border-0 bg-green-400 px-4 font-bold text-green-900 shadow-lg"
								>
									✅ Ativo
								</div>
							{/if}
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="container mx-auto max-w-7xl px-6">
			<!-- Tabs PREMIUM -->
			<div
				role="tablist"
				class="tabs tabs-boxed from-base-200 to-base-300 border-base-300 mb-8 rounded-xl border bg-gradient-to-r p-2 shadow-xl"
			>
				<button
					type="button"
					role="tab"
					class={`tab tab-lg gap-2 font-semibold transition-all duration-300 ${abaAtiva === 'meu-perfil' ? 'tab-active scale-105 bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg' : 'hover:bg-base-100'}`}
					onclick={() => (abaAtiva = 'meu-perfil')}
				>
					<User class="h-5 w-5" strokeWidth={2} />
					Meu Perfil
				</button>

				<button
					type="button"
					role="tab"
					class={`tab tab-lg gap-2 font-semibold transition-all duration-300 ${abaAtiva === 'meus-chamados' ? 'tab-active scale-105 bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg' : 'hover:bg-base-100'}`}
					onclick={() => (abaAtiva = 'meus-chamados')}
					aria-label="Meus Chamados"
				>
					<FileCheck class="h-5 w-5" strokeWidth={2} />
					Meus Chamados
				</button>

				{#if ehGestor}
					<button
						type="button"
						role="tab"
						class={`tab tab-lg gap-2 font-semibold transition-all duration-300 ${abaAtiva === 'minhas-ferias' ? 'tab-active scale-105 bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg' : 'hover:bg-base-100'}`}
						onclick={() => (abaAtiva = 'minhas-ferias')}
					>
						<Calendar class="h-5 w-5" strokeWidth={2} />
						Minhas Férias
					</button>

					<button
						type="button"
						role="tab"
						class={`tab tab-lg gap-2 font-semibold transition-all duration-300 ${abaAtiva === 'minhas-ausencias' ? 'tab-active scale-105 bg-gradient-to-r from-orange-600 to-amber-600 text-white shadow-lg' : 'hover:bg-base-100'}`}
						onclick={() => (abaAtiva = 'minhas-ausencias')}
					>
						<Clock class="h-5 w-5" strokeWidth={2} />
						Minhas Ausências
					</button>

					{#if ehGestor}
						<button
							type="button"
							role="tab"
							class={`tab tab-lg gap-2 font-semibold transition-all duration-300 ${abaAtiva === 'aprovar-ferias' ? 'tab-active scale-105 bg-gradient-to-r from-green-600 to-emerald-600 text-white shadow-lg' : 'hover:bg-base-100'}`}
							onclick={() => (abaAtiva = 'aprovar-ferias')}
						>
							<CheckCircle2 class="h-5 w-5" strokeWidth={2} />
							Aprovar Férias
							{#if (solicitacoesSubordinados || []).filter((s) => s.status === 'aguardando_aprovacao').length > 0}
								<span class="badge badge-error badge-sm ml-1 animate-pulse">
									{(solicitacoesSubordinados || []).filter(
										(s) => s.status === 'aguardando_aprovacao'
									).length}
								</span>
							{/if}
						</button>

						<button
							type="button"
							role="tab"
							class={`tab tab-lg gap-2 font-semibold transition-all duration-300 ${abaAtiva === 'aprovar-ausencias' ? 'tab-active scale-105 bg-gradient-to-r from-orange-600 to-amber-600 text-white shadow-lg' : 'hover:bg-base-100'}`}
							onclick={() => (abaAtiva = 'aprovar-ausencias')}
						>
							<Clock class="h-5 w-5" strokeWidth={2} />
							Aprovar Ausências
							{#if (ausenciasSubordinados || []).filter((a) => a.status === 'aguardando_aprovacao').length > 0}
								<span class="badge badge-error badge-sm ml-1 animate-pulse">
									{(ausenciasSubordinados || []).filter((a) => a.status === 'aguardando_aprovacao')
										.length}
								</span>
							{/if}
						</button>
					{/if}
				{/if}

				<button
					type="button"
					role="tab"
					class={`tab tab-lg gap-2 font-semibold transition-all duration-300 ${abaAtiva === 'meu-ponto' ? 'tab-active scale-105 bg-gradient-to-r from-blue-600 to-cyan-600 text-white shadow-lg' : 'hover:bg-base-100'}`}
					onclick={() => (abaAtiva = 'meu-ponto')}
				>
					<Fingerprint class="h-5 w-5" strokeWidth={2} />
					Meu Ponto
				</button>

				<button
					type="button"
					role="tab"
					class={`tab tab-lg gap-2 font-semibold transition-all duration-300 ${abaAtiva === 'aparencia' ? 'tab-active scale-105 bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg' : 'hover:bg-base-100'}`}
					onclick={() => (abaAtiva = 'aparencia')}
				>
					<Palette class="h-5 w-5" strokeWidth={2} />
					Aparência
				</button>
			</div>

			<!-- Conteúdo das Abas -->
			{#if abaAtiva === 'meu-perfil'}
				<!-- Meu Perfil PREMIUM -->
				<div class="space-y-6">
					<!-- STATS CARDS -->
					<div class="grid grid-cols-1 gap-6 md:grid-cols-4">
						<!-- Stat 1: Perfil -->
						<div
							class="card bg-linear-to-br from-purple-500 to-purple-700 text-white shadow-2xl transition-transform hover:scale-105"
						>
							<div class="card-body">
								<div class="flex items-center justify-between">
									<div>
										<p class="text-sm font-medium text-white/80">Seu Perfil</p>
										<p class="text-2xl font-black">
											{currentUser.data?.role?.nome || 'Usuário'}
										</p>
									</div>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										class="h-12 w-12 opacity-80"
										fill="none"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
										/>
									</svg>
								</div>
							</div>
						</div>

						<!-- Stat 2: Time -->
						<div
							class="card bg-linear-to-br from-blue-500 to-blue-700 text-white shadow-2xl transition-transform hover:scale-105"
						>
							<div class="card-body">
								<div class="flex items-center justify-between">
									<div>
										<p class="text-sm font-medium text-white/80">Seu Time</p>
										<p class="truncate text-2xl font-black">
											{meuTime?.nome || 'Sem time'}
										</p>
									</div>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										class="h-12 w-12 opacity-80"
										fill="none"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
										/>
									</svg>
								</div>
							</div>
						</div>

						<!-- Stat 3: Status -->
						<div
							class="card bg-linear-to-br from-green-500 to-green-700 text-white shadow-2xl transition-transform hover:scale-105"
						>
							<div class="card-body">
								<div class="flex items-center justify-between">
									<div>
										<p class="text-sm font-medium text-white/80">Status</p>
										<p class="text-2xl font-black">
											{funcionario?.statusFerias === 'em_ferias' ? 'Em Férias' : 'Ativo'}
										</p>
									</div>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										class="h-12 w-12 opacity-80"
										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>
						</div>

						<!-- Stat 4: Matrícula -->
						<div
							class="card bg-linear-to-br from-indigo-500 to-indigo-700 text-white shadow-2xl transition-transform hover:scale-105"
						>
							<div class="card-body">
								<div class="flex items-center justify-between">
									<div>
										<p class="text-sm font-medium text-white/80">Matrícula</p>
										<p class="text-2xl font-black">
											{funcionario?.matricula || '---'}
										</p>
									</div>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										class="h-12 w-12 opacity-80"
										fill="none"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
										/>
									</svg>
								</div>
							</div>
						</div>
					</div>

					<!-- CARDS PRINCIPAIS -->
					<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
						<!-- Informações Pessoais PREMIUM -->
						<div
							class="card from-base-100 to-base-200 hover:shadow-3xl overflow-hidden border-t-4 border-purple-500 bg-gradient-to-br shadow-2xl transition-shadow"
						>
							<div class="card-body p-6">
								<div class="mb-6 flex items-center justify-between">
									<div class="flex items-center gap-3">
										<div
											class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 shadow-lg ring-2 ring-purple-500/20"
										>
											<User class="h-6 w-6 text-white" strokeWidth={2.5} />
										</div>
										<div>
											<h2 class="text-base-content flex items-center gap-2 text-2xl font-bold">
												Informações Pessoais
											</h2>
											<p class="text-base-content/60 mt-0.5 text-sm">
												Seus dados pessoais e de acesso
											</p>
										</div>
									</div>
								</div>
								<div class="space-y-3">
									<div
										class="hover:bg-base-200/60 border-base-300/50 flex items-start gap-3 rounded-lg border p-4 shadow-sm transition-all hover:shadow-md"
									>
										<div
											class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-purple-500/20 to-purple-600/20"
										>
											<User class="h-5 w-5 text-purple-600" strokeWidth={2} />
										</div>
										<div class="flex-1">
											<span
												class="label-text text-base-content/60 text-xs font-semibold tracking-wide uppercase"
												>Nome Completo</span
											>
											<p class="text-base-content mt-1 text-base font-semibold">
												{currentUser.data?.nome}
											</p>
										</div>
									</div>

									<div
										class="hover:bg-base-200/60 border-base-300/50 flex items-start gap-3 rounded-lg border p-4 shadow-sm transition-all hover:shadow-md"
									>
										<div
											class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500/20 to-blue-600/20"
										>
											<Mail class="h-5 w-5 text-blue-600" strokeWidth={2} />
										</div>
										<div class="flex-1">
											<span
												class="label-text text-base-content/60 text-xs font-semibold tracking-wide uppercase"
												>E-mail Institucional</span
											>
											<p class="text-base-content mt-1 text-base font-semibold break-all">
												{currentUser.data?.email}
											</p>
										</div>
									</div>

									<div
										class="hover:bg-base-200/60 border-base-300/50 flex items-start gap-3 rounded-lg border p-4 shadow-sm transition-all hover:shadow-md"
									>
										<div
											class="from-primary/20 to-primary/30 flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br"
										>
											<Shield class="text-primary h-5 w-5" strokeWidth={2} />
										</div>
										<div class="flex-1">
											<span
												class="label-text text-base-content/60 text-xs font-semibold tracking-wide uppercase"
												>Perfil de Acesso</span
											>
											<div class="badge badge-primary badge-lg mt-2 font-bold shadow-sm">
												{currentUser.data?.role?.nome || 'Usuário'}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- Dados Funcionais PREMIUM -->
						{#if funcionario}
							<div
								class="card from-base-100 to-base-200 hover:shadow-3xl overflow-hidden border-t-4 border-blue-500 bg-gradient-to-br shadow-2xl transition-shadow"
							>
								<div class="card-body p-6">
									<div class="mb-6 flex items-center justify-between">
										<div class="flex items-center gap-3">
											<div
												class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg ring-2 ring-blue-500/20"
											>
												<Briefcase class="h-6 w-6 text-white" strokeWidth={2.5} />
											</div>
											<div>
												<h2 class="text-base-content flex items-center gap-2 text-2xl font-bold">
													Dados Funcionais
												</h2>
												<p class="text-base-content/60 mt-0.5 text-sm">
													Informações profissionais e organizacionais
												</p>
											</div>
										</div>
									</div>
									<div class="space-y-3">
										<div
											class="hover:bg-base-200/60 border-base-300/50 flex items-start gap-3 rounded-lg border p-4 shadow-sm transition-all hover:shadow-md"
										>
											<div
												class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500/20 to-blue-600/20"
											>
												<Hash class="h-5 w-5 text-blue-600" strokeWidth={2} />
											</div>
											<div class="flex-1">
												<span
													class="label-text text-base-content/60 text-xs font-semibold tracking-wide uppercase"
													>Matrícula</span
												>
												<p class="text-base-content mt-1 text-base font-semibold">
													{funcionario.matricula || 'Não informada'}
												</p>
											</div>
										</div>

										<div
											class="hover:bg-base-200/60 border-base-300/50 flex items-start gap-3 rounded-lg border p-4 shadow-sm transition-all hover:shadow-md"
										>
											<div
												class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-green-500/20 to-green-600/20"
											>
												<CreditCard class="h-5 w-5 text-green-600" strokeWidth={2} />
											</div>
											<div class="flex-1">
												<span
													class="label-text text-base-content/60 text-xs font-semibold tracking-wide uppercase"
													>CPF</span
												>
												<p class="text-base-content mt-1 text-base font-semibold">
													{funcionario.cpf}
												</p>
											</div>
										</div>

										<div
											class="hover:bg-base-200/60 border-base-300/50 flex items-start gap-3 rounded-lg border p-4 shadow-sm transition-all hover:shadow-md"
										>
											<div
												class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500/20 to-orange-600/20"
											>
												<Building2 class="h-5 w-5 text-orange-600" strokeWidth={2} />
											</div>
											<div class="flex-1">
												<span
													class="label-text text-base-content/60 text-xs font-semibold tracking-wide uppercase"
													>Time</span
												>
												{#if meuTime}
													<div class="mt-2">
														<div
															class="badge badge-lg font-semibold shadow-sm"
															style="background-color: {meuTime.cor}20; border-color: {meuTime.cor}; color: {meuTime.cor}"
														>
															{meuTime.nome}
														</div>
														<p class="text-base-content/60 mt-2 text-xs">
															Gestor: <span class="font-semibold">{meuTime.gestor?.nome}</span>
														</p>
													</div>
												{:else}
													<p class="text-base-content/50 mt-1 text-sm">Não atribuído a um time</p>
												{/if}
											</div>
										</div>

										<div
											class="hover:bg-base-200/60 border-base-300/50 flex items-start gap-3 rounded-lg border p-4 shadow-sm transition-all hover:shadow-md"
										>
											<div
												class="from-success/20 to-success/30 flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br"
											>
												<CheckCircle class="text-success h-5 w-5" strokeWidth={2} />
											</div>
											<div class="flex-1">
												<span
													class="label-text text-base-content/60 text-xs font-semibold tracking-wide uppercase"
													>Status Atual</span
												>
												{#if funcionario.statusFerias === 'em_ferias'}
													<div class="badge badge-warning badge-lg mt-2 font-bold shadow-sm">
														🏖️ Em Férias
													</div>
												{:else}
													<div class="badge badge-success badge-lg mt-2 font-bold shadow-sm">
														✅ Ativo
													</div>
												{/if}
											</div>
										</div>
									</div>
								</div>
							</div>
						{/if}
					</div>

					<!-- Times Gerenciados PREMIUM -->
					{#if ehGestor}
						<div
							class="card border-warning from-warning/10 via-base-100 to-warning/5 border-t-4 bg-gradient-to-br shadow-2xl"
						>
							<div class="card-body">
								<h2 class="card-title text-warning mb-6 flex items-center gap-2 text-2xl">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										class="h-7 w-7"
										fill="none"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
										/>
									</svg>
									Times que Você Gerencia
									<div class="badge badge-warning badge-lg ml-2">
										{meusTimesGestor.length}
									</div>
								</h2>

								{#if meusTimesGestor.length === 0}
									<div class="alert alert-info">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											class="h-6 w-6 shrink-0 stroke-current"
										>
											<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>Você não gerencia nenhum time no momento.</span>
									</div>
								{:else}
									<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
										{#each meusTimesGestor as time (time._id)}
											<div
												class="card dark:bg-base-100 border-l-4 bg-white shadow-xl transition-all hover:scale-105 hover:shadow-2xl"
												style="border-color: {time.cor}"
											>
												<div class="card-body">
													<div class="flex items-start gap-2">
														<div class="flex-1">
															<h3 class="mb-2 text-xl font-black" style="color: {time.cor}">
																{time.nome}
															</h3>
															<p class="text-base-content/70 mb-4 line-clamp-2 text-sm">
																{time.descricao || 'Sem descrição'}
															</p>
														</div>
													</div>

													<div class="divider my-2"></div>

													<div class="flex items-center justify-between">
														<div class="flex items-center gap-2">
															<svg
																xmlns="http://www.w3.org/2000/svg"
																class="text-primary h-5 w-5"
																fill="none"
																viewBox="0 0 24 24"
																stroke="currentColor"
															>
																<path
																	stroke-linecap="round"
																	stroke-linejoin="round"
																	stroke-width="2"
																	d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
																/>
															</svg>
															<span class="text-lg font-bold">{time.membros?.length || 0}</span>
															<span class="text-base-content/70 text-sm">membros</span>
														</div>
														<div
															class="badge badge-lg font-semibold"
															style="background-color: {time.cor}20; border-color: {time.cor}; color: {time.cor}"
														>
															Gestor
														</div>
													</div>
												</div>
											</div>
										{/each}
									</div>
								{/if}
							</div>
						</div>
					{/if}
				</div>
			{:else if abaAtiva === 'meus-chamados'}
				<!-- Meus Chamados -->
				<div class="space-y-6">
					<section class="border-base-200 bg-base-100/90 rounded-3xl border p-8 shadow-xl">
						<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
							<div>
								<p class="text-primary text-xs tracking-[0.25em] uppercase">Meu Perfil</p>
								<h1 class="text-base-content text-3xl font-black">Meus Chamados</h1>
								<p class="text-base-content/70 mt-2 text-sm">
									Acompanhe o status, interaja com a equipe de TI e visualize a timeline de SLA em
									tempo real.
								</p>
							</div>
							<div class="flex flex-wrap gap-3">
								<a href={resolve('/abrir-chamado')} class="btn btn-primary">Abrir novo chamado</a>
								<button class="btn btn-ghost" type="button" onclick={recarregarChamados}>
									Atualizar
								</button>
							</div>
						</div>
					</section>

					<div class="grid gap-6 lg:grid-cols-[340px,1fr]">
						<aside class="border-base-200 bg-base-100/80 rounded-3xl border p-4 shadow-lg">
							<div class="flex items-center justify-between">
								<h2 class="text-base-content text-lg font-semibold">Meus tickets</h2>
								{#if carregandoListaChamados}
									<span class="loading loading-spinner loading-xs"></span>
								{/if}
							</div>

							<div class="mt-4 space-y-3">
								<select
									class="select select-sm select-bordered w-full"
									bind:value={filtroStatusChamados}
								>
									<option value="todos">Todos os status</option>
									<option value="aberto">Aberto</option>
									<option value="em_andamento">Em andamento</option>
									<option value="aguardando_usuario">Aguardando usuário</option>
									<option value="resolvido">Resolvido</option>
									<option value="encerrado">Encerrado</option>
									<option value="cancelado">Cancelado</option>
								</select>
								<select
									class="select select-sm select-bordered w-full"
									bind:value={filtroTipoChamados}
								>
									<option value="todos">Todos os tipos</option>
									<option value="chamado">Chamados técnicos</option>
									<option value="reclamacao">Reclamações</option>
									<option value="elogio">Elogios</option>
									<option value="sugestao">Sugestões</option>
								</select>
							</div>

							<div
								class="mt-6 space-y-3 overflow-y-auto pr-1"
								style="max-height: calc(100vh - 260px);"
							>
								{#if ticketsFiltrados.length === 0}
									<div class="alert alert-info">
										<span>Nenhum chamado encontrado.</span>
									</div>
								{:else}
									{#each ticketsFiltrados as ticket (ticket._id)}
										<TicketCard
											{ticket}
											selected={ticket._id === selectedTicketId}
											on:select={({ detail }) => selecionarChamado(detail.ticketId)}
										/>
									{/each}
								{/if}
							</div>
						</aside>

						<section class="border-base-200 bg-base-100/90 rounded-3xl border p-6 shadow-xl">
							{#if !selectedTicketId || !detalheAtualChamado}
								<div class="text-base-content/60 flex min-h-[400px] items-center justify-center">
									{#if carregandoDetalheChamado}
										<span class="loading loading-spinner loading-lg"></span>
									{:else}
										<p>Selecione um chamado para visualizar os detalhes.</p>
									{/if}
								</div>
							{:else}
								<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
									<div>
										<p class="text-base-content/60 text-xs uppercase">
											Ticket {detalheAtualChamado.ticket.numero}
										</p>
										<h2 class="text-base-content text-2xl font-bold">
											{detalheAtualChamado.ticket.titulo}
										</h2>
										<p class="text-base-content/70 mt-1 text-sm">
											{detalheAtualChamado.ticket.descricao}
										</p>
									</div>
									<span class={getStatusBadgeChamado(detalheAtualChamado.ticket.status)}>
										{getStatusLabel(detalheAtualChamado.ticket.status)}
									</span>
								</div>

								<div class="text-base-content/70 mt-4 flex flex-wrap gap-3 text-sm">
									<span class="badge badge-outline badge-sm">
										Tipo: {detalheAtualChamado.ticket.tipo.charAt(0).toUpperCase() +
											detalheAtualChamado.ticket.tipo.slice(1)}
									</span>
									<span class="badge badge-outline badge-sm">
										Prioridade: {detalheAtualChamado.ticket.prioridade}
									</span>
									<span class="badge badge-outline badge-sm">
										Última interação: {formatarData(detalheAtualChamado.ticket.ultimaInteracaoEm)}
									</span>
								</div>

								{#if statusAlertasChamado(detalheAtualChamado.ticket).length > 0}
									<div class="mt-4 space-y-2">
										{#each statusAlertasChamado(detalheAtualChamado.ticket) as alerta (alerta.label)}
											<div
												class={`alert ${
													alerta.tipo === 'error'
														? 'alert-error'
														: alerta.tipo === 'warning'
															? 'alert-warning'
															: 'alert-success'
												}`}
											>
												<span>{alerta.label}</span>
											</div>
										{/each}
									</div>
								{/if}

								<div class="mt-6 grid gap-6 lg:grid-cols-2">
									<div class="border-base-200 bg-base-100/80 rounded-2xl border p-4">
										<h3 class="text-base-content font-semibold">Timeline e SLA</h3>
										<p class="text-base-content/60 text-xs">
											Etapas monitoradas com indicadores de prazo.
										</p>
										<div class="mt-4">
											<TicketTimeline timeline={detalheAtualChamado.ticket.timeline ?? []} />
										</div>
									</div>

									<div class="border-base-200 bg-base-100/80 rounded-2xl border p-4">
										<h3 class="text-base-content font-semibold">Responsabilidade</h3>
										<p class="text-base-content/60 text-sm">
											{detalheAtualChamado.ticket.responsavelId
												? `Responsável: ${detalheAtualChamado.ticket.setorResponsavel ?? 'Equipe TI'}`
												: 'Aguardando atribuição'}
										</p>
										<div class="text-base-content/70 mt-4 space-y-2 text-sm">
											<p>
												Prazo resposta: {prazoRestante(detalheAtualChamado.ticket.prazoResposta) ??
													'--'}
											</p>
											<p>
												Prazo conclusão: {prazoRestante(
													detalheAtualChamado.ticket.prazoConclusao
												) ?? '--'}
											</p>
											<p>
												Prazo encerramento: {prazoRestante(
													detalheAtualChamado.ticket.prazoEncerramento
												) ?? '--'}
											</p>
										</div>
										<p class="text-base-content/50 mt-2 text-xs">
											{getStatusDescription(detalheAtualChamado.ticket.status)}
										</p>
									</div>
								</div>

								<div class="mt-8 grid gap-6 lg:grid-cols-2">
									<div class="border-base-200 bg-base-100/70 rounded-2xl border p-4">
										<h3 class="text-base-content font-semibold">Interações</h3>
										<div class="mt-4 max-h-[360px] space-y-3 overflow-y-auto pr-2">
											{#if detalheAtualChamado.interactions.length === 0}
												<p class="text-base-content/60 text-sm">
													Nenhuma interação registrada ainda.
												</p>
											{:else}
												{#each detalheAtualChamado.interactions as interacao (interacao._id)}
													<div class="border-base-200 bg-base-100/90 rounded-2xl border p-3">
														<div
															class="text-base-content/60 flex items-center justify-between text-xs"
														>
															<span
																>{interacao.origem === 'usuario' ? 'Você' : interacao.origem}</span
															>
															<span>{formatarData(interacao.criadoEm)}</span>
														</div>
														<p class="text-base-content mt-2 text-sm whitespace-pre-wrap">
															{interacao.conteudo}
														</p>
														{#if interacao.statusNovo && interacao.statusNovo !== interacao.statusAnterior}
															<span class="badge badge-xs badge-outline mt-2">
																Status: {getStatusLabel(interacao.statusNovo)}
															</span>
														{/if}
													</div>
												{/each}
											{/if}
										</div>
									</div>

									<div class="border-base-200 bg-base-100/70 rounded-2xl border p-4">
										<h3 class="text-base-content font-semibold">Enviar atualização</h3>
										<textarea
											class="textarea textarea-bordered mt-3 min-h-[140px] w-full"
											placeholder="Compartilhe informações adicionais, aprovações ou anexos enviados por outros canais."
											bind:value={mensagemChamado}
										></textarea>
										{#if erroMensagemChamado}
											<p class="text-error mt-2 text-sm">{erroMensagemChamado}</p>
										{/if}
										{#if sucessoMensagemChamado}
											<p class="text-success mt-2 text-sm">{sucessoMensagemChamado}</p>
										{/if}
										<button
											type="button"
											class="btn btn-primary mt-3 w-full"
											onclick={enviarMensagemChamado}
										>
											Enviar
										</button>
									</div>
								</div>
							{/if}
						</section>
					</div>
				</div>
			{:else if abaAtiva === 'minhas-ferias'}
				<!-- Minhas Férias -->
				<div class="space-y-6">
					<!-- Estatísticas -->
					<div class="grid grid-cols-1 gap-4 md:grid-cols-5">
						<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
							<div class="stat-figure text-primary">
								<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-primary">{statsMinhasFerias.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">Aguardando</div>
							<div class="stat-value text-warning">
								{statsMinhasFerias.aguardando}
							</div>
							<div class="stat-desc">Pendentes</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">
								{statsMinhasFerias.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">
								{statsMinhasFerias.reprovadas}
							</div>
							<div class="stat-desc">Indeferidas</div>
						</div>

						<div
							class="stat rounded-box border-2 border-purple-500/30 bg-linear-to-br from-purple-500/10 to-purple-600/20 shadow-lg"
						>
							<div class="stat-figure text-purple-600">
								<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="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
									/>
								</svg>
							</div>
							<div class="stat-title">Em Férias</div>
							<div class="stat-value text-purple-600">
								{statsMinhasFerias.emFerias}
							</div>
							<div class="stat-desc">Agora</div>
						</div>
					</div>

					<!-- Filtros e Botão Nova Solicitação -->
					<div class="card bg-base-100 shadow-lg">
						<div class="card-body">
							<div
								class="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center"
							>
								<h2 class="card-title text-lg">Filtros</h2>
								<button
									type="button"
									class="btn btn-primary gap-2"
									onclick={() => {
										if (funcionarioIdDisponivel) {
											mostrarWizard = true;
										}
									}}
									disabled={!funcionarioIdDisponivel}
									title={funcionarioIdDisponivel
										? 'Clique para agendar suas férias'
										: 'Estamos validando seus dados de funcionário...'}
								>
									<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
										/>
									</svg>
									Agendar Férias
								</button>
							</div>
							<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-1">
								<div class="form-control">
									<label class="label" for="status">
										<span class="label-text">Status</span>
									</label>
									<select
										id="status"
										class="select select-bordered"
										bind:value={filtroStatusFerias}
									>
										<option value="todos">Todos</option>
										<option value="aguardando_aprovacao">Aguardando Aprovação</option>
										<option value="aprovado">Aprovado</option>
										<option value="reprovado">Reprovado</option>
										<option value="data_ajustada_aprovada">Data Ajustada</option>
										<option value="EmFérias">Em Férias</option>
									</select>
								</div>
							</div>
						</div>
					</div>

					<!-- Lista de Solicitações -->
					<div
						class="card from-base-100 to-base-200 border-primary overflow-hidden border-t-4 bg-gradient-to-br shadow-2xl"
					>
						<div class="card-body p-6">
							<div class="mb-6 flex items-center justify-between">
								<div class="flex items-center gap-3">
									<div
										class="from-primary to-primary/80 ring-primary/20 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br shadow-lg ring-2"
									>
										<ListChecks class="h-6 w-6 text-white" strokeWidth={2.5} />
									</div>
									<div>
										<h2 class="text-base-content flex items-center gap-2 text-2xl font-bold">
											Minhas Solicitações
										</h2>
										<p class="text-base-content/60 mt-0.5 text-sm">
											Histórico de solicitações de férias
										</p>
									</div>
								</div>
								<div class="badge badge-lg badge-primary gap-2 px-4 py-3 shadow-md">
									<ListChecks class="h-4 w-4" strokeWidth={2} />
									{solicitacoesFiltradas.length}
								</div>
							</div>

							{#if solicitacoesFiltradas.length === 0}
								<div class="alert alert-info border-info/20 border shadow-lg">
									<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
									<span class="font-semibold"
										>Nenhuma solicitação encontrada com os filtros aplicados.</span
									>
								</div>
							{:else}
								<div class="border-base-300 overflow-x-auto rounded-lg border shadow-inner">
									<table class="table-zebra table">
										<thead>
											<tr class="from-base-200 to-base-300 bg-gradient-to-r">
												<th class="text-base-content font-bold">Ano</th>
												<th class="text-base-content font-bold">Período</th>
												<th class="text-base-content font-bold">Dias</th>
												<th class="text-base-content font-bold">Status</th>
												<th class="text-base-content font-bold">Solicitado em</th>
											</tr>
										</thead>
										<tbody>
											{#each solicitacoesFiltradas as periodo (periodo._id)}
												<tr
													class="hover:bg-base-200/50 border-base-300 border-b transition-all duration-200"
												>
													<td class="text-base-content/80 font-semibold">{periodo.anoReferencia}</td
													>
													<td class="text-base-content/70 font-medium">
														<div class="flex items-center gap-1.5">
															<CalendarDays
																class="text-base-content/50 h-3.5 w-3.5"
																strokeWidth={2}
															/>
															<span
																>{formatarDataString(periodo.dataInicio)} - {formatarDataString(
																	periodo.dataFim
																)}</span
															>
														</div>
													</td>
													<td>
														<div class="badge badge-primary badge-lg font-bold shadow-sm">
															{periodo.diasFerias} dias
														</div>
													</td>
													<td>
														<div
															class={`badge badge-sm font-semibold shadow-sm ${getStatusBadge(periodo.status)}`}
														>
															{getStatusTexto(periodo.status)}
														</div>
													</td>
													<td class="text-base-content/60 text-xs font-medium"
														>{new Date(periodo._creationTime).toLocaleDateString('pt-BR')}</td
													>
												</tr>
											{/each}
										</tbody>
									</table>
								</div>
							{/if}
						</div>
					</div>
				</div>
			{:else if abaAtiva === 'minhas-ausencias'}
				<!-- Minhas Ausências -->
				<div class="space-y-6">
					<!-- Estatísticas -->
					<div class="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">
								{statsMinhasAusencias.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">Aguardando</div>
							<div class="stat-value text-warning">
								{statsMinhasAusencias.aguardando}
							</div>
							<div class="stat-desc">Pendentes</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">
								{statsMinhasAusencias.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">
								{statsMinhasAusencias.reprovadas}
							</div>
							<div class="stat-desc">Indeferidas</div>
						</div>
					</div>

					<!-- Calendário de Ausências -->
					<div class="card bg-base-100 shadow-lg">
						<div class="card-body">
							<h2 class="card-title mb-4 text-lg">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									class="h-6 w-6 text-orange-500"
									fill="none"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
									/>
								</svg>
								Calendário de Ausências
							</h2>
							<p class="text-base-content/70 mb-4 text-sm">
								Visualize todas as suas solicitações de ausência no calendário
							</p>
							{#if ausenciasParaCalendario.length > 0}
								<CalendarioAusencias
									ausenciasExistentes={ausenciasParaCalendario}
									readonly={true}
									modoVisualizacao="month"
								/>
							{:else}
								<div class="alert alert-info">
									<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
										>Você ainda não possui solicitações de ausência. Clique em "Solicitar Ausência"
										para criar uma nova.</span
									>
								</div>
							{/if}
						</div>
					</div>

					<!-- Filtros e Botão Nova Solicitação -->
					<div class="card bg-base-100 shadow-lg">
						<div class="card-body">
							<div
								class="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center"
							>
								<h2 class="card-title text-lg">Filtros</h2>
								<button
									type="button"
									class="btn btn-warning gap-2"
									onclick={() => {
										const funcionarioId = currentUser?.data?.funcionarioId;
										console.log('🔍 [Perfil] Click no botão - funcionarioId:', funcionarioId);
										if (funcionarioId) {
											mostrarWizardAusencia = true;
										} else {
											alert(
												`Não foi possível identificar seu funcionário.\n\nVerifique no console (F12) o objeto usuario:\n${JSON.stringify(currentUser?.data, null, 2)}\n\nEntre em contato com o suporte se o problema persistir.`
											);
										}
									}}
									disabled={!funcionarioIdDisponivel}
									title={funcionarioIdDisponivel
										? 'Clique para solicitar uma ausência'
										: 'Funcionário não identificado. Entre em contato com o suporte.'}
								>
									<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
										/>
									</svg>
									Solicitar Ausência
								</button>
							</div>
							<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-1">
								<div class="form-control">
									<label class="label" for="status-ausencias">
										<span class="label-text">Status</span>
									</label>
									<select
										id="status-ausencias"
										class="select select-bordered"
										bind:value={filtroStatusAusencias}
									>
										<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>
						</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">
								Minhas 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>Período</th>
												<th>Dias</th>
												<th>Motivo</th>
												<th>Status</th>
												<th>Solicitado em</th>
											</tr>
										</thead>
										<tbody>
											{#each ausenciasFiltradas as ausencia (ausencia._id)}
												<tr>
													<td>
														{new Date(ausencia.dataInicio).toLocaleDateString('pt-BR')} até {new Date(
															ausencia.dataFim
														).toLocaleDateString('pt-BR')}
													</td>
													<td class="font-bold">
														{Math.ceil(
															(new Date(ausencia.dataFim).getTime() -
																new Date(ausencia.dataInicio).getTime()) /
																(1000 * 60 * 60 * 24)
														) + 1} 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
													>
												</tr>
											{/each}
										</tbody>
									</table>
								</div>
							{/if}
						</div>
					</div>
				</div>
			{:else if abaAtiva === 'aprovar-ferias'}
				<!-- Aprovar Férias (Gestores) PREMIUM -->
				<div
					class="card from-base-100 to-base-200 overflow-hidden border-t-4 border-green-500 bg-gradient-to-br shadow-2xl"
				>
					<div class="card-body p-6">
						<div class="mb-6 flex items-center justify-between">
							<div class="flex items-center gap-3">
								<div
									class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-green-500 to-green-600 shadow-lg ring-2 ring-green-500/20"
								>
									<Users class="h-6 w-6 text-white" strokeWidth={2.5} />
								</div>
								<div>
									<h2 class="text-base-content flex items-center gap-2 text-2xl font-bold">
										Solicitações da Equipe
									</h2>
									<p class="text-base-content/60 mt-0.5 text-sm">
										Gerencie as solicitações de férias da sua equipe
									</p>
								</div>
							</div>
							<div class="badge badge-lg badge-primary gap-2 px-4 py-3 shadow-md">
								<FileCheck class="h-4 w-4" strokeWidth={2} />
								{solicitacoesSubordinados.length}
							</div>
						</div>

						{#if solicitacoesSubordinados.length === 0}
							<div class="alert alert-success border-success/20 border shadow-lg">
								<CheckCircle2 class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
								<span class="font-semibold">Nenhuma solicitação pendente no momento.</span>
							</div>
						{:else}
							<div class="border-base-300 overflow-x-auto rounded-lg border shadow-inner">
								<table class="table-zebra table">
									<thead>
										<tr class="from-base-200 to-base-300 bg-gradient-to-r">
											<th class="text-base-content font-bold">Funcionário</th>
											<th class="text-base-content font-bold">Time</th>
											<th class="text-base-content font-bold">Ano</th>
											<th class="text-base-content font-bold">Período</th>
											<th class="text-base-content font-bold">Dias</th>
											<th class="text-base-content font-bold">Status</th>
											<th class="text-base-content text-center font-bold">Ações</th>
										</tr>
									</thead>
									<tbody>
										{#each solicitacoesSubordinados as periodo (periodo._id)}
											<tr
												class="hover:bg-base-200/50 border-base-300 border-b transition-all duration-200"
											>
												<td>
													<div class="text-base-content font-semibold">
														{periodo.funcionario?.nome}
													</div>
												</td>
												<td>
													{#if periodo.time}
														<div
															class="badge badge-sm font-semibold shadow-sm"
															style="background-color: {periodo.time.cor}20; border-color: {periodo
																.time.cor}; color: {periodo.time.cor}"
														>
															{periodo.time.nome}
														</div>
													{/if}
												</td>
												<td class="text-base-content/80 font-semibold">{periodo.anoReferencia}</td>
												<td class="text-base-content/70 font-medium">
													<div class="flex items-center gap-1.5">
														<CalendarDays
															class="text-base-content/50 h-3.5 w-3.5"
															strokeWidth={2}
														/>
														<span
															>{formatarDataString(periodo.dataInicio)} - {formatarDataString(
																periodo.dataFim
															)}</span
														>
													</div>
												</td>
												<td>
													<div class="badge badge-primary badge-lg font-bold shadow-sm">
														{periodo.diasFerias} dias
													</div>
												</td>
												<td>
													<div
														class={`badge badge-sm font-semibold shadow-sm ${getStatusBadge(periodo.status)}`}
													>
														{getStatusTexto(periodo.status)}
													</div>
												</td>
												<td>
													<div class="flex justify-center">
														{#if periodo.status === 'aguardando_aprovacao'}
															<button
																type="button"
																class="btn btn-primary btn-sm gap-2 shadow-md transition-all duration-200 hover:scale-105 hover:shadow-lg"
																onclick={() => selecionarPeriodo(periodo._id)}
															>
																<FileCheck class="h-4 w-4" strokeWidth={2} />
																Analisar
															</button>
														{:else}
															<button
																type="button"
																class="btn btn-ghost btn-sm hover:bg-base-300 gap-2 transition-all duration-200"
																onclick={() => selecionarPeriodo(periodo._id)}
															>
																<Eye class="h-4 w-4" strokeWidth={2} />
																Detalhes
															</button>
														{/if}
													</div>
												</td>
											</tr>
										{/each}
									</tbody>
								</table>
							</div>
						{/if}
					</div>
				</div>
			{:else if abaAtiva === 'aprovar-ausencias'}
				<!-- Aprovar Ausências (Gestores) -->
				<div
					class="card from-base-100 to-base-200 overflow-hidden border-t-4 border-orange-500 bg-gradient-to-br shadow-2xl"
				>
					<div class="card-body p-6">
						<div class="mb-6 flex items-center justify-between">
							<div class="flex items-center gap-3">
								<div
									class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 shadow-lg ring-2 ring-orange-500/20"
								>
									<Clock class="h-6 w-6 text-white" strokeWidth={2.5} />
								</div>
								<div>
									<h2 class="text-base-content flex items-center gap-2 text-2xl font-bold">
										Solicitações de Ausências da Equipe
									</h2>
									<p class="text-base-content/60 mt-0.5 text-sm">
										Gerencie as solicitações de ausências da sua equipe
									</p>
								</div>
							</div>
							<div class="badge badge-lg badge-warning gap-2 px-4 py-3 shadow-md">
								<FileCheck class="h-4 w-4" strokeWidth={2} />
								{ausenciasSubordinados.length}
							</div>
						</div>

						{#if ausenciasSubordinados.length === 0}
							<div class="alert alert-success border-success/20 border shadow-lg">
								<CheckCircle2 class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
								<span class="font-semibold">Nenhuma solicitação pendente no momento.</span>
							</div>
						{:else}
							<div class="border-base-300 overflow-x-auto rounded-lg border shadow-inner">
								<table class="table-zebra table">
									<thead>
										<tr class="from-base-200 to-base-300 bg-gradient-to-r">
											<th class="text-base-content font-bold">Funcionário</th>
											<th class="text-base-content font-bold">Time</th>
											<th class="text-base-content font-bold">Período</th>
											<th class="text-base-content font-bold">Dias</th>
											<th class="text-base-content font-bold">Status</th>
											<th class="text-base-content text-center font-bold">Ações</th>
										</tr>
									</thead>
									<tbody>
										{#each ausenciasSubordinados as ausencia (ausencia._id)}
											<tr
												class="hover:bg-base-200/50 border-base-300 border-b transition-all duration-200"
											>
												<td>
													<div class="text-base-content font-semibold">
														{ausencia.funcionario?.nome || 'N/A'}
													</div>
												</td>
												<td>
													{#if ausencia.time}
														<div
															class="badge badge-sm font-semibold shadow-sm"
															style="background-color: {ausencia.time
																.cor}20; border-color: {ausencia.time.cor}; color: {ausencia.time
																.cor}"
														>
															{ausencia.time.nome}
														</div>
													{/if}
												</td>
												<td class="text-base-content/70 font-medium">
													<div class="flex items-center gap-1.5">
														<CalendarDays
															class="text-base-content/50 h-3.5 w-3.5"
															strokeWidth={2}
														/>
														<span>
															{new Date(ausencia.dataInicio).toLocaleDateString('pt-BR')} até
															{new Date(ausencia.dataFim).toLocaleDateString('pt-BR')}
														</span>
													</div>
												</td>
												<td>
													<div class="badge badge-warning badge-lg font-bold shadow-sm">
														{Math.ceil(
															(new Date(ausencia.dataFim).getTime() -
																new Date(ausencia.dataInicio).getTime()) /
																(1000 * 60 * 60 * 24)
														) + 1} dias
													</div>
												</td>
												<td>
													<div
														class={`badge badge-sm font-semibold shadow-sm ${getStatusBadge(ausencia.status)}`}
													>
														{getStatusTexto(ausencia.status)}
													</div>
												</td>
												<td>
													<div class="flex justify-center">
														{#if ausencia.status === 'aguardando_aprovacao'}
															<button
																type="button"
																class="btn btn-warning btn-sm gap-2 shadow-md transition-all duration-200 hover:scale-105 hover:shadow-lg"
																onclick={() => (solicitacaoAusenciaAprovar = ausencia._id)}
															>
																<FileCheck class="h-4 w-4" strokeWidth={2} />
																Analisar
															</button>
														{:else}
															<button
																type="button"
																class="btn btn-ghost btn-sm hover:bg-base-300 gap-2 transition-all duration-200"
																onclick={() => (solicitacaoAusenciaAprovar = ausencia._id)}
															>
																<Eye class="h-4 w-4" strokeWidth={2} />
																Detalhes
															</button>
														{/if}
													</div>
												</td>
											</tr>
										{/each}
									</tbody>
								</table>
							</div>
						{/if}
					</div>
				</div>
			{:else if abaAtiva === 'aparencia'}
				<!-- Aparência -->
				<div class="space-y-6">
					<!-- Header -->
					<div
						class="card from-base-100 to-base-200 overflow-hidden border-t-4 border-purple-500 bg-gradient-to-br shadow-2xl"
					>
						<div class="card-body p-6">
							<div class="mb-6 flex items-center justify-between">
								<div class="flex items-center gap-3">
									<div
										class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 shadow-lg ring-2 ring-purple-500/20"
									>
										<Palette class="h-6 w-6 text-white" strokeWidth={2.5} />
									</div>
									<div>
										<h2 class="text-base-content flex items-center gap-2 text-2xl font-bold">
											Personalizar Aparência
										</h2>
										<p class="text-base-content/60 mt-0.5 text-sm">
											Escolha um tema para personalizar a interface do SGSE
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Mensagens de Sucesso/Erro -->
					{#if sucessoSalvarTema}
						<div class="alert alert-success shadow-lg">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="h-6 w-6 shrink-0 stroke-current"
								fill="none"
								viewBox="0 0 24 24"
							>
								<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>
							<span>{sucessoSalvarTema}</span>
						</div>
					{/if}

					{#if erroSalvarTema}
						<div class="alert alert-error shadow-lg">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="h-6 w-6 shrink-0 stroke-current"
								fill="none"
								viewBox="0 0 24 24"
							>
								<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>
							<span>{erroSalvarTema}</span>
						</div>
					{/if}

					<!-- Grid de Temas -->
					<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
						{#each temasDisponiveis as tema (tema.id)}
							<button
								type="button"
								class={`card from-base-100 to-base-200 hover:shadow-3xl overflow-hidden border-2 bg-gradient-to-br shadow-xl transition-all duration-300 hover:scale-105 ${
									temaSelecionado === tema.id
										? 'border-primary ring-4 ring-primary/20 scale-105'
										: 'border-base-300 hover:border-primary/50'
								}`}
								onclick={() => selecionarTema(tema.id)}
							>
								<div class="card-body p-6">
									<!-- Preview do Tema -->
									<div
										class="mb-4 h-24 w-full rounded-lg shadow-lg"
										style="background: linear-gradient(135deg, {tema.corPrimaria} 0%, {tema.corSecundaria} 100%);"
									>
										<div class="flex h-full items-center justify-center">
											<div
												class="h-12 w-12 rounded-full bg-white/20 backdrop-blur-sm"
											></div>
										</div>
									</div>

									<!-- Informações do Tema -->
									<div class="text-center">
										<h3 class="text-base-content mb-1 text-lg font-bold">
											{tema.nome}
										</h3>
										<p class="text-base-content/60 text-sm">{tema.descricao}</p>
									</div>

									<!-- Indicador de Seleção -->
									{#if temaSelecionado === tema.id}
										<div class="mt-4 flex items-center justify-center gap-2">
											<CheckCircle class="text-primary h-5 w-5" strokeWidth={2} />
											<span class="text-primary text-sm font-semibold">Tema Ativo</span>
										</div>
									{/if}
								</div>
							</button>
						{/each}
					</div>

					<!-- Botão Salvar -->
					<div class="flex justify-end">
						<button
							type="button"
							class="btn btn-primary btn-lg gap-2 shadow-lg"
							onclick={salvarTema}
							disabled={salvandoTema || !temaSelecionado}
						>
							{#if salvandoTema}
								<span class="loading loading-spinner loading-sm"></span>
								Salvando...
							{:else}
								<CheckCircle class="h-5 w-5" strokeWidth={2} />
								Salvar Tema
							{/if}
						</button>
					</div>

					<!-- Informação Adicional -->
					<div class="alert alert-info shadow-lg">
						<Info class="h-6 w-6 shrink-0" strokeWidth={2} />
						<div>
							<h3 class="font-bold">Como funciona?</h3>
							<p class="text-sm">
								Clique em um tema para visualizar a prévia. O tema será aplicado
								imediatamente, mas você precisa clicar em "Salvar Tema" para que a
								preferência seja mantida em acessos futuros.
							</p>
						</div>
					</div>
				</div>
			{/if}
		</div>

		<!-- Modal de Aprovação de Férias -->
		{#if periodoSelecionado && currentUser.data}
			{#await client.query( api.ferias.obterDetalhes, { feriasId: periodoSelecionado } ) then detalhes}
				{#if detalhes}
					<dialog class="modal modal-open">
						<div class="modal-box max-w-4xl">
							<AprovarFerias
								periodo={detalhes}
								gestorId={currentUser.data._id}
								onSucesso={recarregar}
								onCancelar={() => (periodoSelecionado = null)}
							/>
						</div>
						<form method="dialog" class="modal-backdrop">
							<button
								type="button"
								onclick={() => (periodoSelecionado = null)}
								aria-label="Fechar modal">Fechar</button
							>
						</form>
					</dialog>
				{/if}
			{/await}
		{/if}

		<!-- Modal de Upload de Foto / Escolher Avatar -->
		{#if mostrarModalFoto}
			<dialog class="modal modal-open">
				<div class="modal-box max-h-[90vh] max-w-4xl overflow-y-auto">
					<h3
						class="mb-8 bg-linear-to-r from-purple-600 to-blue-600 bg-clip-text text-center text-3xl font-black text-transparent"
					>
						Alterar Foto de Perfil
					</h3>

					<!-- Preview da foto atual -->
					<div class="mb-8 flex justify-center">
						<div class="avatar">
							<div
								class="ring-primary ring-offset-base-100 bg-base-200 flex h-32 w-32 items-center justify-center overflow-hidden rounded-full shadow-2xl ring-4 ring-offset-4"
							>
								{#if currentUser.data?.fotoPerfilUrl}
									<img
										src={currentUser.data.fotoPerfilUrl}
										alt="Foto atual"
										class="h-full w-full object-cover"
									/>
								{:else}
									<User class="text-base-content/50 h-16 w-16" />
								{/if}
							</div>
						</div>
					</div>

					<!-- Tabs: Avatar ou Upload -->
					<div
						role="tablist"
						class="tabs tabs-boxed from-base-200 to-base-300 mb-8 bg-linear-to-r p-2 shadow-xl"
					>
						<button
							type="button"
							role="tab"
							class={`tab tab-lg font-semibold transition-all ${modoFoto === 'avatar' ? 'tab-active bg-linear-to-r from-purple-600 to-blue-600 text-white' : ''}`}
							onclick={() => (modoFoto = 'avatar')}
							disabled={uploadandoFoto}
						>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="mr-2 h-5 w-5"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
								/>
							</svg>
							Escolher Avatar
						</button>
						<button
							type="button"
							role="tab"
							class={`tab tab-lg font-semibold transition-all ${modoFoto === 'upload' ? 'tab-active bg-linear-to-r from-purple-600 to-blue-600 text-white' : ''}`}
							onclick={() => (modoFoto = 'upload')}
							disabled={uploadandoFoto}
						>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="mr-2 h-5 w-5"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
								/>
							</svg>
							Enviar Foto
						</button>
					</div>

					<!-- Conteúdo das Tabs -->
					{#if modoFoto === 'avatar'}
						<!-- Galeria de Avatares -->
						<div class="mb-4">
							<p class="text-base-content/70 mb-6 text-center text-lg">
								Escolha um dos <strong class="text-primary">avatares profissionais</strong> para seu
								perfil
							</p>

							<div
								class="bg-base-200 grid max-h-[500px] grid-cols-3 gap-4 overflow-y-auto rounded-2xl p-6 shadow-inner md:grid-cols-4 lg:grid-cols-5"
							>
								{#each defaultAvatars as avatarPath, i (avatarPath)}
									<button
										type="button"
										class="hover:ring-primary/50 hover:bg-base-100 flex cursor-pointer flex-col items-center rounded-xl p-2 transition-all hover:scale-110 hover:ring-2"
										onclick={() => handleEscolherAvatarPadrao(avatarPath)}
										disabled={uploadandoFoto}
										aria-label="Selecionar avatar {i + 1}"
									>
										<div class="avatar">
											<div class="h-20 w-20 rounded-full shadow-lg">
												<img src={avatarPath} alt="Avatar {i + 1}" loading="lazy" />
											</div>
										</div>
									</button>
								{/each}
							</div>

							<div class="alert alert-info mt-6 shadow-lg">
								<Info class="h-6 w-6 shrink-0" />
								<span>
									<strong>Dica:</strong> Clique em um avatar para defini-lo como sua foto de perfil.
								</span>
							</div>
						</div>
					{:else}
						<!-- Upload de nova foto -->
						<div class="form-control">
							<label class="label" for="foto-upload">
								<span class="label-text text-lg font-bold">Selecionar nova foto</span>
							</label>
							<input
								id="foto-upload"
								type="file"
								class="file-input file-input-bordered file-input-lg w-full shadow-lg"
								accept="image/*"
								onchange={handleUploadFoto}
								disabled={uploadandoFoto}
							/>
							<div class="label">
								<span class="label-text-alt text-base-content/70"
									>Formatos aceitos: JPG, PNG, GIF. Tamanho máximo: 5MB</span
								>
							</div>
						</div>
					{/if}

					{#if erroUpload}
						<div class="alert alert-error mt-6 shadow-lg">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="h-6 w-6 shrink-0 stroke-current"
								fill="none"
								viewBox="0 0 24 24"
							>
								<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>
							<span class="font-semibold">{erroUpload}</span>
						</div>
					{/if}

					{#if uploadandoFoto && modoFoto === 'upload'}
						<div class="mt-6 flex items-center justify-center gap-3">
							<span class="loading loading-spinner loading-lg text-primary"></span>
							<span class="text-lg font-semibold">Enviando foto...</span>
						</div>
					{/if}

					<div class="modal-action mt-8">
						<button
							type="button"
							class="btn btn-lg"
							onclick={() => (mostrarModalFoto = false)}
							disabled={uploadandoFoto}
						>
							Cancelar
						</button>
					</div>
				</div>
				<form method="dialog" class="modal-backdrop">
					<button
						type="button"
						onclick={() => (mostrarModalFoto = false)}
						aria-label="Fechar modal"
						disabled={uploadandoFoto}>Fechar</button
					>
				</form>
			</dialog>
		{/if}

		{#if abaAtiva === 'meu-ponto'}
			<!-- Meu Ponto -->
			<div
				class="card from-base-100 to-base-200 overflow-hidden border-t-4 border-blue-500 bg-gradient-to-br shadow-2xl"
			>
				<div class="card-body p-6">
					<div class="mb-6 flex items-center justify-between">
						<div class="flex items-center gap-3">
							<div
								class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg ring-2 ring-blue-500/20"
							>
								<Fingerprint class="h-6 w-6 text-white" strokeWidth={2.5} />
							</div>
							<div>
								<h2 class="text-base-content flex items-center gap-2 text-2xl font-bold">
									Meu Ponto
								</h2>
								<p class="text-base-content/60 mt-0.5 text-sm">
									Registre sua entrada, saída e intervalos de trabalho
								</p>
							</div>
						</div>
					</div>
					<RegistroPonto />
				</div>
			</div>
		{/if}
	</main>
</ProtectedRoute>

<!-- Modal Wizard Solicitação de Férias -->
{#if mostrarWizard && funcionarioIdDisponivel}
	<dialog class="modal modal-open">
		<div class="modal-box max-h-[90vh] max-w-4xl overflow-hidden">
			<h3 class="mb-6 text-center text-2xl font-bold">Nova Solicitação de Férias</h3>
			<div class="max-h-[80vh] overflow-y-auto">
				<WizardSolicitacaoFerias
					funcionarioId={funcionarioIdDisponivel}
					onSucesso={() => {
						mostrarWizard = false;
					}}
					onCancelar={() => (mostrarWizard = false)}
				/>
			</div>
		</div>
		<div
			class="modal-backdrop"
			role="button"
			tabindex="0"
			onclick={() => (mostrarWizard = false)}
			onkeydown={(event) => {
				if (event.key === 'Enter' || event.key === ' ') {
					event.preventDefault();
					mostrarWizard = false;
				}
			}}
		></div>
	</dialog>
{/if}

<!-- Modal Wizard Solicitação de Ausência -->
{#if mostrarWizardAusencia && funcionarioIdDisponivel}
	<dialog
		class="modal modal-open"
		onclick={(e) => e.target === e.currentTarget && (mostrarWizardAusencia = false)}
	>
		<div
			class="modal-box flex max-h-[90vh] max-w-4xl flex-col p-0"
			role="presentation"
			tabindex="-1"
			onclick={(e) => e.stopPropagation()}
			onkeydown={(e) => {
				if (e.key === 'Escape') {
					mostrarWizardAusencia = false;
				}
			}}
		>
			<!-- Header -->
			<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
				<h2 id="modal-title" class="flex items-center gap-2 text-xl font-bold">
					<Calendar class="text-primary h-5 w-5" />
					Nova Solicitação de Ausência
				</h2>
				<button
					type="button"
					class="btn btn-sm btn-circle"
					onclick={() => (mostrarWizardAusencia = false)}
					aria-label="Fechar"
				>
					<X class="h-5 w-5" />
				</button>
			</div>

			<!-- Content -->
			<div class="flex-1 overflow-y-auto p-6">
				<WizardSolicitacaoAusencia
					funcionarioId={funcionarioIdDisponivel}
					onSucesso={async () => {
						mostrarWizardAusencia = false;
						// As queries do Convex são reativas e devem atualizar automaticamente
						// Mas garantimos que o componente será re-renderizado
						// Forçar recarregamento das queries mudando temporariamente o filtro
						const filtroAnterior = filtroStatusAusencias;
						if (filtroAnterior !== 'todos') {
							filtroStatusAusencias = 'todos';
							await new Promise((resolve) => setTimeout(resolve, 200));
						}
						filtroStatusAusencias = filtroAnterior;
					}}
					onCancelar={() => (mostrarWizardAusencia = false)}
				/>
			</div>
		</div>

		<form method="dialog" class="modal-backdrop">
			<button type="button" onclick={() => (mostrarWizardAusencia = false)}>fechar</button>
		</form>
	</dialog>
{/if}

<!-- Modal de Aprovação de Ausências -->
{#if solicitacaoAusenciaAprovar && currentUser.data}
	{#await client.query( api.ausencias.obterDetalhes, { solicitacaoId: solicitacaoAusenciaAprovar } ) then detalhes}
		{#if detalhes}
			<dialog class="modal modal-open">
				<div class="modal-box max-w-4xl">
					<AprovarAusencias
						solicitacao={detalhes}
						gestorId={currentUser.data._id}
						onSucesso={() => {
							solicitacaoAusenciaAprovar = null;
						}}
						onCancelar={() => (solicitacaoAusenciaAprovar = null)}
					/>
				</div>
				<form method="dialog" class="modal-backdrop">
					<button
						type="button"
						onclick={() => (solicitacaoAusenciaAprovar = null)}
						aria-label="Fechar modal">Fechar</button
					>
				</form>
			</dialog>
		{/if}
	{/await}
{/if}

<style>
	@keyframes gradient-shift {
		0%,
		100% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
	}

	@keyframes float {
		0%,
		100% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(-10px);
		}
	}

	.animate-gradient {
		background-size: 200% 200%;
		animation: gradient-shift 15s ease infinite;
	}

	.animate-float {
		animation: float 6s ease-in-out infinite;
	}
</style>
