@extends('layouts.app')

@section('title', 'Chat WhatsApp')
@section('page-title', 'Chat WhatsApp')

@section('content')
<div class="container-fluid">
    <div class="row" style="height: calc(100vh - 120px);">
        <!-- Lista de Contatos (Lado Esquerdo) -->
        <x-chat.contacts-list />

        <!-- Janela de Conversa (Lado Direito) -->
        <div class="col-md-8 col-lg-9 p-0" style="background-color: #e5ddd5; display: flex; flex-direction: column; height: 100%;">
            <!-- Cabeçalho da Conversa -->
            <x-chat.chat-header />

            <!-- Área de Mensagens -->
            <x-chat.messages-area />

            <!-- Campo de Envio de Mensagem -->
            <x-chat.message-input />
        </div>
    </div>
</div>

<!-- Modal para visualização de mídia -->
<x-chat.media-modal />

<!-- Estilos CSS -->
<x-chat.styles />
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    let contatoSelecionado = null;
    let pollingInterval = null;

    // Carregar lista de contatos (da API externa)
    function carregarContatos() {
        $.ajax({
            url: '/api/chat/contatos',
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                const contatos = response.data || [];
                
                /**
                 * Mapeia tipo_midia para ícone + rótulo
                 * Onde é feito o mapeamento de tipo_midia
                 */
                function obterResumoTipoMidia(tipoMidia) {
                    const tipo = (tipoMidia || 'texto').toLowerCase();
                    switch(tipo) {
                        case 'audio':
                        case 'voice':
                            return { icone: '🔊', label: 'Mensagem de áudio' };
                        case 'imagem':
                        case 'image':
                            return { icone: '🖼️', label: 'Foto' };
                        case 'video':
                            return { icone: '🎥', label: 'Vídeo' };
                        case 'documento':
                        case 'document':
                            return { icone: '📄', label: 'Documento' };
                        default:
                            return { icone: '', label: 'Arquivo de mídia' };
                    }
                }
                
                /**
                 * Onde o texto da última mensagem é truncado
                 * Usa CSS com text-overflow: ellipsis para truncar visualmente e mostrar três pontinhos quando o texto é grande
                 */
                function formatarResumoUltimaMensagem(ultimaMensagemRecebida) {
                    if (!ultimaMensagemRecebida) {
                        return '<span style="color: #999;">Nenhuma mensagem ainda</span>';
                    }
                    
                    const tipoMidia = ultimaMensagemRecebida.tipo_midia || 'texto';
                    const resumo = obterResumoTipoMidia(tipoMidia);
                    
                    if (tipoMidia === 'texto') {
                        // Para texto, exibir o conteúdo truncado com CSS ellipsis (três pontinhos quando grande)
                        const texto = ultimaMensagemRecebida.texto || '';
                        const textoEscapado = escapeHtml(texto);
                        // CSS ellipsis garante que apareçam três pontinhos (...) quando o texto for grande
                        return `<span style="display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; width: 100%;">${textoEscapado}</span>`;
                    } else {
                        // Para mídia, exibir ícone + rótulo
                        return `${resumo.icone} ${resumo.label}`;
                    }
                }
                
                // Debug: verificar estrutura dos contatos
                if (contatos.length > 0) {
                    console.log('Primeiro contato recebido:', contatos[0]);
                    console.log('Campos disponíveis:', Object.keys(contatos[0]));
                }
                
                const html = contatos.map(contato => {
                    const inicial = (contato.nome || contato.telefone || '?').charAt(0).toUpperCase();
                    const nome = contato.nome || contato.telefone || 'Sem nome';
                    
                    // Obter resumo da última mensagem recebida
                    const ultimaMensagemRecebida = contato.ultima_mensagem_recebida || null;
                    const resumoMensagem = formatarResumoUltimaMensagem(ultimaMensagemRecebida);
                    
                    // Onde tempo_espera e ultima_mensagem_data são inseridos na UI
                    // Exibir exatamente como vem do backend, sem formatação
                    const tempoEspera = contato.tempo_espera || contato.tempoEspera || null;
                    const ultimaMensagemData = contato.ultima_mensagem_data || contato.ultimaMensagemData || null;
                    
                    // Debug: verificar se tempo_espera está presente (apenas no primeiro contato)
                    if (contatos.indexOf(contato) === 0) {
                        console.log('=== DEBUG TEMPO_ESPERA ===');
                        console.log('Primeiro contato - tempo_espera:', tempoEspera, 'tipo:', typeof tempoEspera);
                        console.log('Primeiro contato - contato.tempo_espera:', contato.tempo_espera);
                        console.log('Primeiro contato - contato.tempoEspera:', contato.tempoEspera);
                        console.log('Primeiro contato - todos os campos:', Object.keys(contato));
                        console.log('Primeiro contato - contato completo:', contato);
                        console.log('===========================');
                    }

                    // Garantir que id_contato_whatsapp existe, caso contrário usar id como fallback
                    // Tentar múltiplos campos possíveis
                    const contatoId = contato.id_contato_whatsapp || contato.id || contato.contato_id;
                    if (!contatoId) {
                        console.error('Contato sem ID válido:', contato);
                        console.error('Campos disponíveis:', Object.keys(contato));
                        return ''; // Pular contatos sem ID
                    }
                    
                    return `
                        <div class="contato-item" data-contato-id="${contatoId}" data-wa-id="${contato.wa_id || ''}">
                            <div class="d-flex align-items-center">
                                <div class="avatar-circle mr-3">
                                    <span>${escapeHtml(inicial)}</span>
                                </div>
                                <div class="flex-grow-1" style="min-width: 0; overflow: hidden;">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div style="flex: 1; min-width: 0; overflow: hidden;">
                                            <h6 class="mb-0" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtml(nome)}</h6>
                                            <small class="text-muted d-block" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; margin-top: 2px; display: block; max-width: 100%;">${resumoMensagem}</small>
                                        </div>
                                        <div class="text-right ml-2" style="flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;">
                                            ${tempoEspera && tempoEspera !== null && tempoEspera !== '' && tempoEspera !== 'null' && tempoEspera !== 'undefined' ? `<span class="badge badge-primary tempo-espera-badge" style="background-color: #007bff; color: white; font-size: 11px; padding: 4px 8px; border-radius: 12px; white-space: nowrap; line-height: 1.2; font-weight: 500; margin-bottom: 4px;">${escapeHtml(String(tempoEspera))}</span>` : '<span class="badge" style="background-color: #e9ecef; color: #6c757d; font-size: 11px; padding: 4px 8px; border-radius: 12px; white-space: nowrap; line-height: 1.2; margin-bottom: 4px;">-</span>'}
                                            ${ultimaMensagemData && ultimaMensagemData !== null && ultimaMensagemData !== '' && ultimaMensagemData !== 'null' && ultimaMensagemData !== 'undefined' ? `<small class="text-muted" style="font-size: 10px; color: #999; white-space: nowrap; line-height: 1.2;">${escapeHtml(String(ultimaMensagemData))}</small>` : ''}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('');

                $('#contatos-list').html(html || '<div class="p-4 text-center text-muted">Nenhum contato encontrado</div>');

                // Adicionar evento de clique
                $('.contato-item').on('click', function() {
                    const contatoId = $(this).data('contato-id');
                    if (!contatoId) {
                        console.error('Erro: contatoId não encontrado', $(this).data());
                        alert('Erro: ID do contato não encontrado. Por favor, recarregue a página.');
                        return;
                    }
                    selecionarContato(contatoId);
                });
                
                // Tornar funções helper acessíveis globalmente para uso no carregarConversa
                window.obterResumoTipoMidia = obterResumoTipoMidia;
                window.formatarResumoUltimaMensagem = formatarResumoUltimaMensagem;
            },
            error: function(xhr) {
                $('#contatos-list').html('<div class="p-4 text-center text-danger">Erro ao carregar contatos</div>');
                console.error('Erro ao carregar contatos:', xhr);
            }
        });
    }

    /**
     * Mapeia tipo_midia para ícone + rótulo (versão global)
     * Onde é feito o mapeamento de tipo_midia
     */
    function obterResumoTipoMidiaGlobal(tipoMidia) {
        const tipo = (tipoMidia || 'texto').toLowerCase();
        switch(tipo) {
            case 'audio':
            case 'voice':
                return { icone: '🔊', label: 'Mensagem de áudio' };
            case 'imagem':
            case 'image':
                return { icone: '🖼️', label: 'Foto' };
            case 'video':
                return { icone: '🎥', label: 'Vídeo' };
            case 'documento':
            case 'document':
                return { icone: '📄', label: 'Documento' };
            default:
                return { icone: '', label: 'Arquivo de mídia' };
        }
    }

    // Selecionar contato e carregar conversa
    function selecionarContato(contatoId) {
        // Se já está selecionado, não fazer nada
        if (contatoSelecionado === contatoId) {
            return;
        }

        // Parar polling anterior
        if (pollingInterval) {
            clearInterval(pollingInterval);
            pollingInterval = null;
        }
        isPolling = false;

        // Remover seleção anterior
        $('.contato-item').removeClass('active');
        $(`.contato-item[data-contato-id="${contatoId}"]`).addClass('active');

        contatoSelecionado = contatoId;
        $('#contato-id').val(contatoId);

        // Carregar informações do contato e mensagens
        carregarConversa(contatoId);
    }

    // Carregar conversa do contato (da API externa)
    function carregarConversa(contatoId) {
        // Validar contatoId antes de fazer a requisição
        if (!contatoId || contatoId === 'undefined' || contatoId === 'null') {
            console.error('Erro: contatoId inválido:', contatoId);
            alert('Erro: ID do contato inválido. Por favor, selecione um contato novamente.');
            return;
        }
        
        $.ajax({
            url: `/api/chat/contatos/${contatoId}/conversas`,
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                const contato = response.contato;
                const mensagens = response.data || [];

                // Atualizar cabeçalho
                const inicial = (contato.nome || contato.telefone || '?').charAt(0).toUpperCase();
                $('#contato-inicial').text(inicial);
                $('#contato-nome').text(contato.nome || contato.telefone || 'Sem nome');
                $('#contato-telefone').text(contato.telefone || contato.wa_id);
                
                // Adicionar resumo da última mensagem no header
                // Buscar o contato completo na lista para obter ultima_mensagem_recebida
                $.ajax({
                    url: '/api/chat/contatos',
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(contatosResponse) {
                        const contatos = contatosResponse.data || [];
                        const contatoCompleto = contatos.find(c => c.id_contato_whatsapp == contatoId);
                        
                        if (contatoCompleto && contatoCompleto.ultima_mensagem_recebida) {
                            // Mapear tipo_midia para resumo (usando função helper global)
                            const tipoMidia = contatoCompleto.ultima_mensagem_recebida.tipo_midia || 'texto';
                            const resumo = (window.obterResumoTipoMidia || obterResumoTipoMidiaGlobal)(tipoMidia);
                            
                            let resumoTexto = '';
                            if (tipoMidia === 'texto') {
                                const texto = contatoCompleto.ultima_mensagem_recebida.texto || '';
                                resumoTexto = escapeHtml(texto);
                            } else {
                                resumoTexto = `${resumo.icone} ${resumo.label}`;
                            }
                            
                            $('#contato-ultima-mensagem').html(resumoTexto).show();
                        } else {
                            $('#contato-ultima-mensagem').html('<span style="color: #999;">Nenhuma mensagem ainda</span>').show();
                        }
                    },
                    error: function() {
                        $('#contato-ultima-mensagem').hide();
                    }
                });
                
                $('#chat-header').show();
                $('#chat-input-container').show();

                // Renderizar mensagens
                renderizarMensagens(mensagens);

                // Atualizar botões de input (garantir que botão de gravar áudio apareça)
                atualizarBotoesInput();

                // Iniciar polling para atualizar mensagens
                iniciarPolling(contatoId);
            },
            error: function(xhr) {
                console.error('Erro ao carregar conversa:', xhr);
                console.error('contatoId usado:', contatoId);
                console.error('Resposta do servidor:', xhr.responseJSON || xhr.responseText);
                
                let errorMsg = 'Erro ao carregar conversa. Tente novamente.';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = 'Erro: ' + xhr.responseJSON.error;
                } else if (xhr.status === 404) {
                    errorMsg = 'Contato não encontrado.';
                } else if (xhr.status === 500) {
                    errorMsg = 'Erro interno do servidor. Verifique os logs.';
                }
                
                alert(errorMsg);
            }
        });
    }

    // Renderizar mensagens
    function renderizarMensagens(mensagens) {
        if (mensagens.length === 0) {
            $('#mensagens-empty').show();
            $('#mensagens-list').hide().html('');
            return;
        }

        $('#mensagens-empty').hide();
        const html = mensagens.map(msg => {
            const isEnviada = msg.enviada || msg.from_me;
            const classeBubble = isEnviada ? 'mensagem-enviada' : 'mensagem-recebida';
            const hora = msg.hora || new Date(msg.created_at).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
            
            // Verificar se é mensagem multimídia
            const possuiMidia = msg.possui_midia || false;
            const tipoMidia = (msg.type || 'texto').toLowerCase();
            const urlMidia = msg.url_midia_local || msg.url_midia_original || null;
            
            // Para áudio, vídeo, imagem e documento, considerar como mídia mesmo sem possuiMidia
            const isMidia = possuiMidia || ['audio', 'voice', 'video', 'imagem', 'image', 'documento', 'document'].includes(tipoMidia);
            
            let conteudoMidia = '';
            
            if (isMidia && (urlMidia || tipoMidia === 'audio' || tipoMidia === 'voice')) {
                switch(tipoMidia) {
                    case 'imagem':
                    case 'image':
                        const metadadosImg = msg.metadados_midia || {};
                        const width = metadadosImg.width || 300;
                        const height = metadadosImg.height || 400;
                        // Escapar URL para uso seguro em data attributes
                        const urlMidiaEscapada = urlMidia.replace(/'/g, "\\'");
                        conteudoMidia = `
                            <div class="mensagem-midia">
                                <img src="${urlMidia}" 
                                     alt="Imagem" 
                                     class="mensagem-imagem" 
                                     data-midia-url="${urlMidiaEscapada}"
                                     data-midia-tipo="imagem"
                                     style="max-width: ${Math.min(width, 300)}px; max-height: ${Math.min(height, 400)}px; width: 100%; height: auto; display: block; cursor: pointer;">
                                ${msg.body ? `<div style="padding: 8px 12px; border-top: 1px solid rgba(0,0,0,0.1);">${escapeHtml(msg.body)}</div>` : ''}
                            </div>
                        `;
                        break;
                        
                    case 'documento':
                        const nomeArquivo = msg.nome_arquivo || 'Documento';
                        const metadadosDoc = msg.metadados_midia || {};
                        const tamanho = metadadosDoc.fileLength ? formatarTamanho(metadadosDoc.fileLength) : '';
                        const mimetype = msg.mimetype || '';
                        const iconeDoc = mimetype.includes('pdf') ? 'fa-file-pdf' : 
                                        mimetype.includes('word') || mimetype.includes('document') ? 'fa-file-word' :
                                        mimetype.includes('excel') || mimetype.includes('spreadsheet') ? 'fa-file-excel' :
                                        mimetype.includes('image') ? 'fa-file-image' : 'fa-file';
                        conteudoMidia = `
                            <div class="mensagem-midia mensagem-documento">
                                <div class="mensagem-midia-icon">
                                    <i class="fas ${iconeDoc}"></i>
                                </div>
                                <div class="mensagem-midia-info">
                                    <div class="mensagem-midia-nome">${escapeHtml(nomeArquivo)}</div>
                                    ${tamanho ? `<div class="mensagem-midia-tamanho">${tamanho}</div>` : ''}
                                </div>
                                <a href="${urlMidia}" target="_blank" class="btn btn-sm btn-light" title="Baixar">
                                    <i class="fas fa-download"></i>
                                </a>
                            </div>
                        `;
                        break;
                        
                    case 'video':
                        // Tentar obter thumbnail do vídeo se disponível
                        const metadadosVideo = msg.metadados_midia || {};
                        const urlMidiaVideoEscapada = urlMidia.replace(/'/g, "\\'");
                        conteudoMidia = `
                            <div class="mensagem-midia">
                                <div class="mensagem-video-preview" data-midia-url="${urlMidiaVideoEscapada}" data-midia-tipo="video" style="cursor: pointer;">
                                    <video muted preload="metadata" style="width: 100%; max-width: 300px; display: block;">
                                        <source src="${urlMidia}" type="video/mp4">
                                    </video>
                                    <div class="mensagem-video-play">
                                        <i class="fas fa-play"></i>
                                    </div>
                                </div>
                                ${msg.body ? `<div style="padding: 8px 12px; border-top: 1px solid rgba(0,0,0,0.1);">${escapeHtml(msg.body)}</div>` : ''}
                            </div>
                        `;
                        break;
                        
                    case 'audio':
                    case 'voice':
                        // Determinar tipo MIME do áudio baseado na extensão ou mimetype
                        const mimetypeAudio = msg.mimetype || 'audio/ogg; codecs=opus';
                        // Se não tiver URL, pode ser que o áudio ainda não esteja disponível
                        if (urlMidia) {
                            const urlMidiaAudioEscapada = urlMidia.replace(/'/g, "\\'");
                            conteudoMidia = `
                                <div class="mensagem-midia mensagem-audio">
                                    <div class="mensagem-midia-icon">
                                        <i class="fas fa-microphone"></i>
                                    </div>
                                    <audio controls class="mensagem-audio-player" preload="metadata">
                                        <source src="${urlMidiaAudioEscapada}" type="${mimetypeAudio}">
                                        <source src="${urlMidiaAudioEscapada}" type="audio/ogg">
                                        <source src="${urlMidiaAudioEscapada}" type="audio/mpeg">
                                        Seu navegador não suporta áudio.
                                    </audio>
                                </div>
                            `;
                        } else {
                            // Áudio sem URL ainda - mostrar apenas ícone
                            conteudoMidia = `
                                <div class="mensagem-midia mensagem-audio">
                                    <div class="mensagem-midia-icon">
                                        <i class="fas fa-microphone"></i>
                                    </div>
                                    <div class="mensagem-midia-info">
                                        <div class="mensagem-midia-nome">Áudio</div>
                                        <div class="mensagem-midia-tamanho">Carregando...</div>
                                    </div>
                                </div>
                            `;
                        }
                        break;
                        
                    default:
                        conteudoMidia = `
                            <div class="mensagem-midia">
                                <i class="fas fa-file"></i> ${escapeHtml(tipoMidia)}
                            </div>
                        `;
                }
            }
            
            // Se tem mídia, usar o conteúdo de mídia, senão usar o texto
            const conteudo = possuiMidia && conteudoMidia ? conteudoMidia : `<div>${escapeHtml(msg.body || '')}</div>`;

            return `
                <div class="d-flex ${isEnviada ? 'justify-content-end' : 'justify-content-start'} mb-2">
                    <div class="mensagem-bubble ${classeBubble}">
                        ${conteudo}
                        <div class="mensagem-hora">${hora}</div>
                    </div>
                </div>
            `;
        }).join('');

        $('#mensagens-list').html(html).show();

        // Adicionar event listeners para mídia (event delegation)
        $(document).off('click', '.mensagem-imagem, .mensagem-video-preview').on('click', '.mensagem-imagem, .mensagem-video-preview', function() {
            const url = $(this).data('midia-url') || $(this).closest('[data-midia-url]').data('midia-url');
            const tipo = $(this).data('midia-tipo') || $(this).closest('[data-midia-tipo]').data('midia-tipo');
            if (url && tipo) {
                abrirModalMidia(url, tipo);
            }
        });

        // Scroll para o final (com timeout para garantir que o DOM foi atualizado)
        scrollParaFinal();
    }

    // Função para fazer scroll até o final das mensagens
    function scrollParaFinal() {
        const container = $('#mensagens-container');
        if (container.length && container[0]) {
            // Usar setTimeout para garantir que o DOM foi atualizado
            setTimeout(function() {
                container.scrollTop(container[0].scrollHeight);
            }, 100);
            
            // Também tentar imediatamente (caso o DOM já esteja pronto)
            container.scrollTop(container[0].scrollHeight);
        }
    }

    // Função para formatar tamanho de arquivo
    function formatarTamanho(bytes) {
        if (!bytes || bytes === 0 || bytes === '0') return '';
        // Converter para número se for string
        const bytesNum = typeof bytes === 'string' ? parseInt(bytes, 10) : bytes;
        if (isNaN(bytesNum) || bytesNum === 0) return '';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytesNum) / Math.log(k));
        return Math.round(bytesNum / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }

    // Função para abrir modal de mídia (definida localmente e globalmente)
    function abrirModalMidia(url, tipo) {
        const modal = $('#modal-midia');
        const content = $('#modal-midia-content');
        
        let html = '';
        if (tipo === 'imagem') {
            html = `<img src="${url}" class="modal-midia-img" alt="Imagem">`;
        } else if (tipo === 'video') {
            // Vídeo em fullscreen com fundo preto
            html = `
                <video 
                    id="modal-video-player" 
                    controls 
                    autoplay 
                    class="modal-midia-video"
                    style="width: 100%; height: 100%; object-fit: contain;"
                >
                    <source src="${url}" type="video/mp4">
                    Seu navegador não suporta vídeo.
                </video>
            `;
        }
        
        content.html(html);
        modal.css('display', 'flex');
        
        // Para vídeo, tentar entrar em fullscreen se suportado
        if (tipo === 'video') {
            setTimeout(() => {
                const video = document.getElementById('modal-video-player');
                if (video) {
                    video.play().catch(e => console.log('Autoplay bloqueado:', e));
                    
                    // Tentar fullscreen quando o vídeo estiver pronto
                    video.addEventListener('loadedmetadata', function() {
                        // Não forçar fullscreen, mas deixar o vídeo ocupar toda a tela do modal
                    });
                }
            }, 100);
        }
        
        // Prevenir scroll do body quando modal estiver aberto
        $('body').css('overflow', 'hidden');
    }
    
    // Tornar função global também para compatibilidade
    window.abrirModalMidia = abrirModalMidia;

    // Fechar modal ao clicar no X ou fora
    $(document).on('click', '.modal-midia-close', function(e) {
        e.stopPropagation();
        fecharModalMidia();
    });
    
    $(document).on('click', '.modal-midia', function(e) {
        // Fechar apenas se clicar no fundo (não no conteúdo)
        if ($(e.target).hasClass('modal-midia')) {
            fecharModalMidia();
        }
    });
    
    // Função para fechar modal
    function fecharModalMidia() {
        const modal = $('#modal-midia');
        const video = document.getElementById('modal-video-player');
        
        // Pausar vídeo se estiver tocando
        if (video) {
            video.pause();
            video.currentTime = 0;
        }
        
        modal.hide();
        $('body').css('overflow', 'auto');
    }
    
    // Fechar modal com ESC
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape' && $('#modal-midia').is(':visible')) {
            fecharModalMidia();
        }
    });

    // Função para escapar HTML e tratar quebras de linha
    function escapeHtml(text) {
        if (!text) return '';
        
        const map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        
        // Escapar HTML
        let escaped = text.toString().replace(/[&<>"']/g, m => map[m]);
        
        // Converter quebras de linha para <br>
        escaped = escaped.replace(/\n/g, '<br>');
        
        return escaped;
    }

    // Emoticons comuns
    const emoticons = ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣', '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯', '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠', '😈', '👿', '👹', '👺', '🤡', '💩', '👻', '💀', '☠️', '👽', '👾', '🤖', '🎃', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾'];

    // Inicializar seletor de emoticons
    function inicializarEmoticons() {
        const emoticonsList = $('#emoticons-list');
        emoticons.forEach(emoji => {
            const emojiBtn = $('<button>')
                .attr('type', 'button')
                .addClass('btn btn-sm m-1')
                .css({
                    'font-size': '20px',
                    'border': 'none',
                    'background': 'transparent',
                    'cursor': 'pointer',
                    'padding': '5px 10px'
                })
                .text(emoji)
                .on('click', function() {
                    const textarea = $('#mensagem-texto');
                    const currentText = textarea.val();
                    const cursorPos = textarea.prop('selectionStart');
                    const textBefore = currentText.substring(0, cursorPos);
                    const textAfter = currentText.substring(cursorPos);
                    textarea.val(textBefore + emoji + textAfter);
                    textarea.focus();
                    textarea.prop('selectionStart', cursorPos + emoji.length);
                    textarea.prop('selectionEnd', cursorPos + emoji.length);
                    $('#emoticons-picker').hide();
                });
            emoticonsList.append(emojiBtn);
        });
    }

    // Toggle seletor de emoticons
    $('#btn-emoticons').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        const picker = $('#emoticons-picker');
        const anexosMenu = $('#anexos-menu');
        
        // Fechar menu de anexos se estiver aberto
        anexosMenu.hide();
        
        if (picker.is(':visible')) {
            picker.hide();
        } else {
            picker.show();
        }
    });

    // Fechar seletor ao clicar fora
    $(document).on('click', function(e) {
        if (!$(e.target).closest('#btn-emoticons, #emoticons-picker').length) {
            $('#emoticons-picker').hide();
        }
        // Fechar menu de anexos ao clicar fora
        if (!$(e.target).closest('#btn-anexo, #anexos-menu').length) {
            $('#anexos-menu').hide();
        }
    });

    // ============================================
    // MENU DE ANEXOS
    // ============================================
    
    // Toggle menu de anexos ao clicar no botão
    $('#btn-anexo').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        const menu = $('#anexos-menu');
        const emoticonsPicker = $('#emoticons-picker');
        
        // Fechar seletor de emoticons se estiver aberto
        emoticonsPicker.hide();
        
        // Toggle menu de anexos
        if (menu.is(':visible')) {
            menu.hide();
        } else {
            menu.show();
        }
    });

    // Fechar menu de anexos ao clicar no X
    $('#btn-fechar-anexos').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#anexos-menu').hide();
    });

    // Efeito hover nas opções do menu de anexos
    $('.btn-anexo-opcao').on('mouseenter', function() {
        $(this).css('background', 'rgba(255, 255, 255, 0.1)');
    }).on('mouseleave', function() {
        $(this).css('background', 'transparent');
    });

    // Handler para cada opção do menu de anexos
    $('.btn-anexo-opcao').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const tipo = $(this).data('tipo');
        let inputId = '';
        
        // Determinar qual input usar baseado no tipo
        switch(tipo) {
            case 'imagem':
                inputId = '#input-imagem';
                break;
            case 'video':
                inputId = '#input-video';
                break;
            case 'documento':
                inputId = '#input-documento';
                break;
        }
        
        // Disparar clique no input de arquivo correspondente
        if (inputId) {
            $(inputId).click();
        }
    });

    // Handler para quando um arquivo é selecionado
    $('#input-imagem').on('change', function(e) {
        const file = this.files[0];
        if (file) {
            enviarImagem(file);
        }
    });

    $('#input-video').on('change', function(e) {
        const file = this.files[0];
        if (file) {
            enviarVideo(file);
        }
    });

    $('#input-documento').on('change', function(e) {
        const file = this.files[0];
        if (file) {
            // Documento ainda não implementado
            alert('Envio de documento ainda não implementado');
            $('#anexos-menu').hide();
            $(this).val('');
        }
    });

    // Função para enviar imagem
    function enviarImagem(file) {
        const contatoId = $('#contato-id').val();
        if (!contatoId) {
            alert('Nenhum contato selecionado');
            $('#anexos-menu').hide();
            $('#input-imagem').val('');
            return;
        }

        // Validar tipo de arquivo
        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
        const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
        const fileExtension = file.name.split('.').pop().toLowerCase();
        
        if (!allowedTypes.includes(file.type) && !allowedExtensions.includes(fileExtension)) {
            alert('Tipo de arquivo não permitido. Use: JPG, PNG, GIF ou WEBP');
            $('#anexos-menu').hide();
            $('#input-imagem').val('');
            return;
        }

        // Validar tamanho (max 16MB)
        if (file.size > 16 * 1024 * 1024) {
            alert('Arquivo muito grande. Tamanho máximo: 16MB');
            $('#anexos-menu').hide();
            $('#input-imagem').val('');
            return;
        }

        // Criar FormData
        const formData = new FormData();
        formData.append('image', file);
        
        // Caption opcional (texto da mensagem se houver)
        const caption = $('#mensagem-texto').val().trim();
        if (caption) {
            formData.append('caption', caption);
        }

        // Fechar menu de anexos
        $('#anexos-menu').hide();

        // Mostrar feedback de envio
        const btnEnviar = $('#btn-enviar');
        const originalHtml = btnEnviar.html();
        btnEnviar.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

        $.ajax({
            url: `/api/chat/contatos/${contatoId}/image`,
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                // Limpar campo de texto
                $('#mensagem-texto').val('').css('height', 'auto');
                
                // Recarregar conversa para mostrar a nova mensagem
                if (contatoSelecionado === contatoId) {
                    setTimeout(function() {
                        carregarConversa(contatoId);
                        scrollParaFinal();
                    }, 500);
                }
            },
            error: function(xhr) {
                console.error('Erro ao enviar imagem:', xhr);
                const errorMsg = xhr.responseJSON?.error || xhr.responseJSON?.message || 'Erro desconhecido';
                alert('Erro ao enviar imagem: ' + errorMsg);
            },
            complete: function() {
                btnEnviar.prop('disabled', false).html(originalHtml);
                $('#input-imagem').val('');
            }
        });
    }

    // Função para enviar vídeo
    function enviarVideo(file) {
        const contatoId = $('#contato-id').val();
        if (!contatoId) {
            alert('Nenhum contato selecionado');
            $('#anexos-menu').hide();
            $('#input-video').val('');
            return;
        }

        // Validar tipo de arquivo
        const allowedTypes = ['video/mp4', 'video/avi', 'video/mov', 'video/wmv', 'video/flv', 'video/webm', 'video/mkv'];
        const allowedExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'];
        const fileExtension = file.name.split('.').pop().toLowerCase();
        
        if (!allowedTypes.includes(file.type) && !allowedExtensions.includes(fileExtension)) {
            alert('Tipo de arquivo não permitido. Use: MP4, AVI, MOV, WMV, FLV, WEBM ou MKV');
            $('#anexos-menu').hide();
            $('#input-video').val('');
            return;
        }

        // Validar tamanho (max 64MB)
        if (file.size > 64 * 1024 * 1024) {
            alert('Arquivo muito grande. Tamanho máximo: 64MB');
            $('#anexos-menu').hide();
            $('#input-video').val('');
            return;
        }

        // Criar FormData
        const formData = new FormData();
        formData.append('video', file);
        
        // Caption opcional (texto da mensagem se houver)
        const caption = $('#mensagem-texto').val().trim();
        if (caption) {
            formData.append('caption', caption);
        }

        // Fechar menu de anexos
        $('#anexos-menu').hide();

        // Mostrar feedback de envio
        const btnEnviar = $('#btn-enviar');
        const originalHtml = btnEnviar.html();
        btnEnviar.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

        $.ajax({
            url: `/api/chat/contatos/${contatoId}/video`,
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                // Limpar campo de texto
                $('#mensagem-texto').val('').css('height', 'auto');
                
                // Recarregar conversa para mostrar a nova mensagem
                if (contatoSelecionado === contatoId) {
                    setTimeout(function() {
                        carregarConversa(contatoId);
                        scrollParaFinal();
                    }, 500);
                }
            },
            error: function(xhr) {
                console.error('Erro ao enviar vídeo:', xhr);
                const errorMsg = xhr.responseJSON?.error || xhr.responseJSON?.message || 'Erro desconhecido';
                alert('Erro ao enviar vídeo: ' + errorMsg);
            },
            complete: function() {
                btnEnviar.prop('disabled', false).html(originalHtml);
                $('#input-video').val('');
            }
        });
    }

    // Ajustar altura do textarea automaticamente
    $('#mensagem-texto').on('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
        if (this.scrollHeight > 120) {
            this.style.overflowY = 'auto';
        } else {
            this.style.overflowY = 'hidden';
        }
    });

    // Enviar mensagem
    $('#form-enviar-mensagem').on('submit', function(e) {
        e.preventDefault();

        const contatoId = $('#contato-id').val();
        const texto = $('#mensagem-texto').val().trim();

        if (!contatoId || !texto) {
            return;
        }

        // Desabilitar botão
        const btn = $('#btn-enviar');
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Enviando...');

        $.ajax({
            url: `/api/chat/contatos/${contatoId}/conversas`,
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                text: texto
            },
            success: function(response) {
                // Limpar campo e resetar altura
                const textarea = $('#mensagem-texto');
                textarea.val('');
                textarea.css('height', 'auto');

                // Fechar seletor de emoticons se estiver aberto
                $('#emoticons-picker').hide();

                // Recarregar conversa para mostrar a nova mensagem
                if (contatoSelecionado === contatoId) {
                    carregarConversa(contatoId);
                    // Garantir scroll após carregar conversa
                    setTimeout(function() {
                        scrollParaFinal();
                    }, 300);
                }
            },
            error: function(xhr) {
                console.error('Erro ao enviar mensagem:', xhr);
                alert('Erro ao enviar mensagem: ' + (xhr.responseJSON?.error || 'Erro desconhecido'));
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fas fa-paper-plane"></i> Enviar');
            }
        });
    });

    // Enviar mensagem com Enter (Shift+Enter para nova linha)
    $('#mensagem-texto').on('keydown', function(e) {
        if (e.which === 13 && !e.shiftKey) {
            e.preventDefault();
            $('#form-enviar-mensagem').submit();
        }
    });

    // Polling para atualizar mensagens
    let isPolling = false; // Flag para evitar múltiplos requests simultâneos
    
    function iniciarPolling(contatoId) {
        // Parar polling anterior
        if (pollingInterval) {
            clearInterval(pollingInterval);
            pollingInterval = null;
        }

        // Polling a cada 5 segundos
        pollingInterval = setInterval(function() {
            // Verificar se já há um request em andamento ou se o contato mudou
            if (isPolling || contatoSelecionado !== contatoId) {
                return;
            }

            isPolling = true;
            
            $.ajax({
                url: `/api/chat/contatos/${contatoId}/conversas`,
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function(response) {
                    const mensagens = response.data || [];
                    const currentCount = $('#mensagens-list .mensagem-bubble').length;
                    
                    // Só atualizar se houver novas mensagens
                    if (mensagens.length > currentCount) {
                        renderizarMensagens(mensagens);
                        // Garantir scroll após receber novas mensagens
                        scrollParaFinal();
                    }
                },
                error: function(xhr) {
                    console.error('Erro no polling:', xhr);
                },
                complete: function() {
                    isPolling = false;
                }
            });
        }, 500);
    }

    // ============================================
    // COMPONENTE DE GRAVAÇÃO DE ÁUDIO
    // ============================================
    
    // Estados: 'idle', 'recording', 'recorded'
    let audioRecordingState = 'idle';
    let mediaRecorder = null;
    let audioChunks = [];
    let audioBlob = null;
    let recordingTimer = null;
    let recordingStartTime = null;
    let audioPreview = null;

    // Verificar suporte do navegador
    function verificarSuporteAudio() {
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            return {
                suportado: false,
                mensagem: 'Seu navegador não suporta gravação de áudio. Use Chrome, Firefox ou Edge.'
            };
        }
        
        if (!window.MediaRecorder) {
            return {
                suportado: false,
                mensagem: 'Seu navegador não suporta MediaRecorder. Use uma versão mais recente.'
            };
        }
        
        return { suportado: true };
    }

    // Atualizar botões de input: mostrar ambos (gravar áudio sempre, enviar quando houver texto)
    function atualizarBotoesInput() {
        const texto = $('#mensagem-texto').val().trim();
        const temTexto = texto.length > 0;
        
        // Se está gravando ou tem áudio gravado, não mostrar botões de texto/áudio
        if (audioRecordingState === 'recording' || audioRecordingState === 'recorded') {
            $('#btn-record-audio').hide();
            $('#btn-enviar').hide();
            return;
        }
        
        // Verificar suporte de áudio antes de mostrar botão de gravar
        const suporte = verificarSuporteAudio();
        
        // Botão de gravar áudio: sempre mostrar se suportado (mesmo com texto)
        if (suporte.suportado) {
            $('#btn-record-audio').show();
        } else {
            $('#btn-record-audio').hide();
        }
        
        // Botão de enviar texto: mostrar quando houver texto
        if (temTexto) {
            $('#btn-enviar').show();
        } else {
            $('#btn-enviar').hide();
        }
    }

    // Formatar tempo em mm:ss
    function formatarTempo(segundos) {
        const mins = Math.floor(segundos / 60);
        const secs = Math.floor(segundos % 60);
        return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
    }

    // Iniciar gravação de áudio
    async function iniciarGravacao() {
        const suporte = verificarSuporteAudio();
        if (!suporte.suportado) {
            alert(suporte.mensagem);
            return;
        }

        try {
            // Solicitar permissão do microfone
            const stream = await navigator.mediaDevices.getUserMedia({ 
                audio: {
                    echoCancellation: true,
                    noiseSuppression: true,
                    autoGainControl: true
                } 
            });

            // Verificar se MediaRecorder suporta audio/ogg
            let mimeType = 'audio/ogg; codecs=opus';
            if (!MediaRecorder.isTypeSupported(mimeType)) {
                // Tentar outros formatos
                if (MediaRecorder.isTypeSupported('audio/webm; codecs=opus')) {
                    mimeType = 'audio/webm; codecs=opus';
                } else if (MediaRecorder.isTypeSupported('audio/webm')) {
                    mimeType = 'audio/webm';
                } else {
                    mimeType = ''; // Usar formato padrão do navegador
                }
            }

            // Criar MediaRecorder
            mediaRecorder = new MediaRecorder(stream, {
                mimeType: mimeType || undefined
            });

            audioChunks = [];

            // Evento quando dados estão disponíveis
            mediaRecorder.ondataavailable = (event) => {
                if (event.data.size > 0) {
                    audioChunks.push(event.data);
                }
            };

            // Evento quando gravação termina
            mediaRecorder.onstop = () => {
                // Criar Blob do áudio com tipo MIME correto
                let blobType = 'audio/ogg';
                if (mimeType.includes('webm')) {
                    blobType = 'audio/webm';
                } else if (mimeType.includes('ogg') || mimeType.includes('opus')) {
                    blobType = 'audio/ogg';
                } else {
                    blobType = mimeType || 'audio/ogg';
                }
                audioBlob = new Blob(audioChunks, { type: blobType });
                
                // Parar todas as tracks do stream
                stream.getTracks().forEach(track => track.stop());
                
                // Mudar para estado recorded
                audioRecordingState = 'recorded';
                atualizarUIEstadoGravacao();
                
                // Configurar preview do áudio
                const audioUrl = URL.createObjectURL(audioBlob);
                const audioElement = document.getElementById('audio-preview');
                audioElement.src = audioUrl;
                
                // Atualizar duração quando metadata carregar
                audioElement.addEventListener('loadedmetadata', function() {
                    const duracao = audioElement.duration;
                    $('#audio-duration').text(formatarTempo(duracao));
                });
            };

            // Iniciar gravação
            mediaRecorder.start();
            audioRecordingState = 'recording';
            recordingStartTime = Date.now();
            
            atualizarUIEstadoGravacao();
            iniciarTimerGravacao();

        } catch (error) {
            console.error('Erro ao iniciar gravação:', error);
            if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') {
                alert('Permissão de microfone negada. Por favor, permita o acesso ao microfone nas configurações do navegador.');
            } else {
                alert('Erro ao acessar o microfone: ' + error.message);
            }
        }
    }

    // Parar gravação
    function pararGravacao() {
        if (mediaRecorder && audioRecordingState === 'recording') {
            mediaRecorder.stop();
            pararTimerGravacao();
        }
    }

    // Iniciar timer de gravação
    function iniciarTimerGravacao() {
        recordingTimer = setInterval(() => {
            if (audioRecordingState === 'recording' && recordingStartTime) {
                const elapsed = Math.floor((Date.now() - recordingStartTime) / 1000);
                $('#audio-recording-timer').text(formatarTempo(elapsed));
            }
        }, 1000);
    }

    // Parar timer de gravação
    function pararTimerGravacao() {
        if (recordingTimer) {
            clearInterval(recordingTimer);
            recordingTimer = null;
        }
    }

    // Atualizar UI baseado no estado
    function atualizarUIEstadoGravacao() {
        const feedback = $('#audio-recording-feedback');
        const player = $('#audio-player-container');
        const textarea = $('#mensagem-texto');
        
        switch(audioRecordingState) {
            case 'idle':
                feedback.hide();
                player.hide();
                textarea.prop('disabled', false);
                atualizarBotoesInput();
                break;
                
            case 'recording':
                feedback.show();
                player.hide();
                textarea.prop('disabled', true);
                $('#btn-record-audio').hide();
                $('#btn-enviar').hide();
                break;
                
            case 'recorded':
                feedback.hide();
                player.show();
                textarea.prop('disabled', false);
                $('#btn-record-audio').hide();
                $('#btn-enviar').hide();
                break;
        }
    }

    // Reproduzir áudio gravado
    function reproduzirAudio() {
        const audioElement = document.getElementById('audio-preview');
        const btnPlay = $('#btn-play-audio');
        
        if (!audioElement || !audioBlob) return;
        
        if (audioElement.paused) {
            audioElement.play();
            btnPlay.html('<i class="fas fa-pause"></i>');
        } else {
            audioElement.pause();
            btnPlay.html('<i class="fas fa-play"></i>');
        }
        
        // Atualizar botão quando áudio terminar
        audioElement.onended = () => {
            btnPlay.html('<i class="fas fa-play"></i>');
        };
    }

    // Excluir áudio gravado
    function excluirAudio() {
        // Parar reprodução se estiver tocando
        const audioElement = document.getElementById('audio-preview');
        if (audioElement) {
            audioElement.pause();
            audioElement.src = '';
            if (audioElement.src) {
                URL.revokeObjectURL(audioElement.src);
            }
        }
        
        // Limpar variáveis
        audioBlob = null;
        audioChunks = [];
        mediaRecorder = null;
        audioRecordingState = 'idle';
        
        // Resetar UI
        atualizarUIEstadoGravacao();
        $('#audio-duration').text('00:00');
        $('#btn-play-audio').html('<i class="fas fa-play"></i>');
    }

    // Enviar áudio
    async function enviarAudio() {
        if (!audioBlob) {
            alert('Nenhum áudio para enviar');
            return;
        }

        const contatoId = $('#contato-id').val();
        if (!contatoId) {
            alert('Nenhum contato selecionado');
            return;
        }

        // Desabilitar botão
        const btn = $('#btn-send-audio');
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

        try {
            // Criar FormData
            const formData = new FormData();
            
            // Determinar extensão e tipo MIME baseado no tipo do Blob
            let extension = 'oga';
            let mimeType = audioBlob.type || 'audio/ogg';
            
            // Normalizar tipo MIME e determinar extensão
            if (mimeType.includes('webm')) {
                extension = 'webm';
                mimeType = 'audio/webm';
            } else if (mimeType.includes('opus')) {
                extension = 'opus';
                mimeType = 'audio/ogg'; // Normalizar para audio/ogg
            } else if (mimeType.includes('ogg') || mimeType.includes('oga')) {
                extension = 'oga';
                mimeType = 'audio/ogg';
            } else if (mimeType.startsWith('audio/')) {
                // Se já é um tipo audio válido, manter
                extension = 'oga'; // Default para oga
            } else {
                // Fallback para ogg se não conseguir determinar
                extension = 'oga';
                mimeType = 'audio/ogg';
            }
            
            // Converter Blob para File com extensão e tipo MIME corretos
            // O nome do arquivo deve ter a extensão correta para o Laravel validar
            const audioFile = new File([audioBlob], `audio.${extension}`, { 
                type: mimeType,
                lastModified: Date.now()
            });
            
            // Adicionar ao FormData com o nome correto
            formData.append('voice', audioFile, `audio.${extension}`);
            
            // Debug: log do arquivo criado
            console.log('🎤 Enviando áudio:', {
                nome: audioFile.name,
                tipo: audioFile.type,
                tamanho: audioFile.size,
                extensao: extension,
                contatoId: contatoId,
                timestamp: new Date().toISOString()
            });
            
            // Log da requisição antes de enviar
            console.log('📤 Fazendo requisição POST para:', `/api/chat/contatos/${contatoId}/voice`);
            
            // Enviar para o endpoint
            const startTime = Date.now();
            const response = await fetch(`/api/chat/contatos/${contatoId}/voice`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            });

            const endTime = Date.now();
            const result = await response.json();
            
            // Log da resposta
            console.log('📥 Resposta recebida:', {
                status: response.status,
                ok: response.ok,
                tempo: `${endTime - startTime}ms`,
                resultado: result
            });

            if (response.ok && result.success) {
                console.log('✅ Áudio enviado com sucesso!');
                
                // Sucesso: resetar estado
                excluirAudio();
                
                // Função para verificar se o áudio apareceu na listagem
                function verificarAudioNaListagem(contatoId, tentativas = 0, maxTentativas = 10) {
                    if (tentativas >= maxTentativas) {
                        console.log('⚠️ Timeout: Áudio não apareceu na listagem após várias tentativas');
                        // Recarregar mesmo assim
                        if (contatoSelecionado === contatoId) {
                            carregarConversa(contatoId);
                            setTimeout(function() {
                                scrollParaFinal();
                            }, 300);
                        }
                        return;
                    }
                    
                    // Aguardar antes de verificar (primeira verificação após 2 segundos)
                    const delay = tentativas === 0 ? 2000 : 1000;
                    
                    setTimeout(() => {
                        if (contatoSelecionado !== contatoId) {
                            return; // Contato mudou, parar verificação
                        }
                        
                        console.log(`🔍 Verificando se áudio apareceu na listagem (tentativa ${tentativas + 1}/${maxTentativas})...`);
                        
                        // Buscar conversas novamente
                        $.ajax({
                            url: `/api/chat/contatos/${contatoId}/conversas`,
                            method: 'GET',
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            success: function(response) {
                                const mensagens = response.data || [];
                                // Verificar se há mensagem de áudio recente (últimos 30 segundos)
                                const agora = Math.floor(Date.now() / 1000);
                                const audioEncontrado = mensagens.some(msg => {
                                    const tipoAudio = (msg.type || '').toLowerCase();
                                    const isAudio = tipoAudio === 'audio' || tipoAudio === 'voice';
                                    const timestamp = msg.timestamp || 0;
                                    const diferenca = agora - timestamp;
                                    return isAudio && msg.from_me && diferenca < 30;
                                });
                                
                                if (audioEncontrado) {
                                    console.log('✅ Áudio encontrado na listagem! Recarregando conversa...');
                                    carregarConversa(contatoId);
                                    setTimeout(function() {
                                        scrollParaFinal();
                                    }, 300);
                                } else {
                                    // Continuar verificando
                                    verificarAudioNaListagem(contatoId, tentativas + 1, maxTentativas);
                                }
                            },
                            error: function(xhr) {
                                console.error('❌ Erro ao verificar áudio na listagem:', xhr);
                                // Continuar tentando
                                verificarAudioNaListagem(contatoId, tentativas + 1, maxTentativas);
                            }
                        });
                    }, delay);
                }
                
                // Iniciar verificação se o áudio apareceu na listagem
                if (contatoSelecionado === contatoId) {
                    verificarAudioNaListagem(contatoId);
                }
            } else {
                console.error('❌ Erro ao enviar áudio:', result);
                throw new Error(result.error || 'Erro ao enviar áudio');
            }

        } catch (error) {
            console.error('Erro ao enviar áudio:', error);
            const errorMessage = error.response?.data?.error || error.message || 'Erro desconhecido';
            alert('Erro ao enviar áudio: ' + errorMessage);
        } finally {
            btn.prop('disabled', false).html('<i class="fas fa-paper-plane"></i>');
        }
    }

    // Event listeners para gravação de áudio
    $('#btn-record-audio').on('click', iniciarGravacao);
    $('#btn-stop-recording').on('click', pararGravacao);
    $('#btn-play-audio').on('click', reproduzirAudio);
    $('#btn-delete-audio').on('click', excluirAudio);
    $('#btn-send-audio').on('click', enviarAudio);

    // Atualizar botões quando texto mudar
    $('#mensagem-texto').on('input', function() {
        if (audioRecordingState === 'idle') {
            atualizarBotoesInput();
        }
    });

    // Inicializar
    inicializarEmoticons();
    carregarContatos();
    atualizarBotoesInput();

    // Recarregar contatos a cada 30 segundos
    setInterval(carregarContatos, 3000);
});
</script>
@endsection