@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-900'])
@php
    use Illuminate\Support\Facades\Storage;
@endphp

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Chat - ' . ($chat->agente->nome ?? 'Agente')])
    
    <style>
        .chat-container {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 200px);
            background: #343541;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background: #343541;
        }
        
        .message {
            display: flex;
            margin-bottom: 20px;
            padding: 12px 16px;
        }
        
        .message.user {
            background: #343541;
            justify-content: flex-end;
        }
        
        .message.assistant {
            background: #444654;
            justify-content: flex-start;
        }
        
        .message-content {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 8px;
            word-wrap: break-word;
        }
        
        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 12px;
            margin-left: 0;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .message.user .message-avatar {
            margin-right: 0;
            margin-left: 12px;
            order: 2;
        }
        
        .message-with-avatar {
            display: flex;
            align-items: flex-start;
        }
        
        .message.user .message-content {
            background: #10a37f;
            color: white;
        }
        
        .message.assistant .message-content {
            background: #444654;
            color: #ececf1;
        }
        
        .chat-input-container {
            padding: 20px;
            background: #343541;
            border-top: 1px solid #565869;
        }
        
        .chat-input-wrapper {
            display: flex;
            align-items: center;
            background: #40414f;
            border-radius: 12px;
            padding: 8px;
            border: 1px solid #565869;
        }
        
        .chat-input-wrapper:focus-within {
            border-color: #10a37f;
        }
        
        .chat-input {
            flex: 1;
            background: transparent;
            border: none;
            color: #ececf1;
            padding: 10px 12px;
            font-size: 14px;
            resize: none;
            outline: none;
            max-height: 200px;
        }
        
        .chat-input::placeholder {
            color: #8e8ea0;
        }
        
        .send-button {
            background: #10a37f;
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            margin-left: 8px;
            transition: background 0.2s;
        }
        
        .send-button:hover:not(:disabled) {
            background: #0d8f6e;
        }
        
        .send-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .message-time {
            font-size: 11px;
            color: #8e8ea0;
            margin-top: 4px;
        }
        
        .empty-chat {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #8e8ea0;
            text-align: center;
        }
        
        .loading-indicator {
            display: none;
            padding: 12px 16px;
            color: #8e8ea0;
            font-size: 14px;
        }
        
        .loading-indicator.active {
            display: block;
        }
    </style>
    
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4" style="background: #343541; border: none;">
                    <div class="card-body p-0">
                        <div class="chat-container">
                            <div class="chat-messages" id="chat-messages">
                                @if($chat->mensagens->count() > 0)
                                    @foreach($chat->mensagens as $mensagem)
                                        <div class="message {{ $mensagem->tipo }}">
                                            <div class="message-with-avatar">
                                                @if($mensagem->tipo === 'assistant' && $chat->agente && $chat->agente->foto)
                                                    <img src="{{ Storage::url($chat->agente->foto) }}" 
                                                         alt="{{ $chat->agente->nome }}" 
                                                         class="message-avatar">
                                                @elseif($mensagem->tipo === 'assistant')
                                                    <div class="message-avatar" style="background: #10a37f; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
                                                        {{ strtoupper(substr($chat->agente->nome ?? 'A', 0, 1)) }}
                                                    </div>
                                                @elseif($mensagem->tipo === 'user')
                                                    <div class="message-avatar" style="background: #10a37f; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
                                                        U
                                                    </div>
                                                @endif
                                                <div class="message-content">
                                                    @if($mensagem->tipo === 'assistant')
                                                        <div style="font-weight: bold; margin-bottom: 4px; color: #10a37f;">
                                                            {{ $chat->agente->nome ?? 'Agente' }}
                                                        </div>
                                                    @elseif($mensagem->tipo === 'user')
                                                        <div style="font-weight: bold; margin-bottom: 4px; color: #ececf1;">
                                                            Você
                                                        </div>
                                                    @endif
                                                    <div>{!! nl2br(e($mensagem->mensagem)) !!}</div>
                                                    <div class="message-time">
                                                        {{ $mensagem->created_at->format('d/m/Y H:i') }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="empty-chat">
                                        <div>
                                            <h5 style="color: #ececf1; margin-bottom: 10px;">Inicie uma conversa</h5>
                                            <p>Digite sua mensagem abaixo para começar a conversar com {{ $chat->agente->nome ?? 'o agente' }}.</p>
                                        </div>
                                    </div>
                                @endif
                                <div class="loading-indicator" id="loading-indicator">
                                    <i class="fa fa-spinner fa-spin"></i> Agente está digitando...
                                </div>
                            </div>
                            
                            <div class="chat-input-container">
                                <form id="chat-form" onsubmit="enviarMensagem(event)">
                                    @csrf
                                    <input type="hidden" name="idchat" value="{{ $chat->idchat }}">
                                    <div class="chat-input-wrapper">
                                        <textarea 
                                            id="chat-input" 
                                            name="mensagem" 
                                            class="chat-input" 
                                            placeholder="Pergunte alguma coisa..." 
                                            rows="1"
                                            onkeydown="handleKeyDown(event)"
                                        ></textarea>
                                        <button type="submit" class="send-button" id="send-button">
                                            <i class="fa fa-paper-plane"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="/assets/js/jquery.min.js"></script>
    <script>
        // Variáveis do agente para uso no JavaScript
        const agenteFoto = @json($chat->agente->foto ?? null);
        const agenteNome = @json($chat->agente->nome ?? 'Agente');
        @if($chat->agente && $chat->agente->foto)
        const agenteFotoUrl = @json(Storage::url($chat->agente->foto));
        @else
        const agenteFotoUrl = null;
        @endif
        const agenteInicial = agenteNome.charAt(0).toUpperCase();
        
        const chatMessages = document.getElementById('chat-messages');
        const chatInput = document.getElementById('chat-input');
        const chatForm = document.getElementById('chat-form');
        const loadingIndicator = document.getElementById('loading-indicator');
        const sendButton = document.getElementById('send-button');
        
        // Auto-resize textarea
        chatInput.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
        
        // Scroll to bottom on load
        scrollToBottom();
        
        function scrollToBottom() {
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        function handleKeyDown(event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                enviarMensagem(event);
            }
        }
        
        function enviarMensagem(event) {
            event.preventDefault();
            
            const mensagem = chatInput.value.trim();
            if (!mensagem) return;
            
            // Disable input
            chatInput.disabled = true;
            sendButton.disabled = true;
            
            // Add user message to chat
            addMessageToChat('user', mensagem);
            
            // Clear input
            chatInput.value = '';
            chatInput.style.height = 'auto';
            
            // Show loading
            loadingIndicator.classList.add('active');
            scrollToBottom();
            
            // Send message to server
            $.ajax({
                url: '{{ route("chats.enviarMensagem") }}',
                type: 'POST',
                data: {
                    _token: $('input[name="_token"]').val(),
                    idchat: $('input[name="idchat"]').val(),
                    mensagem: mensagem
                },
                success: function(response) {
                    if (response.success) {
                        // Add assistant message
                        addMessageToChat('assistant', response.mensagem_agente.mensagem, response.mensagem_agente.created_at);
                    } else {
                        addMessageToChat('assistant', 'Erro ao processar mensagem. Tente novamente.');
                    }
                },
                error: function(xhr) {
                    console.error('Erro:', xhr);
                    addMessageToChat('assistant', 'Erro ao enviar mensagem. Tente novamente.');
                },
                complete: function() {
                    // Re-enable input
                    chatInput.disabled = false;
                    sendButton.disabled = false;
                    loadingIndicator.classList.remove('active');
                    chatInput.focus();
                    scrollToBottom();
                }
            });
        }
        
        function addMessageToChat(tipo, mensagem, timestamp = null) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${tipo}`;
            
            const messageWithAvatar = document.createElement('div');
            messageWithAvatar.className = 'message-with-avatar';
            
            // Avatar
            let avatar;
            if (tipo === 'assistant') {
                if (agenteFotoUrl) {
                    avatar = document.createElement('img');
                    avatar.src = agenteFotoUrl;
                    avatar.alt = agenteNome;
                    avatar.className = 'message-avatar';
                } else {
                    avatar = document.createElement('div');
                    avatar.className = 'message-avatar';
                    avatar.style.background = '#10a37f';
                    avatar.style.display = 'flex';
                    avatar.style.alignItems = 'center';
                    avatar.style.justifyContent = 'center';
                    avatar.style.color = 'white';
                    avatar.style.fontWeight = 'bold';
                    avatar.textContent = agenteInicial;
                }
            } else {
                avatar = document.createElement('div');
                avatar.className = 'message-avatar';
                avatar.style.background = '#10a37f';
                avatar.style.display = 'flex';
                avatar.style.alignItems = 'center';
                avatar.style.justifyContent = 'center';
                avatar.style.color = 'white';
                avatar.style.fontWeight = 'bold';
                avatar.textContent = 'U';
            }
            
            const contentDiv = document.createElement('div');
            contentDiv.className = 'message-content';
            
            // Adicionar nome do autor
            if (tipo === 'assistant') {
                const authorDiv = document.createElement('div');
                authorDiv.style.fontWeight = 'bold';
                authorDiv.style.marginBottom = '4px';
                authorDiv.style.color = '#10a37f';
                authorDiv.textContent = agenteNome;
                contentDiv.appendChild(authorDiv);
            } else if (tipo === 'user') {
                const authorDiv = document.createElement('div');
                authorDiv.style.fontWeight = 'bold';
                authorDiv.style.marginBottom = '4px';
                authorDiv.style.color = '#ececf1';
                authorDiv.textContent = 'Você';
                contentDiv.appendChild(authorDiv);
            }
            
            const messageText = document.createElement('div');
            messageText.innerHTML = mensagem.replace(/\n/g, '<br>');
            
            const timeDiv = document.createElement('div');
            timeDiv.className = 'message-time';
            
            if (timestamp) {
                const date = new Date(timestamp);
                timeDiv.textContent = date.toLocaleString('pt-BR', {
                    day: '2-digit',
                    month: '2-digit',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            } else {
                const now = new Date();
                timeDiv.textContent = now.toLocaleString('pt-BR', {
                    day: '2-digit',
                    month: '2-digit',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            }
            
            contentDiv.appendChild(messageText);
            contentDiv.appendChild(timeDiv);
            
            messageWithAvatar.appendChild(avatar);
            messageWithAvatar.appendChild(contentDiv);
            messageDiv.appendChild(messageWithAvatar);
            
            // Remove empty chat message if exists
            const emptyChat = chatMessages.querySelector('.empty-chat');
            if (emptyChat) {
                emptyChat.remove();
            }
            
            // Insert before loading indicator
            loadingIndicator.parentNode.insertBefore(messageDiv, loadingIndicator);
            scrollToBottom();
        }
    </script>
@endsection