jQuery(document).ready(function($) {
    if (typeof tarotistas_ajax_object === 'undefined' || !tarotistas_ajax_object.consulta_id) {
        console.error('Error: ID de consulta no definido o variable de objeto AJAX no encontrada.');
        return;
    }

    var consultaId = tarotistas_ajax_object.consulta_id;
    var ajax_url = tarotistas_ajax_object.ajax_url;
    var nonce = tarotistas_ajax_object.nonce;
    var llamadaFinalizada = false;

    // Mostrar/ocultar áreas según tipo de consulta
    var tipoConsulta = tarotistas_ajax_object.tipo_consulta;
    if (tipoConsulta === 'chat') {
        $('#chat-area').show();
        $('#audio-area, #video-area, #control-camara, #control-microfono').hide();
    }
    if (tipoConsulta === 'audio') {
        $('#chat-area, #audio-area, #control-microfono').show();
        $('#video-area, #control-camara').hide();
    }
    if (tipoConsulta === 'video') {
        $('#chat-area, #audio-area, #video-area, #control-camara, #control-microfono').show();
    }

    // ⏱️ Contador visual de duración (minutos y segundos)
    var segundos = 0;
    var contadorInterval = setInterval(function() {
        if (!llamadaFinalizada) {
            segundos += 1;
            var minutos = Math.floor(segundos / 60);
            var segRestantes = segundos % 60;
            $('#duracion-llamada').text(minutos + ' min ' + segRestantes + ' seg');
        } else {
            clearInterval(contadorInterval);
        }
    }, 1000);

    // Botón manual para finalizar llamada
    $('#finalizar-llamada-btn').on('click', function() {
        if (llamadaFinalizada) return;
        if (confirm("¿Estás seguro de que quieres finalizar la llamada? Se realizará la facturación.")) {
            $(this).prop('disabled', true).text('Finalizando...');
            finalizarLlamada();
        }
    });

    // 🧾 Función para finalizar la llamada y facturar
    function finalizarLlamada() {
        if (llamadaFinalizada) return;
        llamadaFinalizada = true;
        clearInterval(contadorInterval);

        $.ajax({
            url: ajax_url,
            type: 'POST',
            data: {
                action: 'end_call_billing_ajax',
                nonce: nonce,
                consulta_id: consultaId,
                duracion_visual: segundos
            },
            success: function(response) {
                if (response.success && response.data) {
                    $('#resumen-final-modal').remove();
                    mostrarResumenFinal(
                        response.data.duracion_minutos,
                        response.data.costo_total,
                        response.data.ganancia_tarotista
                    );
                    setTimeout(function() {
                        window.location.href = '/acceso-cliente/';
                    }, 6000);
                } else {
                    console.warn("Respuesta del servidor:", response.data?.message || 'Sin mensaje');
                    $('#finalizar-llamada-btn').prop('disabled', false).text('Finalizar llamada');
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error("Error AJAX al finalizar llamada: " + textStatus, errorThrown);
                $('#finalizar-llamada-btn').prop('disabled', false).text('Finalizar llamada');
            }
        });
    }

    // 🔐 Facturación al cerrar pestaña
    window.addEventListener('beforeunload', function () {
        if (!llamadaFinalizada) {
            finalizarLlamada();
        }
    });

    // 🧾 Mostrar resumen visual
    function mostrarResumenFinal(duracion, costo, ganancia) {
        const resumenHtml = `
            <div id="resumen-final-modal" style="
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: white;
                border: 2px solid #007bff;
                border-radius: 10px;
                padding: 25px;
                z-index: 9999;
                box-shadow: 0 0 20px rgba(0,0,0,0.2);
                text-align: center;
                font-size: 18px;
            ">
                <h3>✅ Consulta Finalizada</h3>
                <p><strong>Duración:</strong> ${duracion} min</p>
                <p><strong>Costo total:</strong> ${costo} monedas</p>
                <p><strong>Ganancia del tarotista:</strong> ${ganancia} monedas</p>
                <p style="margin-top: 15px; font-size: 14px; color: #555;">Serás redirigido en unos segundos...</p>
            </div>
        `;
        $('#resumen-final-modal').remove();
        $('body').append(resumenHtml);
    }
});