<?php
/**
 * Componente: Chat de Suporte Flutuante
 * 
 * Este componente exibe um chat flutuante no painel do usuário
 * quando o chat está habilitado pelo admin
 */

// Garantir que as dependências estão carregadas
if (!function_exists('chat_habilitado')) {
    require_once __DIR__ . '/../../backend/chat_helper.php';
}

// Garantir conexão com banco
if (!isset($pdo)) {
    require_once __DIR__ . '/../../config/config_db.php';
}

// Verificar se o chat está habilitado
if (!chat_habilitado()) {
    return; // Se não estiver habilitado, não exibe nada
}

$usuario = usuario_logado();
if (!$usuario || $usuario['tipo'] === 'admin') {
    return; // Apenas usuários comuns veem o chat
}

$usuario_id = $usuario['id'];
$usuario_nome = htmlspecialchars($usuario['nome']);

// Obter ou criar conversa
$conversa_id = obter_ou_criar_conversa($usuario_id);
?>

<style>
    /* Chat Flutuante */
    .chat-widget {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        font-family: 'Montserrat', sans-serif;
    }
    
    .chat-toggle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .chat-toggle:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
    }
    
    .chat-toggle.has-unread::after {
        content: '';
        position: absolute;
        top: 5px;
        right: 5px;
        width: 12px;
        height: 12px;
        background: #ef4444;
        border-radius: 50%;
        border: 2px solid white;
    }
    
    .chat-window {
        position: absolute;
        bottom: 80px;
        right: 0;
        width: 380px;
        height: 500px;
        background: var(--bg-card, #ffffff);
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        display: none;
        flex-direction: column;
        overflow: hidden;
    }
    
    [data-theme="dark"] .chat-window {
        background: var(--bg-card, #0f172a);
    }
    
    .chat-window.open {
        display: flex;
    }
    
    .chat-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .chat-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }
    
    .chat-close {
        background: none;
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: background 0.2s;
    }
    
    .chat-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    .chat-finalizar {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: background 0.2s;
    }
    
    .chat-finalizar:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .chat-message {
        display: flex;
        gap: 8px;
        max-width: 80%;
    }
    
    .chat-message.usuario {
        align-self: flex-end;
        flex-direction: row-reverse;
    }
    
    .chat-message.admin {
        align-self: flex-start;
    }
    
    .chat-message-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 14px;
        flex-shrink: 0;
    }
    
    .chat-message.admin .chat-message-avatar {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }
    
    .chat-message-content {
        background: var(--bg-body, #f3f4f6);
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 14px;
        color: var(--text-main, #1f2937);
        line-height: 1.4;
    }
    
    [data-theme="dark"] .chat-message-content {
        background: var(--bg-body, #1e293b);
    }
    
    .chat-message.usuario .chat-message-content {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    
    .chat-message-time {
        font-size: 11px;
        color: var(--text-muted, #6b7280);
        margin-top: 4px;
        padding: 0 4px;
    }
    
    .chat-input-area {
        padding: 16px;
        border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
        display: flex;
        gap: 8px;
    }
    
    .chat-input {
        flex: 1;
        padding: 10px 14px;
        border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
        border-radius: 20px;
        background: var(--bg-body, #f3f4f6);
        color: var(--text-main, #1f2937);
        font-size: 14px;
        font-family: inherit;
        resize: none;
    }
    
    .chat-input:focus {
        outline: none;
        border-color: #667eea;
    }
    
    .chat-send {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s;
        flex-shrink: 0;
    }
    
    .chat-send:hover {
        transform: scale(1.1);
    }
    
    .chat-send:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    /* Scrollbar personalizada */
    .chat-messages::-webkit-scrollbar {
        width: 6px;
    }
    
    .chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .chat-messages::-webkit-scrollbar-thumb {
        background: var(--border-color, rgba(0, 0, 0, 0.2));
        border-radius: 3px;
    }
    
    /* Responsivo */
    @media (max-width: 768px) {
        .chat-window {
            width: calc(100vw - 20px);
            height: calc(100vh - 80px);
            bottom: 10px;
            right: 10px;
        }
        
        .chat-input-area {
            flex-wrap: wrap;
        }
        
        .chat-send {
            width: 36px;
            height: 36px;
            font-size: 14px;
        }
        
        .chat-file-preview {
            font-size: 11px;
            padding: 4px 8px;
        }
        
        .chat-file-preview img {
            width: 30px;
            height: 30px;
        }
    }
    
    @media (max-width: 480px) {
        .chat-window {
            width: 100vw;
            height: 100vh;
            bottom: 0;
            right: 0;
            border-radius: 0;
        }
    }
</style>

<div class="chat-widget" id="chatWidget">
    <button class="chat-toggle" id="chatToggle" onclick="toggleChat()">
        <i class="fas fa-comments"></i>
    </button>
    
    <div class="chat-window" id="chatWindow">
        <div class="chat-header">
            <h3><i class="fas fa-headset"></i> Suporte</h3>
            <div style="display: flex; gap: 8px;">
                <button class="chat-finalizar" onclick="finalizarChat()" title="Finalizar Chat (apaga todas as mensagens)">
                    <i class="fas fa-check-circle"></i>
                </button>
                <button class="chat-close" onclick="toggleChat()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        
        <div class="chat-messages" id="chatMessages">
            <?php
            // Buscar mensagens da conversa (igual ao admin)
            $mensagens_conversa = buscar_mensagens_chat($conversa_id);
            $usuario_admin = null;
            $foto_admin = null;
            
            // Buscar foto do admin
            try {
                $stmt_admin = $pdo->prepare("SELECT id, foto_perfil FROM usuarios WHERE tipo = 'admin' LIMIT 1");
                $stmt_admin->execute();
                $usuario_admin = $stmt_admin->fetch(PDO::FETCH_ASSOC);
                $foto_admin = $usuario_admin['foto_perfil'] ?? null;
            } catch (Exception $e) {
                // Ignorar erro
            }
            
            // Buscar foto do usuário
            $foto_usuario = obter_foto_perfil_usuario($usuario_id);
            
            // Se não há mensagens, mostrar mensagem de boas-vindas
            if (empty($mensagens_conversa)): ?>
                <div class="chat-message admin" data-msg-id="0">
                    <div class="chat-message-avatar">
                        <?php if ($foto_admin): 
                            $foto_path = $foto_admin;
                            if (strpos($foto_path, 'public/') === 0) {
                                $foto_path = '/' . $foto_path;
                            } elseif (strpos($foto_path, '/') !== 0) {
                                $foto_path = '/' . $foto_path;
                            }
                        ?>
                            <img src="<?= htmlspecialchars($foto_path) ?>" alt="Admin" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" onerror="this.style.display='none'; this.parentElement.innerHTML='A'">
                        <?php else: ?>
                            A
                        <?php endif; ?>
                    </div>
                    <div>
                        <div class="chat-message-content">
                            Olá! Como posso ajudá-lo hoje?
                        </div>
                        <div class="chat-message-time">Agora</div>
                    </div>
                </div>
            <?php else: 
                // Renderizar todas as mensagens (igual ao admin)
                foreach ($mensagens_conversa as $msg): 
                    $foto_remetente = $msg['tipo_remetente'] === 'admin' ? $foto_admin : $foto_usuario;
                    $nome_remetente = $msg['tipo_remetente'] === 'admin' ? 'Admin' : $usuario_nome;
                    $inicial = strtoupper(substr($nome_remetente, 0, 1));
            ?>
                <div class="chat-message <?= $msg['tipo_remetente'] === 'admin' ? 'admin' : 'usuario' ?>" data-msg-id="<?= $msg['id'] ?>">
                    <div class="chat-message-avatar">
                        <?php if ($foto_remetente): 
                            $foto_path = $foto_remetente;
                            if (strpos($foto_path, 'public/') === 0) {
                                $foto_path = '/' . $foto_path;
                            } elseif (strpos($foto_path, '/') !== 0) {
                                $foto_path = '/' . $foto_path;
                            }
                        ?>
                            <img src="<?= htmlspecialchars($foto_path) ?>" alt="<?= htmlspecialchars($nome_remetente) ?>" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" onerror="this.style.display='none'; this.parentElement.innerHTML='<?= $inicial ?>'">
                        <?php else: ?>
                            <?= $inicial ?>
                        <?php endif; ?>
                    </div>
                    <div>
                        <div class="chat-message-content">
                            <?= nl2br(htmlspecialchars($msg['mensagem'] ?? '')) ?>
                        </div>
                        <div class="chat-message-time">
                            <?= date('d/m/Y H:i', strtotime($msg['created_at'])) ?>
                        </div>
                    </div>
                </div>
            <?php 
                endforeach;
            endif; 
            ?>
        </div>
        
        <div class="chat-input-area">
            <textarea 
                class="chat-input" 
                id="chatInput" 
                placeholder="Digite sua mensagem..."
                rows="1"
                onkeydown="handleChatKeydown(event)"
            ></textarea>
            <button class="chat-send" id="chatSend" onclick="enviarMensagem()">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>
</div>

<script>
(function() {
    'use strict';
    
    const conversaId = <?= $conversa_id ?>;
    const usuarioId = <?= $usuario_id ?>;
    let ultimaMensagemId = null;
    let intervaloVerificacao = null;
    let chatAberto = false;
    
    // Inicializar após DOM carregar (igual ao admin)
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.getElementById('chatMessages');
        if (container) {
            // Obter última mensagem ID das mensagens já renderizadas
            const lastMsg = container.querySelector('[data-msg-id]:not([data-msg-id="0"])');
            if (lastMsg) {
                ultimaMensagemId = parseInt(lastMsg.getAttribute('data-msg-id'));
            }
            scrollToBottom();
            
            // Iniciar verificação se chat estiver aberto
            const chatWindow = document.getElementById('chatWindow');
            if (chatWindow && chatWindow.classList.contains('open')) {
                chatAberto = true;
                iniciarVerificacaoMensagens();
            }
        }
    });
    
    /**
     * Alternar abertura/fechamento do chat
     */
    window.toggleChat = function() {
        const chatWindow = document.getElementById('chatWindow');
        if (!chatWindow) {
            console.error('Chat window não encontrado');
            return;
        }
        
        chatAberto = !chatAberto;
        
        if (chatAberto) {
            chatWindow.classList.add('open');
            // Atualizar última mensagem ID
            const container = document.getElementById('chatMessages');
            if (container) {
                const lastMsg = container.querySelector('[data-msg-id]:not([data-msg-id="0"])');
                if (lastMsg) {
                    ultimaMensagemId = parseInt(lastMsg.getAttribute('data-msg-id'));
                }
            }
            // Iniciar verificação (igual ao admin)
            iniciarVerificacaoMensagens();
            scrollToBottom();
            const input = document.getElementById('chatInput');
            if (input) {
                setTimeout(() => input.focus(), 200);
            }
        } else {
            chatWindow.classList.remove('open');
            pararVerificacaoMensagens();
        }
    };
    
    /**
     * Carregar mensagens da conversa (igual ao admin - apenas novas mensagens)
     */
    function carregarMensagens(force = false) {
        // As mensagens já foram renderizadas no PHP, apenas verificar novas
        verificarNovasMensagens();
    }
    
    /**
     * Adicionar mensagem ao chat (otimizado com cache de fotos)
     */
    function adicionarMensagem(mensagem, isNova = true) {
        const container = document.getElementById('chatMessages');
        if (!container) {
            console.error('Container chatMessages não encontrado ao adicionar mensagem');
            return;
        }
        
        // Verificar se a mensagem já existe
        const existingMsg = container.querySelector(`[data-msg-id="${mensagem.id}"]`);
        if (existingMsg) {
            console.log('Mensagem já existe:', mensagem.id);
            return; // Não adicionar duplicatas
        }
        
        const isUsuario = mensagem.tipo_remetente === 'usuario';
        const nome = mensagem.remetente_nome || (isUsuario ? '<?= $usuario_nome ?>' : 'Admin');
        const inicial = nome.charAt(0).toUpperCase();
        
        // Tratar data
        let hora = 'Agora';
        if (mensagem.created_at) {
            try {
                hora = new Date(mensagem.created_at).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
            } catch (e) {
                console.error('Erro ao formatar data:', e);
            }
        }
        
        // Preparar avatar com foto de perfil (usar cache se disponível)
        let avatarHtml = inicial;
        if (mensagem.foto_perfil) {
            let fotoPath = mensagem.foto_perfil;
            if (fotoPath.indexOf('public/') === 0) {
                fotoPath = '/' + fotoPath;
            } else if (fotoPath.indexOf('/') !== 0) {
                fotoPath = '/' + fotoPath;
            }
            // Cache da foto
            if (mensagem.remetente_id) {
                fotoPerfilCache[mensagem.remetente_id] = fotoPath;
            }
            avatarHtml = `<img src="${escapeHtml(fotoPath)}" alt="${escapeHtml(nome)}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" onerror="this.style.display='none'; this.parentElement.innerHTML='${inicial}'">`;
        } else if (mensagem.remetente_id && fotoPerfilCache[mensagem.remetente_id]) {
            // Usar foto do cache se disponível
            avatarHtml = `<img src="${escapeHtml(fotoPerfilCache[mensagem.remetente_id])}" alt="${escapeHtml(nome)}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" onerror="this.style.display='none'; this.parentElement.innerHTML='${inicial}'">`;
        }
        
        // Conteúdo da mensagem
        let conteudoHtml = escapeHtml(mensagem.mensagem || '').replace(/\n/g, '<br>');
        
        const messageDiv = document.createElement('div');
        messageDiv.className = `chat-message ${mensagem.tipo_remetente}`;
        messageDiv.setAttribute('data-msg-id', mensagem.id);
        messageDiv.innerHTML = `
            <div class="chat-message-avatar">${avatarHtml}</div>
            <div>
                <div class="chat-message-content">${conteudoHtml}</div>
                <div class="chat-message-time">${hora}</div>
            </div>
        `;
        
        try {
            if (isNova) {
                container.appendChild(messageDiv);
                console.log('Mensagem adicionada ao final:', mensagem.id, mensagem.tipo_remetente);
            } else {
                // Se não há mensagens, adicionar no final
                if (container.children.length === 0) {
                    container.appendChild(messageDiv);
                } else {
                    container.insertBefore(messageDiv, container.firstChild);
                }
                console.log('Mensagem adicionada no início:', mensagem.id, mensagem.tipo_remetente);
            }
            
            scrollToBottom();
        } catch (error) {
            console.error('Erro ao adicionar mensagem ao DOM:', error, mensagem);
        }
    }
    
    /**
     * Enviar mensagem
     */
    window.enviarMensagem = function() {
        const input = document.getElementById('chatInput');
        const mensagem = input.value.trim();
        
        if (!mensagem) return;
        
        // Desabilitar botão
        const sendBtn = document.getElementById('chatSend');
        sendBtn.disabled = true;
        
        const formData = new FormData();
        formData.append('conversa_id', conversaId);
        formData.append('remetente_id', usuarioId);
        formData.append('tipo_remetente', 'usuario');
        formData.append('mensagem', mensagem);
        
        fetch('../../backend/api/chat_enviar.php', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            // Verificar se a resposta é JSON
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                return response.text().then(text => {
                    console.error('Resposta não é JSON:', text);
                    throw new Error('Resposta inválida do servidor');
                });
            }
            return response.json();
        })
        .then(data => {
            if (data && data.success) {
                // Limpar campos
                input.value = '';
                input.style.height = 'auto';
                
                // Se retornou a mensagem, adicionar imediatamente
                if (data.mensagem && data.mensagem.id) {
                    // Adicionar dados necessários
                    data.mensagem.remetente_id = usuarioId;
                    data.mensagem.remetente_nome = '<?= $usuario_nome ?>';
                    data.mensagem.tipo_remetente = 'usuario';
                    if (!data.mensagem.foto_perfil) {
                        data.mensagem.foto_perfil = null;
                    }
                    adicionarMensagem(data.mensagem, true);
                    ultimaMensagemId = Math.max(ultimaMensagemId || 0, parseInt(data.mensagem.id));
                    scrollToBottom();
                } else {
                    // Se não retornou a mensagem, recarregar mensagens após um breve delay
                    setTimeout(() => {
                        verificarNovasMensagens();
                    }, 300);
                }
            } else {
                const errorMsg = (data && data.error) ? data.error : 'Tente novamente.';
                console.error('Erro ao enviar mensagem:', errorMsg, data);
                // Não mostrar alert se a mensagem foi enviada mas não retornou
                if (data && data.message) {
                    // Mensagem foi enviada, apenas recarregar
                    setTimeout(() => {
                        verificarNovasMensagens();
                    }, 300);
                } else {
                    alert('Erro ao enviar mensagem: ' + errorMsg);
                }
            }
        })
        .catch(error => {
            console.error('Erro ao enviar mensagem:', error);
            // Verificar se a mensagem pode ter sido enviada mesmo com erro na resposta
            // Recarregar mensagens após um delay para verificar
            setTimeout(() => {
                verificarNovasMensagens();
            }, 1000);
            // Não mostrar alert imediatamente, apenas se realmente falhar
        })
        .finally(() => {
            sendBtn.disabled = false;
        });
    };
    
    /**
     * Verificar novas mensagens periodicamente (apenas novas, sem recarregar todas)
     */
    function verificarNovasMensagens() {
        if (!chatAberto && ultimaMensagemId) {
            // Se chat fechado, verificar apenas se há novas mensagens do admin
            fetch(`../../backend/api/chat_mensagens.php?conversa_id=${conversaId}&ultima_mensagem_id=${ultimaMensagemId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Erro na resposta');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data && data.success && data.mensagens && data.mensagens.length > 0) {
                        let temNovaMensagemAdmin = false;
                        data.mensagens.forEach(msg => {
                            if (msg.tipo_remetente === 'admin') {
                                temNovaMensagemAdmin = true;
                                ultimaMensagemId = Math.max(ultimaMensagemId || 0, parseInt(msg.id));
                            }
                        });
                        
                        if (temNovaMensagemAdmin) {
                            criarToastNotificacaoChat('Nova mensagem do suporte', 'Você recebeu uma nova mensagem do suporte. Clique para abrir o chat.');
                            const toggle = document.getElementById('chatToggle');
                            if (toggle) {
                                toggle.classList.add('has-unread');
                            }
                        }
                    }
                })
                .catch(error => {
                    console.error('Erro ao verificar mensagens (chat fechado):', error);
                });
            return;
        }
        
        // Se chat aberto, adicionar apenas novas mensagens (igual ao admin)
        if (chatAberto) {
            const container = document.getElementById('chatMessages');
            if (!container) {
                return;
            }
            
            // Buscar todas as mensagens (igual ao admin)
            fetch(`../../backend/api/chat_mensagens.php?conversa_id=${conversaId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Erro na resposta: ' + response.status);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data && data.success && data.mensagens) {
                        data.mensagens.forEach(msg => {
                            const existingMsg = container.querySelector(`[data-msg-id="${msg.id}"]`);
                            if (!existingMsg) {
                                // Criar mensagem igual ao admin
                                const msgDiv = document.createElement('div');
                                msgDiv.className = `chat-message ${msg.tipo_remetente}`;
                                msgDiv.setAttribute('data-msg-id', msg.id);
                                
                                const nomeRemetente = msg.remetente_nome || (msg.tipo_remetente === 'admin' ? 'Admin' : '<?= $usuario_nome ?>');
                                const inicial = nomeRemetente.charAt(0).toUpperCase();
                                let avatarHtml = inicial;
                                
                                if (msg.foto_perfil) {
                                    let fotoPath = msg.foto_perfil;
                                    if (fotoPath.indexOf('public/') === 0) {
                                        fotoPath = '/' + fotoPath;
                                    } else if (fotoPath.indexOf('/') !== 0) {
                                        fotoPath = '/' + fotoPath;
                                    }
                                    avatarHtml = `<img src="${escapeHtml(fotoPath)}" alt="${escapeHtml(nomeRemetente)}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" onerror="this.style.display='none'; this.parentElement.innerHTML='${inicial}'">`;
                                }
                                
                                let conteudoHtml = escapeHtml(msg.mensagem || '').replace(/\n/g, '<br>');
                                
                                
                                const hora = new Date(msg.created_at).toLocaleString('pt-BR');
                                
                                msgDiv.innerHTML = `
                                    <div class="chat-message-avatar">${avatarHtml}</div>
                                    <div>
                                        <div class="chat-message-content">${conteudoHtml}</div>
                                        <div class="chat-message-time">${hora}</div>
                                    </div>
                                `;
                                
                                container.appendChild(msgDiv);
                                ultimaMensagemId = Math.max(ultimaMensagemId || 0, parseInt(msg.id));
                                
                                // Remover mensagem de boas-vindas se existir
                                const welcomeMsg = container.querySelector('[data-msg-id="0"]');
                                if (welcomeMsg) {
                                    welcomeMsg.remove();
                                }
                            }
                        });
                        
                        scrollToBottom();
                    }
                })
                .catch(error => {
                    console.error('Erro ao verificar mensagens (chat aberto):', error);
                });
        }
    }
    
    /**
     * Criar toast de notificação de chat
     */
    function criarToastNotificacaoChat(titulo, mensagem) {
        // Usar o sistema de toast existente se disponível
        if (typeof criarToast === 'function') {
            criarToast(titulo, mensagem, 'info');
        } else {
            // Criar toast manualmente
            const container = document.getElementById('toastContainer') || document.body;
            const toast = document.createElement('div');
            toast.className = 'toast toast-info';
            toast.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 10001; background: var(--bg-card); padding: 16px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); max-width: 400px;';
            toast.innerHTML = `
                <div style="display: flex; align-items: flex-start; gap: 12px;">
                    <div style="font-size: 24px;">💬</div>
                    <div style="flex: 1;">
                        <div style="font-weight: 700; font-size: 14px; margin-bottom: 4px;">${titulo}</div>
                        <div style="font-size: 13px; color: var(--text-muted);">${mensagem}</div>
                    </div>
                    <button onclick="this.parentElement.parentElement.remove()" style="background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-muted);">×</button>
                </div>
            `;
            container.appendChild(toast);
            setTimeout(() => toast.remove(), 5000);
        }
    }
    
    /**
     * Iniciar verificação periódica
     */
    function iniciarVerificacaoMensagens() {
        // Limpar intervalo anterior se existir
        if (intervaloVerificacao) {
            clearInterval(intervaloVerificacao);
        }
        // Iniciar verificação a cada 3 segundos (igual ao admin)
        intervaloVerificacao = setInterval(verificarNovasMensagens, 3000);
    }
    
    /**
     * Parar verificação
     */
    function pararVerificacaoMensagens() {
        if (intervaloVerificacao) {
            clearInterval(intervaloVerificacao);
        }
    }
    
    /**
     * Scroll para o final
     */
    function scrollToBottom() {
        const container = document.getElementById('chatMessages');
        container.scrollTop = container.scrollHeight;
    }
    
    /**
     * Escapar HTML
     */
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    /**
     * Handle Enter key
     */
    window.handleChatKeydown = function(event) {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            enviarMensagem();
        }
    };
    
    // Auto-resize textarea
    const input = document.getElementById('chatInput');
    if (input) {
        input.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = Math.min(this.scrollHeight, 100) + 'px';
        });
    }
    
    
    
    /**
     * Finalizar chat (apaga todas as mensagens)
     */
    window.finalizarChat = function() {
        if (!confirm('Tem certeza que deseja finalizar o chat? Todas as mensagens serão apagadas permanentemente.')) {
            return;
        }
        
        fetch('../../backend/api/chat_finalizar.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({
                conversa_id: conversaId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Limpar mensagens do container
                const container = document.getElementById('chatMessages');
                container.innerHTML = `
                    <div class="chat-message admin" data-msg-id="0">
                        <div class="chat-message-avatar">A</div>
                        <div>
                            <div class="chat-message-content">
                                Chat finalizado. Todas as mensagens foram apagadas.
                            </div>
                            <div class="chat-message-time">Agora</div>
                        </div>
                    </div>
                `;
                ultimaMensagemId = null;
                toggleChat(); // Fechar chat
            } else {
                alert('Erro ao finalizar chat. Tente novamente.');
            }
        })
        .catch(error => {
            console.error('Erro ao finalizar chat:', error);
            alert('Erro ao finalizar chat. Tente novamente.');
        });
    };
})();
</script>

