<?php
session_start();
require_once 'conexao.php';

// Verificar se o usuário está logado
if (!isset($_SESSION['logado']) || $_SESSION['logado'] !== true) {
    header('Location: login.php');
    exit;
}

// Verificar se tenant_id está definido
if (!isset($_SESSION['tenant_id'])) {
    die('Tenant ID não definido. Acesso negado.');
}

$tenant_id = $_SESSION['tenant_id'];
$usuario_id = $_SESSION['usuario_id'];
$nome_usuario = $_SESSION['nome_usuario'];
$permissao = $_SESSION['permissao'] ?? 'usuario';

// Processar upload de foto de perfil
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['foto_perfil'])) {
    $diretorio = 'uploads/fotos_perfil/';
    
    // Criar diretório se não existir
    if (!file_exists($diretorio)) {
        mkdir($diretorio, 0777, true);
    }
    
    // Verificar se é uma imagem válida
    $check = getimagesize($_FILES['foto_perfil']['tmp_name']);
    if ($check === false) {
        $_SESSION['erro'] = "O arquivo enviado não é uma imagem válida.";
    } else {
        // Gerar nome único para o arquivo
        $extensao = strtolower(pathinfo($_FILES['foto_perfil']['name'], PATHINFO_EXTENSION));
        $nome_arquivo = 'user_' . $usuario_id . '_' . uniqid() . '.' . $extensao;
        $caminho_completo = $diretorio . $nome_arquivo;
        
        // Mover arquivo para o diretório
        if (move_uploaded_file($_FILES['foto_perfil']['tmp_name'], $caminho_completo)) {
            // Atualizar no banco de dados
            $stmt = $conn->prepare("UPDATE usuarios SET foto_perfil = ? WHERE id = ?");
            $stmt->bind_param("si", $caminho_completo, $usuario_id);
            if ($stmt->execute()) {
                $_SESSION['foto_perfil'] = $caminho_completo;
                $_SESSION['mensagem'] = "Foto de perfil atualizada com sucesso!";
            } else {
                $_SESSION['erro'] = "Erro ao atualizar foto no banco de dados.";
            }
            $stmt->close();
        } else {
            $_SESSION['erro'] = "Erro ao fazer upload da foto.";
        }
    }
}

// Atualiza o último acesso do usuário
$agora = date('Y-m-d H:i:s');
$stmt = $conn->prepare("UPDATE usuarios SET ultimo_acesso = ? WHERE id = ? AND tenant_id = ?");
$stmt->bind_param("sis", $agora, $usuario_id, $tenant_id);
$stmt->execute();
$stmt->close();

// Buscar todos os usuários
$stmt = $conn->prepare("
    SELECT u.id, u.nome, u.foto_perfil, (u.ultimo_acesso > DATE_SUB(NOW(), INTERVAL 1 MINUTE)) AS online
    FROM usuarios u
    WHERE u.tenant_id = ?
      AND u.id != ?
      AND u.ativo = 'sim'
    ORDER BY online DESC, u.nome ASC
");
$stmt->bind_param("si", $tenant_id, $usuario_id);
$stmt->execute();
$result = $stmt->get_result();

$usuarios = [];
while ($row = $result->fetch_assoc()) {
    $usuarios[] = $row;
}

$stmt->close();
$conn->close();
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SON - Chat</title>
    <meta name="csrf-token" content="<?php echo $_SESSION['csrf_token']; ?>">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        
        .header-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #f5f5f5;
            padding: 15px 20px;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-fixed img {
            height: 50px;
            margin-right: 15px;
        }
        
        .header-fixed h2 {
            margin: 0;
            flex-grow: 1;
            text-align: center;
        }
        
 /* Menu Lateral Recolhível - AGORA NA ESQUERDA */
        .sidebar {
            position: fixed;
            left: 0;
            top: 80px;
            height: calc(100vh - 80px);
            width: 60px;
            background: white;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            z-index: 999;
            transition: width 0.3s ease;
            overflow-x: hidden;
        }
        
/*        .sidebar:hover {
            width: 250px;
        }
*/        
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar-menu li {
            border-bottom: 1px solid #eee;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            text-decoration: none;
            color: #333;
            white-space: nowrap;
            transition: background-color 0.3s;
        }
        
/*        .sidebar-menu a:hover {
            background-color: #f5f5f5;
        }
*/       
        .sidebar-menu i {
            width: 24px;
            height: 24px;
            margin-right: 15px;
            text-align: center;
            flex-shrink: 0;
        }
        
        .sidebar-menu .menu-text {
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        
        .submenu-sidebar a {
            padding-left: 50px;
            font-size: 0.9em;
        }
        
        .menu-item-sidebar {
            position: relative;
        }
        
        .menu-item-sidebar > a:after {
            content: "▶";
            margin-left: auto;
            font-size: 0.8em;
            transition: transform 0.3s;
        }
        
        .menu-item-sidebar:hover > a:after {
            transform: rotate(90deg);
        }
        
        .content-with-menu {
            margin-left: 60px;
            transition: margin-left 0.3s ease;
        }
        
        .sidebar-left:hover ~ .content-with-menu {
            margin-left: 250px;
        }
        
        .content-wrapper {
            margin-top: 80px;
            padding: 20px;
            display: flex;
            height: calc(100vh - 120px);
        }
        
        .sidebar-chat {
            width: 300px; 
            background: white; 
            border-left: 1px solid #ddd;
            padding: 20px; 
            overflow-y: auto;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .user-btn {
            width: 100%; 
            padding: 10px; 
            margin-bottom: 10px;
            background: #3498db; 
            color: white; 
            border: none;
            border-radius: 4px; 
            cursor: pointer;
            display: flex; 
            align-items: center;
            gap: 10px;
            font-weight: bold;
        }
        
        .user-btn.active { 
            background: #2c3e50; 
        }
        
        .user-photo-small {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .user-initial-small {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 12px;
        }
        
        .user-online-indicator {
            font-size: 20px;
            line-height: 1;
            margin-left: auto;
        }
        
        .online { 
            color: limegreen; 
        }
        
        .offline { 
            color: gray; 
        }
        
        .chat-container {
            flex-grow: 1; 
            display: flex; 
            flex-direction: column; 
            background: white;
            margin-left: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .chat-header {
            background: #3498db; 
            color: white; 
            padding: 15px; 
            font-weight: bold;
            border-radius: 8px 8px 0 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .chat-header-photo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .chat-header-initial {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3498db;
            font-weight: bold;
        }
        
        #messages {
            flex-grow: 1; 
            padding: 20px; 
            overflow-y: auto;
            list-style: none; 
            margin: 0;
        }
        
        #messages li {
            padding: 10px 15px; 
            margin-bottom: 10px;
            border-radius: 8px; 
            max-width: 70%; 
            word-wrap: break-word;
            display: flex;
            gap: 10px;
        }
        
        #messages li.self { 
            background: #daf1da; 
            margin-left: auto; 
            flex-direction: row-reverse;
        }
        
        #messages li.other { 
            background: #f1f0f0; 
            margin-right: auto; 
        }
        
        .message-photo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .message-initial {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            flex-shrink: 0;
        }
        
        .message-content {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        
        .message-sender {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .message-time {
            font-size: 0.7em;
            color: #777;
            margin-top: 5px;
            text-align: right;
        }
        
        /* Estilo para o cabeçalho de data centralizado */
        .message-date-header {
            text-align: center;
            color: #666;
            font-size: 0.85em;
            margin: 15px 0;
            padding: 5px;
            background-color: #f0f0f0;
            border-radius: 15px;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            list-style: none;
        }
        
        #formChat {
            padding: 10px; 
            border-top: 1px solid #ddd;
            display: flex; 
            gap: 5px; 
            align-items: center;
        }
        
        #input {
            flex-grow: 1; 
            padding: 10px; 
            font-size: 16px;
            border: 1px solid #ccc; 
            border-radius: 4px;
        }
        
        #send {
            padding: 10px 20px; 
            background: #3498db;
            color: white; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer;
        }
        
        #fileInput {
            display: none;
        }
        
        .file-label {
            padding: 10px;
            background: #f0f0f0;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .file-link { 
            text-decoration: underline; 
            color: blue; 
        }
        
        img.chat-img {
            max-width: 200px; 
            max-height: 200px; 
            display: block; 
            margin-top: 5px;
            border-radius: 4px;
        }
        
        .empty-chat {
            text-align: center;
            color: #666;
            font-style: italic;
        }
        
        /* User info */
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .user-photo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #3498db;
        }
        
        .user-initial {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .menu-btn-success {
            color: #6B8E23;
        }
        
        .menu-btn-primary {
            color: #0000FF;
        }
        
        .menu-btn-danger {
            color: #e74c3c;
        }
        
        .version-info {
            margin: 10px 5px 0;
            padding-top: 10px;
            border-top: 1px solid #dee2e6;
            color: #6c757d;
            font-size: 0.8em;
        }
        
        /* Notificações */
        .notification-badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 0.7em;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>


<?php include 'menu_lateral.php'; ?>

    <!-- Conteúdo Principal -->
    <div class="content-with-menu">
        <div class="content-wrapper">
            <div class="sidebar-chat">
                <h3>Conversas</h3>
                <?php if (count($usuarios) === 0): ?>
                    <p>Nenhuma conversa.</p>
                <?php else: ?>
                    <?php foreach ($usuarios as $u): ?>
                        <button type="button" class="user-btn" data-id="<?php echo $u['id']; ?>" data-nome="<?php echo htmlspecialchars($u['nome']); ?>" data-foto="<?php echo htmlspecialchars($u['foto_perfil'] ?? ''); ?>" data-inicial="<?php echo strtoupper(substr($u['nome'], 0, 1)); ?>">
                            <?php if (!empty($u['foto_perfil'])): ?>
                                <img src="<?php echo htmlspecialchars($u['foto_perfil']); ?>" class="user-photo-small" alt="Foto">
                            <?php else: ?>
                                <div class="user-initial-small"><?php echo strtoupper(substr($u['nome'], 0, 1)); ?></div>
                            <?php endif; ?>
                            <span><?php echo htmlspecialchars($u['nome']); ?></span>
                            <span class="user-online-indicator <?php echo $u['online'] ? 'online' : 'offline'; ?>">●</span>
                        </button>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
            <div class="chat-container">
                <div class="chat-header" id="chat-header">
                    <div id="chat-header-photo"><div class="chat-header-initial">?</div></div>
                    <span id="chat-header-name">Selecione um usuário</span>
                </div>
                <ul id="messages"><li class="empty-chat">Nenhuma conversa selecionada.</li></ul>
                <button id="newMessagesBtn" style="display: none; position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 10;" onclick="scrollToBottom()">Novas mensagens</button>
                <form id="formChat" enctype="multipart/form-data" style="display: none;">
                    <input id="input" name="mensagem" placeholder="Digite sua mensagem ou envie um arquivo" autocomplete="off" />
                    <label for="fileInput" class="file-label" title="Enviar arquivo">📎</label>
                    <input type="file" id="fileInput" name="arquivo" />
                    <button id="send" type="submit">Enviar</button>
                </form>
            </div>
        </div>
    </div>

    <script>
    const usuarioId = <?php echo json_encode($usuario_id); ?>;
    let usuarioSelecionado = null;
    let ultimaAltura = 0;
    let scrollAutomatico = true;
    const messagesList = document.getElementById('messages');
    const newMessagesBtn = document.getElementById('newMessagesBtn');
    let notificacoesAtivas = true;
    let ultimaDataExibida = null;
    
    messagesList.addEventListener('scroll', () => {
        const pertoDoFim = messagesList.scrollHeight - messagesList.scrollTop <= messagesList.clientHeight + 50;
        scrollAutomatico = pertoDoFim;
        if (pertoDoFim) newMessagesBtn.style.display = 'none';
    });
    
    function scrollToBottom() {
        messagesList.scrollTop = messagesList.scrollHeight;
        newMessagesBtn.style.display = 'none';
        scrollAutomatico = true;
    }
    
    // Formatar data para exibição
    function formatarData(data) {
        const dataMsg = new Date(data);
        const optionsTime = { hour: '2-digit', minute: '2-digit' };
        return dataMsg.toLocaleTimeString('pt-BR', optionsTime);
    }
    
    // Formatar apenas a data para cabeçalho
    function formatarDataCabecalho(data) {
        const hoje = new Date();
        const ontem = new Date(hoje);
        ontem.setDate(ontem.getDate() - 1);
        
        const dataMsg = new Date(data);
        
        if (dataMsg.toDateString() === hoje.toDateString()) {
            return 'Hoje';
        } else if (dataMsg.toDateString() === ontem.toDateString()) {
            return 'Ontem';
        } else {
            const options = { weekday: 'long', day: '2-digit', month: '2-digit', year: 'numeric' };
            return dataMsg.toLocaleDateString('pt-BR', options);
        }
    }
    
    // Verificar se as notificações são suportadas
    function verificarSuporteNotificacoes() {
        if (!("Notification" in window)) {
            console.log("Este navegador não suporta notificações desktop");
            notificacoesAtivas = false;
            return false;
        }
        
        // Verificar se já temos permissão
        if (Notification.permission === "granted") {
            return true;
        } else if (Notification.permission !== "denied") {
            // Solicitar permissão
            Notification.requestPermission().then(permission => {
                notificacoesAtivas = (permission === "granted");
            });
        }
        
        return notificacoesAtivas;
    }
    
    // Mostrar notificação
    function mostrarNotificacao(titulo, corpo, icone = null) {
        if (!notificacoesAtivas || !usuarioSelecionado) return;
        
        if (document.hidden && Notification.permission === "granted") {
            const notificacao = new Notification(titulo, {
                body: corpo,
                icon: icone || '/favicon_io/favicon-32x32.png'
            });
            
            notificacao.onclick = function() {
                window.focus();
                this.close();
            };
            
            setTimeout(() => {
                notificacao.close();
            }, 5000);
        }
    }
    
    // Verificar suporte a notificações ao carregar a página
    document.addEventListener('DOMContentLoaded', function() {
        verificarSuporteNotificacoes();
        
        // Verificar se a página está visível
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                // Página está em segundo plano - ativar notificações
                notificacoesAtivas = true;
            }
        });
    });
    
    async function carregarMensagens() {
        if (!usuarioSelecionado) return;
        try {
            const res = await fetch('buscar_mensagens.php?usuario_id=' + encodeURIComponent(usuarioSelecionado.id));
            if (!res.ok) throw new Error('Erro ao buscar mensagens');
            const mensagens = await res.json();
            const novaAltura = mensagens.length;
            
            // Verificar se há novas mensagens desde a última vez
            const ultimaMensagem = mensagens[mensagens.length - 1];
            const haNovasMensagens = novaAltura > ultimaAltura;
            const mensagemNaoLida = haNovasMensagens && ultimaMensagem && ultimaMensagem.remetente_id != usuarioId;
            
            messagesList.innerHTML = '';
            ultimaDataExibida = null;
            
            mensagens.forEach(m => {
                const dataMsg = new Date(m.data_envio);
                const dataCabecalho = formatarDataCabecalho(m.data_envio);
                
                // Adicionar cabeçalho de data se for diferente da última
                if (dataCabecalho !== ultimaDataExibida) {
                    const headerLi = document.createElement('li');
                    headerLi.className = 'message-date-header';
                    headerLi.textContent = dataCabecalho;
                    messagesList.appendChild(headerLi);
                    ultimaDataExibida = dataCabecalho;
                }
                
                const li = document.createElement('li');
                li.classList.add(m.remetente_id == usuarioId ? 'self' : 'other');
                
                const avatar = document.createElement(m.foto_perfil ? 'img' : 'div');
                avatar.className = m.foto_perfil ? 'message-photo' : 'message-initial';
                if (m.foto_perfil) avatar.src = m.foto_perfil; else avatar.textContent = m.nome.charAt(0).toUpperCase();
                li.appendChild(avatar);
                
                const contentDiv = document.createElement('div');
                contentDiv.className = 'message-content';
                
                const nome = document.createElement('div');
                nome.className = 'message-sender';
                nome.textContent = m.nome + ':';
                contentDiv.appendChild(nome);
                
                const conteudo = document.createElement('div');
                if (m.arquivo) {
                    const ext = m.arquivo.split('.').pop().toLowerCase();
                    if (["jpg","jpeg","png","gif","webp"].includes(ext)) {
                        const img = document.createElement('img');
                        img.src = 'uploads/' + m.arquivo;
                        img.className = 'chat-img';
                        conteudo.appendChild(img);
                    } else {
                        const link = document.createElement('a');
                        link.href = 'uploads/' + m.arquivo;
                        link.textContent = '📎 ' + m.arquivo;
                        link.target = '_blank';
                        link.classList.add('file-link');
                        conteudo.appendChild(link);
                    }
                }
                if (m.mensagem) {
                    const texto = document.createElement('div');
                    texto.textContent = m.mensagem;
                    conteudo.appendChild(texto);
                }
                
                // Adicionar horário da mensagem (mais discreto)
                const timeSpan = document.createElement('div');
                timeSpan.className = 'message-time';
                timeSpan.textContent = formatarData(m.data_envio);
                conteudo.appendChild(timeSpan);
                
                contentDiv.appendChild(conteudo);
                li.appendChild(contentDiv);
                messagesList.appendChild(li);
            });
            
            if (novaAltura > ultimaAltura) {
                if (scrollAutomatico) scrollToBottom();
                else newMessagesBtn.style.display = 'block';
                
                // Mostrar notificação se for uma mensagem nova de outro usuário
                if (mensagemNaoLida && document.hidden) {
                    mostrarNotificacao(
                        'Nova mensagem de ' + usuarioSelecionado.nome,
                        ultimaMensagem.mensagem || 'Arquivo enviado'
                    );
                }
            }
            ultimaAltura = novaAltura;
        } catch (err) {
            console.error(err);
        }
    }
    
    document.querySelectorAll('.user-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.user-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            usuarioSelecionado = {
                id: btn.dataset.id,
                nome: btn.dataset.nome,
                foto: btn.dataset.foto,
                inicial: btn.dataset.inicial
            };
            document.getElementById('chat-header-name').textContent = usuarioSelecionado.nome;
            const headerPhoto = document.getElementById('chat-header-photo');
            headerPhoto.innerHTML = usuarioSelecionado.foto ? `<img src="${usuarioSelecionado.foto}" class="chat-header-photo">` : `<div class="chat-header-initial">${usuarioSelecionado.inicial}</div>`;
            document.getElementById('formChat').style.display = 'flex';
            document.getElementById('input').value = '';
            document.getElementById('input').focus();
            carregarMensagens();
        });
    });
    
    document.getElementById('formChat').addEventListener('submit', async e => {
        e.preventDefault();
        if (!usuarioSelecionado) return;
        const formData = new FormData();
        formData.append('destinatario_id', usuarioSelecionado.id);
        formData.append('mensagem', document.getElementById('input').value);
        if (document.getElementById('fileInput').files.length > 0) {
            formData.append('arquivo', document.getElementById('fileInput').files[0]);
        }
        try {
            const res = await fetch('enviar_mensagem.php', { method: 'POST', body: formData });
            if (!res.ok) throw new Error('Erro ao enviar mensagem');
            document.getElementById('input').value = '';
            document.getElementById('fileInput').value = '';
            carregarMensagens();
        } catch (err) {
            console.error(err);
        }
    });
    
    setInterval(() => { if (usuarioSelecionado) carregarMensagens(); }, 3000);
    </script>
</body>
</html>