@extends('layouts.contentNavbarLayout')

@section('title', 'CRM - Chat en Vivo')

@section('page-style')
<style>
    .chat-history {
        height: 60vh;
        overflow-y: auto;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 8px;
    }
    .message {
        margin-bottom: 15px;
        max-width: 75%;
    }
    .message.entrante {
        align-self: flex-start;
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 0 10px 10px 10px;
        padding: 10px;
    }
    .message.saliente {
        align-self: flex-end;
        background-color: #696cff;
        color: white;
        border-radius: 10px 0 10px 10px;
        padding: 10px;
        margin-left: auto;
    }
    .message.sistema {
        align-self: center;
        background-color: #f1f1f2;
        color: #6c757d;
        border-radius: 8px;
        padding: 5px 12px;
        font-size: 0.85em;
        margin: 10px auto;
        max-width: 90%;
        text-align: center;
        border: 1px solid #e0e0e0;
    }
    .chat-container {
        display: flex;
        flex-direction: column;
    }
</style>
@endsection

@section('content')
<div class="row">
    <!-- Lista de Conversaciones -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header border-bottom">
                <h5 class="card-title mb-0">Conversaciones</h5>
            </div>
            <div class="list-group list-group-flush" id="conversaciones-list">
                @foreach($conversaciones as $conv)
                    <a href="#" class="list-group-item list-group-item-action @if($loop->first) active @endif" onclick="loadChat({{ $conv->id }}, '{{ $conv->cliente->nombre ?? $conv->cliente->telefono }}')">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">{{ $conv->cliente->nombre ?? 'Sin Nombre' }}</h6>
                            <small>{{ $conv->ultima_interaccion->diffForHumans() }}</small>
                        </div>
                        <p class="mb-1 text-truncate">{{ $conv->cliente->telefono }}</p>
                        @if($conv->resumen)
                            <small class="d-block text-muted mb-1"><i class="ri-information-line"></i> {{ $conv->resumen }}</small>
                        @endif
                        <div class="d-flex justify-content-between align-items-center">
                            <small>Estado: {{ ucfirst($conv->estado) }}</small>
                            @if($conv->asesor_id)
                                <span class="badge bg-label-success" style="font-size: 0.7em;"><i class="ri-user-line"></i> Asesor</span>
                            @else
                                <span class="badge bg-label-info" style="font-size: 0.7em;"><i class="ri-robot-line"></i> Bot</span>
                            @endif
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Área de Chat -->
    <div class="col-md-8">
        <div class="card">
            <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-0" id="chat-title">Selecciona una conversación</h5>
                    <small class="text-muted d-none" id="chat-subtitle">
                        <span id="chat-dni" class="badge bg-label-secondary me-1"></span>
                        <span id="chat-resumen"></span>
                    </small>
                </div>
                <div>
                    <span id="chat-timer" class="badge bg-warning me-3 fs-5 py-2 px-3 d-none shadow-sm"><i class="ri-timer-line"></i> <span id="chat-timer-text">--:--</span></span>
                    <span class="badge bg-label-primary me-2 fs-6 d-none" id="chat-status"></span>
                    <button class="btn btn-sm btn-danger shadow-sm d-none fw-bold" id="btn-close-chat" onclick="closeManualChat()" title="Finalizar Chat"><i class="ri-close-circle-line"></i></button>
                </div>
            </div>
            <div class="card-body chat-container" id="chat-window">
                <div class="chat-history" id="chat-history">
                    <!-- Mensajes se cargarán aquí vía AJAX/WebSocket -->
                </div>
                <div class="mt-3">
                    <form id="send-message-form" class="d-flex gap-2">
                        @csrf
                        <input type="hidden" id="current_conversacion_id" value="">
                        
                        <!-- Botón de Adjuntar Archivo -->
                        <label class="btn btn-outline-secondary mb-0 d-flex align-items-center" style="cursor:pointer;" title="Adjuntar Foto o PDF">
                            <i class="ri-attachment-line"></i>
                            <input type="file" id="media_input" accept=".jpg,.jpeg,.png,.pdf" style="display: none;" onchange="handleFileSelect(event)">
                        </label>

                        <div class="input-group">
                            <input type="text" id="mensaje_input" class="form-control" placeholder="Escribe un mensaje o adjunta un archivo..." disabled required>
                            <button type="submit" class="btn btn-primary" id="btn-enviar" disabled>
                                <i class="ri-send-plane-fill"></i> Enviar
                            </button>
                        </div>
                    </form>
                    <div id="file_preview" class="mt-2 text-muted" style="font-size:0.85em;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('page-script')
<script src="https://js.pusher.com/8.0/pusher.min.js"></script>
<script>
    let currentChatId = null;
    let selectedFile = null;
    const baseUrl = "{{ url('/admin/chat') }}";
    
    let currentMessageCount = 0;
    let pollInterval = null;

    function handleFileSelect(e) {
        if (e.target.files.length > 0) {
            selectedFile = e.target.files[0];
            document.getElementById('file_preview').innerHTML = `📎 Archivo adjunto: <b>${selectedFile.name}</b> <a href="#" onclick="clearFile()" class="text-danger ms-2">Quitar</a>`;
            document.getElementById('mensaje_input').required = false; // No obligar texto si hay archivo
        }
    }

    function clearFile() {
        selectedFile = null;
        document.getElementById('media_input').value = '';
        document.getElementById('file_preview').innerHTML = '';
        document.getElementById('mensaje_input').required = true;
    }

    function startPolling(id) {
        // En lugar de polling completo, podemos hacer un fallback manual si falla Pusher
        // Pero idealmente confiamos solo en WebSocket para actualizaciones en vivo.
        // Se desactiva el pollInterval para evitar load innecesario y parpadeos.
        if (pollInterval) clearInterval(pollInterval);
    }

    function loadChat(id, name) {
        currentChatId = id;
        document.getElementById('chat-title').innerText = name;
        document.getElementById('current_conversacion_id').value = id;
        document.getElementById('mensaje_input').disabled = false;
        document.getElementById('btn-enviar').disabled = false;
        document.getElementById('chat-subtitle').classList.add('d-none');
        clearFile();
        
        fetch(`${baseUrl}/${id}`)
            .then(res => {
                if (!res.ok) throw new Error("Error en red");
                return res.json();
            })
            .then(data => {
                const history = document.getElementById('chat-history');
                history.innerHTML = '';
                
                document.getElementById('chat-status').innerText = data.estado;
                
                if (data.cliente.dni || data.resumen) {
                    document.getElementById('chat-subtitle').classList.remove('d-none');
                    document.getElementById('chat-dni').innerText = data.cliente.dni ? 'DNI: ' + data.cliente.dni : '';
                    document.getElementById('chat-resumen').innerText = data.resumen ? data.resumen : '';
                }

                if (data.mensajes) {
                    currentMessageCount = data.mensajes.length;
                    let lastMsg = null;
                    // Solo renderizamos una vez al cargar
                    data.mensajes.forEach(msg => {
                        appendMessage(msg);
                        lastMsg = msg;
                    });
                    
                    // Guardamos el tiempo del servidor en una variable global para el timer
                    window.currentServerTime = data.server_time;

                    // Manejo del contador de inactividad
                    startInactivityTimer(lastMsg, data.estado);
                }
                scrollToBottom();
                
                setupWebSocket(id);
                // startPolling(id); // Eliminado para no generar doble request
            })
            .catch(error => {
                console.error("Fetch error:", error);
                document.getElementById('chat-title').innerText = "Error cargando chat";
            });
    }

    let inactivityTimerInterval = null;

    function startInactivityTimer(lastMsg, estado) {
        clearInterval(inactivityTimerInterval);
        const timerEl = document.getElementById('chat-timer');
        const timerText = document.getElementById('chat-timer-text');
        const btnClose = document.getElementById('btn-close-chat');
        
        // Mostrar botón siempre y cuando el chat NO esté cerrado
        if (estado !== 'cerrada') {
            btnClose.classList.remove('d-none');
        } else {
            btnClose.classList.add('d-none');
        }

        // Si el estado es activo o pendiente y el último msj es del asesor (saliente o sistema)
        if (estado !== 'cerrada' && lastMsg && (lastMsg.direccion === 'saliente' || lastMsg.tipo === 'sistema')) {
            let dateStr = lastMsg.created_at || new Date().toISOString();
            if (typeof dateStr === 'string' && !dateStr.endsWith('Z')) {
                dateStr = dateStr.replace(' ', 'T') + 'Z'; 
            }
            
            // Usamos la hora del servidor (que inyectamos en loadChat -> data.server_time)
            // Para calcular qué tan viejo es realmente el mensaje y no depender del reloj de la PC.
            // Si por algún motivo server_time no existe, caemos a Date.now()
            let serverTimeStr = window.currentServerTime || new Date().toISOString();
            if (typeof serverTimeStr === 'string' && !serverTimeStr.endsWith('Z')) {
                serverTimeStr = serverTimeStr.replace(' ', 'T') + 'Z';
            }

            let lastTime = new Date(dateStr).getTime();
            let serverNowTime = new Date(serverTimeStr).getTime();

            if (isNaN(lastTime)) lastTime = new Date().getTime();
            if (isNaN(serverNowTime)) serverNowTime = new Date().getTime();
            
            // Diferencia en milisegundos cuando se cargó el mensaje
            const diffInicial = serverNowTime - lastTime;
            
            // Momento exacto de carga en la máquina del cliente
            const localStart = new Date().getTime();

            timerEl.classList.remove('d-none');
            
            inactivityTimerInterval = setInterval(() => {
                const now = new Date().getTime();
                const diffLocal = now - localStart; // tiempo transcurrido desde que cargó
                const totalDiff = diffInicial + diffLocal; // tiempo total que ha pasado desde el mensaje
                const remaining = (20 * 60 * 1000) - totalDiff;

                if (remaining <= 0) {
                    timerText.innerText = "Auto-cerrando...";
                    timerEl.classList.replace('bg-warning', 'bg-danger');
                    clearInterval(inactivityTimerInterval);
                    
                    fetch(`${baseUrl}/${currentChatId}/close`, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                        }
                    })
                    .then(res => res.json())
                    .then(data => {
                        if(data.success) {
                            loadChat(currentChatId);
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        setTimeout(() => loadChat(currentChatId), 5000); // fallback
                    });
                } else {
                    const mins = Math.floor(remaining / 60000);
                    const secs = Math.floor((remaining % 60000) / 1000);
                    timerText.innerText = `Cierre en: ${mins}:${secs < 10 ? '0' : ''}${secs}`;
                    timerEl.classList.replace('bg-danger', 'bg-warning');
                }
            }, 1000);
        } else {
            timerEl.classList.add('d-none');
        }
    }

    function closeManualChat() {
        if (!currentChatId) return;
        if (!confirm("¿Estás seguro de finalizar esta conversación? Se enviará un mensaje al cliente informándole del cierre.")) return;

        document.getElementById('btn-close-chat').disabled = true;
        document.getElementById('btn-close-chat').innerHTML = '<i class="ri-loader-4-line ri-spin"></i>';

        fetch(`${baseUrl}/${currentChatId}/close`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
            }
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                loadChat(currentChatId);
            }
        })
        .catch(err => console.error(err))
        .finally(() => {
            document.getElementById('btn-close-chat').disabled = false;
            document.getElementById('btn-close-chat').innerHTML = '<i class="ri-close-circle-line"></i>';
        });
    }

    function appendMessage(msg) {
        const history = document.getElementById('chat-history');
        const div = document.createElement('div');
        
        if (msg.tipo === 'sistema') {
            div.className = `message sistema`;
        } else {
            div.className = `message ${msg.direccion}`;
        }
        
        let mediaUrl = msg.contenido;
        if (mediaUrl.startsWith('/storage')) {
            mediaUrl = "{{ url('') }}" + mediaUrl;
        }
        
        if (msg.tipo === 'image') {
            div.innerHTML = `<a href="${mediaUrl}" target="_blank"><img src="${mediaUrl}" class="img-fluid rounded" style="max-width:200px;"></a>`;
        } else if (msg.tipo === 'document') {
            div.innerHTML = `<a href="${mediaUrl}" target="_blank" class="btn btn-sm btn-light border"><i class="ri-file-pdf-line"></i> Ver Documento (PDF)</a>`;
        } else {
            div.innerText = msg.contenido;
        }
        
        history.appendChild(div);
        scrollToBottom();
    }

    function scrollToBottom() {
        const history = document.getElementById('chat-history');
        history.scrollTop = history.scrollHeight;
    }

    document.getElementById('send-message-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const input = document.getElementById('mensaje_input');
        const conv_id = document.getElementById('current_conversacion_id').value;
        const contenido = input.value;
        
        if ((!contenido && !selectedFile) || !conv_id) return;
        
        input.value = '';
        const fileToSend = selectedFile;
        clearFile();
        
        // Si hay archivo, enviamos con FormData al nuevo endpoint send-media
        if (fileToSend) {
            const formData = new FormData();
            formData.append('archivo', fileToSend);
            formData.append('_token', document.querySelector('input[name="_token"]').value);
            
            // Optimistic visual (sin imagen exacta hasta que vuelva del server)
            appendMessage({direccion: 'saliente', contenido: 'Enviando archivo...', tipo: 'texto'});

            fetch(`${baseUrl}/${currentChatId}/send-media`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(res => {
                if (!res.ok) throw new Error("Error HTTP " + res.status);
                return res.json();
            })
            .then(data => {
                console.log("Archivo enviado exitosamente:", data);
            })
            .catch(err => {
                console.error("Error enviando archivo:", err);
            });
            return;
        }

        // Si es solo texto
        appendMessage({direccion: 'saliente', contenido: contenido, tipo: 'texto'});

        fetch(`${baseUrl}/${currentChatId}/send`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
            },
            body: JSON.stringify({ contenido })
        })
        .then(res => {
            if (!res.ok) throw new Error("Error HTTP " + res.status);
            return res.json();
        })
        .then(data => {
            console.log("Mensaje enviado exitosamente:", data);
        })
        .catch(err => {
            console.error("Error enviando mensaje:", err);
        });
    });

    // Configuración de Pusher/Reverb vía CDN para evitar npm localmente
    const pusher = new Pusher('local', {
        wsHost: window.location.hostname,
        wsPort: 8080,
        forceTLS: false,
        disableStats: true,
        cluster: 'mt1' // Opcional para Reverb
    });

    let currentChannel = null;

    // Se llama desde loadChat() después de actualizar current_conversacion_id
    function setupWebSocket(conv_id) {
        if (currentChannel) {
            pusher.unsubscribe(currentChannel);
        }
        currentChannel = 'private-chat.' + conv_id;
        
        const channel = pusher.subscribe(currentChannel);
        channel.bind('App\\Events\\MessageReceived', function(data) {
            if (data.mensaje.direccion === 'entrante') {
                appendMessage(data.mensaje);
            }
        });
    }

    // Escuchar notificaciones globales del admin
    const empresaId = "{{ auth()->user()->empresa_id ?? 1 }}";
    const adminChannel = pusher.subscribe('private-admin-notifications.' + empresaId);
    
    adminChannel.bind('App\\Events\\ClientRequiresAsesor', function(data) {
        // Reproducir un sonido de alerta si es posible
        try {
            let audio = new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3');
            audio.play();
        } catch(e) {}
        
        // Mostrar alerta en pantalla
        alert(`¡Atención! Un cliente (${data.conversacion.cliente.telefono}) requiere hablar con un asesor experto.`);
        
        // Recargar la página o lista para actualizar los estados
        setTimeout(() => {
            window.location.reload();
        }, 1500);
    });

</script>
@endsection