@extends('admin.layouts.app')

@section('title', 'Chat em Tempo Real')

@section('content')
<div class="container-fluid">
    <div class="row">
        <!-- Lista de Conversas -->
        <div class="col-md-4 border-end">
            <div class="p-3 border-bottom">
                <h5 class="mb-0">Conversas</h5>
                <small class="text-muted">Sistema de comunicação em tempo real</small>
            </div>
            
            <!-- Filtros -->
            <div class="p-3">
                <select class="form-select" id="filtroTipoConversa">
                    <option value="">Todos os tipos</option>
                    <option value="loja_entregador">Loja ↔ Entregador</option>
                    <option value="entregador_cliente">Entregador ↔ Cliente</option>
                    <option value="loja_cliente">Loja ↔ Cliente</option>
                </select>
            </div>

            <!-- Lista de Conversas -->
            <div class="conversas-lista" style="height: 60vh; overflow-y: auto;">
                <!-- Conversas serão carregadas via JavaScript -->
                <div class="text-center p-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Carregando...</span>
                    </div>
                    <p class="mt-2 text-muted">Carregando conversas...</p>
                </div>
            </div>
        </div>

        <!-- Janela de Chat -->
        <div class="col-md-8">
            <div class="d-flex flex-column h-100">
                <!-- Header do Chat -->
                <div class="chat-header p-3 border-bottom bg-light">
                    <div class="d-flex align-items-center">
                        <div class="chat-avatar me-3">
                            <i class="fas fa-user-circle fa-2x text-muted"></i>
                        </div>
                        <div class="chat-info flex-grow-1">
                            <h6 class="mb-0 chat-nome">Selecione uma conversa</h6>
                            <small class="text-muted chat-tipo">Nenhuma conversa selecionada</small>
                        </div>
                        <div class="chat-actions">
                            <button class="btn btn-sm btn-outline-danger" id="btnEncerrarConversa" disabled>
                                <i class="fas fa-times"></i> Encerrar
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Área de Mensagens -->
                <div class="chat-messages flex-grow-1 p-3" style="height: 50vh; overflow-y: auto; background-color: #f8f9fa;">
                    <div class="text-center text-muted">
                        <i class="fas fa-comments fa-2x mb-2"></i>
                        <p>Selecione uma conversa para começar a conversar</p>
                    </div>
                </div>

                <!-- Input de Mensagem -->
                <div class="chat-input p-3 border-top">
                    <form id="formEnviarMensagem" class="d-flex">
                        <input type="text" class="form-control me-2" id="inputMensagem" placeholder="Digite sua mensagem..." disabled>
                        <div class="btn-group">
                            <button type="button" class="btn btn-outline-secondary" id="btnAnexarArquivo" disabled>
                                <i class="fas fa-paperclip"></i>
                            </button>
                            <button type="submit" class="btn btn-primary" id="btnEnviar" disabled>
                                <i class="fas fa-paper-plane"></i> Enviar
                            </button>
                        </div>
                    </form>
                    <input type="file" id="inputArquivo" class="d-none" accept="image/*,.pdf,.txt">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Criar Nova Conversa -->
<div class="modal fade" id="modalCriarConversa" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nova Conversa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formCriarConversa">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="selectPedido" class="form-label">Pedido</label>
                        <select class="form-select" id="selectPedido" required>
                            <option value="">Selecione um pedido</option>
                            <!-- Opções carregadas via JavaScript -->
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="selectTipoConversa" class="form-label">Tipo de Conversa</label>
                        <select class="form-select" id="selectTipoConversa" required>
                            <option value="">Selecione o tipo</option>
                            <option value="loja_entregador">Loja ↔ Entregador</option>
                            <option value="entregador_cliente">Entregador ↔ Cliente</option>
                            <option value="loja_cliente">Loja ↔ Cliente</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Criar Conversa</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Inicializar Chat
document.addEventListener('DOMContentLoaded', function() {
    const chatSystem = {
        conversasAtivas: [],
        conversaAtual: null,
        timers: {
            carregamento: null,
            atualizarMensagens: null
        },

        init() {
            this.bindEvents();
            this.carregarConversas();
            this.configurarWebSocket();
        },

        bindEvents() {
            // Enviar mensagem
            document.getElementById('formEnviarMensagem').addEventListener('submit', (e) => {
                e.preventDefault();
                this.enviarMensagem();
            });

            // Filtro de conversas
            document.getElementById('filtroTipoConversa').addEventListener('change', () => {
                this.carregarConversas();
            });

            // Anexar arquivo
            document.getElementById('btnAnexarArquivo').addEventListener('click', () => {
                document.getElementById('inputArquivo').click();
            });

            // Encerrar conversa
            document.getElementById('btnEncerrarConversa').addEventListener('click', () => {
                this.encerrarConversa();
            });

            // Criar conversa
            document.getElementById('formCriarConversa').addEventListener('submit', (e) => {
                e.preventDefault();
                this.criarConversa();
            });
        },

        async carregarConversas() {
            try {
                const filtro = document.getElementById('filtroTipoConversa').value;
                const url = filtro ? `/admin/chat?tipo=${filtro}` : '/admin/chat';
                
                const response = await fetch(url);
                const data = await response.json();
                
                if (data.success) {
                    this.renderizarConversas(data.conversas.data);
                }
            } catch (error) {
                console.error('Erro ao carregar conversas:', error);
                this.mostrarErro('Erro ao carregar conversas');
            }
        },

        renderizarConversas(conversas) {
            const container = document.querySelector('.conversas-lista');
            
            if (conversas.length === 0) {
                container.innerHTML = `
                    <div class="text-center p-4">
                        <i class="fas fa-comments text-muted fa-2x mb-2"></i>
                        <p class="text-muted">Nenhuma conversa encontrada</p>
                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalCriarConversa">
                            <i class="fas fa-plus"></i> Nova Conversa
                        </button>
                    </div>
                `;
                return;
            }

            const conversasHtml = conversas.map(conversa => {
                const ultimaMensagem = conversa.ultima_mensagem;
                const tipoNome = conversa.tipo_conversa ? {
                    'loja_entregador': 'Loja ↔ Entregador',
                    'entregador_cliente': 'Entregador ↔ Cliente',
                    'loja_cliente': 'Loja ↔ Cliente'
                }[conversa.tipo_conversa] : 'Desconhecido';

                const naoLidas = conversa.mensagens_nao_lidas || 0;

                return `
                    <div class="conversa-item p-3 border-bottom cursor-pointer ${conversaAtual?.id === conversa.id ? 'bg-primary text-white' : ''}" 
                         data-conversa-id="${conversa.id}" onclick="chatSystem.selecionarConversa(${conversa.id})">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <h6 class="mb-1">
                                    Pedido #${conversa.pedido?.numero_pedido || 'N/A'}
                                    ${naoLidas > 0 ? `<span class="badge bg-danger ms-2">${naoLidas}</span>` : ''}
                                </h6>
                                <small class="${conversaAtual?.id === conversa.id ? 'text-white-50' : 'text-muted'}">
                                    ${tipoNome}
                                </small>
                                ${ultimaMensagem ? `
                                    <div class="mt-1 text-truncate" style="max-width: 200px;">
                                        <small class="${conversaAtual?.id === conversa.id ? 'text-white-50' : 'text-muted'}">
                                            ${ultimaMensagem.conteudo.substring(0, 50)}${ultimaMensagem.conteudo.length > 50 ? '...' : ''}
                                        </small>
                                    </div>
                                ` : ''}
                            </div>
                            <div class="text-end">
                                <small class="${conversaAtual?.id === conversa.id ? 'text-white-50' : 'text-muted'}">
                                    ${this.formatarData(conversa.updated_at)}
                                </small>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');

            container.innerHTML = `
                <div class="p-2 border-bottom">
                    <button class="btn btn-sm btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#modalCriarConversa">
                        <i class="fas fa-plus"></i> Nova Conversa
                    </button>
                </div>
                ${conversasHtml}
            `;
        },

        async selecionarConversa(conversaId) {
            try {
                const response = await fetch(`/admin/chat/${conversaId}/mensagens`);
                const data = await response.json();
                
                if (data.success) {
                    this.conversaAtual = data.conversa;
                    this.renderizarConversa(data.conversa);
                    this.habilitarChat();
                    this.iniciarAtualizacaoAutomatica();
                }
            } catch (error) {
                console.error('Erro ao selecionar conversa:', error);
                this.mostrarErro('Erro ao carregar conversa');
            }
        },

        renderizarConversa(conversa) {
            const headerNome = document.querySelector('.chat-nome');
            const headerTipo = document.querySelector('.chat-tipo');
            
            headerNome.textContent = `Pedido #${conversa.pedido.numero_pedido}`;
            headerTipo.textContent = conversa.tipo_conversa ? {
                'loja_entregador': 'Loja ↔ Entregador',
                'entregador_cliente': 'Entregador ↔ Cliente',
                'loja_cliente': 'Loja ↔ Cliente'
            }[conversa.tipo_conversa] : 'Desconhecido';

            // Renderizar mensagens
            const containerMensagens = document.querySelector('.chat-messages');
            const mensagensHtml = conversa.mensagens.map(mensagem => {
                const alinhamento = mensagem.remetente_id === window.userId ? 'text-end' : 'text-start';
                const corFundo = mensagem.remetente_id === window.userId ? 'bg-primary text-white' : 'bg-light';
                
                return `
                    <div class="mb-3 ${alinhamento}">
                        <div class="d-inline-block max-width-70 ${corFund} p-2 rounded">
                            <p class="mb-0">${this.escaparHtml(mensagem.conteudo)}</p>
                            <small class="${mensagem.remetente_id === window.userId ? 'text-white-50' : 'text-muted'}">
                                ${mensagem.remetente.name} • ${this.formatarData(mensagem.created_at)}
                            </small>
                        </div>
                    </div>
                `;
            }).join('');
            
            containerMensagens.innerHTML = mensagensHtml || `
                <div class="text-center text-muted">
                    <i class="fas fa-comment-slash fa-2x mb-2"></i>
                    <p>Nenhuma mensagem ainda</p>
                </div>
            `;

            // Scroll para baixo
            containerMensagens.scrollTop = containerMensagens.scrollHeight;

            // Atualizar lista de conversas
            this.carregarConversas();
        },

        habilitarChat() {
            const inputMensagem = document.getElementById('inputMensagem');
            const btnAnexarArquivo = document.getElementById('btnAnexarArquivo');
            const btnEnviar = document.getElementById('btnEnviar');
            const btnEncerrarConversa = document.getElementById('btnEncerrarConversa');

            [inputMensagem, btnAnexarArquivo, btnEnviar, btnEncerrarConversa].forEach(element => {
                element.disabled = false;
            });
        },

        async enviarMensagem() {
            const inputMensagem = document.getElementById('inputMensagem');
            const conteudo = inputMensagem.value.trim();
            
            if (!conteudo || !this.conversaAtual) return;

            const formData = new FormData();
            formData.append('conteudo', conteudo);
            formData.append('tipo', 'texto');

            try {
                const response = await fetch(`/admin/chat/${this.conversaAtual.id}/mensagem`, {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (data.success) {
                    inputMensagem.value = '';
                    this.renderizarConversa(this.conversaAtual);
                    
                    // Scroll para baixo
                    const containerMensagens = document.querySelector('.chat-messages');
                    containerMensagens.scrollTop = containerMensagens.scrollHeight;
                }
            } catch (error) {
                console.error('Erro ao enviar mensagem:', error);
                this.mostrarErro('Erro ao enviar mensagem');
            }
        },

        async encerrarConversa() {
            if (!this.conversaAtual) return;

            if (!confirm('Tem certeza que deseja encerrar esta conversa?')) return;

            try {
                const response = await fetch(`/admin/chat/${this.conversaAtual.id}/encerrar`, {
                    method: 'POST'
                });
                
                const data = await response.json();
                
                if (data.success) {
                    this.conversaAtual = null;
                    this.desabilitarChat();
                    this.carregarConversas();
                    this.mostrarSucesso('Conversa encerrada com sucesso');
                }
            } catch (error) {
                console.error('Erro ao encerrar conversa:', error);
                this.mostrarErro('Erro ao encerrar conversa');
            }
        },

        desabilitarChat() {
            const inputMensagem = document.getElementById('inputMensagem');
            const btnAnexarArquivo = document.getElementById('btnAnexarArquivo');
            const btnEnviar = document.getElementById('btnEnviar');
            const btnEncerrarConversa = document.getElementById('btnEncerrarConversa');

            [inputMensagem, btnAnexarArquivo, btnEnviar, btnEncerrarConversa].forEach(element => {
                element.disabled = true;
            });

            // Resetar header
            document.querySelector('.chat-nome').textContent = 'Selecione uma conversa';
            document.querySelector('.chat-tipo').textContent = 'Nenhuma conversa selecionada';
            
            // Limpar mensagens
            document.querySelector('.chat-messages').innerHTML = `
                <div class="text-center text-muted">
                    <i class="fas fa-comments fa-2x mb-2"></i>
                    <p>Selecione uma conversa para começar a conversar</p>
                </div>
            `;
        },

        iniciarAtualizacaoAutomatica() {
            // Limpar timer anterior
            if (this.timers.atualizarMensagens) {
                clearInterval(this.timers.atualizarMensagens);
            }

            // Atualizar a cada 5 segundos
            this.timers.atualizarMensagens = setInterval(() => {
                if (this.conversaAtual) {
                    this.selecionarConversa(this.conversaAtual.id);
                }
            }, 5000);
        },

        configurarWebSocket() {
            // TODO: Implementar WebSocket para tempo real
            // Por enquanto, usando polling
        },

        // Utilitários
        formatarData(data) {
            const date = new Date(data);
            const agora = new Date();
            const diffMs = agora - date;
            const diffHoras = Math.floor(diffMs / (1000 * 60 * 60));
            
            if (diffHoras < 1) {
                return 'Agora';
            } else if (diffHoras < 24) {
                return `${diffHoras}h`;
            } else {
                return date.toLocaleDateString();
            }
        },

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

        mostrarSucesso(mensagem) {
            // Implementar notificação de sucesso
            alert(mensagem);
        },

        mostrarErro(mensagem) {
            // Implementar notificação de erro
            alert(mensagem);
        }
    };

    // Disponibilizar globalmente
    window.chatSystem = chatSystem;
    chatSystem.init();
});
</script>

<style>
.cursor-pointer {
    cursor: pointer;
}

.max-width-70 {
    max-width: 70%;
}

.chat-messages {
    min-height: 400px;
}

.conversa-item:hover {
    background-color: #f8f9fa !important;
}

.conversa-item.bg-primary:hover {
    background-color: #0d6efd !important;
}
</style>
@endpush