<?php
/**
 * Página: Chat de Suporte - Admin
 * 
 * Permite ao admin gerenciar o chat (habilitar/desabilitar) e conversar com usuários
 */

require_once __DIR__ . '/../../config/config_db.php';
require_once __DIR__ . '/../../backend/auth_helper.php';
require_once __DIR__ . '/../../backend/chat_helper.php';

// Função para obter foto de perfil
if (!function_exists('obter_foto_perfil_usuario')) {
    function obter_foto_perfil_usuario($usuario_id) {
        global $pdo;
        try {
            $stmt = $pdo->prepare("SELECT foto_perfil FROM usuarios WHERE id = ? LIMIT 1");
            $stmt->execute([$usuario_id]);
            $dados = $stmt->fetch(PDO::FETCH_ASSOC);
            return $dados['foto_perfil'] ?? null;
        } catch (PDOException $e) {
            error_log("Erro ao buscar foto de perfil: " . $e->getMessage());
            return null;
        }
    }
}

$mensagem = '';
$tipo_mensagem = '';

// Processar ação de habilitar/desabilitar chat
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['acao'])) {
    if ($_POST['acao'] === 'toggle_chat') {
        $habilitado = isset($_POST['chat_habilitado']) && $_POST['chat_habilitado'] === '1';
        if (definir_status_chat($habilitado)) {
            $mensagem = $habilitado ? 'Chat habilitado com sucesso!' : 'Chat desabilitado com sucesso!';
            $tipo_mensagem = 'success';
        } else {
            $mensagem = 'Erro ao alterar status do chat.';
            $tipo_mensagem = 'error';
        }
    }
    
    // Processar envio de mensagem do admin
    if ($_POST['acao'] === 'enviar_mensagem') {
        $conversa_id_msg = intval($_POST['conversa_id'] ?? 0);
        $mensagem_texto = trim($_POST['mensagem'] ?? '');
        $usuario = usuario_logado();
        if ($conversa_id_msg > 0 && !empty($mensagem_texto)) {
            if (enviar_mensagem_chat($conversa_id_msg, $usuario['id'], 'admin', $mensagem_texto, null)) {
                $mensagem = 'Mensagem enviada com sucesso!';
                $tipo_mensagem = 'success';
            } else {
                $mensagem = 'Erro ao enviar mensagem.';
                $tipo_mensagem = 'error';
            }
        }
    }
}

$chat_habilitado = chat_habilitado();
$conversas = buscar_conversas_admin();

// Obter conversa específica se solicitada
$conversa_id = isset($_GET['conversa']) ? intval($_GET['conversa']) : 0;
$conversa_atual = null;
$mensagens_conversa = [];

if ($conversa_id > 0) {
    try {
        $stmt = $pdo->prepare("
            SELECT c.*, u.nome as usuario_nome, u.email as usuario_email
            FROM chat_conversas c
            INNER JOIN usuarios u ON u.id = c.usuario_id
            WHERE c.id = ?
        ");
        $stmt->execute([$conversa_id]);
        $conversa_atual = $stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($conversa_atual) {
            // Atualizar status para "em_atendimento" e atribuir ao admin atual
            $usuario = usuario_logado();
            $stmt_update = $pdo->prepare("
                UPDATE chat_conversas 
                SET status = 'em_atendimento', admin_id = ?, updated_at = NOW()
                WHERE id = ?
            ");
            $stmt_update->execute([$usuario['id'], $conversa_id]);
            
            // Buscar mensagens
            $mensagens_conversa = buscar_mensagens_chat($conversa_id);
        }
    } catch (PDOException $e) {
        error_log("Erro ao buscar conversa: " . $e->getMessage());
    }
}
?>

<style>
    .suporte-container {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .config-card {
        background: var(--bg-card);
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 30px;
        box-shadow: var(--shadow-soft);
        border: 1px solid var(--border-color);
    }
    
    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }
    
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }
    
    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: var(--bg-card, white);
        transition: .4s;
        border-radius: 50%;
    }
    
    input:checked + .toggle-slider {
        background-color: #10b981;
    }
    
    input:checked + .toggle-slider:before {
        transform: translateX(26px);
    }
    
    .conversas-list {
        display: grid;
        gap: 12px;
        max-height: 500px;
        overflow-y: auto;
    }
    
    .conversa-item {
        background: var(--bg-card);
        border-radius: 12px;
        padding: 16px;
        border: 1px solid var(--border-color);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .conversa-item:hover {
        box-shadow: var(--shadow-soft);
        transform: translateY(-2px);
    }
    
    .conversa-item.active {
        background: var(--bg-body);
        border-color: #667eea;
    }
    
    .conversa-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }
    
    .badge-nao-lidas {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ef4444;
        color: white;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 18px;
        height: 18px;
        cursor: pointer;
        transition: all 0.2s;
        margin-left: 8px;
    }
    
    .badge-nao-lidas:hover {
        background: #dc2626;
        transform: scale(1.1);
    }
    
    .badge-nao-lidas.hidden {
        display: none;
    }
    
    /* Estilo antigo mantido para compatibilidade */
    .badge-nao-lidas-old {
        background: #ef4444;
        color: white;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
    }
    
    .chat-message-admin {
        display: flex;
        gap: 12px;
        max-width: 80%;
        margin-bottom: 12px;
    }
    
    .chat-message-admin.admin {
        align-self: flex-end;
        flex-direction: row-reverse;
        margin-left: auto;
    }
    
    .chat-message-admin.usuario {
        align-self: flex-start;
    }
    
    .chat-message-avatar-admin {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 14px;
        flex-shrink: 0;
    }
    
    .chat-message-admin.usuario .chat-message-avatar-admin {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .admin-chat-file-preview {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        background: var(--bg-card);
        border-radius: 8px;
        margin: 4px;
        font-size: 12px;
    }
    
    .admin-chat-file-preview img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 4px;
    }
    
    .admin-chat-file-preview .file-remove {
        background: #ef4444;
        color: white;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        cursor: pointer;
        font-size: 12px;
    }
    
    /* Responsivo */
    @media (max-width: 768px) {
        .chat-interface {
            flex-direction: column;
        }
        
        .chat-sidebar {
            width: 100%;
            max-height: 300px;
        }
        
        .chat-main {
            width: 100%;
        }
        
        .chat-message-admin {
            max-width: 90%;
        }
    }
    
    .chat-message-content-admin {
        background: var(--bg-card);
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 14px;
        color: var(--text-main);
        line-height: 1.5;
        border: 1px solid var(--border-color);
    }
    
    .chat-message-admin.admin .chat-message-content-admin {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
    }
    
    
    .chat-message-time-admin {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 4px;
        padding: 0 4px;
    }
</style>

<div class="suporte-container">
    <h2 style="margin-bottom: 30px;"><i class="fas fa-headset"></i> Chat de Suporte</h2>
    
    <?php if ($mensagem): ?>
        <div class="mensagem <?= $tipo_mensagem ?>" style="padding: 15px; border-radius: 8px; margin-bottom: 20px; background: <?= $tipo_mensagem === 'success' ? '#d1fae5' : '#fee2e2' ?>; color: <?= $tipo_mensagem === 'success' ? '#065f46' : '#991b1b' ?>;">
            <?= htmlspecialchars($mensagem) ?>
        </div>
    <?php endif; ?>
    
    <div class="config-card">
        <h3 style="margin-bottom: 16px;">Configuração do Chat</h3>
        <form method="POST">
            <input type="hidden" name="acao" value="toggle_chat">
            <div style="display: flex; align-items: center; gap: 16px;">
                <label style="font-weight: 600; color: var(--text-main);">
                    Chat Habilitado:
                </label>
                <label class="toggle-switch">
                    <input type="checkbox" name="chat_habilitado" value="1" <?= $chat_habilitado ? 'checked' : '' ?> onchange="this.form.submit()">
                    <span class="toggle-slider"></span>
                </label>
                <span style="color: var(--text-muted); font-size: 14px;">
                    <?= $chat_habilitado ? 'O chat está visível para os usuários' : 'O chat está oculto para os usuários' ?>
                </span>
            </div>
        </form>
    </div>
    
    <div style="display: grid; grid-template-columns: <?= $conversa_atual ? '350px 1fr' : '1fr' ?>; gap: 20px;">
        <!-- Lista de Conversas -->
        <div class="config-card" style="margin-bottom: 0;">
            <h3 style="margin-bottom: 20px;">Conversas</h3>
            <?php if (empty($conversas)): ?>
                <p style="color: var(--text-muted); text-align: center; padding: 40px;">
                    Nenhuma conversa ainda.
                </p>
            <?php else: ?>
                <div class="conversas-list">
                    <?php foreach ($conversas as $conv): ?>
                        <div class="conversa-item <?= $conversa_atual && $conv['id'] == $conversa_atual['id'] ? 'active' : '' ?>" 
                             onclick="abrirConversa(<?= $conv['id'] ?>)">
                            <div class="conversa-header">
                                <div>
                                    <strong><?= htmlspecialchars($conv['usuario_nome']) ?></strong>
                                    <span style="color: var(--text-muted); font-size: 14px; margin-left: 8px;">
                                        <?= htmlspecialchars($conv['usuario_email']) ?>
                                    </span>
                                </div>
                                <?php if ($conv['mensagens_nao_lidas'] > 0): ?>
                                    <span class="badge-nao-lidas" onclick="event.stopPropagation(); marcarConversaLida(<?= $conv['id'] ?>, this)" title="Clique para marcar como lida">
                                        <?= $conv['mensagens_nao_lidas'] ?>
                                    </span>
                                <?php endif; ?>
                            </div>
                            <div style="color: var(--text-muted); font-size: 13px;">
                                Status: <?= ucfirst($conv['status']) ?>
                                <?php if ($conv['ultima_mensagem_at']): ?>
                                    | <?= date('d/m/Y H:i', strtotime($conv['ultima_mensagem_at'])) ?>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
        
        <!-- Área de Chat -->
        <?php if ($conversa_atual): ?>
            <div class="config-card" style="margin-bottom: 0; display: flex; flex-direction: column; height: 600px;">
                <div style="border-bottom: 1px solid var(--border-color); padding-bottom: 16px; margin-bottom: 16px;">
                    <h3 style="margin: 0;">
                        Conversa com <?= htmlspecialchars($conversa_atual['usuario_nome']) ?>
                    </h3>
                    <p style="color: var(--text-muted); font-size: 14px; margin: 4px 0 0 0;">
                        <?= htmlspecialchars($conversa_atual['usuario_email']) ?>
                    </p>
                </div>
                
                <div id="chatMessagesAdmin" style="flex: 1; overflow-y: auto; padding: 16px; background: var(--bg-body); border-radius: 8px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px;">
                    <?php 
                    $usuario_admin = usuario_logado();
                    $foto_admin = obter_foto_perfil_usuario($usuario_admin['id']);
                    $foto_usuario = obter_foto_perfil_usuario($conversa_atual['usuario_id']);
                    foreach ($mensagens_conversa as $msg): 
                        $foto_remetente = $msg['tipo_remetente'] === 'admin' ? $foto_admin : $foto_usuario;
                        $nome_remetente = $msg['tipo_remetente'] === 'admin' ? 'Admin' : $conversa_atual['usuario_nome'];
                        $inicial = strtoupper(substr($nome_remetente, 0, 1));
                    ?>
                        <div class="chat-message-admin <?= $msg['tipo_remetente'] === 'admin' ? 'admin' : 'usuario' ?>" data-msg-id="<?= $msg['id'] ?>">
                            <div class="chat-message-avatar-admin">
                                <?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-admin">
                                    <?php 
                                    // Construir conteúdo da mensagem
                                    $conteudo_html = '';
                                    
                                    // Adicionar texto da mensagem se existir
                                    if (!empty($msg['mensagem']) && trim($msg['mensagem']) !== '') {
                                        $conteudo_html = nl2br(htmlspecialchars($msg['mensagem']));
                                    }
                                    
                                    
                                    // Exibir conteúdo (ou espaço em branco se vazio)
                                    echo $conteudo_html ?: '&nbsp;';
                                    ?>
                                </div>
                                <div class="chat-message-time-admin">
                                    <?= date('d/m/Y H:i', strtotime($msg['created_at'])) ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                
                <div style="display: flex; flex-direction: column; gap: 8px;">
                    <div style="display: flex; gap: 8px; align-items: flex-end;">
                        <form method="POST" id="formChatAdmin" style="flex: 1; display: flex; gap: 8px;" onsubmit="return enviarMensagemAdmin(event)">
                            <input type="hidden" name="acao" value="enviar_mensagem">
                            <input type="hidden" name="conversa_id" value="<?= $conversa_id ?>">
                            <textarea name="mensagem" id="chatInputAdmin" placeholder="Digite sua mensagem..." 
                                      style="flex: 1; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; resize: none; min-height: 50px; font-family: inherit;" 
                                      rows="2"></textarea>
                            <button type="submit" style="padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; flex-shrink: 0;">
                                <i class="fas fa-paper-plane"></i> Enviar
                            </button>
                        </form>
                        <button onclick="finalizarChatAdmin(<?= $conversa_id ?>)" style="padding: 12px 20px; background: #ef4444; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0;" title="Finalizar Chat (apaga todas as mensagens)">
                            <i class="fas fa-check-circle"></i> Finalizar
                        </button>
                    </div>
                </div>
            </div>
        <?php else: ?>
            <div class="config-card" style="margin-bottom: 0; display: flex; align-items: center; justify-content: center; min-height: 400px;">
                <p style="color: var(--text-muted); text-align: center;">
                    Selecione uma conversa para começar a conversar
                </p>
            </div>
        <?php endif; ?>
    </div>
</div>

<script>
function abrirConversa(conversaId) {
    window.location.href = '?page=suporte&conversa=' + conversaId;
}

// Auto-scroll para o final das mensagens
document.addEventListener('DOMContentLoaded', function() {
    const chatContainer = document.getElementById('chatMessagesAdmin');
    if (chatContainer) {
        chatContainer.scrollTop = chatContainer.scrollHeight;
        
        // Auto-refresh mensagens a cada 3 segundos
        <?php if ($conversa_atual): ?>
        setInterval(function() {
            fetch('../../backend/api/chat_mensagens.php?conversa_id=<?= $conversa_id ?>')
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.mensagens) {
                        data.mensagens.forEach(msg => {
                            const existingMsg = chatContainer.querySelector(`[data-msg-id="${msg.id}"]`);
                            if (!existingMsg) {
                                const msgDiv = document.createElement('div');
                                msgDiv.className = `chat-message-admin ${msg.tipo_remetente}`;
                                msgDiv.dataset.msgId = msg.id;
                                const nomeRemetente = msg.remetente_nome || (msg.tipo_remetente === 'admin' ? 'Admin' : '<?= $conversa_atual['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}'">`;
                                }
                                // Construir conteúdo da mensagem
                                let conteudoHtml = '';
                                
                                // Adicionar texto da mensagem se existir
                                if (msg.mensagem && msg.mensagem.trim() !== '') {
                                    conteudoHtml = escapeHtml(msg.mensagem).replace(/\n/g, '<br>');
                                }
                                
                                
                                console.log('Conteúdo HTML final:', conteudoHtml);
                                
                                msgDiv.innerHTML = `
                                    <div class="chat-message-avatar-admin">${avatarHtml}</div>
                                    <div>
                                        <div class="chat-message-content-admin">${conteudoHtml || '&nbsp;'}</div>
                                        <div class="chat-message-time-admin">${new Date(msg.created_at).toLocaleString('pt-BR')}</div>
                                    </div>
                                `;
                                chatContainer.appendChild(msgDiv);
                                chatContainer.scrollTop = chatContainer.scrollHeight;
                            }
                        });
                    }
                })
                .catch(error => console.error('Erro ao atualizar mensagens:', error));
        }, 3000);
        <?php endif; ?>
    }
});

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Gerenciar upload de arquivos no chat admin
let adminArquivosSelecionados = [];
const adminFileInput = document.getElementById('adminChatFileInput');
const adminFilesPreview = document.getElementById('adminChatFilesPreview');

if (adminFileInput) {
    adminFileInput.addEventListener('change', function(e) {
        adminArquivosSelecionados = Array.from(e.target.files);
        atualizarPreviewArquivosAdmin();
    });
}

function atualizarPreviewArquivosAdmin() {
    if (!adminFilesPreview) return;
    
    adminFilesPreview.innerHTML = '';
    if (adminArquivosSelecionados.length === 0) {
        adminFilesPreview.style.display = 'none';
        return;
    }
    
    adminFilesPreview.style.display = 'flex';
    adminArquivosSelecionados.forEach((file, index) => {
        const preview = document.createElement('div');
        preview.className = 'admin-chat-file-preview';
        
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.innerHTML = `
                    <img src="${e.target.result}" alt="Preview">
                    <span>${file.name}</span>
                    <button class="file-remove" onclick="removerArquivoAdmin(${index})">×</button>
                `;
            };
            reader.readAsDataURL(file);
        } else {
            preview.innerHTML = `
                <i class="fas fa-file" style="font-size: 20px;"></i>
                <span>${file.name}</span>
                <button class="file-remove" onclick="removerArquivoAdmin(${index})">×</button>
            `;
        }
        adminFilesPreview.appendChild(preview);
    });
}

function removerArquivoAdmin(index) {
    adminArquivosSelecionados.splice(index, 1);
    if (adminFileInput) adminFileInput.value = '';
    atualizarPreviewArquivosAdmin();
}

function enviarMensagemAdmin(event) {
    event.preventDefault();
    
    const form = document.getElementById('formChatAdmin');
    const mensagem = document.getElementById('chatInputAdmin').value.trim();
    
    if (!mensagem && adminArquivosSelecionados.length === 0) {
        return false;
    }
    
    const formData = new FormData();
    formData.append('acao', 'enviar_mensagem');
    formData.append('conversa_id', '<?= $conversa_id ?>');
    formData.append('mensagem', mensagem);
    
    // Adicionar arquivos
    adminArquivosSelecionados.forEach((file, index) => {
        formData.append(`arquivo_${index}`, file);
    });
    
    fetch('', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(html => {
        // Recarregar página para mostrar nova mensagem
        location.reload();
    })
    .catch(error => {
        console.error('Erro ao enviar mensagem:', error);
        alert('Erro ao enviar mensagem. Tente novamente.');
    });
    
    return false;
}

function marcarConversaLida(conversaId, elemento) {
    // Esconder badge imediatamente
    if (elemento) {
        elemento.style.display = 'none';
    }
    
    // Marcar mensagens como lidas no backend
    fetch('../../backend/api/chat_mensagens.php?conversa_id=' + conversaId)
        .then(response => response.json())
        .then(data => {
            // Badge já foi escondido, apenas confirma
        })
        .catch(error => {
            console.error('Erro ao marcar como lida:', error);
            // Se der erro, mostrar badge novamente
            if (elemento) {
                elemento.style.display = 'inline-flex';
            }
        });
}

function finalizarChatAdmin(conversaId) {
    if (!confirm('Tem certeza que deseja finalizar este 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) {
            alert('Chat finalizado com sucesso! Todas as mensagens foram apagadas.');
            location.reload();
        } 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>
