@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.assistant .message-avatar {
            width: 42px;
            height: 42px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            border: 2px solid rgba(16, 163, 127, 0.5);
        }
        .agent-avatar-trigger {
            display: inline-block;
            cursor: pointer;
            border: none;
            padding: 0;
            background: none;
            border-radius: 50%;
            line-height: 0;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .agent-avatar-trigger:hover {
            transform: scale(1.05);
        }
        .agent-avatar-trigger:hover .message-avatar {
            box-shadow: 0 4px 12px rgba(16, 163, 127, 0.4);
        }
        .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;
        }

        /* Markdown: tabelas estilo ChatGPT */
        .message-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 0.75em 0;
            font-size: 0.9em;
        }
        .message-content th,
        .message-content td {
            border: 1px solid #565869;
            padding: 0.5em 0.75em;
            text-align: left;
        }
        .message-content th {
            background: rgba(16, 163, 127, 0.2);
            font-weight: 600;
        }
        .message-content tr:nth-child(even) {
            background: rgba(255, 255, 255, 0.03);
        }
        .message.user .message-content th {
            background: rgba(255, 255, 255, 0.15);
        }
        .message-content p { margin: 0.5em 0; }
        .message-content p:first-child { margin-top: 0; }
        .message-content strong { font-weight: 600; }
        .message-content ul, .message-content ol { margin: 0.5em 0; padding-left: 1.5em; }
        .message-content code { background: rgba(0,0,0,0.2); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; }
        .message-content pre { background: rgba(0,0,0,0.2); padding: 0.75em; border-radius: 8px; overflow-x: auto; margin: 0.5em 0; }
        .message-content pre code { background: none; padding: 0; }
        
        .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;
        }

        /* Barra de ações estilo GPT */
        .message-wrapper {
            width: 100%;
        }
        .message-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 8px;
            padding-top: 4px;
            flex-wrap: wrap;
        }
        .message-actions .msg-action {
            background: transparent;
            border: none;
            color: #8e8ea0;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: color 0.2s, background 0.2s;
        }
        .message-actions .msg-action:hover {
            color: #ececf1;
            background: rgba(255,255,255,0.08);
        }
        .message-actions .msg-action.active-like { color: #10a37f; }
        .message-actions .msg-action.active-dislike { color: #ef4444; }
        /* Ícones visíveis na bolha verde (mensagens do usuário) */
        .message.user .message-content .message-actions .msg-action {
            color: rgba(255,255,255,0.95);
        }
        .message.user .message-content .message-actions .msg-action:hover {
            color: #fff;
            background: rgba(255,255,255,0.25);
        }
        .message-thinking {
            font-size: 11px;
            color: #8e8ea0;
            margin-bottom: 4px;
        }
        .share-dropdown {
            position: absolute;
            background: #40414f;
            border: 1px solid #565869;
            border-radius: 8px;
            padding: 8px;
            height: 280px;
            overflow: hidden;
            z-index: 1000;
            min-width: 260px;
            width: 260px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }
        .share-filter-input {
            width: 100%;
            box-sizing: border-box;
            padding: 8px 10px;
            margin-bottom: 8px;
            border: 1px solid #565869;
            border-radius: 6px;
            background: #343541;
            color: #ececf1;
            font-size: 14px;
            outline: none;
            flex-shrink: 0;
        }
        .share-filter-input::placeholder {
            color: #8e8ea0;
        }
        .share-filter-input:focus {
            border-color: #10a37f;
        }
        .share-list {
            flex: 1;
            min-height: 0;
            height: 220px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        .share-dropdown .share-user {
            display: block;
            width: 100%;
            text-align: left;
            padding: 8px 12px;
            border: none;
            background: transparent;
            color: #ececf1;
            cursor: pointer;
            border-radius: 4px;
            font-size: 14px;
        }
        .share-dropdown .share-user:hover {
            background: rgba(16, 163, 127, 0.2);
        }
        .share-dropdown .share-user small {
            display: block;
            color: #8e8ea0;
            font-size: 12px;
        }
        .share-dropdown .share-user.share-user-hidden {
            display: none !important;
        }
        .share-no-results {
            padding: 12px;
            color: #8e8ea0;
            font-size: 13px;
            text-align: center;
        }
        .more-options-dropdown {
            position: absolute;
            background: #40414f;
            border: 1px solid #565869;
            border-radius: 8px;
            padding: 4px;
            z-index: 1000;
            min-width: 160px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .more-options-dropdown button {
            display: block;
            width: 100%;
            text-align: left;
            padding: 8px 12px;
            border: none;
            background: transparent;
            color: #ececf1;
            cursor: pointer;
            border-radius: 4px;
            font-size: 14px;
        }
        .more-options-dropdown button:hover {
            background: rgba(255,255,255,0.08);
        }

        /* Painel do agente (estilo WhatsApp) */
        .agent-panel-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 1040;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }
        .agent-panel-backdrop.agent-panel-open {
            opacity: 1;
            visibility: visible;
        }
        .agent-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 360px;
            max-width: 100%;
            height: 100%;
            background: #343541;
            box-shadow: -4px 0 24px rgba(0,0,0,0.3);
            z-index: 1050;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        .agent-panel.agent-panel-open {
            transform: translateX(0);
        }
        .agent-panel-header {
            padding: 20px;
            background: #40414f;
            border-bottom: 1px solid #565869;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .agent-panel-close {
            background: none;
            border: none;
            color: #8e8ea0;
            font-size: 24px;
            cursor: pointer;
            padding: 4px 8px;
            line-height: 1;
        }
        .agent-panel-close:hover {
            color: #ececf1;
        }
        .agent-panel-title {
            color: #ececf1;
            font-size: 18px;
            font-weight: 600;
        }
        .agent-panel-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        .agent-panel-photo {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 16px;
            display: block;
            border: 3px solid rgba(16, 163, 127, 0.5);
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
        }
        .agent-panel-photo-initial {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #10a37f;
            color: white;
            font-size: 48px;
            font-weight: bold;
            border: 3px solid rgba(16, 163, 127, 0.5);
        }
        .agent-panel-name {
            color: #ececf1;
            font-size: 22px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 20px;
        }
        .agent-panel-section {
            margin-bottom: 20px;
        }
        .agent-panel-section-title {
            color: #10a37f;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        .agent-panel-section-content {
            color: #c5c5d2;
            font-size: 14px;
            line-height: 1.5;
            white-space: pre-wrap;
        }
    </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 }}" data-idchatmensagem="{{ $mensagem->idchatmensagem }}" data-tipo="{{ $mensagem->tipo }}">
                                            <div class="message-with-avatar message-wrapper">
                                                @if($mensagem->tipo === 'assistant' && $chat->agente && $chat->agente->foto)
                                                    <button type="button" class="agent-avatar-trigger" title="Ver sobre o agente">
                                                        <img src="{{ Storage::url($chat->agente->foto) }}" 
                                                             alt="{{ $chat->agente->nome }}" 
                                                             class="message-avatar">
                                                    </button>
                                                @elseif($mensagem->tipo === 'assistant')
                                                    <button type="button" class="agent-avatar-trigger" title="Ver sobre o agente">
                                                        <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>
                                                    </button>
                                                @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
                                                    @if($mensagem->tipo === 'assistant' && $mensagem->tempo_pensamento_segundos)
                                                        <div class="message-thinking">Pensou por {{ $mensagem->tempo_pensamento_segundos >= 60 ? (floor($mensagem->tempo_pensamento_segundos/60) . 'm ' . ($mensagem->tempo_pensamento_segundos % 60) . 's') : ($mensagem->tempo_pensamento_segundos . 's') }}</div>
                                                    @endif
                                                    <div class="message-body" data-markdown-b64="{{ base64_encode($mensagem->mensagem ?? '') }}"></div>
                                                    <div class="message-time">
                                                        {{ $mensagem->created_at->format('d/m/Y H:i') }}
                                                    </div>
                                                    <div class="message-actions">
                                                        <button type="button" class="msg-action btn-copy" title="Copiar"><i class="fa fa-copy"></i></button>
                                                        @if($mensagem->tipo === 'assistant')
                                                            <button type="button" class="msg-action btn-like {{ $mensagem->feedback === 'like' ? 'active-like' : '' }}" title="Gostei" data-id="{{ $mensagem->idchatmensagem }}"><i class="fa fa-thumbs-up"></i></button>
                                                            <button type="button" class="msg-action btn-dislike {{ $mensagem->feedback === 'dislike' ? 'active-dislike' : '' }}" title="Não gostei" data-id="{{ $mensagem->idchatmensagem }}"><i class="fa fa-thumbs-down"></i></button>
                                                            <div class="position-relative d-inline">
                                                                <button type="button" class="msg-action btn-share" title="Compartilhar" data-id="{{ $mensagem->idchatmensagem }}"><i class="fa fa-share-alt"></i></button>
                                                                <div class="share-dropdown" style="display: none;"></div>
                                                            </div>
                                                            <button type="button" class="msg-action btn-regenerate" title="Regenerar" data-id="{{ $mensagem->idchatmensagem }}"><i class="fa fa-redo"></i></button>
                                                            <div class="position-relative d-inline">
                                                                <button type="button" class="msg-action btn-more" title="Mais opções"><i class="fa fa-ellipsis-h"></i></button>
                                                                <div class="more-options-dropdown" style="display: none;">
                                                                    <button type="button" class="btn-copy-text">Copiar texto</button>
                                                                    <button type="button" class="btn-export-text">Exportar como texto</button>
                                                                </div>
                                                            </div>
                                                        @else
                                                            <div class="position-relative d-inline">
                                                                <button type="button" class="msg-action btn-share" title="Compartilhar" data-id="{{ $mensagem->idchatmensagem }}"><i class="fa fa-share-alt"></i></button>
                                                                <div class="share-dropdown" style="display: none;"></div>
                                                            </div>
                                                        @endif
                                                    </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>
                            
                            @if(!empty($agenteBloqueado))
                            <div class="alert alert-warning mx-3 mb-0" role="alert">
                                <i class="fa fa-lock me-2"></i>
                                <strong>Diálogo bloqueado.</strong> Este agente foi removido do seu acesso. O histórico permanece visível, mas você não pode enviar novas mensagens nem iniciar novo chat com este agente.
                            </div>
                            @endif
                            <div class="chat-input-container" @if(!empty($agenteBloqueado)) style="opacity: 0.7; pointer-events: none;" @endif>
                                <form id="chat-form" onsubmit="enviarMensagem(event)" @if(!empty($agenteBloqueado)) style="pointer-events: none;" @endif>
                                    @csrf
                                    <input type="hidden" name="idchat" value="{{ $chat->idchat }}">
                                    <div class="chat-input-wrapper">
                                        <textarea 
                                            id="chat-input" 
                                            name="mensagem" 
                                            class="chat-input" 
                                            placeholder="{{ !empty($agenteBloqueado) ? 'Diálogo bloqueado.' : 'Pergunte alguma coisa...' }}" 
                                            rows="1"
                                            onkeydown="handleKeyDown(event)"
                                            @if(!empty($agenteBloqueado)) readonly disabled @endif
                                        ></textarea>
                                        <button type="submit" class="send-button" id="send-button" @if(!empty($agenteBloqueado)) disabled @endif>
                                            <i class="fa fa-paper-plane"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Painel do agente (estilo WhatsApp) --}}
    <div class="agent-panel-backdrop" id="agent-panel-backdrop"></div>
    <div class="agent-panel" id="agent-panel">
        <div class="agent-panel-header">
            <span class="agent-panel-title">Sobre o agente</span>
            <button type="button" class="agent-panel-close" id="agent-panel-close" aria-label="Fechar">&times;</button>
        </div>
        <div class="agent-panel-body">
            @if($chat->agente)
                @if($chat->agente->foto)
                    <img src="{{ Storage::url($chat->agente->foto) }}" alt="{{ $chat->agente->nome }}" class="agent-panel-photo">
                @else
                    <div class="agent-panel-photo-initial">{{ strtoupper(substr($chat->agente->nome ?? 'A', 0, 1)) }}</div>
                @endif
                <div class="agent-panel-name">{{ $chat->agente->nome ?? 'Agente' }}</div>
                @if($chat->agente && $chat->agente->especialidade)
                    <div class="agent-panel-especialidade text-muted small">{{ $chat->agente->especialidade }}</div>
                @endif
                @if($chat->agente->quem_e)
                    <div class="agent-panel-section">
                        <div class="agent-panel-section-title">Quem é</div>
                        <div class="agent-panel-section-content">{{ $chat->agente->quem_e }}</div>
                    </div>
                @endif
                @if($chat->agente->o_que_faz)
                    <div class="agent-panel-section">
                        <div class="agent-panel-section-title">O que faz</div>
                        <div class="agent-panel-section-content">{{ $chat->agente->o_que_faz }}</div>
                    </div>
                @endif
                @if($chat->agente->objetivo)
                    <div class="agent-panel-section">
                        <div class="agent-panel-section-title">Objetivo</div>
                        <div class="agent-panel-section-content">{{ $chat->agente->objetivo }}</div>
                    </div>
                @endif
                @if($chat->agente->tom_resposta)
                    <div class="agent-panel-section">
                        <div class="agent-panel-section-title">Tom de resposta</div>
                        <div class="agent-panel-section-content">{{ $chat->agente->tom_resposta }}</div>
                    </div>
                @endif
                @if($chat->agente->telefone)
                    <div class="agent-panel-section">
                        <div class="agent-panel-section-title">Telefone</div>
                        <div class="agent-panel-section-content">{{ $chat->agente->telefone }}</div>
                    </div>
                @endif
                @if($chat->agente->horarios_funcionamento)
                    <div class="agent-panel-section">
                        <div class="agent-panel-section-title">Horários</div>
                        <div class="agent-panel-section-content">{{ $chat->agente->horarios_funcionamento }}</div>
                    </div>
                @endif
                @if($chat->agente->localizacao_contato)
                    <div class="agent-panel-section">
                        <div class="agent-panel-section-title">Localização / Contato</div>
                        <div class="agent-panel-section-content">{{ $chat->agente->localizacao_contato }}</div>
                    </div>
                @endif
                @if(!$chat->agente->quem_e && !$chat->agente->o_que_faz && !$chat->agente->objetivo && !$chat->agente->tom_resposta && !$chat->agente->telefone && !$chat->agente->horarios_funcionamento && !$chat->agente->localizacao_contato)
                    <div class="agent-panel-section">
                        <div class="agent-panel-section-content" style="color: #8e8ea0;">Nenhuma informação adicional configurada para este agente.</div>
                    </div>
                @endif
            @else
                <div class="agent-panel-section-content" style="color: #8e8ea0;">Agente não encontrado.</div>
            @endif
        </div>
    </div>
    
    <script src="/assets/js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.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');
        const idchat = document.querySelector('input[name="idchat"]').value;

        let pollingInterval = null;
        const POLL_INTERVAL_MS = 2500;
        const POLL_TIMEOUT_MS = 90000; // 90 segundos
        let pollStartedAt = null;

        // Auto-resize textarea
        chatInput.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });

        // Renderizar markdown nas mensagens já carregadas (incl. tabelas)
        document.querySelectorAll('.message-body[data-markdown-b64]').forEach(function(el) {
            try {
                const raw = atob(el.getAttribute('data-markdown-b64') || '');
                el.innerHTML = (typeof marked !== 'undefined' && marked.parse)
                    ? marked.parse(raw, { breaks: true })
                    : raw.replace(/\n/g, '<br>');
                el.removeAttribute('data-markdown-b64');
            } catch (e) {
                el.textContent = el.getAttribute('data-markdown-b64') ? 'Erro ao exibir mensagem.' : '';
            }
        });

        // Scroll to bottom on load
        scrollToBottom();

        // Painel do agente (estilo WhatsApp)
        function openAgentPanel() {
            document.getElementById('agent-panel').classList.add('agent-panel-open');
            document.getElementById('agent-panel-backdrop').classList.add('agent-panel-open');
        }
        function closeAgentPanel() {
            document.getElementById('agent-panel').classList.remove('agent-panel-open');
            document.getElementById('agent-panel-backdrop').classList.remove('agent-panel-open');
        }
        $(chatMessages).on('click', '.agent-avatar-trigger', function() { openAgentPanel(); });
        document.getElementById('agent-panel-close').addEventListener('click', closeAgentPanel);
        document.getElementById('agent-panel-backdrop').addEventListener('click', closeAgentPanel);

        function scrollToBottom() {
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function handleKeyDown(event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                enviarMensagem(event);
            }
        }

        function stopPollingAndReenable() {
            if (pollingInterval) {
                clearInterval(pollingInterval);
                pollingInterval = null;
            }
            chatInput.disabled = false;
            sendButton.disabled = false;
            loadingIndicator.classList.remove('active');
            chatInput.focus();
            scrollToBottom();
        }

        /**
         * Polla as mensagens do chat até aparecer uma resposta do agente (assistant)
         * após o último idchatmensagem conhecido, ou até timeout.
         */
        function startPollingForAgentResponse(lastUserMessageId) {
            pollStartedAt = Date.now();

            function doPoll() {
                if (Date.now() - pollStartedAt > POLL_TIMEOUT_MS) {
                    stopPollingAndReenable();
                    addMessageToChat('assistant', 'O agente não respondeu a tempo. Tente novamente.');
                    return;
                }

                $.ajax({
                    url: '{{ url("/chats") }}/' + idchat + '/mensagens',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // API retorna { success: true, mensagens: [ ... ] }
                        const list = (response && response.mensagens) ? response.mensagens : (Array.isArray(response) ? response : []);
                        if (!Array.isArray(list)) return;
                        const lastId = Number(lastUserMessageId);
                        const novas = list.filter(function(m) {
                            return Number(m.idchatmensagem) > lastId && m.tipo === 'assistant';
                        });
                        if (novas.length > 0) {
                            novas.forEach(function(m) {
                                addMessageToChat('assistant', m.mensagem || '', m.created_at, {
                                    idchatmensagem: m.idchatmensagem,
                                    feedback: m.feedback || null,
                                    tempo_pensamento_segundos: m.tempo_pensamento_segundos || null
                                });
                            });
                            stopPollingAndReenable();
                        }
                    }
                });
            }

            doPoll();
            pollingInterval = setInterval(doPoll, POLL_INTERVAL_MS);
        }

        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: idchat,
                    mensagem: mensagem
                },
                success: function(response) {
                    if (!response.success) {
                        addMessageToChat('assistant', (response.mensagem_agente && response.mensagem_agente.mensagem) ? response.mensagem_agente.mensagem : 'Erro ao processar mensagem. Tente novamente.');
                        return;
                    }
                    // Resposta imediata (ex.: erro tratado no backend)
                    if (response.mensagem_agente) {
                        addMessageToChat('assistant', response.mensagem_agente.mensagem, response.mensagem_agente.created_at, {
                            idchatmensagem: response.mensagem_agente.idchatmensagem,
                            feedback: response.mensagem_agente.feedback || null,
                            tempo_pensamento_segundos: response.mensagem_agente.tempo_pensamento_segundos || null
                        });
                        return;
                    }
                    // status === 'processing': N8N vai responder depois via webhook; iniciar polling
                    if (response.status === 'processing' && response.mensagem_user && response.mensagem_user.idchatmensagem) {
                        startPollingForAgentResponse(response.mensagem_user.idchatmensagem);
                        return;
                    }
                    // Fallback: não veio mensagem do agente nem status processing
                    stopPollingAndReenable();
                },
                error: function(xhr) {
                    console.error('Erro:', xhr);
                    addMessageToChat('assistant', 'Erro ao enviar mensagem. Tente novamente.');
                },
                complete: function() {
                    // Só reabilita aqui se NÃO entrou em modo polling (resposta imediata ou erro)
                    if (!pollingInterval) {
                        stopPollingAndReenable();
                    }
                }
            });
        }
        
        function addMessageToChat(tipo, mensagem, timestamp = null, opts = {}) {
            const idchatmensagem = opts.idchatmensagem || null;
            const feedback = opts.feedback || null;
            const tempoPensamento = opts.tempo_pensamento_segundos || null;

            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${tipo}`;
            if (idchatmensagem) messageDiv.setAttribute('data-idchatmensagem', idchatmensagem);
            messageDiv.setAttribute('data-tipo', tipo);
            
            const messageWithAvatar = document.createElement('div');
            messageWithAvatar.className = 'message-with-avatar message-wrapper';
            
            // 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);
            }
            
            if (tipo === 'assistant' && tempoPensamento) {
                const thinkingDiv = document.createElement('div');
                thinkingDiv.className = 'message-thinking';
                const mins = Math.floor(tempoPensamento / 60);
                const secs = tempoPensamento % 60;
                thinkingDiv.textContent = 'Pensou por ' + (mins ? mins + 'm ' : '') + secs + 's';
                contentDiv.appendChild(thinkingDiv);
            }

            const messageText = document.createElement('div');
            messageText.className = 'message-body';
            messageText.innerHTML = (typeof marked !== 'undefined' && marked.parse)
                ? marked.parse(mensagem || '', { breaks: true })
                : (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);

            // Barra de ações (estilo GPT)
            const actionsDiv = document.createElement('div');
            actionsDiv.className = 'message-actions';
            actionsDiv.innerHTML += '<button type="button" class="msg-action btn-copy" title="Copiar"><i class="fa fa-copy"></i></button>';
            if (tipo === 'assistant' && idchatmensagem) {
                actionsDiv.innerHTML += '<button type="button" class="msg-action btn-like ' + (feedback === 'like' ? 'active-like' : '') + '" title="Gostei" data-id="' + idchatmensagem + '"><i class="fa fa-thumbs-up"></i></button>';
                actionsDiv.innerHTML += '<button type="button" class="msg-action btn-dislike ' + (feedback === 'dislike' ? 'active-dislike' : '') + '" title="Não gostei" data-id="' + idchatmensagem + '"><i class="fa fa-thumbs-down"></i></button>';
                actionsDiv.innerHTML += '<div class="position-relative d-inline"><button type="button" class="msg-action btn-share" title="Compartilhar" data-id="' + idchatmensagem + '"><i class="fa fa-share-alt"></i></button><div class="share-dropdown" style="display: none;"></div></div>';
                actionsDiv.innerHTML += '<button type="button" class="msg-action btn-regenerate" title="Regenerar" data-id="' + idchatmensagem + '"><i class="fa fa-redo"></i></button>';
                actionsDiv.innerHTML += '<div class="position-relative d-inline"><button type="button" class="msg-action btn-more" title="Mais opções"><i class="fa fa-ellipsis-h"></i></button><div class="more-options-dropdown" style="display: none;"><button type="button" class="btn-copy-text">Copiar texto</button><button type="button" class="btn-export-text">Exportar como texto</button></div></div>';
            } else if (idchatmensagem) {
                actionsDiv.innerHTML += '<div class="position-relative d-inline"><button type="button" class="msg-action btn-share" title="Compartilhar" data-id="' + idchatmensagem + '"><i class="fa fa-share-alt"></i></button><div class="share-dropdown" style="display: none;"></div></div>';
            }
            contentDiv.appendChild(actionsDiv);
            
            if (tipo === 'assistant') {
                const trigger = document.createElement('button');
                trigger.type = 'button';
                trigger.className = 'agent-avatar-trigger';
                trigger.title = 'Ver sobre o agente';
                trigger.appendChild(avatar);
                messageWithAvatar.appendChild(trigger);
            } else {
                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();
        }

        // ----- Barra de ações (delegação de eventos) -----
        $(chatMessages).on('click', '.btn-copy', function() {
            const msg = $(this).closest('.message').find('.message-body')[0];
            const text = msg ? (msg.innerText || msg.textContent || '') : '';
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(function() { alert('Copiado!'); }).catch(function() { fallbackCopy(text); });
            } else { fallbackCopy(text); }
        });
        function fallbackCopy(text) {
            const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); alert('Copiado!');
        }

        $(chatMessages).on('click', '.btn-like', function() {
            const id = $(this).data('id');
            const btn = $(this); const btnDislike = btn.siblings('.btn-dislike');
            $.post('{{ route("chats.feedbackMensagem", ["idchatmensagem" => ":id"]) }}'.replace(':id', id), { _token: $('input[name="_token"]').val(), feedback: 'like' })
                .done(function() { btn.addClass('active-like'); btnDislike.removeClass('active-dislike'); })
                .fail(function() { alert('Erro ao enviar feedback.'); });
        });
        $(chatMessages).on('click', '.btn-dislike', function() {
            const id = $(this).data('id');
            const btn = $(this); const btnLike = btn.siblings('.btn-like');
            $.post('{{ route("chats.feedbackMensagem", ["idchatmensagem" => ":id"]) }}'.replace(':id', id), { _token: $('input[name="_token"]').val(), feedback: 'dislike' })
                .done(function() { btn.addClass('active-dislike'); btnLike.removeClass('active-like'); })
                .fail(function() { alert('Erro ao enviar feedback.'); });
        });

        $(chatMessages).on('click', '.btn-share', function(e) {
            e.stopPropagation();
            const id = $(this).data('id');
            const dropdown = $(this).siblings('.share-dropdown');
            const otherDropdowns = $(chatMessages).find('.share-dropdown').not(dropdown);
            otherDropdowns.hide();
            $(chatMessages).find('.more-options-dropdown').hide();
            if (dropdown.is(':visible')) { dropdown.hide(); return; }
            if (dropdown.find('.share-user').length === 0) {
                dropdown.html('<span class="text-muted">Carregando...</span>');
                $.get('{{ route("chats.usuariosParaCompartilhar") }}').done(function(r) {
                    if (r.success && r.usuarios && r.usuarios.length) {
                        dropdown.empty();
                        dropdown.append('<input type="text" class="share-filter-input" placeholder="Filtrar pessoa..." autocomplete="off" />');
                        const listDiv = $('<div class="share-list"></div>');
                        r.usuarios.forEach(function(u) {
                            const nome = (u.nome || '').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                            const email = (u.email || '').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                            listDiv.append('<button type="button" class="share-user" data-id="' + u.id + '" data-nome="' + nome + '" data-email="' + email + '">' + (u.nome || 'Sem nome') + '<small>' + (u.email || '') + '</small></button>');
                        });
                        dropdown.append(listDiv);
                        var scrollTop = chatMessages.scrollTop;
                        dropdown.find('.share-filter-input').focus();
                        requestAnimationFrame(function() { chatMessages.scrollTop = scrollTop; });
                    } else {
                        dropdown.html('<span class="text-muted">Nenhum usuário disponível.</span>');
                    }
                }).fail(function() { dropdown.html('<span class="text-danger">Erro ao carregar lista.</span>'); });
            } else {
                dropdown.find('.share-filter-input').val('');
                dropdown.find('.share-user').removeClass('share-user-hidden');
                dropdown.find('.share-no-results').remove();
                var scrollTop = chatMessages.scrollTop;
                dropdown.find('.share-filter-input').focus();
                requestAnimationFrame(function() { chatMessages.scrollTop = scrollTop; });
            }
            dropdown.show();
        });
        $(chatMessages).on('focus', '.share-filter-input', function() {
            var scrollTop = chatMessages.scrollTop;
            requestAnimationFrame(function() { chatMessages.scrollTop = scrollTop; });
        });
        $(chatMessages).on('input', '.share-filter-input', function() {
            const filter = $(this).val().toLowerCase().trim();
            const dropdown = $(this).closest('.share-dropdown');
            const list = dropdown.find('.share-list');
            dropdown.find('.share-no-results').remove();
            let visible = 0;
            list.find('.share-user').each(function() {
                const nome = ($(this).data('nome') || '').toLowerCase();
                const email = ($(this).data('email') || '').toLowerCase();
                const match = !filter || nome.indexOf(filter) >= 0 || email.indexOf(filter) >= 0;
                $(this).toggleClass('share-user-hidden', !match);
                if (match) visible++;
            });
            if (visible === 0 && filter) {
                list.after('<div class="share-no-results">Nenhuma pessoa encontrada.</div>');
            }
        });
        $(chatMessages).on('click', '.share-user', function() {
            const idmsg = $(this).closest('.message').data('idchatmensagem');
            const idDest = $(this).data('id');
            const nome = $(this).data('nome');
            const dropdown = $(this).closest('.share-dropdown');
            $.post('{{ url("/chats/mensagem") }}/' + idmsg + '/compartilhar', { _token: $('input[name="_token"]').val(), id_destinatario: idDest })
                .done(function(r) { dropdown.hide(); alert(r.message || 'Compartilhado com ' + nome); })
                .fail(function(xhr) { var m = (xhr.responseJSON && xhr.responseJSON.error) || 'Erro ao compartilhar.'; alert(m); });
        });
        $(document).on('click', function() { $(chatMessages).find('.share-dropdown, .more-options-dropdown').hide(); });
        $(chatMessages).on('click', '.message-actions, .share-dropdown, .more-options-dropdown', function(e) { e.stopPropagation(); });

        $(chatMessages).on('click', '.btn-regenerate', function() {
            const idMsg = $(this).data('id');
            const msgEl = $(this).closest('.message');
            const prevUser = msgEl.prevAll('.message.user').first();
            const textUser = prevUser.length ? prevUser.find('.message-body').text().trim() : '';
            if (textUser) { chatInput.value = textUser; chatInput.focus(); } else { alert('Não há pergunta anterior para regenerar.'); }
        });

        $(chatMessages).on('click', '.btn-more', function(e) {
            e.stopPropagation();
            const drop = $(this).siblings('.more-options-dropdown');
            $(chatMessages).find('.share-dropdown').hide();
            $(chatMessages).find('.more-options-dropdown').not(drop).hide();
            drop.toggle();
        });
        $(chatMessages).on('click', '.btn-copy-text', function() {
            const text = $(this).closest('.message').find('.message-body').text() || '';
            if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(function() { alert('Copiado!'); });
            else fallbackCopy(text);
            $(this).closest('.more-options-dropdown').hide();
        });
        $(chatMessages).on('click', '.btn-export-text', function() {
            const text = $(this).closest('.message').find('.message-body').text() || '';
            const a = document.createElement('a'); a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text); a.download = 'mensagem-' + Date.now() + '.txt'; a.click();
            $(this).closest('.more-options-dropdown').hide();
        });
    </script>
@endsection