/**
 * SECMCA API Debug Panel
 * Sistema de debug flotante con popup modal para rastrear llamadas al API
 */

(function() {
    'use strict';
    
    // Almacén global de eventos de debug
    window.SECMCADebug = {
        events: [],
        currentSession: null,
        
        // NUEVO: Agregar evento desde el servidor (PHP)
        addEventFromServer: function(sessionData) {
            const event = {
                id: this.events.length + 1,
                type: 'session',
                timestamp: new Date().toISOString(),
                data: sessionData
            };
            this.events.push(event);
            this.updateBadge();
            this.renderEvents();
            console.log('[SECMCA Debug] Evento recibido desde servidor:', sessionData);
        },
        
        // Agregar un nuevo evento de debug
        addEvent: function(type, data) {
            const event = {
                id: this.events.length + 1,
                type: type,
                timestamp: new Date().toISOString(),
                data: data
            };
            this.events.push(event);
            this.updateBadge();
            console.log('[SECMCA Debug]', type, data);
        },
        
        // Iniciar una nueva sesión (por ejemplo, al cargar parámetros o datos)
        startSession: function(name) {
            this.currentSession = {
                name: name,
                startTime: new Date().toISOString(),
                steps: []
            };
        },
        
        // Agregar un paso a la sesión actual
        addStep: function(step) {
            if (this.currentSession) {
                this.currentSession.steps.push({
                    ...step,
                    timestamp: new Date().toISOString()
                });
            }
        },
        
        // Finalizar sesión y agregarla como evento
        endSession: function(status = 'success') {
            if (this.currentSession) {
                this.currentSession.endTime = new Date().toISOString();
                this.currentSession.status = status;
                this.addEvent('session', this.currentSession);
                this.currentSession = null;
            }
        },
        
        // Actualizar badge de la burbuja
        updateBadge: function() {
            const badge = document.querySelector('.secmca-debug-badge');
            if (badge) {
                badge.textContent = this.events.length;
                // Si hay eventos, animar la burbuja
                if (this.events.length > 0) {
                    const bubble = document.querySelector('.secmca-debug-bubble');
                    if (bubble) {
                        bubble.style.animation = 'pulse 2s infinite';
                    }
                }
            }
        },
        
        // Limpiar eventos
        clearEvents: function() {
            this.events = [];
            this.updateBadge();
            this.renderEvents();
        }
    };
    
    // NUEVO: Cargar eventos del servidor al iniciar
    function loadEventsFromServer() {
        if (window.SECMCA_DEBUG_EVENTS && window.SECMCA_DEBUG_EVENTS.length > 0) {
            console.log('[SECMCA Debug] Cargando ' + window.SECMCA_DEBUG_EVENTS.length + ' eventos del servidor');
            window.SECMCA_DEBUG_EVENTS.forEach(function(sessionData) {
                window.SECMCADebug.addEventFromServer(sessionData);
            });
        } else {
            console.log('[SECMCA Debug] No hay eventos del servidor para cargar');
        }
    }
    
    // Inicializar cuando el DOM esté listo
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
    
    function init() {
        // Solo cargar en admin o si el usuario está logueado
        if (!document.body.classList.contains('logged-in') && !document.body.classList.contains('wp-admin')) {
            console.log('[SECMCA Debug] Usuario no logueado, no se carga el panel');
            return;
        }
        
        console.log('[SECMCA Debug] Inicializando panel de debug...');
        createDebugPanel();
        attachEventListeners();
        
        // NUEVO: Cargar eventos del servidor después de crear el panel
        setTimeout(function() {
            loadEventsFromServer();
        }, 100);
    }
    
    function createDebugPanel() {
        // Crear burbuja flotante
        const bubble = document.createElement('div');
        bubble.className = 'secmca-debug-bubble';
        bubble.innerHTML = `
            <span class="secmca-debug-bubble-icon">🐛</span>
            <span class="secmca-debug-badge">0</span>
        `;
        
        // Crear overlay y modal
        const overlay = document.createElement('div');
        overlay.className = 'secmca-debug-overlay';
        overlay.innerHTML = `
            <div class="secmca-debug-modal">
                <div class="secmca-debug-header">
                    <h2 class="secmca-debug-title">
                        <span>🔍</span>
                        <span>SECMCA API Debug Panel</span>
                    </h2>
                    <button class="secmca-debug-close" aria-label="Cerrar">×</button>
                </div>
                <div class="secmca-debug-content">
                    <div class="secmca-debug-steps" id="secmca-debug-steps">
                        <div class="secmca-debug-empty">
                            <div class="secmca-debug-empty-icon">📊</div>
                            <div class="secmca-debug-empty-text">No hay eventos de debug registrados aún</div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        document.body.appendChild(bubble);
        document.body.appendChild(overlay);
    }
    
    function attachEventListeners() {
        const bubble = document.querySelector('.secmca-debug-bubble');
        const overlay = document.querySelector('.secmca-debug-overlay');
        const closeBtn = document.querySelector('.secmca-debug-close');
        
        // Abrir modal
        bubble.addEventListener('click', function() {
            overlay.classList.add('active');
            window.SECMCADebug.renderEvents();
        });
        
        // Cerrar modal
        closeBtn.addEventListener('click', function() {
            overlay.classList.remove('active');
        });
        
        // Cerrar al hacer click en el overlay
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                overlay.classList.remove('active');
            }
        });
        
        // Cerrar con ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && overlay.classList.contains('active')) {
                overlay.classList.remove('active');
            }
        });
    }
    
    // Renderizar eventos en el panel
    window.SECMCADebug.renderEvents = function() {
        const container = document.getElementById('secmca-debug-steps');
        
        if (this.events.length === 0) {
            container.innerHTML = `
                <div class="secmca-debug-empty">
                    <div class="secmca-debug-empty-icon">📊</div>
                    <div class="secmca-debug-empty-text">No hay eventos de debug registrados aún</div>
                </div>
            `;
            return;
        }
        
        container.innerHTML = '';
        
        // Renderizar eventos en orden inverso (más reciente primero)
        this.events.slice().reverse().forEach((event, index) => {
            if (event.type === 'session') {
                container.appendChild(createSessionCard(event, index === 0));
            }
        });
    };
    
    function createSessionCard(event, isExpanded = false) {
        const session = event.data;
        const statusClass = session.status || 'success';
        
        const card = document.createElement('div');
        card.className = `secmca-debug-step ${statusClass} ${isExpanded ? '' : 'collapsed'}`;
        
        // Calcular duración
        const duration = session.endTime && session.startTime 
            ? ((new Date(session.endTime) - new Date(session.startTime)) / 1000).toFixed(2)
            : 'N/A';
        
        // Header del card
        const header = document.createElement('div');
        header.className = 'secmca-debug-step-header';
        header.innerHTML = `
            <div class="secmca-debug-step-title">
                <span class="secmca-debug-step-icon">${getStatusIcon(statusClass)}</span>
                <span>${session.name}</span>
                <span class="secmca-debug-status ${statusClass}">${duration}s</span>
            </div>
            <span class="secmca-debug-step-toggle">▼</span>
        `;
        
        // Body del card
        const body = document.createElement('div');
        body.className = 'secmca-debug-step-body';
        
        // Renderizar cada paso de la sesión
        session.steps.forEach((step, index) => {
            body.appendChild(createStepContent(step, index + 1));
        });
        
        card.appendChild(header);
        card.appendChild(body);
        
        // Toggle collapse
        header.addEventListener('click', function() {
            card.classList.toggle('collapsed');
        });
        
        return card;
    }
    
    function createStepContent(step, stepNumber) {
        const container = document.createElement('div');
        container.style.marginBottom = '24px';
        container.style.paddingBottom = '24px';
        container.style.borderBottom = '1px solid #e0e0e0';
        
        // Título del paso
        const title = document.createElement('h4');
        title.style.marginBottom = '16px';
        title.style.fontSize = '15px';
        title.style.fontWeight = '600';
        title.innerHTML = `${stepNumber}. ${step.title}`;
        container.appendChild(title);
        
        // URL consultada (si existe)
        if (step.url) {
            container.appendChild(createInfoBlock('🌐 URL Consultada', step.url, false));
        }
        
        // Headers (si existen)
        if (step.headers) {
            const headersText = typeof step.headers === 'object' 
                ? JSON.stringify(step.headers, null, 2)
                : step.headers;
            container.appendChild(createInfoBlock('📤 Headers', headersText, true));
        }
        
        // HTTP Status (si existe)
        if (step.httpStatus) {
            const statusBadge = `<span class="secmca-debug-status ${getStatusClassFromCode(step.httpStatus)}">HTTP ${step.httpStatus}</span>`;
            container.appendChild(createInfoBlock('📊 Status', statusBadge, false, true));
        }
        
        // Response (si existe)
        if (step.response) {
            const responseText = typeof step.response === 'object'
                ? JSON.stringify(step.response, null, 2)
                : step.response;
            container.appendChild(createInfoBlock('📥 Respuesta Completa', responseText, true));
        }
        
        // Datos transformados (si existen)
        if (step.transformed) {
            const transformedText = typeof step.transformed === 'object'
                ? JSON.stringify(step.transformed, null, 2)
                : step.transformed;
            container.appendChild(createInfoBlock('🔄 Datos Transformados', transformedText, true));
        }
        
        // Mensaje de error (si existe)
        if (step.error) {
            container.appendChild(createInfoBlock('❌ Error', step.error, false));
        }
        
        // Notas adicionales (si existen)
        if (step.notes) {
            container.appendChild(createInfoBlock('📝 Notas', step.notes, false));
        }
        
        return container;
    }
    
    function createInfoBlock(label, value, isCode = false, isHTML = false) {
        const block = document.createElement('div');
        block.className = 'secmca-debug-info-block';
        
        const labelEl = document.createElement('div');
        labelEl.className = 'secmca-debug-info-label';
        labelEl.textContent = label;
        
        const valueEl = document.createElement('div');
        valueEl.className = `secmca-debug-info-value ${isCode ? 'code' : ''}`;
        
        if (isHTML) {
            valueEl.innerHTML = value;
        } else if (isCode) {
            const pre = document.createElement('pre');
            pre.textContent = value;
            valueEl.appendChild(pre);
        } else {
            valueEl.textContent = value;
        }
        
        block.appendChild(labelEl);
        block.appendChild(valueEl);
        
        return block;
    }
    
    function getStatusIcon(status) {
        switch(status) {
            case 'success': return '✅';
            case 'error': return '❌';
            case 'warning': return '⚠️';
            default: return '📊';
        }
    }
    
    function getStatusClassFromCode(code) {
        if (code >= 200 && code < 300) return 'success';
        if (code >= 400 && code < 500) return 'error';
        if (code >= 500) return 'error';
        return 'warning';
    }
    
})();
