<script lang="ts">
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import type { FunctionReference } from 'convex/server';
	import { format } from 'date-fns';
	import { ptBR } from 'date-fns/locale';
	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
	import {
		Bell,
		CheckCircle,
		XCircle,
		Info,
		Mail,
		Send,
		MessageSquare,
		Calendar,
		Clock,
		X,
		User,
		FileText,
		Trash2,
		Edit,
		MoreVertical,
		Plus,
		AlertTriangle,
		Check
	} from 'lucide-svelte';

	type StatusAgendamento = 'agendado' | 'enviado' | 'cancelado';

	interface AgendamentoEmail {
		_id: Id<'notificacoesEmail'>;
		_creationTime: number;
		destinatario: string;
		destinatarioId: Id<'usuarios'> | undefined;
		assunto: string;
		corpo: string;
		templateId: Id<'templatesMensagens'> | undefined;
		status: 'pendente' | 'enviando' | 'enviado' | 'falha';
		agendadaPara: number | undefined;
		enviadoPor: Id<'usuarios'>;
		criadoEm: number;
		enviadoEm: number | undefined;
		erroDetalhes?: string;
		destinatarioInfo: Doc<'usuarios'> | null;
		templateInfo: Doc<'templatesMensagens'> | null;
	}

	interface AgendamentoChat {
		_id: Id<'mensagens'>;
		_creationTime: number;
		conversaId: Id<'conversas'>;
		remetenteId: Id<'usuarios'>;
		conteudo: string;
		agendadaPara: number | undefined;
		enviadaEm: number;
		conversaInfo: Doc<'conversas'> | null;
		destinatarioInfo: Doc<'usuarios'> | null;
	}

	type Agendamento =
		| { tipo: 'email'; dados: AgendamentoEmail }
		| { tipo: 'chat'; dados: AgendamentoChat };

	const client = useConvexClient();
	const currentUser = useQuery(api.auth.getCurrentUser as FunctionReference<'query'>);

	// Queries
	const templatesQuery = useQuery(api.templatesMensagens.listarTemplates, {});
	const usuariosQuery = useQuery(api.usuarios.listar, {});

	// Mapa de emailIds para rastrear status
	let emailIdsRastreados = $state<Set<string>>(new Set());

	// Query para buscar status dos emails (só executa quando há IDs)
	const emailIdsArray = $derived(
		Array.from(emailIdsRastreados).map((id) => id as Id<'notificacoesEmail'>)
	);
	// Usar $derived para calcular argumentos da query condicionalmente
	const emailsStatusArgs = $derived(
		emailIdsArray.length === 0 ? 'skip' : { emailIds: emailIdsArray }
	);
	const emailsStatusQuery = useQuery(api.email.buscarEmailsPorIds, emailsStatusArgs);

	// Queries para agendamentos
	const agendamentosEmailQuery = useQuery(api.email.listarAgendamentosEmail, {});
	const agendamentosChatQuery = useQuery(api.chat.listarAgendamentosChat, {});

	// Filtro de agendamentos
	type FiltroAgendamento = 'todos' | 'agendados' | 'enviados';
	let filtroAgendamento = $state<FiltroAgendamento>('todos');

	// Extrair dados das queries de forma robusta
	const templates = $derived.by(() => {
		if (templatesQuery === undefined || templatesQuery === null) {
			return [];
		}
		if ('data' in templatesQuery && templatesQuery.data !== undefined) {
			return Array.isArray(templatesQuery.data) ? templatesQuery.data : [];
		}
		if (Array.isArray(templatesQuery)) {
			return templatesQuery;
		}
		return [];
	});

	const usuarios = $derived.by(() => {
		if (usuariosQuery === undefined || usuariosQuery === null) {
			return [];
		}
		if ('data' in usuariosQuery && usuariosQuery.data !== undefined) {
			return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
		}
		if (Array.isArray(usuariosQuery)) {
			return usuariosQuery;
		}
		return [];
	});

	const totalUsuarios = $derived(usuarios.length);
	const totalTemplates = $derived(templates.length);

	function templateDisponivelParaCanal(
		template: Doc<'templatesMensagens'>,
		canalAtual: 'chat' | 'email' | 'ambos'
	): boolean {
		const categoria = template.categoria as 'email' | 'chat' | 'ambos' | undefined;

		// Se não tiver categoria definida, considerar disponível para qualquer canal
		if (!categoria) {
			return true;
		}

		if (canalAtual === 'ambos') {
			// No modo "ambos", aceitar templates marcados para qualquer canal ou ambos
			return categoria === 'chat' || categoria === 'email' || categoria === 'ambos';
		}

		// Para canal específico, aceitar templates daquele canal ou "ambos"
		if (categoria === 'ambos') {
			return true;
		}

		return categoria === canalAtual;
	}

	const templatesParaCanal = $derived.by(() =>
		templates.filter((t) => templateDisponivelParaCanal(t as Doc<'templatesMensagens'>, canal))
	);

	// Estados de carregamento e erro
	const carregandoTemplates = $derived(templatesQuery === undefined || templatesQuery === null);
	const carregandoUsuarios = $derived(usuariosQuery === undefined || usuariosQuery === null);

	// Verificar erros de forma mais robusta (código mantido mas variáveis não utilizadas removidas para lint)
	/* const erroTemplates = $derived.by(() => {
		if (templatesQuery === undefined || templatesQuery === null) return false;
		// Verificar se é um objeto com propriedade error
		if (typeof templatesQuery === 'object' && 'error' in templatesQuery) {
			return templatesQuery.error !== undefined && templatesQuery.error !== null;
		}
		return false;
	});

	const erroUsuarios = $derived.by(() => {
		if (usuariosQuery === undefined || usuariosQuery === null) return false;
		if (typeof usuariosQuery === 'object' && 'error' in usuariosQuery) {
			return usuariosQuery.error !== undefined && usuariosQuery.error !== null;
		}
		return false;
	}); */

	// Log para debug (remover depois se necessário)
	$effect(() => {
		if (templatesQuery !== undefined && templatesQuery !== null) {
			console.log('Templates Query:', templatesQuery);
			console.log('Templates Extraídos:', templates);
		}
	});

	let destinatarioId = $state('');
	let enviarParaTodos = $state(false);
	let canal = $state<'chat' | 'email' | 'ambos'>('chat');
	let templateId = $state('');
	let mensagemPersonalizada = $state('');
	let usarTemplate = $state(true);
	let processando = $state(false);
	let criandoTemplates = $state(false);
	let progressoEnvio = $state({ total: 0, enviados: 0, falhas: 0 });

	// Aba ativa
	let abaAtiva = $state<'enviar' | 'templates' | 'agendamentos'>('enviar');

	// Estrutura de dados para logs de envio
	type StatusLog = 'sucesso' | 'erro' | 'fila' | 'info' | 'enviando';
	type TipoLog = 'chat' | 'email';
	type LogEnvio = {
		timestamp: number;
		tipo: TipoLog;
		destinatario: string;
		status: StatusLog;
		mensagem: string;
		emailId?: string; // Para emails, guardar o ID para rastrear status
	};

	let logsEnvio = $state<LogEnvio[]>([]);
	let terminalScrollRef: HTMLDivElement | null = $state(null);

	// Estados para agendamento
	let agendarEnvio = $state(false);
	let dataAgendamento = $state('');
	let horaAgendamento = $state('');

	// Calcular data/hora mínimas
	const now = new Date();
	const minDate = format(now, 'yyyy-MM-dd');

	// Hora mínima recalculada baseada na data selecionada
	const horaMinima = $derived.by(() => {
		if (!dataAgendamento) return format(now, 'HH:mm');
		const hoje = format(now, 'yyyy-MM-dd');
		if (dataAgendamento === hoje) {
			return format(now, 'HH:mm');
		}
		return undefined; // Sem restrição se for data futura
	});

	function getPreviewAgendamento(): string {
		if (!agendarEnvio || !dataAgendamento || !horaAgendamento) return '';
		try {
			const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
			return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
		} catch {
			return '';
		}
	}

	// Estados para modal de novo template
	let modalNovoTemplateAberto = $state(false);
	let codigoTemplate = $state('');
	let nomeTemplate = $state('');
	let tituloTemplate = $state('');
	let corpoTemplate = $state('');
	let variaveisTemplate = $state('');
	let criandoNovoTemplate = $state(false);

	// Estado para mensagens de feedback
	let mensagem = $state<{
		tipo: 'success' | 'error' | 'info';
		texto: string;
	} | null>(null);

	const templateSelecionado = $derived(templates.find((t) => t._id === templateId));

	// Função para renderizar template com variáveis (similar à função do backend)
	function renderizarTemplate(template: string, variaveis: Record<string, string>): string {
		let resultado = template;

		for (const [chave, valor] of Object.entries(variaveis)) {
			const placeholder = `{{${chave}}}`;
			resultado = resultado.replace(new RegExp(placeholder, 'g'), valor);
		}

		return resultado;
	}

	// Versão específica para CHAT: garante texto puro (sem HTML)
	function renderizarTemplateChatLocal(
		template: string,
		variaveis: Record<string, string>
	): string {
		const textoComVariaveis = renderizarTemplate(template, variaveis);
		// Remove todas as tags HTML (incluindo quebras de linha HTML)
		let textoPuro = textoComVariaveis.replace(/<[^>]*>/g, '');
		// Converte entidades HTML comuns para texto normal
		textoPuro = textoPuro
			.replace(/&nbsp;/g, ' ')
			.replace(/&amp;/g, '&')
			.replace(/&lt;/g, '<')
			.replace(/&gt;/g, '>')
			.replace(/&quot;/g, '"')
			.replace(/&#39;/g, "'")
			.replace(/&apos;/g, "'")
			.replace(/&[a-zA-Z0-9#]+;/g, ''); // Remove outras entidades HTML
		// Normaliza espaços múltiplos (mas preserva quebras de linha reais)
		textoPuro = textoPuro.replace(/[ \t]+/g, ' ').replace(/[ \t]*\n[ \t]*/g, '\n');
		return textoPuro.trim();
	}

	// Função para mostrar mensagens
	function mostrarMensagem(tipo: 'success' | 'error' | 'info', texto: string) {
		mensagem = { tipo, texto };
		setTimeout(() => {
			mensagem = null;
		}, 5000);
	}

	// Função para adicionar log ao terminal
	function adicionarLog(
		tipo: TipoLog,
		destinatario: string,
		status: StatusLog,
		mensagem: string,
		emailId?: string
	) {
		logsEnvio = [
			...logsEnvio,
			{
				timestamp: Date.now(),
				tipo,
				destinatario,
				status,
				mensagem,
				emailId
			}
		];

		// Adicionar emailId ao rastreamento se fornecido
		if (emailId) {
			emailIdsRastreados = new Set([...emailIdsRastreados, emailId]);
		}

		// Auto-scroll para o final
		setTimeout(() => {
			if (terminalScrollRef) {
				terminalScrollRef.scrollTop = terminalScrollRef.scrollHeight;
			}
		}, 10);
	}

	// Atualizar logs quando status dos emails mudar
	$effect(() => {
		if (!emailsStatusQuery || emailsStatusQuery === undefined) return;

		// Extrair dados da query
		const emails = Array.isArray(emailsStatusQuery)
			? emailsStatusQuery
			: 'data' in emailsStatusQuery && Array.isArray(emailsStatusQuery.data)
				? emailsStatusQuery.data
				: [];

		if (emails.length === 0) return;

		for (const email of emails) {
			if (!email) continue;

			// Encontrar logs relacionados a este email
			const logsRelacionados = logsEnvio.filter((log) => log.emailId === email._id);

			for (const log of logsRelacionados) {
				// Verificar se o status mudou
				const novoStatus: StatusLog =
					email.status === 'enviado'
						? 'sucesso'
						: email.status === 'falha'
							? 'erro'
							: email.status === 'enviando'
								? 'enviando'
								: email.status === 'pendente'
									? 'fila'
									: 'info';

				// Se o status mudou, atualizar o log
				if (log.status !== novoStatus) {
					const indice = logsEnvio.findIndex((l) => l === log);
					if (indice !== -1) {
						const novaMensagem =
							email.status === 'enviado'
								? 'Email enviado com sucesso'
								: email.status === 'falha'
									? `Falha ao enviar: ${email.erroDetalhes || 'Erro desconhecido'}`
									: email.status === 'enviando'
										? 'Enviando email...'
										: email.status === 'pendente'
											? 'Email em fila de envio'
											: log.mensagem;

						logsEnvio = logsEnvio.map((l, i) =>
							i === indice ? { ...l, status: novoStatus, mensagem: novaMensagem } : l
						);
					}
				}
			}
		}
	});

	// Função para limpar logs
	function limparLogs() {
		logsEnvio = [];
		emailIdsRastreados = new Set();
	}

	// Extrair e processar agendamentos
	const agendamentosEmail = $derived.by(() => {
		if (!agendamentosEmailQuery || agendamentosEmailQuery === undefined) return [];
		const dados = Array.isArray(agendamentosEmailQuery)
			? agendamentosEmailQuery
			: 'data' in agendamentosEmailQuery && Array.isArray(agendamentosEmailQuery.data)
				? agendamentosEmailQuery.data
				: [];
		return dados as AgendamentoEmail[];
	});

	const agendamentosChat = $derived.by(() => {
		if (!agendamentosChatQuery || agendamentosChatQuery === undefined) return [];
		const dados = Array.isArray(agendamentosChatQuery)
			? agendamentosChatQuery
			: 'data' in agendamentosChatQuery && Array.isArray(agendamentosChatQuery.data)
				? agendamentosChatQuery.data
				: [];
		return dados as AgendamentoChat[];
	});

	// Combinar e processar agendamentos
	const todosAgendamentos = $derived.by(() => {
		const agendamentos: Agendamento[] = [];

		for (const email of agendamentosEmail) {
			if (email.agendadaPara) {
				agendamentos.push({
					tipo: 'email',
					dados: email
				});
			}
		}

		for (const chat of agendamentosChat) {
			if (chat.agendadaPara) {
				agendamentos.push({
					tipo: 'chat',
					dados: chat
				});
			}
		}

		// Ordenar: futuros primeiro (mais próximos primeiro), depois passados (mais recentes primeiro)
		return agendamentos.sort((a, b) => {
			const timestampA =
				a.tipo === 'email' ? (a.dados.agendadaPara ?? 0) : (a.dados.agendadaPara ?? 0);
			const timestampB =
				b.tipo === 'email' ? (b.dados.agendadaPara ?? 0) : (b.dados.agendadaPara ?? 0);
			const agora = Date.now();

			const aFuturo = timestampA > agora;
			const bFuturo = timestampB > agora;

			// Futuros primeiro
			if (aFuturo && !bFuturo) return -1;
			if (!aFuturo && bFuturo) return 1;

			// Dentro do mesmo grupo, ordenar por timestamp
			if (aFuturo) {
				// Futuros: mais próximos primeiro
				return timestampA - timestampB;
			} else {
				// Passados: mais recentes primeiro
				return timestampB - timestampA;
			}
		});
	});

	// Filtrar agendamentos
	const agendamentosFiltrados = $derived.by(() => {
		if (filtroAgendamento === 'todos') return todosAgendamentos;

		return todosAgendamentos.filter((ag) => {
			const status = obterStatusAgendamento(ag);
			if (filtroAgendamento === 'agendados') return status === 'agendado';
			if (filtroAgendamento === 'enviados') return status === 'enviado';
			return true;
		});
	});

	// Função para obter status do agendamento
	function obterStatusAgendamento(agendamento: Agendamento): StatusAgendamento {
		if (agendamento.tipo === 'email') {
			const email = agendamento.dados;
			if (email.status === 'enviado') return 'enviado';
			if (email.agendadaPara && email.agendadaPara <= Date.now()) return 'enviado';
			return 'agendado';
		} else {
			const chat = agendamento.dados;
			if (chat.agendadaPara && chat.agendadaPara <= Date.now()) return 'enviado';
			return 'agendado';
		}
	}

	// Função para cancelar agendamento
	async function cancelarAgendamento(agendamento: Agendamento) {
		if (!confirm('Tem certeza que deseja cancelar este agendamento?')) {
			return;
		}

		try {
			if (agendamento.tipo === 'email') {
				const resultado = await client.mutation(api.email.cancelarAgendamentoEmail, {
					emailId: agendamento.dados._id
				});
				if (resultado.sucesso) {
					mostrarMensagem('success', 'Agendamento de email cancelado com sucesso!');
				} else {
					mostrarMensagem('error', resultado.erro || 'Erro ao cancelar agendamento');
				}
			} else {
				const resultado = await client.mutation(api.chat.cancelarMensagemAgendada, {
					mensagemId: agendamento.dados._id
				});
				if (resultado.sucesso) {
					mostrarMensagem('success', 'Agendamento de chat cancelado com sucesso!');
				} else {
					mostrarMensagem('error', resultado.erro || 'Erro ao cancelar agendamento');
				}
			}
		} catch (error) {
			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
			mostrarMensagem('error', `Erro ao cancelar agendamento: ${erro}`);
		}
	}

	// Função para obter nome do destinatário
	function obterNomeDestinatario(agendamento: Agendamento): string {
		if (agendamento.tipo === 'email') {
			return (
				agendamento.dados.destinatarioInfo?.nome || agendamento.dados.destinatario || 'Usuário'
			);
		} else {
			return agendamento.dados.destinatarioInfo?.nome || 'Usuário';
		}
	}

	// Função para formatar data/hora do agendamento
	function formatarDataAgendamento(agendamento: Agendamento): string {
		const timestamp =
			agendamento.tipo === 'email'
				? agendamento.dados.agendadaPara
				: agendamento.dados.agendadaPara;

		if (!timestamp) return 'N/A';

		return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
			locale: ptBR
		});
	}

	// Função para formatar timestamp
	function formatarTimestamp(timestamp: number): string {
		return format(new Date(timestamp), 'HH:mm:ss', { locale: ptBR });
	}

	// Função para obter cor do status
	function obterCorStatus(status: StatusLog): string {
		switch (status) {
			case 'sucesso':
				return 'text-success';
			case 'erro':
				return 'text-error';
			case 'fila':
				return 'text-warning';
			case 'enviando':
				return 'text-info';
			case 'info':
				return 'text-info';
			default:
				return 'text-base-content';
		}
	}

	async function criarTemplatesPadrao() {
		if (criandoTemplates) return;

		criandoTemplates = true;
		try {
			const resultado = await client.mutation(api.templatesMensagens.criarTemplatesPadrao, {});
			if (resultado.sucesso) {
				mostrarMensagem(
					'success',
					'Templates padrão criados com sucesso! A página será recarregada.'
				);
				setTimeout(() => {
					window.location.reload();
				}, 2000);
			} else {
				mostrarMensagem('error', 'Erro ao criar templates padrão.');
			}
		} catch (error) {
			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
			console.error('Erro ao criar templates:', error);
			mostrarMensagem('error', 'Erro ao criar templates: ' + erro);
		} finally {
			criandoTemplates = false;
		}
	}

	function abrirModalNovoTemplate() {
		modalNovoTemplateAberto = true;
		// Limpar campos
		codigoTemplate = '';
		nomeTemplate = '';
		tituloTemplate = '';
		corpoTemplate = '';
		variaveisTemplate = '';
	}

	function fecharModalNovoTemplate() {
		modalNovoTemplateAberto = false;
	}

	async function salvarNovoTemplate() {
		if (!currentUser?.data) {
			mostrarMensagem('error', 'Você precisa estar autenticado para criar templates.');
			return;
		}

		// Validações
		if (!codigoTemplate.trim()) {
			mostrarMensagem('error', 'O código do template é obrigatório.');
			return;
		}
		if (!nomeTemplate.trim()) {
			mostrarMensagem('error', 'O nome do template é obrigatório.');
			return;
		}
		if (!tituloTemplate.trim()) {
			mostrarMensagem('error', 'O título do template é obrigatório.');
			return;
		}
		if (!corpoTemplate.trim()) {
			mostrarMensagem('error', 'O corpo do template é obrigatório.');
			return;
		}

		// Processar variáveis (separadas por vírgula ou espaço)
		const variaveis = variaveisTemplate
			.split(/[,;\s]+/)
			.map((v) => v.trim())
			.filter((v) => v.length > 0);

		criandoNovoTemplate = true;
		try {
			const resultado = await client.mutation(api.templatesMensagens.criarTemplate, {
				codigo: codigoTemplate.trim().toUpperCase().replace(/\s+/g, '_'),
				nome: nomeTemplate.trim(),
				titulo: tituloTemplate.trim(),
				corpo: corpoTemplate.trim(),
				variaveis: variaveis.length > 0 ? variaveis : undefined,
				criadoPorId: currentUser.data!._id as Id<'usuarios'>
			});

			if (resultado.sucesso) {
				mostrarMensagem('success', 'Template criado com sucesso!');
				fecharModalNovoTemplate();
				// Recarregar a página para atualizar a lista
				setTimeout(() => {
					window.location.reload();
				}, 1500);
			} else {
				mostrarMensagem(
					'error',
					'Erro ao criar template: ' + (resultado.erro || 'Erro desconhecido')
				);
			}
		} catch (error) {
			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
			console.error('Erro ao criar template:', error);
			mostrarMensagem('error', 'Erro ao criar template: ' + erro);
		} finally {
			criandoNovoTemplate = false;
		}
	}

	async function enviarNotificacao() {
		if (!currentUser?.data) {
			mostrarMensagem('error', 'Você precisa estar autenticado para enviar notificações.');
			return;
		}

		if (!enviarParaTodos && !destinatarioId) {
			mostrarMensagem('error', "Selecione um destinatário ou marque 'Enviar para todos'");
			return;
		}

		if (usarTemplate && !templateId) {
			mostrarMensagem('error', 'Selecione um template');
			return;
		}

		if (!usarTemplate && !mensagemPersonalizada.trim()) {
			mostrarMensagem('error', 'Digite uma mensagem');
			return;
		}

		// Validar agendamento se marcado
		let agendadaPara: number | undefined = undefined;
		if (agendarEnvio) {
			if (!dataAgendamento || !horaAgendamento) {
				mostrarMensagem('error', 'Preencha a data e hora para agendamento');
				return;
			}

			try {
				const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
				if (dataHora.getTime() <= Date.now()) {
					mostrarMensagem('error', 'A data e hora devem ser futuras');
					return;
				}
				agendadaPara = dataHora.getTime();
			} catch {
				mostrarMensagem('error', 'Data ou hora inválida');
				return;
			}
		}

		processando = true;
		progressoEnvio = { total: 0, enviados: 0, falhas: 0 };

		// Limpar logs anteriores quando iniciar novo envio
		logsEnvio = [];
		emailIdsRastreados = new Set();

		try {
			// Obter lista de destinatários
			const destinatarios: typeof usuarios = enviarParaTodos
				? usuarios
				: usuarios.filter((u) => u._id === destinatarioId);

			if (destinatarios.length === 0) {
				adicionarLog('email', 'Sistema', 'erro', 'Nenhum destinatário encontrado');
				mostrarMensagem('error', 'Nenhum destinatário encontrado');
				return;
			}

			progressoEnvio.total = destinatarios.length;

			// Log inicial
			const tipoMensagem = usarTemplate
				? `Template: ${templateSelecionado?.nome || ''}`
				: 'Mensagem personalizada';
			const destinatariosText = enviarParaTodos
				? `Todos os usuários (${destinatarios.length})`
				: destinatarios.map((d) => d.nome).join(', ');
			adicionarLog(
				'email',
				'Sistema',
				'info',
				`Iniciando envio de notificação via ${canal} para ${destinatariosText} - ${tipoMensagem}`
			);

			// Se for envio para um único usuário
			if (destinatarios.length === 1) {
				const destinatario = destinatarios[0];
				let resultadoChat = null;
				let resultadoEmail = null;

				// ENVIAR PARA CHAT
				if (canal === 'chat' || canal === 'ambos') {
					try {
						adicionarLog('chat', destinatario.nome, 'enviando', 'Criando/buscando conversa...');
						const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
							outroUsuarioId: destinatario._id as Id<'usuarios'>
						});

						if (conversaId) {
							// Para chat, sempre remover HTML dos templates
							const mensagem =
								usarTemplate && templateSelecionado
									? renderizarTemplateChatLocal(templateSelecionado.corpo, {
											nome: destinatario.nome,
											matricula: destinatario.matricula || ''
										})
									: mensagemPersonalizada;

							if (agendadaPara) {
								// Agendar mensagem
								adicionarLog('chat', destinatario.nome, 'info', 'Agendando mensagem...');
								resultadoChat = await client.mutation(api.chat.agendarMensagem, {
									conversaId: conversaId,
									conteudo: mensagem,
									agendadaPara: agendadaPara
								});
								const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
									locale: ptBR
								});
								adicionarLog(
									'chat',
									destinatario.nome,
									'sucesso',
									`Mensagem agendada para ${dataFormatada}`
								);
							} else {
								// Envio imediato
								adicionarLog('chat', destinatario.nome, 'enviando', 'Enviando mensagem...');
								resultadoChat = await client.mutation(api.chat.enviarMensagem, {
									conversaId: conversaId,
									conteudo: mensagem,
									tipo: 'texto',
									permitirNotificacaoParaSiMesmo: true
								});
								adicionarLog('chat', destinatario.nome, 'sucesso', 'Mensagem enviada com sucesso');
							}
						} else {
							adicionarLog('chat', destinatario.nome, 'erro', 'Falha ao criar/buscar conversa');
						}
					} catch (error) {
						const erro = error instanceof Error ? error.message : 'Erro desconhecido';
						console.error('Erro ao enviar chat:', error);
						adicionarLog('chat', destinatario.nome, 'erro', `Erro: ${erro}`);
					}
				}

				// ENVIAR PARA EMAIL
				if (canal === 'email' || canal === 'ambos') {
					if (destinatario.email) {
						try {
							adicionarLog(
								'email',
								destinatario.nome,
								'enviando',
								`Enfileirando email para ${destinatario.email}...`
							);
							if (usarTemplate && templateId) {
								const template = templateSelecionado;
								if (template) {
									const emailId = await client.action(api.email.enviarEmailComTemplate, {
										destinatario: destinatario.email,
										destinatarioId: destinatario._id as Id<'usuarios'>,
										templateCodigo: template.codigo,
										variaveis: {
											nome: destinatario.nome,
											matricula: destinatario.matricula || ''
										},
										enviadoPor: currentUser.data!._id as Id<'usuarios'>,
										agendadaPara: agendadaPara
									});
									if (emailId) {
										if (agendadaPara) {
											const dataFormatada = format(
												new Date(agendadaPara),
												"dd/MM/yyyy 'às' HH:mm",
												{ locale: ptBR }
											);
											adicionarLog(
												'email',
												destinatario.nome,
												'fila',
												`Email agendado para ${dataFormatada}`,
												emailId
											);
										} else {
											adicionarLog(
												'email',
												destinatario.nome,
												'fila',
												'Email enfileirado para envio',
												emailId
											);
										}
									} else {
										adicionarLog('email', destinatario.nome, 'erro', 'Falha ao enfileirar email');
									}
								} else {
									adicionarLog('email', destinatario.nome, 'erro', 'Template não encontrado');
								}
							} else {
								const emailId = await client.mutation(api.email.enfileirarEmail, {
									destinatario: destinatario.email,
									destinatarioId: destinatario._id as Id<'usuarios'>,
									assunto: 'Notificação do Sistema',
									corpo: mensagemPersonalizada,
									enviadoPor: currentUser.data!._id as Id<'usuarios'>,
									agendadaPara: agendadaPara
								});
								if (emailId) {
									resultadoEmail = { sucesso: true, emailId };
									if (agendadaPara) {
										const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
											locale: ptBR
										});
										adicionarLog(
											'email',
											destinatario.nome,
											'fila',
											`Email agendado para ${dataFormatada}`,
											emailId
										);
									} else {
										adicionarLog(
											'email',
											destinatario.nome,
											'fila',
											'Email enfileirado para envio',
											emailId
										);
									}
								} else {
									adicionarLog('email', destinatario.nome, 'erro', 'Falha ao enfileirar email');
								}
							}
						} catch (error) {
							const erro = error instanceof Error ? error.message : 'Erro desconhecido';
							console.error('Erro ao enviar email:', error);
							adicionarLog('email', destinatario.nome, 'erro', `Erro: ${erro}`);
						}
					} else {
						adicionarLog(
							'email',
							destinatario.nome,
							'erro',
							'Destinatário não possui email cadastrado'
						);
					}
				}

				// Feedback de sucesso
				let mensagemSucesso = agendadaPara
					? `Notificação agendada com sucesso!`
					: 'Notificação enviada com sucesso!';
				if (agendadaPara) {
					const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
						locale: ptBR
					});
					mensagemSucesso += ` Será enviada em: ${dataFormatada}`;
				} else {
					if (canal === 'ambos') {
						if (resultadoChat && resultadoEmail) {
							mensagemSucesso = 'Notificação enviada para Chat e Email!';
						} else if (resultadoChat) {
							mensagemSucesso = 'Notificação enviada para Chat. Email falhou.';
						} else if (resultadoEmail) {
							mensagemSucesso = 'Notificação enviada para Email. Chat falhou.';
						}
					} else if (canal === 'chat' && resultadoChat) {
						mensagemSucesso = 'Mensagem enviada no Chat!';
					} else if (canal === 'email' && resultadoEmail) {
						mensagemSucesso = 'Email enfileirado para envio!';
					}
				}

				mostrarMensagem('success', mensagemSucesso);
				progressoEnvio.enviados = 1;
			} else {
				// ENVIO EM MASSA
				let sucessosChat = 0;
				let sucessosEmail = 0;
				let falhasChat = 0;
				let falhasEmail = 0;

				adicionarLog(
					'email',
					'Sistema',
					'info',
					`Processando ${destinatarios.length} destinatários...`
				);

				for (const destinatario of destinatarios) {
					try {
						// ENVIAR PARA CHAT
						if (canal === 'chat' || canal === 'ambos') {
							try {
								adicionarLog('chat', destinatario.nome, 'enviando', 'Processando...');
								const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
									outroUsuarioId: destinatario._id as Id<'usuarios'>
								});

								if (conversaId) {
									// Renderizar template com variáveis do destinatário (chat sempre em TEXTO PURO)
									const mensagem =
										usarTemplate && templateSelecionado
											? renderizarTemplateChatLocal(templateSelecionado.corpo, {
													nome: destinatario.nome,
													matricula: destinatario.matricula || ''
												})
											: mensagemPersonalizada;

									if (agendadaPara) {
										await client.mutation(api.chat.agendarMensagem, {
											conversaId: conversaId,
											conteudo: mensagem,
											agendadaPara: agendadaPara
										});
										const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
											locale: ptBR
										});
										adicionarLog(
											'chat',
											destinatario.nome,
											'sucesso',
											`Agendado para ${dataFormatada}`
										);
									} else {
										await client.mutation(api.chat.enviarMensagem, {
											conversaId: conversaId,
											conteudo: mensagem,
											tipo: 'texto',
											permitirNotificacaoParaSiMesmo: true
										});
										adicionarLog('chat', destinatario.nome, 'sucesso', 'Enviado com sucesso');
									}
									sucessosChat++;
								} else {
									adicionarLog('chat', destinatario.nome, 'erro', 'Falha ao criar/buscar conversa');
									falhasChat++;
								}
							} catch (error) {
								const erro = error instanceof Error ? error.message : 'Erro desconhecido';
								console.error(`Erro ao enviar chat para ${destinatario.nome}:`, error);
								adicionarLog('chat', destinatario.nome, 'erro', `Erro: ${erro}`);
								falhasChat++;
							}
						}

						// ENVIAR PARA EMAIL
						if (canal === 'email' || canal === 'ambos') {
							if (destinatario.email) {
								try {
									adicionarLog(
										'email',
										destinatario.nome,
										'enviando',
										`Enfileirando email para ${destinatario.email}...`
									);
									if (usarTemplate && templateId) {
										const template = templateSelecionado;
										if (template) {
											const emailId = await client.action(api.email.enviarEmailComTemplate, {
												destinatario: destinatario.email,
												destinatarioId: destinatario._id as Id<'usuarios'>,
												templateCodigo: template.codigo,
												variaveis: {
													nome: destinatario.nome,
													matricula: destinatario.matricula || ''
												},
												enviadoPor: currentUser.data!._id as Id<'usuarios'>,
												agendadaPara: agendadaPara
											});
											if (emailId) {
												if (agendadaPara) {
													const dataFormatada = format(
														new Date(agendadaPara),
														"dd/MM/yyyy 'às' HH:mm",
														{ locale: ptBR }
													);
													adicionarLog(
														'email',
														destinatario.nome,
														'fila',
														`Agendado para ${dataFormatada}`,
														emailId
													);
												} else {
													adicionarLog(
														'email',
														destinatario.nome,
														'fila',
														'Enfileirado para envio',
														emailId
													);
												}
												sucessosEmail++;
											} else {
												adicionarLog(
													'email',
													destinatario.nome,
													'erro',
													'Falha ao enfileirar email'
												);
												falhasEmail++;
											}
										} else {
											adicionarLog('email', destinatario.nome, 'erro', 'Template não encontrado');
											falhasEmail++;
										}
									} else {
										const emailId = await client.mutation(api.email.enfileirarEmail, {
											destinatario: destinatario.email,
											destinatarioId: destinatario._id as Id<'usuarios'>,
											assunto: 'Notificação do Sistema',
											corpo: mensagemPersonalizada,
											enviadoPor: currentUser.data!._id as Id<'usuarios'>,
											agendadaPara: agendadaPara
										});
										if (emailId) {
											if (agendadaPara) {
												const dataFormatada = format(
													new Date(agendadaPara),
													"dd/MM/yyyy 'às' HH:mm",
													{ locale: ptBR }
												);
												adicionarLog(
													'email',
													destinatario.nome,
													'fila',
													`Agendado para ${dataFormatada}`,
													emailId
												);
											} else {
												adicionarLog(
													'email',
													destinatario.nome,
													'fila',
													'Enfileirado para envio',
													emailId
												);
											}
											sucessosEmail++;
										} else {
											adicionarLog('email', destinatario.nome, 'erro', 'Falha ao enfileirar email');
											falhasEmail++;
										}
									}
								} catch (error) {
									const erro = error instanceof Error ? error.message : 'Erro desconhecido';
									console.error(`Erro ao enviar email para ${destinatario.nome}:`, error);
									adicionarLog('email', destinatario.nome, 'erro', `Erro: ${erro}`);
									falhasEmail++;
								}
							} else {
								adicionarLog(
									'email',
									destinatario.nome,
									'erro',
									'Destinatário não possui email cadastrado'
								);
								falhasEmail++;
							}
						}

						progressoEnvio.enviados++;
					} catch (error) {
						console.error(`Erro geral ao enviar para ${destinatario.nome}:`, error);
						progressoEnvio.falhas++;
					}
				}

				// Feedback de envio em massa
				let mensagemMassa = agendadaPara
					? `Agendamento em massa concluído! `
					: `Envio em massa concluído! `;

				if (agendadaPara) {
					const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
						locale: ptBR
					});
					mensagemMassa += `Será enviado em: ${dataFormatada}. `;
				}

				if (canal === 'ambos') {
					mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasChat} falhas. `;
					mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasEmail} falhas.`;
				} else if (canal === 'chat') {
					mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasChat} falhas.`;
				} else if (canal === 'email') {
					mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasEmail} falhas.`;
				}

				// Adicionar log resumo
				adicionarLog('email', 'Sistema', 'info', mensagemMassa);
				mostrarMensagem('success', mensagemMassa);
			}

			// Limpar form
			destinatarioId = '';
			enviarParaTodos = false;
			templateId = '';
			mensagemPersonalizada = '';
			agendarEnvio = false;
			dataAgendamento = '';
			horaAgendamento = '';
		} catch (error) {
			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
			console.error('Erro ao enviar notificação:', error);
			adicionarLog('email', 'Sistema', 'erro', `Erro geral: ${erro}`);
			mostrarMensagem('error', 'Erro ao enviar notificação: ' + erro);
		} finally {
			processando = false;
			progressoEnvio = { total: 0, enviados: 0, falhas: 0 };
			adicionarLog('email', 'Sistema', 'info', 'Processo de envio finalizado');
		}
	}
</script>

<div class="container mx-auto max-w-7xl px-4 py-8">
	<div
		class="bg-base-100/80 border-base-200/60 space-y-6 rounded-2xl border p-6 shadow-xl backdrop-blur lg:p-8"
	>
		<!-- Header -->
		<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
			<div class="flex items-center gap-4">
				<div class="from-primary/15 via-info/10 to-secondary/10 rounded-2xl bg-gradient-to-br p-3">
					<Bell class="text-primary h-9 w-9" strokeWidth={2} />
				</div>
				<div>
					<h1 class="text-base-content text-3xl font-bold">Notificações e Mensagens</h1>
					<p class="text-base-content/60 mt-1 text-sm lg:text-base">
						Envie avisos importantes por <span class="font-semibold">chat</span> e
						<span class="font-semibold">email HTML padronizado</span> para os usuários do SGSE.
					</p>
				</div>
			</div>
			<div class="grid grid-cols-2 gap-3 text-sm">
				<div class="bg-base-200/80 rounded-xl px-4 py-3 text-right">
					<div class="text-base-content/60 text-xs">Usuários alcançáveis</div>
					<div class="text-base-content text-lg font-semibold">
						{totalUsuarios}
					</div>
				</div>
				<div class="bg-base-200/80 rounded-xl px-4 py-3 text-right">
					<div class="text-base-content/60 text-xs">Templates cadastrados</div>
					<div class="text-base-content text-lg font-semibold">
						{totalTemplates}
					</div>
				</div>
			</div>
		</div>

		<!-- Mensagens de Feedback -->
		{#if mensagem}
			<div
				class="alert mb-6 shadow-lg"
				class:alert-success={mensagem.tipo === 'success'}
				class:alert-error={mensagem.tipo === 'error'}
				class:alert-info={mensagem.tipo === 'info'}
			>
				{#if mensagem.tipo === 'success'}
					<CheckCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
				{:else if mensagem.tipo === 'error'}
					<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
				{:else}
					<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
				{/if}
				<span class="font-medium">{mensagem.texto}</span>
				<button
					type="button"
					class="btn btn-sm btn-circle btn-ghost"
					onclick={() => (mensagem = null)}
				>
					<X class="h-4 w-4" strokeWidth={2} />
				</button>
			</div>
		{/if}

		<!-- Abas de Navegação -->
		<div class="tabs tabs-boxed mb-6">
			<button
				type="button"
				class="tab"
				class:tab-active={abaAtiva === 'enviar'}
				onclick={() => (abaAtiva = 'enviar')}
			>
				Enviar Notificação
			</button>
			<button
				type="button"
				class="tab"
				class:tab-active={abaAtiva === 'templates'}
				onclick={() => (abaAtiva = 'templates')}
			>
				Gerenciar Templates
			</button>
			<button
				type="button"
				class="tab"
				class:tab-active={abaAtiva === 'agendamentos'}
				onclick={() => (abaAtiva = 'agendamentos')}
			>
				Agendamentos
			</button>
		</div>

		<!-- Conteúdo da Aba: Enviar Notificação -->
		{#if abaAtiva === 'enviar'}
			<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
				<!-- Formulário -->
				<div class="card bg-base-100 shadow-xl">
					<div class="card-body">
						<h2 class="card-title mb-4">Enviar Notificação</h2>

						<!-- Destinatário -->
						<div class="form-control mb-4">
							<div class="mb-2 flex items-center justify-between">
								<label class="label" for="destinatario-select">
									<span class="label-text font-medium">Destinatário *</span>
								</label>
								<label class="label cursor-pointer gap-2">
									<input
										type="checkbox"
										bind:checked={enviarParaTodos}
										class="checkbox checkbox-primary checkbox-sm"
										disabled={processando}
									/>
									<span class="label-text text-sm"
										>Enviar para todos ({usuarios.length} usuários)</span
									>
								</label>
							</div>
							<select
								id="destinatario-select"
								bind:value={destinatarioId}
								class="select select-bordered"
								disabled={enviarParaTodos || processando}
							>
								<option value="">Selecione um usuário</option>
								{#if carregandoUsuarios}
									<option disabled>Carregando usuários...</option>
								{:else if usuarios.length > 0}
									{#each usuarios as usuario (usuario._id)}
										<option value={usuario._id}>
											{usuario.nome} ({usuario.matricula})
										</option>
									{/each}
								{:else}
									<option disabled>Nenhum usuário disponível</option>
								{/if}
							</select>
							{#if enviarParaTodos}
								<div class="label">
									<span class="label-text-alt text-warning">
										⚠️ A notificação será enviada para todos os {usuarios.length} usuários do sistema
									</span>
								</div>
							{/if}
						</div>

						<!-- Canal -->
						<div class="form-control mb-4">
							<div class="label">
								<span class="label-text font-medium">Canal de Envio *</span>
							</div>
							<div class="flex gap-4">
								<label class="label cursor-pointer">
									<input type="radio" value="chat" bind:group={canal} class="radio radio-primary" />
									<span class="label-text ml-2">Chat</span>
								</label>
								<label class="label cursor-pointer">
									<input
										type="radio"
										value="email"
										bind:group={canal}
										class="radio radio-primary"
									/>
									<span class="label-text ml-2">Email</span>
								</label>
								<label class="label cursor-pointer">
									<input
										type="radio"
										value="ambos"
										bind:group={canal}
										class="radio radio-primary"
									/>
									<span class="label-text ml-2">Ambos</span>
								</label>
							</div>
						</div>

						<!-- Tipo de Mensagem -->
						<div class="form-control mb-4">
							<div class="label">
								<span class="label-text font-medium">Tipo de Mensagem</span>
							</div>
							<div class="flex gap-4">
								<label class="label cursor-pointer">
									<input
										type="radio"
										checked={usarTemplate}
										onchange={() => (usarTemplate = true)}
										class="radio radio-secondary"
									/>
									<span class="label-text ml-2">Usar Template</span>
								</label>
								<label class="label cursor-pointer">
									<input
										type="radio"
										checked={!usarTemplate}
										onchange={() => (usarTemplate = false)}
										class="radio radio-secondary"
									/>
									<span class="label-text ml-2">Mensagem Personalizada</span>
								</label>
							</div>
						</div>

						{#if usarTemplate}
							<!-- Template -->
							<div class="form-control mb-4">
								<label class="label" for="template-select">
									<span class="label-text font-medium">Template *</span>
								</label>
								<select id="template-select" bind:value={templateId} class="select select-bordered">
									<option value="">Selecione um template</option>
									{#if carregandoTemplates}
										<option disabled>Carregando templates...</option>
									{:else if templatesParaCanal.length > 0}
										{#each templatesParaCanal as template (template._id)}
											<option value={template._id}>
												{template.nome}
											</option>
										{/each}
									{:else}
										<option disabled>Nenhum template disponível</option>
									{/if}
								</select>
							</div>

							{#if templateSelecionado}
								<div class="alert alert-info mb-4">
									<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
									<div>
										<div class="font-bold">{templateSelecionado.titulo}</div>
										<div class="mt-1 text-sm">{templateSelecionado.corpo}</div>
									</div>
								</div>
							{/if}
						{:else}
							<!-- Mensagem Personalizada -->
							<div class="form-control mb-4">
								<label class="label" for="mensagem-textarea">
									<span class="label-text font-medium">Mensagem *</span>
								</label>
								<textarea
									id="mensagem-textarea"
									bind:value={mensagemPersonalizada}
									class="textarea textarea-bordered h-32"
									placeholder="Digite sua mensagem personalizada..."
								></textarea>
							</div>
						{/if}

						<!-- Agendamento -->
						<div class="form-control mb-4">
							<label class="label cursor-pointer">
								<span class="label-text font-medium">Agendar Envio</span>
								<input
									type="checkbox"
									bind:checked={agendarEnvio}
									class="checkbox checkbox-primary"
									disabled={processando}
								/>
							</label>

							{#if agendarEnvio}
								<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
									<div class="form-control">
										<label class="label" for="data-agendamento">
											<span class="label-text">Data</span>
										</label>
										<input
											id="data-agendamento"
											type="date"
											class="input input-bordered"
											bind:value={dataAgendamento}
											min={minDate}
											disabled={processando}
										/>
									</div>

									<div class="form-control">
										<label class="label" for="hora-agendamento">
											<span class="label-text">Hora</span>
										</label>
										<input
											id="hora-agendamento"
											type="time"
											class="input input-bordered"
											bind:value={horaAgendamento}
											min={horaMinima}
											disabled={processando}
										/>
									</div>
								</div>

								{#if getPreviewAgendamento()}
									<div class="alert alert-info mt-4">
										<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
										<span>{getPreviewAgendamento()}</span>
									</div>
								{/if}
							{/if}
						</div>

						<!-- Botão Enviar -->
						<div class="card-actions mt-4 justify-end">
							<button
								class="btn btn-primary btn-block"
								onclick={() => enviarNotificacao()}
								disabled={processando}
							>
								{#if processando}
									<span class="loading loading-spinner loading-sm"></span>
									{#if progressoEnvio.total > 1}
										<span class="ml-2">
											Enviando... ({progressoEnvio.enviados}/{progressoEnvio.total})
										</span>
									{:else}
										<span class="ml-2">Enviando...</span>
									{/if}
								{:else}
									<Send class="h-5 w-5" strokeWidth={2} />
								{/if}
								{#if processando}
									<!-- Texto já está no bloco acima -->
								{:else if agendarEnvio && enviarParaTodos}
									Agendar para Todos ({usuarios.length})
								{:else if agendarEnvio}
									Agendar Notificação
								{:else if enviarParaTodos}
									Enviar para Todos ({usuarios.length})
								{:else}
									Enviar Notificação
								{/if}
							</button>
						</div>

						<!-- Terminal de Status -->
						<div class="mt-4">
							<div class="mb-2 flex items-center justify-between">
								<div class="label pl-0">
									<span class="label-text font-medium">Terminal de Status</span>
								</div>
								{#if logsEnvio.length > 0}
									<button type="button" class="btn btn-sm btn-ghost" onclick={limparLogs}>
										<X class="h-4 w-4" strokeWidth={2} />
										Limpar
									</button>
								{/if}
							</div>
							<div
								bind:this={terminalScrollRef}
								class="bg-base-200 text-base-content border-base-300 max-h-64 overflow-y-auto rounded-lg border p-4 font-mono text-sm"
							>
								{#if logsEnvio.length === 0}
									<div class="text-neutral-content/60 italic">
										Aguardando envio de notificação...
									</div>
								{:else}
									{#each logsEnvio as log, i (i)}
										<div class="mb-1">
											<span class="text-neutral-content/60"
												>[{formatarTimestamp(log.timestamp)}]</span
											>
											<span
												class="badge badge-xs ml-2 {log.tipo === 'chat'
													? 'badge-info'
													: 'badge-secondary'}"
											>
												{log.tipo.toUpperCase()}
											</span>
											<span class="ml-2 font-semibold">{log.destinatario}:</span>
											<span class="ml-2 {obterCorStatus(log.status)}">
												{log.mensagem}
											</span>
										</div>
									{/each}
								{/if}
							</div>
						</div>
					</div>
				</div>

				<!-- Lista de Templates -->
				<div class="card bg-base-100 shadow-xl">
					<div class="card-body">
						<div class="mb-4 flex items-center justify-between">
							<h2 class="card-title">Templates Disponíveis</h2>
							<button
								type="button"
								class="btn btn-sm btn-outline btn-primary"
								onclick={() => abrirModalNovoTemplate()}
							>
								<Plus class="h-4 w-4" strokeWidth={2} />
								Novo Template
							</button>
						</div>

						{#if carregandoTemplates}
							<div class="flex flex-col items-center justify-center gap-4 py-10">
								<span class="loading loading-spinner loading-lg"></span>
								<p class="text-base-content/60 text-sm">Carregando templates...</p>
							</div>
						{:else if templates.length > 0}
							<!-- Mostrar templates se existirem -->
							<div class="max-h-[600px] space-y-3 overflow-y-auto">
								{#each templates as template (template._id)}
									<div class="card bg-base-200 compact">
										<div class="card-body">
											<div class="flex items-start justify-between">
												<div class="flex-1">
													<h3 class="text-sm font-bold">{template.nome}</h3>
													<p class="mt-1 text-xs opacity-70">{template.titulo}</p>
													<p class="mt-2 line-clamp-2 text-xs">{template.corpo}</p>
													<div class="mt-2 flex gap-2">
														<span
															class="badge badge-sm {template.tipo === 'sistema'
																? 'badge-primary'
																: 'badge-secondary'}"
														>
															{template.tipo}
														</span>
														{#if template.variaveis && template.variaveis.length > 0}
															<span class="badge badge-sm badge-outline">
																{template.variaveis.length} variáveis
															</span>
														{/if}
													</div>
												</div>
												{#if template.tipo !== 'sistema'}
													<div class="dropdown dropdown-end">
														<button
															type="button"
															tabindex="0"
															class="btn btn-xs"
															aria-label="Opções do template"
														>
															<MoreVertical class="h-4 w-4" strokeWidth={2} />
														</button>
														<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
														<ul
															tabindex="0"
															class="dropdown-content menu bg-base-100 rounded-box w-32 p-2 shadow"
														>
															<li><button type="button">Editar</button></li>
															<li>
																<button type="button" class="text-error">Excluir</button>
															</li>
														</ul>
													</div>
												{/if}
											</div>
										</div>
									</div>
								{/each}
							</div>
						{:else}
							<!-- Nenhum template disponível - mostrar botão para criar -->
							<div class="py-10 text-center">
								<FileText class="mx-auto mb-4 h-12 w-12 opacity-50" strokeWidth={2} />
								<p class="text-base-content mb-2 font-medium">Nenhum template disponível</p>
								<p class="text-base-content/60 mb-4 text-sm">
									Clique no botão abaixo para criar os templates padrão do sistema.
								</p>
								<button
									class="btn btn-primary btn-sm"
									onclick={criarTemplatesPadrao}
									disabled={criandoTemplates}
								>
									{#if criandoTemplates}
										<span class="loading loading-spinner loading-xs"></span>
										Criando templates...
									{:else}
										<Plus class="h-4 w-4" strokeWidth={2} />
										Criar Templates Padrão
									{/if}
								</button>
							</div>
						{/if}
					</div>
				</div>
			</div>
		{/if}

		<!-- Conteúdo da Aba: Templates -->
		{#if abaAtiva === 'templates'}
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<div class="mb-4 flex items-center justify-between">
						<h2 class="card-title">Templates de Mensagens</h2>
						<a href="/ti/notificacoes/templates" class="btn btn-primary"> Gerenciar Templates </a>
					</div>
					<p class="text-base-content/60">
						Acesse a página de gerenciamento de templates para criar, editar e excluir templates de
						emails e mensagens.
					</p>
				</div>
			</div>
		{/if}

		<!-- Conteúdo da Aba: Agendamentos -->
		{#if abaAtiva === 'agendamentos'}
			<!-- Histórico de Agendamentos -->
			<div class="card bg-base-100 mt-6 shadow-xl">
				<div class="card-body">
					<div class="mb-4 flex items-center justify-between">
						<div class="flex items-center gap-3">
							<div class="bg-secondary/10 rounded-lg p-2">
								<Clock class="text-secondary h-6 w-6" strokeWidth={2} />
							</div>
							<h2 class="card-title">Histórico de Agendamentos</h2>
						</div>

						<!-- Filtros -->
						<div class="flex gap-2">
							<button
								type="button"
								class="btn btn-sm {filtroAgendamento === 'todos' ? 'btn-primary' : 'btn-ghost'}"
								onclick={() => (filtroAgendamento = 'todos')}
							>
								Todos
							</button>
							<button
								type="button"
								class="btn btn-sm {filtroAgendamento === 'agendados' ? 'btn-primary' : 'btn-ghost'}"
								onclick={() => (filtroAgendamento = 'agendados')}
							>
								Agendados
							</button>
							<button
								type="button"
								class="btn btn-sm {filtroAgendamento === 'enviados' ? 'btn-primary' : 'btn-ghost'}"
								onclick={() => (filtroAgendamento = 'enviados')}
							>
								Enviados
							</button>
						</div>
					</div>

					{#if agendamentosFiltrados.length === 0}
						<div class="py-10 text-center">
							<Clock class="mx-auto mb-4 h-12 w-12 opacity-50" strokeWidth={2} />
							<p class="text-base-content mb-2 font-medium">Nenhum agendamento encontrado</p>
							<p class="text-base-content/60 text-sm">
								Os agendamentos aparecerão aqui quando você agendar envios.
							</p>
						</div>
					{:else}
						<!-- Tabela de Agendamentos -->
						<div class="overflow-x-auto">
							<table class="table-zebra table">
								<thead>
									<tr>
										<th>Tipo</th>
										<th>Destinatário</th>
										<th>Data/Hora</th>
										<th>Status</th>
										<th>Template</th>
										<th>Ações</th>
									</tr>
								</thead>
								<tbody>
									{#each agendamentosFiltrados as agendamento (agendamento.dados._id)}
										{@const status = obterStatusAgendamento(agendamento)}
										{@const nomeDestinatario = obterNomeDestinatario(agendamento)}
										{@const dataFormatada = formatarDataAgendamento(agendamento)}
										{@const podeCancelar = status === 'agendado'}
										<tr>
											<td>
												<div class="flex items-center gap-2">
													{#if agendamento.tipo === 'email'}
														<Mail class="text-info h-5 w-5" strokeWidth={2} />
														<span class="badge badge-info badge-sm">Email</span>
													{:else}
														<MessageSquare class="text-primary h-5 w-5" strokeWidth={2} />
														<span class="badge badge-primary badge-sm">Chat</span>
													{/if}
												</div>
											</td>
											<td>
												<div class="font-medium">{nomeDestinatario}</div>
												{#if agendamento.tipo === 'email'}
													<div class="text-base-content/60 text-xs">
														{agendamento.dados.destinatario}
													</div>
												{/if}
											</td>
											<td>
												<div class="font-medium">{dataFormatada}</div>
												{#if podeCancelar}
													{@const tempoRestante =
														agendamento.tipo === 'email'
															? (agendamento.dados.agendadaPara ?? 0) - Date.now()
															: (agendamento.dados.agendadaPara ?? 0) - Date.now()}
													{@const horasRestantes = Math.floor(tempoRestante / (1000 * 60 * 60))}
													{@const minutosRestantes = Math.floor(
														(tempoRestante % (1000 * 60 * 60)) / (1000 * 60)
													)}
													{#if horasRestantes < 1 && minutosRestantes < 60}
														<div class="text-warning text-xs">
															Em {minutosRestantes} min
														</div>
													{:else if horasRestantes < 24}
														<div class="text-info text-xs">
															Em {horasRestantes}h {minutosRestantes}min
														</div>
													{/if}
												{/if}
											</td>
											<td>
												{#if status === 'agendado'}
													<span class="badge badge-warning badge-sm">Agendado</span>
												{:else if status === 'enviado'}
													<span class="badge badge-success badge-sm">Enviado</span>
												{:else}
													<span class="badge badge-error badge-sm">Cancelado</span>
												{/if}
											</td>
											<td>
												{#if agendamento.tipo === 'email'}
													{#if agendamento.dados.templateInfo}
														<div class="text-sm">
															{agendamento.dados.templateInfo.nome}
														</div>
													{:else if agendamento.dados.templateId}
														<div class="text-base-content/60 text-sm italic">Template removido</div>
													{:else}
														<div class="text-base-content/60 text-sm">-</div>
													{/if}
												{:else}
													<div class="text-base-content/60 text-sm">-</div>
												{/if}
											</td>
											<td>
												{#if podeCancelar}
													<button
														type="button"
														class="btn btn-sm btn-error btn-outline"
														onclick={() => cancelarAgendamento(agendamento)}
													>
														<X class="h-4 w-4" strokeWidth={2} />
														Cancelar
													</button>
												{:else}
													<span class="text-base-content/60 text-sm">-</span>
												{/if}
											</td>
										</tr>
									{/each}
								</tbody>
							</table>
						</div>
					{/if}
				</div>
			</div>
		{/if}

		<!-- Info -->
		<div class="alert alert-warning mt-6">
			<AlertTriangle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
			<span>Para enviar emails, certifique-se de configurar o SMTP em Configurações de Email.</span>
		</div>
	</div>
</div>

<!-- Modal Novo Template -->
{#if modalNovoTemplateAberto}
	<div class="modal modal-open">
		<div class="modal-box max-w-2xl">
			<h3 class="mb-4 text-lg font-bold">Criar Novo Template</h3>

			<div class="space-y-4">
				<!-- Código -->
				<div class="form-control">
					<label class="label" for="codigo-template">
						<span class="label-text font-medium">Código *</span>
						<span class="label-text-alt">Ex: AVISO_IMPORTANTE</span>
					</label>
					<input
						id="codigo-template"
						type="text"
						bind:value={codigoTemplate}
						placeholder="CODIGO_TEMPLATE"
						class="input input-bordered"
						maxlength="50"
					/>
					<label class="label" for="codigo-template">
						<span class="label-text-alt"
							>Código único para identificar o template (será convertido para MAIÚSCULAS)</span
						>
					</label>
				</div>

				<!-- Nome -->
				<div class="form-control">
					<label class="label" for="nome-template">
						<span class="label-text font-medium">Nome *</span>
					</label>
					<input
						id="nome-template"
						type="text"
						bind:value={nomeTemplate}
						placeholder="Nome do Template"
						class="input input-bordered"
						maxlength="100"
					/>
					<label class="label" for="nome-template">
						<span class="label-text-alt">Nome exibido na lista de templates</span>
					</label>
				</div>

				<!-- Título -->
				<div class="form-control">
					<label class="label" for="titulo-template">
						<span class="label-text font-medium">Título *</span>
					</label>
					<input
						id="titulo-template"
						type="text"
						bind:value={tituloTemplate}
						placeholder="Título da Mensagem"
						class="input input-bordered"
						maxlength="200"
					/>
					<label class="label" for="titulo-template">
						<span class="label-text-alt"
							>Título usado no assunto do email ou cabeçalho da mensagem</span
						>
					</label>
				</div>

				<!-- Corpo -->
				<div class="form-control">
					<label class="label" for="corpo-template">
						<span class="label-text font-medium">Corpo da Mensagem *</span>
					</label>
					<textarea
						id="corpo-template"
						bind:value={corpoTemplate}
						placeholder="Digite o conteúdo da mensagem..."
						class="textarea textarea-bordered h-32"
						maxlength="2000"
					></textarea>
					<label class="label" for="corpo-template">
						<span class="label-text-alt"
							>Use &#123;&#123;variavel&#125;&#125; para variáveis dinâmicas (ex:
							&#123;&#123;nome&#125;&#125;, &#123;&#123;data&#125;&#125;)</span
						>
					</label>
				</div>

				<!-- Variáveis -->
				<div class="form-control">
					<label class="label" for="variaveis-template">
						<span class="label-text font-medium">Variáveis (opcional)</span>
					</label>
					<input
						id="variaveis-template"
						type="text"
						bind:value={variaveisTemplate}
						placeholder="nome, data, valor (separadas por vírgula)"
						class="input input-bordered"
					/>
					<label class="label" for="variaveis-template">
						<span class="label-text-alt"
							>Liste as variáveis que podem ser substituídas no template (separadas por vírgula ou
							espaço)</span
						>
					</label>
				</div>
			</div>

			<div class="modal-action">
				<button class="btn" onclick={fecharModalNovoTemplate} disabled={criandoNovoTemplate}>
					Cancelar
				</button>
				<button class="btn btn-primary" onclick={salvarNovoTemplate} disabled={criandoNovoTemplate}>
					{#if criandoNovoTemplate}
						<span class="loading loading-spinner loading-sm"></span>
						Criando...
					{:else}
						<Check class="h-5 w-5" strokeWidth={2} />
						Criar Template
					{/if}
				</button>
			</div>
		</div>
		<button class="modal-backdrop" onclick={fecharModalNovoTemplate}>fechar</button>
	</div>
{/if}
