@extends('layouts.app')
@section('titulo', 'Monitor de Revisiones V1 - ' . $revision->lugar->nombre)
@section('contenido1')

<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('revision.index') }}"><i class="fas fa-list"></i> Revisiones</a></li>
        <li class="breadcrumb-item"><a href="{{ route('revision.show', $revision->id) }}">{{ $revision->lugar->nombre }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Monitor de Revisiones V1</li>
    </ol>
</nav>

<!-- Barra de Estado y Acciones -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div class="d-flex align-items-center gap-3">
        <span class="badge bg-secondary fs-6">{{ $revision->lugar->nombre }}</span>
        <span class="text-muted small"><i class="fas fa-calendar me-1"></i>{{ $revision->fecha_inicio->format('d/m/Y') }}</span>
        <span class="badge bg-info">{{ $revision->tipo_revision_nombre }}</span>
        <span id="statusConexion" class="badge bg-success"><i class="fas fa-wifi"></i> Conectado</span>
        <span id="statusModoManual" class="badge bg-warning" style="display: none;"><i class="fas fa-hand-paper"></i> Modo Manual</span>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('revision.show', $revision->id) }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left"></i> Volver
        </a>

        <button class="btn btn-outline-primary btn-sm" onclick="location.reload()">
            <i class="fas fa-sync-alt"></i> Actualizar
        </button>
    </div>
</div>

<!-- Card Principal de Control -->
<div class="card border-0 shadow-lg mb-4">
    <div class="card-body text-center py-5">
        <!-- Estado Esperando -->
        <div id="estadoEsperando">
            <div class="mb-4">
                <i id="iconoRecepcion" class="fas fa-satellite-dish fa-8x text-primary receiver-animation"></i>
            </div>
            <h3 class="text-primary mb-3">
                <span class="pulse-text">Escuchando Central de Alarmas</span>
            </h3>
            <p class="lead text-muted">
                Esperando eventos de la central para iniciar las pruebas...
            </p>
            <div class="mt-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Cargando...</span>
                </div>
                <p class="text-muted mt-2 small">Sistema en línea y monitoreando</p>
            </div>
        </div>

        <!-- Estado Elemento Detectado (Card Compacto) -->
        <div id="estadoElemento" style="display: none;">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-xl-4">
                    <div class="card border-primary shadow-sm">
                        <div class="card-header bg-primary text-white py-2">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-crosshairs me-2"></i>
                                    <span class="fw-bold">Elemento Detectado</span>
                                </div>
                                <button class="btn btn-sm btn-outline-light" onclick="cancelarElemento()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body p-3">
                            <!-- Información del Elemento -->
                            <div class="text-center mb-3">
                                <h6 class="text-primary mb-1" id="nombreElementoDetectado">Elemento</h6>
                                <div class="d-flex justify-content-center gap-3 small">
                                    <span class="fw-bold" id="lazoElementoDetectado">L-</span>
                                    <span class="fw-bold" id="elementoTipoNumero">S-</span>
                                    <span class="fw-bold" id="tipoEventoYDispositivo">OPTI</span>
                                </div>
                                <div class="small text-muted mt-1" id="infoAdicionalElemento">
                                    <!-- Info adicional aquí -->
                                </div>
                            </div>

                            <!-- Observaciones -->
                            <div class="mb-3">
                                <input type="text" class="form-control form-control-sm" id="observacionesElemento" placeholder="Observaciones (obligatorias para 'Pendiente')">
                            </div>

                            <!-- Botones -->
                            <div class="d-flex gap-2 justify-content-center">
                                <button class="btn btn-success btn-sm" onclick="confirmarEstadoRapido('funciona')">
                                    <i class="fas fa-check me-1"></i>Funciona
                                </button>
                                <button class="btn btn-danger btn-sm" onclick="confirmarEstadoRapido('no funciona')">
                                    <i class="fas fa-times me-1"></i>No Funciona
                                </button>
                                <button class="btn btn-warning btn-sm" onclick="confirmarEstadoRapido('pendiente')">
                                    <i class="fas fa-clock me-1"></i>Pendiente
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Monitor de Eventos y Control de Elementos -->
<div class="row">
    <!-- Panel de Eventos de Central -->
    <div class="col-md-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-info text-white">
                <div class="d-flex justify-content-between align-items-center w-100">
                    <h5 class="mb-0"><i class="fas fa-broadcast-tower me-2"></i>Eventos de Central</h5>
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-sm btn-outline-light" onclick="limpiarEventosTiempoReal()" title="Limpiar eventos">
                            <i class="fas fa-broom"></i>
                        </button>
                        <span class="badge bg-light text-dark" id="contadorEventos">0 eventos</span>
                    </div>
                </div>
            </div>
            <div class="card-body" style="height: 400px; overflow-y: auto;">
                <div id="listaEventos">
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-satellite-dish fa-3x mb-3"></i>
                        <p>Esperando eventos de la central...</p>
                    </div>
                </div>
            </div>
        </div>
          </div>
      
      <!-- Panel de Pendientes y No Funcionan -->
      <div class="col-md-4">
          <div class="card border-0 shadow-sm">
              <div class="card-header bg-warning text-dark">
                  <div class="d-flex justify-content-between align-items-center">
                      <h5 class="mb-0"><i class="fas fa-exclamation-triangle me-2"></i>Por Revisar</h5>
                      <span class="badge bg-dark text-white" id="contadorProblemas">0 elementos</span>
                  </div>
              </div>
              <div class="card-body" style="height: 400px; overflow-y: auto;">
                  <div id="listaElementosProblemas">
                      <div class="text-center text-muted py-4">
                          <i class="fas fa-clipboard-list fa-3x mb-3"></i>
                          <p>No hay elementos con problemas</p>
                          <small class="text-muted">Los elementos pendientes y defectuosos aparecerán aquí</small>
                      </div>
                  </div>
              </div>
          </div>
      </div>

    <!-- Panel de Elementos Revisados -->
    <div class="col-md-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-success text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-check-circle me-2"></i>Revisados</h5>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-light text-dark" id="contadorRevisados">0 elementos</span>
                        <button type="button" class="btn btn-light btn-sm" id="btnVerPendientesZona" title="Ver elementos pendientes de la zona del último evento detectado en tiempo real" style="display: none;">
                            <i class="fas fa-search-location"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body" style="height: 400px; overflow-y: auto;">
                <div id="listaElementosRevisados">
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-clipboard-list fa-3x mb-3"></i>
                        <p>No hay elementos revisados aún...</p>
                        <small class="text-muted">Los elementos confirmados aparecerán aquí</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Panel de Estadísticas -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Estadísticas de la Revisión</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-2">
                        <div class="card bg-primary">
                            <div class="card-body text-white">
                                <h4 id="contRevisados" class="text-white">0/0</h4>
                                <small class="text-white">Revisados</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="card bg-info">
                            <div class="card-body text-white">
                                <h4 id="contPorcentaje" class="text-white">0%</h4>
                                <small class="text-white">Porcentaje</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="card bg-success">
                            <div class="card-body text-white">
                                <h4 id="contFunciona" class="text-white">0</h4>
                                <small class="text-white">Funcionan</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-danger">
                            <div class="card-body text-white">
                                <h4 id="contNoFunciona" class="text-white">0</h4>
                                <small class="text-white">No Funcionan</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-warning">
                            <div class="card-body text-white">
                                <h4 id="contPendiente" class="text-white">0</h4>
                                <small class="text-white">Pendientes</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Controles finales de página -->
<div class="row mt-3">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body py-2">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="devModeToggle">
                    <label class="form-check-label" for="devModeToggle">Modo Desarrollador</label>
                </div>
                <small class="text-muted">Muestra datos crudos del evento y resolución con BD bajo cada evento.</small>
            </div>
        </div>
    </div>
    
    <div class="col-12 mt-2" id="devModeInfo" style="display:none;">
        <div class="alert alert-info mb-0">
            Modo Desarrollador activo. Los eventos mostrarán información adicional de diagnóstico.
        </div>
    </div>
</div>

<!-- Modal para mostrar elementos pendientes por zona -->
<div class="modal fade" id="modalElementosPendientesZona" tabindex="-1" aria-labelledby="modalElementosPendientesZonaLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="modalElementosPendientesZonaLabel">
                    <i class="fas fa-search-location me-2"></i>Elementos Pendientes - Zona del Último Evento
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="modalZonaInfo" class="alert alert-info mb-3" style="display: none;">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-info-circle me-2"></i>
                        <div>
                            <strong id="modalZonaNombre">Zona</strong>
                            <div class="small text-muted" id="modalZonaDetalles">Detalles de la zona</div>
                        </div>
                    </div>
                </div>
                
                <div id="modalElementosPendientesLista">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Cargando...</span>
                        </div>
                        <p class="mt-2 text-muted">Cargando elementos pendientes...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cerrar
                </button>
                <button type="button" class="btn btn-primary" id="btnActualizarElementosPendientes">
                    <i class="fas fa-sync-alt me-1"></i>Actualizar
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
/* Animación del icono receptor */
@keyframes receiver-pulse {
    0% { transform: scale(1) rotateY(0deg); }
    25% { transform: scale(1.1) rotateY(15deg); }
    50% { transform: scale(1.2) rotateY(0deg); }
    75% { transform: scale(1.1) rotateY(-15deg); }
    100% { transform: scale(1) rotateY(0deg); }
}

.receiver-animation {
    animation: receiver-pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(13, 110, 253, 0.3));
}

/* Animación del texto pulsante */
@keyframes pulse-glow {
    0% { opacity: 1; text-shadow: 0 0 5px rgba(13, 110, 253, 0.5); }
    50% { opacity: 0.8; text-shadow: 0 0 20px rgba(13, 110, 253, 0.8); }
    100% { opacity: 1; text-shadow: 0 0 5px rgba(13, 110, 253, 0.5); }
}

.pulse-text {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Efectos de transición suaves */
#estadoEsperando, #estadoElemento {
    transition: all 0.5s ease-in-out;
}

/* Efecto de entrada para el elemento detectado */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.elemento-detectado-animation {
    animation: slideInUp 0.5s ease-out;
}

/* Pulsación en los botones */
.btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

/* Indicador de actividad en el icono */
@keyframes signal-wave {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.signal-indicator::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: #198754;
    border-radius: 50%;
    animation: signal-wave 1.5s infinite;
}

.signal-indicator {
    position: relative;
}

/* Estilos para el diseño compacto del elemento detectado */
#estadoElemento .card {
    max-width: 350px;
    margin: 0 auto;
}

#estadoElemento .card-header {
    font-size: 0.9rem;
}

#estadoElemento .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

#estadoElemento h6 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* Hover effect en botones compactos */
#estadoElemento .btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

/* Input de observaciones compacto */
#observacionesElemento {
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

#observacionesElemento:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
</style>
@endsection

@section('scripts')
<script>
// Variables globales
const REVISION_ID = {{ $revision->id }};
// URLs absolutas generadas por Laravel (evita problemas de base path)
const URL_EVENTOS_STREAM = "{{ route('api.revision.eventos.stream', ['revision' => $revision->id]) }}";
const URL_ELEMENTOS_REVISADOS = "{{ route('api.revision.elementos.revisados', ['revision' => $revision->id]) }}";
const URL_ELEMENTOS_PROBLEMAS = "{{ route('api.revision.elementos.problemas', ['revision' => $revision->id]) }}";
const URL_ESTADISTICAS = "{{ route('api.revision.estadisticas', ['revision' => $revision->id]) }}";
const URL_ELEMENTOS_BD = "{{ route('api.revision.elementos.bd', ['revision' => $revision->id]) }}";
const URL_ZONA_ULTIMO_ELEMENTO = "{{ route('api.revision.zona.ultimo.elemento', ['revision' => $revision->id]) }}";
const URL_ELEMENTOS_PENDIENTES_ZONA = "{{ route('api.revision.elementos.pendientes.zona', ['revision' => $revision->id, 'zona' => 'ZONA_ID']) }}";
const URL_CONFIRMAR = "{{ route('api.revision.elemento.confirmar', ['revision' => $revision->id]) }}";
const URL_LIMPIAR_EVENTOS = "{{ route('api.revision.eventos.limpiar', ['revision' => $revision->id]) }}";
// Eliminación reutilizando confirmar (accion=eliminar)
const URL_ELIMINAR = "{{ route('api.revision.elemento.confirmar', ['revision' => $revision->id]) }}";
let eventoActual = null;
let elementoActual = null;
let eventosProcessing = false;
let zonaActual = null;
let modalElementosPendientes = null;
let esPrimeraCarga = true; // Para evitar mostrar elemento detectado en la carga inicial
let eventosProceados = new Set(); // IDs de eventos ya procesados o cancelados
let seleccionManualActiva = false; // Para evitar que la detección automática sobrescriba selecciones manuales
let datosAntesConfirmacion = null; // Para almacenar datos antes de confirmar estado

// Dev Mode
const DEV_MODE_KEY = 'monitor_dev_mode';
let devModeEnabled = (localStorage.getItem(DEV_MODE_KEY) === '1');
let elementosBDCache = null; // Cache de elementos BD para resolver matches
let ultimosEventos = [];     // Últimos eventos recibidos para re-render

// Listas de abreviaturas para distinguir Sensores (S) y Módulos (M)
const MODULE_ABBREVIATIONS = ['MON','CON','AUX','ASPR','SPRK','ZMX','CDI','BOOSTER','PUL','SIRE','SIR'];
const SENSOR_ABBREVIATIONS = ['OPTI','OPT','TER','MULT','SMART 4','SMART4'];

function esModuloPorAbreviatura(tipo) {
    const t = (tipo || '').toString().trim().toUpperCase();
    if (!t) return false;
    if (t.includes('MOD')) return true;
    return MODULE_ABBREVIATIONS.includes(t);
}

function etiquetaTipoNumero(tipo, numero) {
    const prefijo = esModuloPorAbreviatura(tipo) ? 'M' : 'S';
    const num = Number(numero);
    const numStr = Number.isFinite(num) ? num.toString().padStart(2, '0') : '--';
    return `${prefijo}${numStr}`;
}

/**
 * Calcular similitud entre dos nombres usando algoritmo de Levenshtein
 * Retorna un valor entre 0 y 1 (1 = idéntico, 0 = completamente diferente)
 */
function calcularSimilitudNombre(nombre1, nombre2) {
    if (!nombre1 || !nombre2) return 0;
    
    // Normalizar nombres: convertir a minúsculas y quitar espacios extra
    const n1 = nombre1.toString().toLowerCase().trim();
    const n2 = nombre2.toString().toLowerCase().trim();
    
    if (n1 === n2) return 1;
    
    // Calcular distancia de Levenshtein
    const distancia = calcularDistanciaLevenshtein(n1, n2);
    
    // Calcular similitud como porcentaje
    const maxLength = Math.max(n1.length, n2.length);
    const similitud = maxLength === 0 ? 1 : (maxLength - distancia) / maxLength;
    
    return Math.max(0, similitud);
}

/**
 * Calcular distancia de Levenshtein entre dos strings
 */
function calcularDistanciaLevenshtein(str1, str2) {
    const matrix = [];
    
    // Inicializar matriz
    for (let i = 0; i <= str2.length; i++) {
        matrix[i] = [i];
    }
    
    for (let j = 0; j <= str1.length; j++) {
        matrix[0][j] = j;
    }
    
    // Llenar matriz
    for (let i = 1; i <= str2.length; i++) {
        for (let j = 1; j <= str1.length; j++) {
            if (str2.charAt(i - 1) === str1.charAt(j - 1)) {
                matrix[i][j] = matrix[i - 1][j - 1];
            } else {
                matrix[i][j] = Math.min(
                    matrix[i - 1][j - 1] + 1, // sustitución
                    matrix[i][j - 1] + 1,     // inserción
                    matrix[i - 1][j] + 1      // eliminación
                );
            }
        }
    }
    
    return matrix[str2.length][str1.length];
}

// Inicializar cuando la página carga
document.addEventListener('DOMContentLoaded', function() {
    console.log('Monitor de Revisiones V1 - Iniciando...');
    iniciarMonitorEventos();
    cargarEstadisticas();
    inicializarDevMode();
    inicializarModalElementosPendientes();
});

// Manejo de pulsación prolongada (2s)
let lpTimer = null;
let lpActive = false;
function lpStart(ev, tipo, revisadoId) {
    try {
        lpEnd();
        lpActive = true;
        lpTimer = setTimeout(async () => {
            if (!lpActive) return;
            const confirmar = confirm('¿Deseas eliminar este registro?');
            if (!confirmar) { lpEnd(); return; }
            try {
                const params = new URLSearchParams();
                params.append('accion', 'eliminar');
                params.append('revisado_id', String(revisadoId));
                const resp = await fetch(URL_ELIMINAR, { 
                    method: 'POST',
                    headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: params
                });
                const data = await resp.json().catch(() => ({ success: false }));
                if (data.success) {
                    mostrarAlert('Elemento eliminado correctamente', 'success');
                    // Refrescar listas correspondientes
                    if (tipo === 'revisado') {
                        obtenerElementosRevisados();
                    } else if (tipo === 'problematico') {
                        obtenerElementosProblemas();
                    }
                    cargarEstadisticas();
                } else {
                    mostrarAlert(data.message || 'No se pudo eliminar el elemento', 'danger');
                }
            } catch (e) {
                console.error('Error al eliminar elemento:', e);
                mostrarAlert('Error de conexión al eliminar', 'danger');
            } finally {
                lpEnd();
            }
        }, 2000);
    } catch (_) {}
}
function lpEnd() {
    lpActive = false;
    if (lpTimer) {
        clearTimeout(lpTimer);
        lpTimer = null;
    }
}

/**
 * Iniciar el monitor de eventos de Central
 */
function iniciarMonitorEventos() {
    // Llamar cada 2 segundos para eventos
    setInterval(() => {
        if (!eventosProcessing) {
            obtenerEventos();
        }
    }, 2000);
    
    // Llamar cada 3 segundos para elementos revisados, problemas y estadísticas
    setInterval(() => {
        obtenerElementosRevisados();
        obtenerElementosProblemas();
        cargarEstadisticas();
    }, 3000);
    
    // Primera llamada inmediata
    obtenerEventos();
    obtenerElementosRevisados();
    obtenerElementosProblemas();
    cargarEstadisticas();
}

// Inicializar Modo Desarrollador
function inicializarDevMode() {
    try {
        const toggle = document.getElementById('devModeToggle');
        const info = document.getElementById('devModeInfo');
        if (toggle) {
            toggle.checked = devModeEnabled;
            info.style.display = devModeEnabled ? 'block' : 'none';
            // Si ya viene activo al cargar, precargar cache y refrescar listas
            if (devModeEnabled && !elementosBDCache) {
                cargarElementosBDCache().then(() => {
                    obtenerElementosRevisados();
                    obtenerElementosProblemas();
                });
            }
            toggle.addEventListener('change', async () => {
                devModeEnabled = toggle.checked;
                localStorage.setItem(DEV_MODE_KEY, devModeEnabled ? '1' : '0');
                info.style.display = devModeEnabled ? 'block' : 'none';
                // Pre-cargar cache BD si se activa y no está cargada
                if (devModeEnabled && !elementosBDCache) {
                    await cargarElementosBDCache();
                }
                // Re-renderizar eventos con el nuevo estado
                if (ultimosEventos && ultimosEventos.length) {
                    actualizarListaEventos(ultimosEventos);
                }
                // Refrescar listas de BD para que muestren backend asociado
                obtenerElementosRevisados();
                obtenerElementosProblemas();
            });
        }
    } catch (e) { console.warn('Error inicializando DevMode', e); }
}

async function cargarElementosBDCache() {
    try {
        const resp = await fetch(URL_ELEMENTOS_BD);
        const data = await resp.json();
        if (data?.success && Array.isArray(data.elementos)) {
            elementosBDCache = data.elementos;
            console.log('DevMode: elementos BD cacheados:', elementosBDCache?.length || 0);
        }
    } catch (e) {
        console.warn('No se pudo cargar elementos BD para DevMode', e);
    }
}
// Limpiar eventos de central
async function limpiarEventosTiempoReal() {
    try {
        const csrfMeta = document.querySelector('meta[name="csrf-token"]');
        const headers = { 'Accept': 'application/json' };
        if (csrfMeta && csrfMeta.content) {
            headers['X-CSRF-TOKEN'] = csrfMeta.content;
        }
        const resp = await fetch(URL_LIMPIAR_EVENTOS, { method: 'POST', headers });
        const data = await resp.json();
        if (data.success) {
            // Vaciar lista y contador en UI inmediatamente
            const container = document.getElementById('listaEventos');
            const contador = document.getElementById('contadorEventos');
            if (container) {
                container.innerHTML = `
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-satellite-dish fa-3x mb-3"></i>
                        <p>Esperando eventos de la central...</p>
                    </div>
                `;
            }
            if (contador) contador.textContent = '0 eventos';
            mostrarAlert('Eventos limpiados', 'success');
        } else {
            mostrarAlert(data.message || 'No se pudieron limpiar los eventos', 'danger');
        }
    } catch (e) {
        console.error('Error al limpiar eventos:', e);
        mostrarAlert('Error de conexión al limpiar eventos', 'danger');
    }
}



/**
 * Obtener eventos del servidor
 */
async function obtenerEventos() {
    try {
        eventosProcessing = true;
        
        // Siempre solicitar eventos enriquecidos desde backend para conservar info aunque el devmode esté apagado
        const url = new URL(URL_EVENTOS_STREAM, window.location.origin);
        url.searchParams.set('dev', '1');
        const response = await fetch(url.toString());
        const data = await response.json();
        
        if (data.success) {
            actualizarListaEventos(data.eventos);
            actualizarStatusConexion(true);
            
            // Después de la primera carga, permitir detección automática
            if (esPrimeraCarga) {
                esPrimeraCarga = false;
                console.log('🔄 Primera carga completada - Detección automática habilitada');
            }
        } else {
            console.error('Error al obtener eventos:', data.message);
            actualizarStatusConexion(false);
        }
        
    } catch (error) {
        console.error('Error de conexión:', error);
        actualizarStatusConexion(false);
    } finally {
        eventosProcessing = false;
    }
}

/**
 * Obtener elementos revisados del servidor
 */
async function obtenerElementosRevisados() {
    try {
        const response = await fetch(URL_ELEMENTOS_REVISADOS);
        const data = await response.json();
        
        if (data.success) {
            actualizarListaElementosRevisados(data.elementos, data.total);
        } else {
            console.error('Error al obtener elementos revisados:', data.message);
        }
        
    } catch (error) {
        console.error('Error de conexión al obtener elementos revisados:', error);
    }
}

/**
 * Obtener elementos problemáticos del servidor
 */
async function obtenerElementosProblemas() {
    try {
        const response = await fetch(URL_ELEMENTOS_PROBLEMAS);
        const data = await response.json();
        
        if (data.success) {
            actualizarListaElementosProblemas(data.elementos, data.total);
        } else {
            console.error('Error al obtener elementos problemáticos:', data.message);
        }
        
    } catch (error) {
        console.error('Error de conexión al obtener elementos problemáticos:', error);
    }
}

/**
 * Actualizar la lista de elementos problemáticos
 */
function actualizarListaElementosProblemas(elementos, total) {
    const container = document.getElementById('listaElementosProblemas');
    const contador = document.getElementById('contadorProblemas');
    
    contador.textContent = `${total} elementos`;
    
    if (elementos.length === 0) {
        container.innerHTML = `
            <div class="text-center text-muted py-4">
                <i class="fas fa-clipboard-list fa-3x mb-3"></i>
                <p>No hay elementos con problemas</p>
                <small class="text-muted">Los elementos pendientes y defectuosos aparecerán aquí</small>
            </div>
        `;
        return;
    }
    
    container.innerHTML = elementos.map(elemento => crearCardElemento(elemento, 'problematico')).join('');
}

/**
 * Actualizar la lista de elementos revisados
 */
function actualizarListaElementosRevisados(elementos, total) {
    const container = document.getElementById('listaElementosRevisados');
    const contador = document.getElementById('contadorRevisados');
    const btnVerPendientes = document.getElementById('btnVerPendientesZona');
    
    contador.textContent = `${total} elementos`;
    
    if (elementos.length === 0) {
        container.innerHTML = `
            <div class="text-center text-muted py-4">
                <i class="fas fa-clipboard-list fa-3x mb-3"></i>
                <p>No hay elementos revisados aún...</p>
                <small class="text-muted">Los elementos confirmados aparecerán aquí</small>
            </div>
        `;
        // Ocultar el botón si no hay elementos revisados
        if (btnVerPendientes) {
            btnVerPendientes.style.display = 'none';
        }
        return;
    }
    
    container.innerHTML = elementos.map(elemento => crearCardElemento(elemento, 'revisado')).join('');
    
    // Mostrar el botón si hay elementos revisados
    if (btnVerPendientes) {
        btnVerPendientes.style.display = 'inline-block';
    }
    
    // La zona actual se obtendrá desde el servidor cuando se haga clic en el botón
    // No la establecemos aquí para evitar confusión con elementos ya revisados
}

/**
 * Crear elemento HTML para un elemento revisado
 */
function crearElementoRevisado(elemento) {
    const iconoEstado = obtenerIconoEstado(elemento.estado);
    const colorFondo = obtenerColorFondoEstado(elemento.estado);
    
    // Determinar si es Sensor (S) o Módulo (M) basado en el tipo
    const tipoDispositivo = esModuloPorAbreviatura(elemento.elemento_tipo) ? 'M' : 'S';
    
    // Crear formato de dos líneas:
    // Línea 1: L7 S75 Z9 - Planta 1
    // Línea 2: OPTI - Hotel Don Juan - Fecha
    const lazo = `L${elemento.elemento_lazo || '0'}`;
    const numero = `${tipoDispositivo}${elemento.elemento_numero ? elemento.elemento_numero.toString().padStart(2, '0') : '00'}`;
    const zona = `Z${elemento.zona || '0'}`;
    const nombreZona = elemento.zona_nombre || 'Sin zona';
    const nombreCentral = elemento.central_nombre || '';
    const tipo = elemento.elemento_tipo_abreviatura || elemento.elemento_tipo || 'N/A';
    
    const linea1 = `${lazo} ${numero} ${zona} - ${nombreZona}`;
    let linea2 = tipo;
    if (nombreCentral) {
        linea2 += ` - ${nombreCentral}`;
    }
    linea2 += ` - ${elemento.fecha_formateada}`;
    
    return `
        <div class="card mb-2 border-start border-3 ${colorFondo}" style="border-left-color: ${obtenerColorBordeEstado(elemento.estado)} !important;">
            <div class="card-body py-2 px-3">
                <div class="row align-items-center mb-1">
                    <div class="col">
                        <div class="d-flex align-items-center">
                            <i class="${iconoEstado} me-2 text-muted"></i>
                            <span class="fw-medium">${elemento.elemento_nombre}</span>
                        </div>
                    </div>
                    <div class="col-auto">
                        ${obtenerBadgeEstado(elemento.estado)}
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <small class="text-muted d-block">${linea1}</small>
                        <small class="text-muted d-block">${linea2}</small>
                    </div>
                </div>
            </div>
        </div>
    `;
}

/**
 * Crear elemento HTML para un elemento problemático
 */
function crearElementoProblematico(elemento) {
    const iconoEstado = obtenerIconoEstado(elemento.estado);
    const colorFondo = obtenerColorFondoEstado(elemento.estado);
    
    // Determinar si es Sensor (S) o Módulo (M) basado en el tipo
    const tipoDispositivo = esModuloPorAbreviatura(elemento.elemento_tipo) ? 'M' : 'S';
    
    // Crear formato de dos líneas:
    // Línea 1: L7 S75 Z9 - Planta 1
    // Línea 2: OPTI - Hotel Don Juan - Fecha
    const lazo = `L${elemento.elemento_lazo || '0'}`;
    const numero = `${tipoDispositivo}${elemento.elemento_numero ? elemento.elemento_numero.toString().padStart(2, '0') : '00'}`;
    const zona = `Z${elemento.zona || '0'}`;
    const nombreZona = elemento.zona_nombre || 'Sin zona';
    const nombreCentral = elemento.central_nombre || '';
    const tipo = elemento.elemento_tipo_abreviatura || elemento.elemento_tipo || 'N/A';
    
    const linea1 = `${lazo} ${numero} ${zona} - ${nombreZona}`;
    let linea2 = tipo;
    if (nombreCentral) {
        linea2 += ` - ${nombreCentral}`;
    }
    linea2 += ` - ${elemento.fecha_formateada}`;
    
    // Crear evento simulado para reedición
    const eventoSimulado = {
        id: `reedit_${elemento.id}`, // ID del registro en ci_elementos_revisados
        elemento_id: elemento.elemento_id, // ⭐ ID del elemento en ci_revision_elementos (catálogo)
        lazo: elemento.elemento_lazo,
        numero: elemento.elemento_numero,
        zona: elemento.zona,
        zona_nombre: elemento.zona_nombre,
        tipo: elemento.elemento_tipo_abreviatura || elemento.elemento_tipo,
        descripcion: elemento.elemento_nombre,
        tipo_evento: 'REEDIT',
        categoria: 'reedit',
        central_numero: null, // Se puede extraer del central_nombre si es necesario
        central_nombre: elemento.central_nombre,
        valor_muestreo: null,
        fecha_formateada: elemento.fecha_formateada,
        numero_evento: `reedit_${elemento.id}`, // Para identificar la reedición
        estado_actual: elemento.estado,
        observaciones_actuales: elemento.observaciones || ''
    };
    
    // 🔍 DEBUG: Ver evento simulado creado
    console.log('🔍 [DEBUG] Evento simulado creado para "Por Revisar":', eventoSimulado);

    return `
        <div class="card mb-2 border-start border-3 ${colorFondo} elemento-problematico" 
             style="border-left-color: ${obtenerColorBordeEstado(elemento.estado)} !important; cursor: pointer;"
             data-evento='${JSON.stringify(eventoSimulado)}'
             onclick="seleccionarElementoProblematico(this)">
            <div class="card-body py-2 px-3">
                <div class="row align-items-center mb-1">
                    <div class="col">
                        <div class="d-flex align-items-center">
                            <i class="${iconoEstado} me-2 text-muted"></i>
                            <span class="fw-medium">${elemento.elemento_nombre}</span>
                        </div>
                    </div>
                    <div class="col-auto">
                        ${obtenerBadgeEstado(elemento.estado)}
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <small class="text-muted d-block">${linea1}</small>
                        <small class="text-muted d-block">${linea2}</small>
                        ${elemento.observaciones ? `
                        <div class="mt-1">
                            <small class="text-info">
                                <i class="fas fa-comment me-1"></i>
                                ${elemento.observaciones}
                            </small>
                        </div>
                        ` : ''}
                    </div>
                </div>
            </div>
        </div>
    `;
}

/**
 * FUNCIÓN CENTRALIZADA: Crear card universal para todos los tipos de elementos
 * 
 * @param {Object} elemento - Datos del elemento
 * @param {string} tipo - Tipo de card: 'evento', 'revisado', 'problematico'
 * @param {Object} opciones - Opciones adicionales
 */
function crearCardElemento(elemento, tipo = 'evento', opciones = {}) {
    // Configuración por tipo de card
    const config = {
        evento: {
            esClickeable: true,
            claseContainer: 'evento-item',
            funcionClick: 'seleccionarEvento',
            usarEstilosEvento: true,
            mostrarObservaciones: false,
            usarDatosEvento: true
        },
        revisado: {
            esClickeable: false,
            claseContainer: '',
            funcionClick: null,
            usarEstilosEvento: false,
            mostrarObservaciones: true,
            usarDatosEvento: false
        },
        problematico: {
            esClickeable: true,
            claseContainer: 'elemento-problematico',
            funcionClick: 'seleccionarElementoProblematico',
            usarEstilosEvento: false,
            mostrarObservaciones: true,
            usarDatosEvento: false
        }
    };
    
    const cfg = config[tipo];
    
    // Preparar datos según el origen (evento vs base de datos)
    let datosElemento;
    if (cfg.usarDatosEvento) {
        // Para eventos de central - datos del evento
        datosElemento = {
            id: elemento.id,
            nombre: elemento.descripcion || elemento.nombre,
            lazo: elemento.lazo,
            numero: elemento.numero,
            zona: elemento.zona,
            zona_nombre: elemento.zona_nombre,
            tipo: elemento.tipo_dispositivo || elemento.tipo,
            central_nombre: elemento.central_nombre,
            fecha_formateada: elemento.fecha_formateada,
            valor_muestreo: elemento.valor_muestreo,
            estado: elemento.estado || 'activo',
            observaciones: elemento.observaciones || null,
            tipo_evento: elemento.tipo_evento,
            categoria: elemento.categoria,
            numero_evento: elemento.numero_evento
        };
    } else {
        // Para elementos de BD - datos ya procesados
        datosElemento = {
            id: elemento.id,
            elemento_id: elemento.elemento_id,
            nombre: elemento.elemento_nombre,
            lazo: elemento.elemento_lazo,
            numero: elemento.elemento_numero,
            zona: elemento.zona,
            zona_nombre: elemento.zona_nombre,
            tipo: elemento.elemento_tipo_abreviatura || elemento.elemento_tipo,
            central_nombre: elemento.central_nombre,
            fecha_formateada: elemento.fecha_formateada,
            valor_muestreo: null,
            estado: elemento.estado,
            observaciones: elemento.observaciones || null
        };
    }
    
    // Determinar estilos según el tipo de card
    let estilos, colorBorde, colorFondo, iconoEstado;
    
    if (cfg.usarEstilosEvento) {
        // Para eventos de central - colores según tipo de evento
        const tipoEvento = datosElemento.tipo_evento || datosElemento.categoria || 'TEST';
        estilos = obtenerEstilosPorTipoEvento(tipoEvento);
        colorBorde = obtenerColorBordePorTipoEvento(tipoEvento);
        colorFondo = '';
        iconoEstado = estilos.icono;
    } else {
        // Para elementos de BD - colores según estado
        estilos = obtenerEstilosPorEstado(datosElemento.estado);
        colorBorde = obtenerColorBordeEstado(datosElemento.estado);
        colorFondo = obtenerColorFondoEstado(datosElemento.estado);
        iconoEstado = obtenerIconoEstado(datosElemento.estado);
    }
    
    // Identificar eventos de interacción
    const esInteraccion = (datosElemento.tipo_evento || '').toUpperCase() === 'INTERACTION';

    // Mostrar líneas de lazo/sensor/zone SOLO si hay datos de elemento (lazo y numero)
    const tieneElemento = !esInteraccion && Number.isInteger(datosElemento?.lazo) && Number.isInteger(datosElemento?.numero);
    let linea1 = '';
    let linea2 = '';
    if (tieneElemento) {
        // Determinar si es Sensor (S) o Módulo (M)
        const tipoDispositivo = esModuloPorAbreviatura(datosElemento.tipo) ? 'M' : 'S';
        
        const lazo = `L${datosElemento.lazo}`;
        const numero = `${tipoDispositivo}${datosElemento.numero.toString().padStart(2, '0')}`;
        const zona = `Z${datosElemento.zona || '0'}`;
        const nombreZona = datosElemento.zona_nombre || 'Sin zona';
        const nombreCentral = datosElemento.central_nombre || '';
        const tipoElemento = datosElemento.tipo || 'N/A';
        
        linea1 = `${lazo} ${numero} ${zona} - ${nombreZona}`;
        linea2 = tipoElemento;
        if (nombreCentral) {
            linea2 += ` - ${nombreCentral}`;
        }
        
        // Añadir información específica según el tipo
        if (cfg.usarDatosEvento && datosElemento.valor_muestreo) {
            linea2 += ` - ${datosElemento.valor_muestreo}%`;
        } else if (!cfg.usarDatosEvento && datosElemento.fecha_formateada) {
            linea2 += ` - ${datosElemento.fecha_formateada}`;
        }
    } else {
        // Si no hay lazo/numero, pero sí información de zona, mostrar solo la zona
        const nombreZona = datosElemento.zona_nombre || '';
        if (Number.isInteger(datosElemento?.zona) || nombreZona) {
            if (Number.isInteger(datosElemento?.zona)) {
                linea1 = `Z${datosElemento.zona}${nombreZona ? ` - ${nombreZona}` : ''}`;
            } else {
                linea1 = nombreZona;
            }
        }
    }
    
    // Crear evento simulado para elementos clickeables
    let eventoSimulado = '';
    let atributosClick = '';
    let atributosLongPress = '';
    
    if (cfg.esClickeable) {
        const evento = cfg.usarDatosEvento ? elemento : {
            id: `reedit_${datosElemento.id}`,
            lazo: datosElemento.lazo,
            numero: datosElemento.numero,
            zona: datosElemento.zona,
            zona_nombre: datosElemento.zona_nombre,
            tipo: datosElemento.tipo,
            descripcion: datosElemento.nombre,
            tipo_evento: cfg.usarDatosEvento ? datosElemento.tipo_evento : 'REEDIT',
            categoria: cfg.usarDatosEvento ? datosElemento.categoria : 'reedit',
            central_numero: null,
            central_nombre: datosElemento.central_nombre,
            valor_muestreo: datosElemento.valor_muestreo,
            fecha_formateada: datosElemento.fecha_formateada,
            numero_evento: cfg.usarDatosEvento ? elemento.numero_evento : `reedit_${datosElemento.id}`,
            estado_actual: datosElemento.estado,
            observaciones_actuales: datosElemento.observaciones || '',
            elemento_id: (typeof datosElemento.elemento_id !== 'undefined' ? datosElemento.elemento_id : datosElemento.id)
        };
        
        eventoSimulado = `data-evento='${JSON.stringify(evento)}'`;
        atributosClick = `onclick="${cfg.funcionClick}(this)" style="cursor: pointer;"`;
    }

    // Atributos de pulsación prolongada (2s) para borrar en 'revisado' y 'problematico'
    if (tipo === 'revisado' || tipo === 'problematico') {
        const revisadoId = datosElemento.id;
        atributosLongPress = `onmousedown="lpStart(event, '${tipo}', ${revisadoId})" onmouseup="lpEnd(event)" onmouseleave="lpEnd(event)" ontouchstart="lpStart(event, '${tipo}', ${revisadoId})" ontouchend="lpEnd(event)"`;
    }
    
    // Construir el HTML del card
    const debugHtml = (function(){
        if (!devModeEnabled) return '';
        try {
            // Resolver match con BD si hay lazo/numero y cache disponible
            let bdMatch = null;
            if (elementosBDCache && tieneElemento) {
                const tipoUpper = (datosElemento.tipo || '').toString().trim().toUpperCase();
                bdMatch = elementosBDCache.find(el => Number(el.lazo) === Number(datosElemento.lazo)
                    && Number(el.numero) === Number(datosElemento.numero)
                    && (!tipoUpper || (el.abreviatura || '').toUpperCase() === tipoUpper));
            }


            const bdJson = null; // BD Match eliminado
            // RAW: para eventos reales usar el raw; para tarjetas de BD, si backend envía elemento_backend, generamos un pseudo-raw informativo
            let rawEvento = cfg.usarDatosEvento ? (elemento.evento_raw || '(sin raw)') : '(no es evento)';
            if (!cfg.usarDatosEvento && elemento && elemento.elemento_backend) {
                const eb = elemento.elemento_backend;
                rawEvento = `Elemento BD (resumen):\nL${eb.lazo} ${eb.tipo_abreviatura === 'MOD' ? 'Mod.' : 'Sens.'} ${String(eb.numero).padStart(2,'0')} - Zona ${eb.zona ?? '-'} - ${eb.tipo_abreviatura ?? '-'}\nZona: ${eb.zona_nombre ?? '-'}\nDes: ${eb.nombre ?? '-'}\nCentral: ${eb.central_nombre ?? '-'}`;
            }
            // Preferencias para ID asociado:
            // 1) Si es card de BD, usar elemento_id
            // 2) Si es evento y backend envió elemento_resuelto, usarlo
            // 3) Si hay match local, usarlo
            const backendResuelto = (cfg.usarDatosEvento && elemento && elemento.elemento_resuelto) ? elemento.elemento_resuelto : null;
            // Para tarjetas de BD, usar el objeto que ya viene del backend
            const backendObjBD = (!cfg.usarDatosEvento && elemento && elemento.elemento_backend) ? elemento.elemento_backend : null;
            const asociadoId = (!cfg.usarDatosEvento && datosElemento.elemento_id)
                ? datosElemento.elemento_id
                : (backendResuelto ? backendResuelto.id : (bdMatch ? bdMatch.id : '(sin id)'));
            const backendJson = backendObjBD ? JSON.stringify(backendObjBD) : (backendResuelto ? JSON.stringify(backendResuelto) : null);
            return `
                <div class="mt-2 small text-muted border-top pt-2 dev-debug">
                    <div class="d-flex justify-content-end mb-1">
                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="copiarDebug(this)"><i class="fas fa-copy me-1"></i>Copiar</button>
                    </div>
                    <div><strong>RAW:</strong> <pre class="mb-1" style="white-space:pre-wrap;">${escapeHtml(rawEvento)}</pre></div>
                    <div><strong>Elemento asociado en BD:</strong> ${escapeHtml(String(asociadoId))}</div>
                    ${backendJson ? `<div><strong>Elemento asociado en backend:</strong> <pre class="mb-1" style="white-space:pre-wrap;">${escapeHtml(backendJson)}</pre></div>` : ''}
                    <div><strong>Evento de Central:</strong> <pre class="mb-1" style="white-space:pre-wrap;">${escapeHtml(JSON.stringify(datosElemento))}</pre></div>
                    
                </div>
            `;
        } catch (e) { return ''; }
    })();

    return `
        <div class="card mb-2 border-start border-3 ${cfg.claseContainer} ${colorFondo}" 
             style="border-left-color: ${colorBorde} !important;" 
             ${eventoSimulado} 
             ${atributosClick}
             ${atributosLongPress}>
            <div class="card-body py-2 px-3">
                <div class="row align-items-center mb-1">
                    <div class="col">
                        <div class="d-flex align-items-center">
                            ${cfg.usarDatosEvento && (datosElemento.numero_evento || elemento.numero_evento) 
                                ? `<span class="badge bg-secondary me-2">${datosElemento.numero_evento || elemento.numero_evento}</span>` 
                                : `<i class="${iconoEstado} me-2 text-muted"></i>`}
                            <span class="fw-medium">${datosElemento.nombre}</span>
                        </div>
                    </div>
                    <div class="col-auto">
                        ${cfg.usarDatosEvento ? 
                            `<span class="badge ${estilos.badge}">${datosElemento.tipo_evento || datosElemento.categoria || 'TEST'}</span>` : 
                            obtenerBadgeEstado(datosElemento.estado)
                        }
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        ${linea1 ? `<small class="text-muted d-block">${linea1}</small>` : ''}
                        ${linea2 ? `<small class="text-muted d-block">${linea2}</small>` : ''}
                        ${cfg.mostrarObservaciones && datosElemento.observaciones ? `
                        <div class="mt-1">
                            <small class="text-info">
                                <i class="fas fa-comment me-1"></i>
                                ${datosElemento.observaciones}
                            </small>
                        </div>
                        ` : ''}
                        ${debugHtml}
                    </div>
                </div>
            </div>
        </div>
    `;
}

/**
 * Obtener icono según el estado
 */
function obtenerIconoEstado(estado) {
    switch (estado) {
        case 'funciona': return 'fas fa-check-circle text-success';
        case 'no funciona': return 'fas fa-times-circle text-danger';
        case 'pendiente': return 'fas fa-clock text-warning';
        default: return 'fas fa-question-circle text-muted';
    }
}

/**
 * Obtener color de fondo según el estado
 */
function obtenerColorFondoEstado(estado) {
    switch (estado) {
        case 'funciona': return 'bg-light';
        case 'no funciona': return 'bg-light';
        case 'pendiente': return 'bg-light';
        default: return 'bg-light';
    }
}

/**
 * Obtener color de borde según el estado
 */
function obtenerColorBordeEstado(estado) {
    switch (estado) {
        case 'funciona': return '#198754';
        case 'no funciona': return '#dc3545';
        case 'pendiente': return '#ffc107';
        default: return '#6c757d';
    }
}

/**
 * Obtener estilos completos según el estado del elemento
 */
function obtenerEstilosPorEstado(estado) {
    switch (estado) {
        case 'funciona':
            return {
                color: 'text-success',
                icono: 'fas fa-check-circle',
                badge: 'bg-success',
                border: 'border-success'
            };
        case 'no funciona':
            return {
                color: 'text-danger',
                icono: 'fas fa-times-circle',
                badge: 'bg-danger',
                border: 'border-danger'
            };
        case 'pendiente':
            return {
                color: 'text-warning',
                icono: 'fas fa-clock',
                badge: 'bg-warning',
                border: 'border-warning'
            };
        default:
            return {
                color: 'text-secondary',
                icono: 'fas fa-question-circle',
                badge: 'bg-secondary',
                border: 'border-secondary'
            };
    }
}

/**
 * Obtener badge según el estado
 */
function obtenerBadgeEstado(estado) {
    switch (estado) {
        case 'funciona': 
            return '<span class="badge bg-success"><i class="fas fa-check me-1"></i>Funciona</span>';
        case 'no funciona': 
            return '<span class="badge bg-danger"><i class="fas fa-times me-1"></i>No Funciona</span>';
        case 'pendiente': 
            return '<span class="badge bg-warning"><i class="fas fa-clock me-1"></i>Pendiente</span>';
        default: 
            return '<span class="badge bg-secondary">Desconocido</span>';
    }
}

/**
 * Actualizar la lista de eventos en el panel
 */
function actualizarListaEventos(eventos) {
    const container = document.getElementById('listaEventos');
    const contador = document.getElementById('contadorEventos');
    
    contador.textContent = `${eventos.length} eventos`;
    
    if (eventos.length === 0) {
        container.innerHTML = `
            <div class="text-center text-muted py-4">
                <i class="fas fa-satellite-dish fa-3x mb-3"></i>
                <p>Esperando eventos de la central...</p>
            </div>
        `;
    } else {
    // Mostrar eventos con los más recientes arriba
    const eventosOrdenados = [...eventos].reverse(); // Invertir orden para mostrar nuevos arriba
    ultimosEventos = eventosOrdenados;
    container.innerHTML = eventosOrdenados.map(evento => crearCardElemento(evento, 'evento')).join('');
    }
    
    // Verificar si hay eventos nuevos de elementos de prueba (SIEMPRE, incluso con lista vacía)
    verificarEventosElementosPrueba(eventos);
}

/**
 * Verificar eventos de elementos de PRUEBA y mostrarlos automáticamente
 * SOLO eventos de tipo TEST/prueba se muestran en "Elemento Detectado"
 * EXCLUIR eventos de avería (fault/averia/NO RESPONDE)
 */
function verificarEventosElementosPrueba(eventos) {
    // No mostrar elemento detectado en la primera carga de la página
    if (esPrimeraCarga) {
        console.log('🔄 Primera carga - No se muestran elementos automáticamente');
        return;
    }
    
    // No interferir si hay una selección manual activa
    if (seleccionManualActiva) {
        console.log('🔒 Selección manual activa - No se sobrescribe automáticamente');
        return;
    }
    
    // Buscar el evento más reciente que tenga información de elemento (lazo y numero) Y QUE SEA DE PRUEBA
    // EXCLUIR eventos de avería (fault/averia/NO RESPONDE)
    const eventosElementos = eventos.filter(evento => {
        if (!evento.lazo || !evento.numero || !evento.tipo_evento) {
            return false;
        }
        
        const tipoEvento = evento.tipo_evento.toLowerCase();
        const esPrueba = (tipoEvento === 'test' || evento.categoria === 'prueba');
        const esAveria = (tipoEvento === 'fault' || tipoEvento === 'averia' || tipoEvento === 'no responde');
        
        // Solo incluir si es prueba Y NO es avería
        return esPrueba && !esAveria;
    });
    
    if (eventosElementos.length > 0) {
        // Tomar el último evento de elemento
        const ultimoEvento = eventosElementos[eventosElementos.length - 1];
        
        // Verificar si es un evento nuevo (no procesado anteriormente) y diferente al actual
        const esEventoNuevo = !eventosProceados.has(ultimoEvento.id);
        const esDiferenteAlActual = !eventoActual || eventoActual.id !== ultimoEvento.id;
        
        if (esEventoNuevo && esDiferenteAlActual) {

            console.log('############################################################################################');
            console.log('🎯 Nuevo evento de elemento detectado automáticamente:', ultimoEvento);
            console.log(`📍 Elemento: ${ultimoEvento.descripcion} | Lazo: ${ultimoEvento.lazo} | Número: ${ultimoEvento.numero}`);
            
                console.log('✅ Procesando evento automático - sin conflicto con selección manual');
                // Mostrar el nuevo evento (sustituye al anterior si existe)
                buscarElementoPorEvento(ultimoEvento);
                
                // Marcar visualmente el evento seleccionado automáticamente
                setTimeout(() => {
                    const eventosItems = document.querySelectorAll('.evento-item');
                    eventosItems.forEach(item => {
                        const eventoData = JSON.parse(item.dataset.evento);
                        if (eventoData.id === ultimoEvento.id) {
                            // Remover selección anterior
                            document.querySelectorAll('.evento-item').forEach(el => {
                                el.classList.remove('border', 'border-primary');
                            });
                            // Marcar como seleccionado
                            item.classList.add('border', 'border-primary');
                        }
                    });
                }, 100);
        }
            } else {
        // Si no hay eventos de elementos, limpiar el monitor automáticamente
        // Solo si no hay selección manual activa y hay un elemento mostrado
        if (!seleccionManualActiva && eventoActual && elementoActual) {
            console.log('🧹 No hay eventos de elementos - limpiando monitor automáticamente');
            console.log(`🧹 Elemento actual: ${elementoActual.nombre} (ID: ${elementoActual.id})`);
            volverAEstadoEsperando();
        } else {
            console.log('📋 No hay eventos de elementos disponibles');
            console.log(`📋 Estado actual: seleccionManualActiva=${seleccionManualActiva}, eventoActual=${!!eventoActual}, elementoActual=${!!elementoActual}`);
        }
    }
    
    // VERIFICACIÓN ADICIONAL: Si la lista de eventos está completamente vacía, forzar limpieza
    if (eventos.length === 0 && !seleccionManualActiva && eventoActual && elementoActual) {
        console.log('🚨 LISTA VACÍA - Forzando limpieza del monitor');
        console.log(`🚨 Elemento colgado: ${elementoActual.nombre} (ID: ${elementoActual.id})`);
        volverAEstadoEsperando();
    }
}

/**
 * Crear elemento HTML para un evento
 */
function crearElementoEvento(evento) {
      console.log('🎨 Creando evento:', evento.tipo_evento, '-> estilos:', obtenerEstilosPorTipoEvento(evento.tipo_evento));
      const estilos = obtenerEstilosPorTipoEvento(evento.tipo_evento);
      
      // Verificar si es evento de interacción (sin lazo, numero o zona)
      const esEventoInteraccion = !evento.lazo || !evento.numero || !evento.zona;
      
      // Determinar si es Sensor (S) o Módulo (M)
      const tipoDispositivo = esModuloPorAbreviatura(evento.tipo || evento.tipo_dispositivo) ? 'M' : 'S';
      
      // Obtener color del borde según el tipo de evento
      const colorBorde = obtenerColorBordePorTipoEvento(evento.tipo_evento);
      
      // Crear formato de dos líneas como en las otras columnas:
      // Línea 1: L7 S75 Z9 - Planta 1
      // Línea 2: OPTI - Hotel Don Juan - Fecha
      let linea1 = '';
      let linea2 = '';
      
      if (esEventoInteraccion) {
          // Para eventos de sistema/interacción: solo fecha
          if (evento.fecha_formateada) {
              const match = evento.fecha_formateada.match(/(\d+\/\d+)\/\d+\s+(\d+:\d+):\d+/);
              linea1 = match ? `${match[1]} ${match[2]}` : evento.fecha_formateada;
          } else {
              linea1 = 'Evento del sistema';
          }
          linea2 = 'Interacción'; // Tipo genérico para eventos de sistema
      } else {
          // Para eventos de dispositivo: formato de dos líneas
          const lazo = `L${evento.lazo || '0'}`;
          const numero = `${tipoDispositivo}${evento.numero ? evento.numero.toString().padStart(2, '0') : '00'}`;
          const zona = `Z${evento.zona || '0'}`;
          const nombreZona = evento.zona_nombre || 'Sin zona';
          const nombreCentral = (evento.central_numero && evento.central_nombre) ? evento.central_nombre : '';
          const tipo = evento.tipo || evento.tipo_dispositivo || 'N/A';
          const valor = evento.valor_muestreo ? ` - ${evento.valor_muestreo}%` : '';
          
          // Línea 1: L4 S08 Z1 - Nombre Zona
          linea1 = `${lazo} ${numero} ${zona} - ${nombreZona}`;
          
          // Línea 2: TIPO - Central - Valor%
          linea2 = tipo;
          if (nombreCentral) {
              linea2 += ` - ${nombreCentral}`;
          }
          linea2 += valor;
      }
      
      const debugHtml = (function(){
          if (!devModeEnabled) return '';
          const raw = evento.evento_raw || '(sin raw)';
          const eventoJson = JSON.stringify({
              id: evento.id,
              lazo: evento.lazo,
              numero: evento.numero,
              tipo: evento.tipo || evento.tipo_dispositivo,
              zona: evento.zona,
              zona_nombre: evento.zona_nombre,
              central_numero: evento.central_numero,
              central_nombre: evento.central_nombre,
              numero_evento: evento.numero_evento
          });
          // Elemento resuelto por backend (si viene)
          const elRes = evento.elemento_resuelto ? JSON.stringify(evento.elemento_resuelto) : '(sin resolver)';
          return `
            <div class="mt-2 small text-muted border-top pt-2 dev-debug">
                <div class="d-flex justify-content-end mb-1">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="copiarDebug(this)"><i class="fas fa-copy me-1"></i>Copiar</button>
                </div>
                <div><strong>RAW:</strong> <pre class="mb-1" style="white-space:pre-wrap;">${escapeHtml(raw)}</pre></div>
                <div><strong>Evento (json):</strong> <pre class="mb-0" style="white-space:pre-wrap;">${escapeHtml(eventoJson)}</pre></div>
                <div><strong>Elemento resuelto (backend):</strong> <pre class="mb-0" style="white-space:pre-wrap;">${escapeHtml(elRes)}</pre></div>
            </div>
          `;
      })();

      return `
        <div class="card mb-2 border-start border-3 evento-item" 
             style="border-left-color: ${colorBorde} !important; cursor: pointer;"
             data-evento='${JSON.stringify(evento)}'
             onclick="seleccionarEvento(this)">
            <div class="card-body py-2 px-3">
                <div class="row align-items-center mb-1">
                    <div class="col">
                        <div class="d-flex align-items-center">
                            <i class="${estilos.icono} me-2 text-muted"></i>
                            <span class="fw-medium">${evento.descripcion}</span>
                        </div>
                    </div>
                    <div class="col-auto">
                        <span class="badge ${estilos.badge}">
                            ${evento.tipo_evento}
                        </span>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <small class="text-muted d-block">${linea1}</small>
                        <small class="text-muted d-block">${linea2}</small>
                        ${debugHtml}
                    </div>
                </div>
            </div>
        </div>
    `;
}

/**
 * Seleccionar un evento para procesarlo
 */
function seleccionarEvento(elementoEvento) {
    try {
        // Remover selección anterior
        document.querySelectorAll('.evento-item').forEach(el => {
            el.classList.remove('border-primary', 'shadow-lg');
            el.style.transform = '';
        });
        
        // Marcar como seleccionado con efecto visual
        elementoEvento.classList.add('border-primary', 'shadow-lg');
        elementoEvento.style.transform = 'scale(1.02)';
        elementoEvento.style.transition = 'all 0.2s ease';
        
        // Obtener datos del evento
        eventoActual = JSON.parse(elementoEvento.dataset.evento);
        
        // Activar flag de selección manual temporalmente para evitar sobrescritura inmediata
        seleccionManualActiva = true;
        actualizarStatusModoManual(true);
        console.log('🔒 Selección manual activada - evento de "Tiempo Real" seleccionado por usuario');
        
        // Desactivar el flag después de un tiempo para permitir nuevos eventos automáticos
        setTimeout(() => {
            if (seleccionManualActiva) {
                seleccionManualActiva = false;
                actualizarStatusModoManual(false);
                console.log('⏰ Selección manual expirada - detección automática reactivada');
            }
        }, 30000); // 30 segundos de protección
        
        // Buscar el elemento en la base de datos
        buscarElementoPorEvento(eventoActual);
        
    } catch (error) {
        console.error('Error al seleccionar evento:', error);
        mostrarAlert('Error al seleccionar el evento', 'danger');
    }
}

/**
 * Seleccionar un elemento problemático para reeditar
 */
function seleccionarElementoProblematico(elementoProblematico) {
    try {
        // Remover selección anterior de todos los elementos clickeables
        document.querySelectorAll('.evento-item, .elemento-problematico').forEach(el => {
            el.classList.remove('border-primary', 'shadow-lg');
            el.style.transform = '';
        });
        
        // Marcar como seleccionado con efecto visual
        elementoProblematico.classList.add('border-primary', 'shadow-lg');
        elementoProblematico.style.transform = 'scale(1.02)';
        elementoProblematico.style.transition = 'all 0.2s ease';
        
        // Obtener datos del evento simulado
        const eventoReedicion = JSON.parse(elementoProblematico.dataset.evento);
        
        // 🔍 DEBUG: Ver qué viene en el evento de reedición
        console.log('🔍 [DEBUG] Datos del evento simulado desde "Por Revisar":', eventoReedicion);
        console.log('🔍 [DEBUG] eventoReedicion.id (ID de ci_elementos_revisados):', eventoReedicion.id);
        console.log('🔍 [DEBUG] eventoReedicion.elemento_id (ID de ci_revision_elementos):', eventoReedicion.elemento_id);
        console.log('🔍 [DEBUG] eventoReedicion.numero_evento:', eventoReedicion.numero_evento);
        
        eventoActual = eventoReedicion;
        
        // Crear elemento simulado para mostrar en el card principal
        elementoActual = {
            lazo: eventoReedicion.lazo,
            numero: eventoReedicion.numero,
            zona: eventoReedicion.zona,
            zona_nombre: eventoReedicion.zona_nombre,
            tipo: eventoReedicion.tipo,
            nombre: eventoReedicion.descripcion,
            central_numero: eventoReedicion.central_numero,
            central_nombre: eventoReedicion.central_nombre,
            valor_muestreo: null,
            es_reedicion: true,
            estado_actual: eventoReedicion.estado_actual,
            observaciones_actuales: eventoReedicion.observaciones_actuales,
            id: eventoReedicion.elemento_id || null,
            numero_evento: eventoReedicion.numero_evento // IMPORTANTE: Mantener el numero_evento
        };
        
        // 🔍 DEBUG: Ver qué se guardó en elementoActual
        console.log('🔍 [DEBUG] elementoActual después de mapear:', elementoActual);
        console.log('🔍 [DEBUG] elementoActual.id (debería ser ID catálogo):', elementoActual.id);
        console.log('🔍 [DEBUG] elementoActual.numero_evento:', elementoActual.numero_evento);
        
        // Activar flag de selección manual para evitar sobrescritura automática
        seleccionManualActiva = true;
        actualizarStatusModoManual(true);
        console.log('🔒 Selección manual activada - elemento de "Por Revisar"');
        
        // Mostrar en el card principal para reedición
        mostrarElementoEnCardPrincipal(eventoReedicion, true);
        
        // Pre-llenar las observaciones si las hay
        if (eventoReedicion.observaciones_actuales) {
            const textareaObservaciones = document.getElementById('observacionesElemento');
            if (textareaObservaciones) {
                textareaObservaciones.value = eventoReedicion.observaciones_actuales;
            }
        }
        
        console.log('✅ Elemento problemático seleccionado para reedición');
        
    } catch (error) {
        console.error('❌ Error al seleccionar elemento problemático:', error);
        mostrarAlert('Error al seleccionar el elemento para reedición', 'danger');
    }
}

/**
 * Buscar elemento en la base de datos usando los datos del evento
 */
async function buscarElementoPorEvento(evento) {
    try {
        // Crear elemento base con datos del evento
        elementoActual = {
            id: null,
            nombre: evento.descripcion || `Elemento ${evento.numero}`,
            lazo: evento.lazo,
            numero: evento.numero,
            tipo: evento.tipo_dispositivo || evento.tipo || 'Detector',
            zona: evento.zona,
            zona_nombre: evento.zona_nombre,
            valor_muestreo: evento.valor_muestreo,
            central_numero: evento.central_numero,
            central_nombre: evento.central_nombre
        };
        
        // OPTIMIZACIÓN: Si el evento ya tiene elemento resuelto por el backend, usarlo directamente
        if (evento.elemento_resuelto && evento.elemento_resuelto.id) {
            console.log(`🚀 Usando elemento ya resuelto por backend: ID ${evento.elemento_resuelto.id} - ${evento.elemento_resuelto.nombre}`);
            
            // Usar directamente los datos del elemento resuelto
            elementoActual.id = evento.elemento_resuelto.id;
            elementoActual.nombre = evento.elemento_resuelto.nombre || elementoActual.nombre;
            elementoActual.tipo = evento.elemento_resuelto.tipo_abreviatura || elementoActual.tipo;
            
            // Log de confirmación
            console.log(`✅ Elemento resuelto: ID ${elementoActual.id} - ${elementoActual.nombre} (${elementoActual.tipo})`);
            
        } else {
            // Solo hacer resolución manual si el backend no resolvió el elemento
            console.log(`⚠️ Backend no resolvió elemento, iniciando resolución manual...`);
            
        try {
            const resp = await fetch(URL_ELEMENTOS_BD);
            const datos = await resp.json();
            if (datos?.success && Array.isArray(datos.elementos)) {
                const tipoUpper = (elementoActual.tipo || '').toString().trim().toUpperCase();
                // Determinar si el evento parece módulo o sensor (heurística)
                const esModuloEvento = ['MON','CON','AUX','ASPR','SPRK','ZMX','CDI','BOOSTER','MOD'].includes(tipoUpper) || (tipoUpper.includes('MOD') || tipoUpper.includes('MÓD'));
                // Si el evento incluye central_numero, úsalo para acotar
                const centralNodo = Number.isFinite(Number(elementoActual.central_numero)) ? Number(elementoActual.central_numero) : null;
                    // Buscar candidatos que coincidan con lazo y número
                    const candidatos = datos.elementos.filter((el) => {
                    const lazoEq = Number(el.lazo) === Number(elementoActual.lazo);
                    const numeroEq = Number(el.numero) === Number(elementoActual.numero);
                        return lazoEq && numeroEq;
                    });
                    
                    console.log(`🔍 Resolución manual - Buscando elemento L${elementoActual.lazo} N${elementoActual.numero} tipo ${tipoUpper} nombre "${elementoActual.nombre}"`);
                    console.log(`📋 Candidatos encontrados:`, candidatos.map(c => {
                        const similitud = calcularSimilitudNombre(elementoActual.nombre, c.nombre);
                        return {
                            id: c.id, 
                            nombre: c.nombre, 
                            tipo: c.abreviatura,
                            similitud: `${(similitud * 100).toFixed(1)}%`,
                            es_modulo: c.es_modulo
                        };
                    }));
                    
                    // Priorizar por tipo exacto + nombre, luego por tipo, luego por categoría, luego por central
                    let candidato = null;
                    
                    // 1. Buscar coincidencia exacta de tipo + nombre (75% similitud)
                    candidato = candidatos.find((el) => {
                    const tipoEq = (el.abreviatura || '').toString().toUpperCase() === tipoUpper;
                    const categoriaEq = typeof el.es_modulo === 'boolean' ? (el.es_modulo === esModuloEvento) : true;
                    const centralEq = centralNodo !== null && el.central_nodo ? Number(el.central_nodo) === centralNodo : true;
                        const nombreSimilitud = calcularSimilitudNombre(elementoActual.nombre, el.nombre);
                        const nombreEq = nombreSimilitud >= 0.75;
                        
                        if (tipoEq && categoriaEq && centralEq && nombreEq) {
                            console.log(`✅ Coincidencia exacta: tipo + nombre (${(nombreSimilitud * 100).toFixed(1)}%)`);
                        }
                        
                        return tipoEq && categoriaEq && centralEq && nombreEq;
                    });
                    
                    // 2. Si no hay coincidencia exacta, buscar por tipo + nombre (sin central)
                    if (!candidato) {
                        candidato = candidatos.find((el) => {
                            const tipoEq = (el.abreviatura || '').toString().toUpperCase() === tipoUpper;
                            const categoriaEq = typeof el.es_modulo === 'boolean' ? (el.es_modulo === esModuloEvento) : true;
                            const nombreSimilitud = calcularSimilitudNombre(elementoActual.nombre, el.nombre);
                            const nombreEq = nombreSimilitud >= 0.75;
                            
                            if (tipoEq && categoriaEq && nombreEq) {
                                console.log(`✅ Coincidencia tipo + nombre: ${(nombreSimilitud * 100).toFixed(1)}%`);
                            }
                            
                            return tipoEq && categoriaEq && nombreEq;
                        });
                    }
                    
                    // 3. Si no hay coincidencia por tipo + nombre, buscar solo por tipo
                    if (!candidato) {
                        // Buscar todos los candidatos que coincidan por tipo
                        const candidatosTipo = candidatos.filter((el) => {
                            const tipoEq = (el.abreviatura || '').toString().toUpperCase() === tipoUpper;
                            const categoriaEq = typeof el.es_modulo === 'boolean' ? (el.es_modulo === esModuloEvento) : true;
                            const centralEq = centralNodo !== null && el.central_nodo ? Number(el.central_nodo) === centralNodo : true;
                            return tipoEq && categoriaEq && centralEq;
                        });
                        
                        if (candidatosTipo.length > 0) {
                            // Si hay múltiples candidatos del mismo tipo, elegir el de mayor similitud de nombre
                            candidato = candidatosTipo.reduce((mejor, actual) => {
                                const similitudMejor = calcularSimilitudNombre(elementoActual.nombre, mejor.nombre);
                                const similitudActual = calcularSimilitudNombre(elementoActual.nombre, actual.nombre);
                                return similitudActual > similitudMejor ? actual : mejor;
                            });
                            console.log(`✅ Coincidencia por tipo - seleccionado por similitud de nombre`);
                        }
                    }
                    
                    // 4. Si no hay coincidencia por tipo, buscar por similitud de nombre alta (90%+)
                    if (!candidato) {
                        const candidatosNombreAlto = candidatos.filter((el) => {
                            const similitud = calcularSimilitudNombre(elementoActual.nombre, el.nombre);
                            return similitud >= 0.90;
                        });
                        
                        if (candidatosNombreAlto.length > 0) {
                            // Elegir el de mayor similitud
                            candidato = candidatosNombreAlto.reduce((mejor, actual) => {
                                const similitudMejor = calcularSimilitudNombre(elementoActual.nombre, mejor.nombre);
                                const similitudActual = calcularSimilitudNombre(elementoActual.nombre, actual.nombre);
                                return similitudActual > similitudMejor ? actual : mejor;
                            });
                            console.log(`✅ Coincidencia por similitud de nombre alta (90%+)`);
                        }
                    }
                    
                    // 5. Si no hay coincidencia por nombre, buscar por categoría (sensor vs módulo)
                    if (!candidato) {
                        candidato = candidatos.find((el) => {
                            const categoriaEq = typeof el.es_modulo === 'boolean' ? (el.es_modulo === esModuloEvento) : true;
                            const centralEq = centralNodo !== null && el.central_nodo ? Number(el.central_nodo) === centralNodo : true;
                            
                            if (categoriaEq && centralEq) {
                                console.log(`✅ Coincidencia por categoría`);
                            }
                            
                            return categoriaEq && centralEq;
                        });
                    }
                    
                    // 6. Si no hay coincidencia por categoría, buscar por central
                    if (!candidato && centralNodo !== null) {
                        candidato = candidatos.find((el) => {
                            const centralEq = el.central_nodo ? Number(el.central_nodo) === centralNodo : true;
                            
                            if (centralEq) {
                                console.log(`✅ Coincidencia por central`);
                            }
                            
                            return centralEq;
                        });
                    }
                    
                    // 7. Si no hay coincidencia por central, tomar el primero
                    if (!candidato && candidatos.length > 0) {
                        candidato = candidatos[0];
                        console.log(`⚠️ Usando primer candidato disponible`);
                    }
                    
                    if (candidato) {
                        console.log(`✅ Elemento seleccionado manualmente: ID ${candidato.id} - ${candidato.nombre} (${candidato.abreviatura})`);
                    } else {
                        console.log(`❌ No se encontró elemento para L${elementoActual.lazo} N${elementoActual.numero} tipo ${tipoUpper}`);
                    }
                if (candidato) {
                    elementoActual.id = candidato.id;
                        
                        // Solo sobrescribir el nombre si la similitud es muy alta (95%+)
                        // Esto preserva el nombre del evento cuando es muy similar al de BD
                        const similitudNombre = calcularSimilitudNombre(elementoActual.nombre, candidato.nombre);
                        if (similitudNombre >= 0.95) {
                            // Si la similitud es muy alta, usar el nombre de BD (más preciso)
                        elementoActual.nombre = candidato.nombre;
                            console.log(`📝 Nombre actualizado de BD (similitud: ${(similitudNombre * 100).toFixed(1)}%)`);
                        } else {
                            // Si la similitud es menor, mantener el nombre del evento
                            console.log(`📝 Manteniendo nombre del evento (similitud: ${(similitudNombre * 100).toFixed(1)}%)`);
                    }
                        
                    if (candidato.abreviatura) {
                        elementoActual.tipo = candidato.abreviatura;
                    }
                    if (typeof candidato.es_modulo === 'boolean') {
                        elementoActual.es_modulo = candidato.es_modulo;
                    }
                }
            }
        } catch (e) {
            console.warn('No se pudo resolver elemento en BD, se continuará sin ID.', e);
            }
        }

        mostrarElementoEnCardPrincipal(evento, false);
        
    } catch (error) {
        console.error('Error al buscar elemento:', error);
        mostrarAlert('Error al buscar el elemento', 'danger');
    }
}

/**
 * Mostrar elemento en el card principal (nueva interfaz)
 */
function mostrarElementoEnCardPrincipal(evento, esReedicion = false) {
    eventoActual = evento;
    
    // Validar que tenemos un elemento válido
    if (!elementoActual) {
        console.error('Error: elementoActual es null en mostrarElementoEnCardPrincipal');
        mostrarAlert('Error interno: elemento no encontrado', 'danger');
        return;
    }
    
    // Ocultar estado de esperando
    document.getElementById('estadoEsperando').style.display = 'none';
    
    // Llenar información del elemento detectado con validación
    document.getElementById('nombreElementoDetectado').textContent = elementoActual.nombre || 'Elemento desconocido';
    
    // Formato: L1
    document.getElementById('lazoElementoDetectado').textContent = `L${elementoActual.lazo || '-'}`;
    
    // Formato: S35 (Sensor) o M35 (Módulo)
    document.getElementById('elementoTipoNumero').textContent = etiquetaTipoNumero(elementoActual.tipo, elementoActual.numero);
    
    // Formato: OPTI (solo el tipo de dispositivo)
    const tipoDispositivo = elementoActual.tipo || 'N/A';
    document.getElementById('tipoEventoYDispositivo').textContent = tipoDispositivo;
    
    // Aplicar colores según el tipo de evento o estado del elemento
    let estilos, colorBorde;
    
    if (esReedicion && elementoActual.estado_actual) {
        // Para reedición, usar colores según el estado del elemento
        const estadoElemento = elementoActual.estado_actual;
        estilos = obtenerEstilosPorEstado(estadoElemento);
        colorBorde = obtenerColorBordeEstado(estadoElemento);
        console.log(`🔄 Reedición: aplicando colores para estado "${estadoElemento}"`);
    } else {
        // Para eventos nuevos, usar colores según el tipo de evento
        const tipoEvento = evento.tipo_evento || evento.categoria || 'TEST';
        estilos = obtenerEstilosPorTipoEvento(tipoEvento);
        colorBorde = obtenerColorBordePorTipoEvento(tipoEvento);
        console.log(`🆕 Evento nuevo: aplicando colores para tipo "${tipoEvento}"`);
    }
    console.log('############################################################################################');
    const cardElement = document.querySelector('#estadoElemento .card');
    const headerElement = document.querySelector('#estadoElemento .card-header');
    
    // Limpiar clases anteriores
    cardElement.className = cardElement.className.replace(/border-\w+/g, '');
    headerElement.className = headerElement.className.replace(/bg-\w+/g, '');
    
    // Aplicar nuevos colores
    cardElement.classList.add(estilos.border, 'shadow-sm');
    headerElement.classList.add(estilos.badge.replace('bg-', 'bg-'), 'text-white', 'py-2');
    
    // Aplicar color del borde correspondiente
    cardElement.style.borderLeftColor = colorBorde + ' !important';
    cardElement.style.borderLeftWidth = '4px';
    cardElement.style.borderLeftStyle = 'solid';
    
    // Mostrar información adicional compacta
    const infoAdicional = document.getElementById('infoAdicionalElemento');
    let infoTexto = [];
    
    // Agregar información de central si está disponible
    if (elementoActual.central_numero && elementoActual.central_nombre) {
        infoTexto.push(`🖥️ Central ${elementoActual.central_numero} (${elementoActual.central_nombre})`);
    }
    
    if (elementoActual.zona_nombre && elementoActual.zona) {
        infoTexto.push(`📍${elementoActual.zona} ${elementoActual.zona_nombre}`);
    } else if (elementoActual.zona_nombre) {
        infoTexto.push(`📍${elementoActual.zona_nombre}`);
    }
    
    if (elementoActual.valor_muestreo) {
        infoTexto.push(`📊${elementoActual.valor_muestreo}%`);
    }
    
    infoAdicional.textContent = infoTexto.join(' • ');
    
    // Mostrar estado de elemento con animación
    const estadoElemento = document.getElementById('estadoElemento');
    estadoElemento.style.display = 'block';
    estadoElemento.classList.add('elemento-detectado-animation');
    
    // Limpiar observaciones previas o pre-llenar para reedición
    const observacionesElement = document.getElementById('observacionesElemento');
    if (esReedicion && elementoActual.observaciones_actuales) {
        observacionesElement.value = elementoActual.observaciones_actuales;
    } else {
        observacionesElement.value = '';
    }
    
    // Cambiar el título según el tipo de interacción
    const tituloCard = document.querySelector('#estadoElemento .card-header .fw-bold');
    if (tituloCard) {
        if (esReedicion) {
            tituloCard.textContent = `🔄 Reeditar: ${elementoActual.nombre}`;
        } else {
            tituloCard.textContent = 'Elemento Detectado';
        }
    }
    
    // Añadir indicador de actividad al icono en el header
    const iconoRecepcion = document.getElementById('iconoRecepcion');
    iconoRecepcion.classList.add('signal-indicator');
}



/**
 * Obtener color del borde según el tipo de evento
 */
function obtenerColorBordePorTipoEvento(tipoEvento) {
    switch (tipoEvento.toLowerCase()) {
        case 'alarm':
        case 'alarma':
            return '#dc3545'; // Rojo
        case 'fault':
        case 'averia':
        case 'no responde':
            return '#ffc107'; // Amarillo
        case 'test':
        case 'prueba':
            return '#0dcaf0'; // Azul claro
        case 'reset':
        case 'restablecimiento':
            return '#198754'; // Verde
        case 'system':
        case 'sistema':
        case 'interaction':
        case 'interaccion':
            return '#6c757d'; // Gris
        default:
            return '#6c757d'; // Gris por defecto
    }
}

/**
 * Obtener color e icono según el tipo de evento
 */
function obtenerEstilosPorTipoEvento(tipoEvento) {
    switch (tipoEvento.toLowerCase()) {
        case 'alarm':
        case 'alarma':
            return {
                color: 'text-danger',
                icono: 'fas fa-exclamation-triangle',
                badge: 'bg-danger',
                border: 'border-danger'
            };
        case 'fault':
        case 'averia':
        case 'no responde':
            return {
                color: 'text-warning',
                icono: 'fas fa-times-circle',
                badge: 'bg-warning',
                border: 'border-warning'
            };
        case 'test':
        case 'prueba':
            return {
                color: 'text-info',
                icono: 'fas fa-vial',
                badge: 'bg-info',
                border: 'border-info'
            };
        case 'reset':
        case 'restablecimiento':
            return {
                color: 'text-success',
                icono: 'fas fa-check-circle',
                badge: 'bg-success',
                border: 'border-success'
            };
        case 'system':
        case 'sistema':
            return {
                color: 'text-secondary',
                icono: 'fas fa-cog',
                badge: 'bg-secondary',
                border: 'border-secondary'
            };
        case 'interaction':
        case 'interaccion':
            return {
                color: 'text-secondary',
                icono: 'fas fa-cog',
                badge: 'bg-secondary',
                border: 'border-secondary'
            };
        default:
            return {
                color: 'text-muted',
                icono: 'fas fa-question-circle',
                badge: 'bg-secondary',
                border: 'border-secondary'
            };
    }
}

/**
 * Capturar datos de desarrollador antes de confirmar estado
 */
function capturarDatosAntesConfirmacion() {
    if (!devModeEnabled) return null;
    
    try {
        const datos = {
            timestamp: new Date().toISOString(),
            evento_actual: eventoActual ? { ...eventoActual } : null,
            elemento_actual: elementoActual ? { ...elementoActual } : null,
            elemento_bd_asociado: null,
            elemento_backend_asociado: null,
            evento_central_raw: null
        };
        
        // OPTIMIZACIÓN: Usar elemento resuelto por backend si está disponible
        if (eventoActual && eventoActual.elemento_resuelto && eventoActual.elemento_resuelto.id) {
            // Usar directamente el elemento resuelto por el backend
            datos.elemento_bd_asociado = { ...eventoActual.elemento_resuelto };
            console.log('📊 Usando elemento resuelto por backend para datos ANTES');
        } else if (elementosBDCache && elementoActual && elementoActual.lazo && elementoActual.numero) {
            // Solo hacer resolución manual si el backend no resolvió el elemento
            console.log('📊 Resolución manual para datos ANTES (backend no resolvió)');
            const tipoUpper = (elementoActual.tipo || '').toString().trim().toUpperCase();
            
            // Buscar candidatos que coincidan con lazo y número
            const candidatos = elementosBDCache.filter(el => 
                Number(el.lazo) === Number(elementoActual.lazo) &&
                Number(el.numero) === Number(elementoActual.numero)
            );
            
            // Priorizar por tipo exacto + nombre (75% similitud)
            let bdMatch = candidatos.find(el => {
                const tipoEq = (el.abreviatura || '').toUpperCase() === tipoUpper;
                const nombreSimilitud = calcularSimilitudNombre(elementoActual.nombre, el.nombre);
                const nombreEq = nombreSimilitud >= 0.75;
                return tipoEq && nombreEq;
            });
            
            // Si no hay coincidencia por tipo + nombre, buscar solo por tipo
            if (!bdMatch) {
                bdMatch = candidatos.find(el => 
                    (el.abreviatura || '').toUpperCase() === tipoUpper
                );
            }
            
            // Si no hay coincidencia por tipo, tomar el primero
            if (!bdMatch && candidatos.length > 0) {
                bdMatch = candidatos[0];
            }
            
            if (bdMatch) {
                datos.elemento_bd_asociado = { ...bdMatch };
            }
        }
        
        // Obtener elemento backend asociado si está disponible en el evento
        if (eventoActual && eventoActual.elemento_resuelto) {
            datos.elemento_backend_asociado = { ...eventoActual.elemento_resuelto };
        }
        
        // Obtener evento raw de la central
        if (eventoActual && eventoActual.evento_raw) {
            datos.evento_central_raw = eventoActual.evento_raw;
        }
        
        console.log('📊 Datos capturados ANTES de confirmación:', datos);
        return datos;
        
    } catch (error) {
        console.error('Error al capturar datos antes de confirmación:', error);
        return null;
    }
}

/**
 * Capturar datos de desarrollador después de confirmar estado
 */
function capturarDatosDespuesConfirmacion(respuestaConfirmacion, datosAntes) {
    if (!devModeEnabled) return null;
    
    try {
        // Mostrar directamente la respuesta de confirmación
        console.log('✅ RESPUESTA DE CONFIRMACIÓN:', respuestaConfirmacion);
        
        // Comparar ID de BD antes vs después
        const idAntes = datosAntes?.elemento_bd_asociado?.id || datosAntes?.elemento_backend_asociado?.id || 'N/A';
        const idDespues = respuestaConfirmacion?.elemento?.id || respuestaConfirmacion?.elemento_revisado_id || 'N/A';
        const idsCoinciden = idAntes === idDespues;
        const icono = idsCoinciden ? '✅' : '❌';
        
        console.log(`🔍 COMPARACIÓN ID BD: ${idAntes} - ${idDespues} = ${icono} ${idsCoinciden ? 'TRUE' : 'FALSE'}`);
        
        // Mostrar resumen de datos DESPUÉS usando los datos ANTES como referencia
        const datosDespues = {
            timestamp: new Date().toISOString(),
            evento_actual: datosAntes?.evento_actual || null,
            elemento_actual: datosAntes?.elemento_actual || null,
            elemento_bd_asociado: datosAntes?.elemento_bd_asociado || null,
            elemento_backend_asociado: datosAntes?.elemento_backend_asociado || null,
            evento_central_raw: datosAntes?.evento_central_raw || null,
            respuesta_confirmacion: respuestaConfirmacion ? { ...respuestaConfirmacion } : null
        };
        
        console.log('📊 Datos capturados DESPUÉS de confirmación:', datosDespues);
        return datosDespues;
        
    } catch (error) {
        console.error('Error al capturar datos después de confirmación:', error);
        return null;
    }
}


/**
 * Función para confirmar estado desde el card principal
 */
async function confirmarEstadoRapido(estado) {
    if (!elementoActual) {
        mostrarAlert('No hay elemento seleccionado', 'warning');
        return;
    }
    
    // 🔍 DEBUG: Estado inicial
    console.log('🔍 [DEBUG] ===== INICIO confirmarEstadoRapido =====');
    console.log('🔍 [DEBUG] Estado a confirmar:', estado);
    console.log('🔍 [DEBUG] elementoActual:', elementoActual);
    console.log('🔍 [DEBUG] eventoActual:', eventoActual);
    console.log('🔍 [DEBUG] elementoActual.es_reedicion:', elementoActual.es_reedicion);
    console.log('🔍 [DEBUG] elementoActual.numero_evento:', elementoActual.numero_evento);
    
    const observaciones = document.getElementById('observacionesElemento').value.trim();
    
    // Validar observaciones para estado "pendiente"
    if (estado === 'pendiente' && !observaciones) {
        mostrarAlert('Las observaciones son obligatorias para el estado "Pendiente"', 'warning');
        document.getElementById('observacionesElemento').focus();
        return;
    }
    
    // Capturar datos ANTES de la confirmación (solo en modo desarrollador)
    const datosAntes = capturarDatosAntesConfirmacion();
    
    try {
        const headers = {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            'Accept': 'application/json'
        };
        const csrfMeta = document.querySelector('meta[name="csrf-token"]');
        if (csrfMeta && csrfMeta.content) {
            headers['X-CSRF-TOKEN'] = csrfMeta.content;
        }
        // Normalizar tipos numéricos exigidos por el backend
        const lazoInt = Number.isFinite(Number(elementoActual.lazo)) ? Number(elementoActual.lazo) : null;
        const numeroInt = Number.isFinite(Number(elementoActual.numero)) ? Number(elementoActual.numero) : null;
        const centralNumeroInt = Number.isFinite(Number(elementoActual.central_numero)) ? Number(elementoActual.central_numero) : null;

        // Fallback: si no tenemos elemento_id, intentar resolver en BD justo antes de confirmar
        if (!elementoActual.id && lazoInt !== null && numeroInt !== null) {
            console.log('🔍 [DEBUG] No hay elemento_id, buscando en BD...');
            try {
                const respEl = await fetch(URL_ELEMENTOS_BD);
                const datosEl = await respEl.json();
                if (datosEl?.success && Array.isArray(datosEl.elementos)) {
                    const tipoUpper = (elementoActual.tipo || '').toString().trim().toUpperCase();
                    let candidato = null;
                    for (const el of datosEl.elementos) {
                        if (Number(el.lazo) === lazoInt && Number(el.numero) === numeroInt) {
                            if (el.abreviatura && el.abreviatura.toString().toUpperCase() === tipoUpper) {
                                candidato = el;
                                break;
                            }
                            if (!candidato) candidato = el;
                        }
                    }
                    if (candidato) {
                        console.log('🔍 [DEBUG] Candidato encontrado en BD:', candidato);
                        elementoActual.id = candidato.id;
                        if (candidato.nombre) elementoActual.nombre = candidato.nombre;
                        if (candidato.abreviatura) elementoActual.tipo = candidato.abreviatura;
                    } else {
                        console.log('🔍 [DEBUG] No se encontró candidato en BD');
                    }
                }
            } catch (err) {
                console.log('🔍 [DEBUG] Error al buscar en BD:', err);
            }
        }

        // Construir payload como x-www-form-urlencoded
        const params = new URLSearchParams();
        // Campos comunes
        params.append('estado', estado);
        params.append('observaciones', observaciones);
        
        // 🔍 DEBUG: Determinar qué ID enviar
        console.log('🔍 [DEBUG] ===== CONSTRUCCIÓN DE PAYLOAD =====');
        
        // Si es reedición desde Por Revisar, enviar revisado_id oficial
        if (elementoActual && elementoActual.numero_evento && String(elementoActual.numero_evento).startsWith('reedit_')) {
            const revisadoId = String(elementoActual.numero_evento).replace('reedit_', '');
            console.log('🔍 [DEBUG] Detectado reedición desde "Por Revisar"');
            console.log('🔍 [DEBUG] numero_evento:', elementoActual.numero_evento);
            console.log('🔍 [DEBUG] revisadoId extraído:', revisadoId);
            console.log('🔍 [DEBUG] Es número válido?:', /^\d+$/.test(revisadoId));
            
            if (/^\d+$/.test(revisadoId)) {
                params.append('revisado_id', revisadoId);
                console.log('✅ [DEBUG] revisado_id añadido al payload:', revisadoId);
            } else {
                console.log('❌ [DEBUG] revisado_id NO es válido, no se añade');
            }
        } else if (eventoActual && eventoActual.id && eventoActual.elemento_id) {
            console.log('🔍 [DEBUG] Rama: eventoActual con id y elemento_id');
            console.log('🔍 [DEBUG] eventoActual.id:', eventoActual.id);
            console.log('🔍 [DEBUG] eventoActual.elemento_id:', eventoActual.elemento_id);
            console.log('🔍 [DEBUG] elementoActual.id:', elementoActual.id);
            
            // Si el evento tiene tanto id (evento) como elemento_id, y el elemento_id coincide con elementoActual.id,
            // significa que ya existe un registro en ci_elementos_revisados, usar el id del evento como revisado_id
            if (elementoActual.id && Number(elementoActual.id) === Number(eventoActual.elemento_id)) {
                console.log(`✅ [DEBUG] Elemento ya revisado, usando revisado_id: ${eventoActual.id}`);
                params.append('revisado_id', String(eventoActual.id));
            } else {
                console.log('✅ [DEBUG] Elemento del catálogo, usando elemento_id:', elementoActual.id);
                // Si tenemos ID del catálogo, enviarlo como elemento_id (flujo alternativo)
                params.append('elemento_id', String(Number(elementoActual.id)));
            }
        } else if (elementoActual.id) {
            console.log('🔍 [DEBUG] Rama: Solo elementoActual.id');
            console.log('✅ [DEBUG] Usando elemento_id del catálogo:', elementoActual.id);
            // Si tenemos ID del catálogo, enviarlo como elemento_id (flujo alternativo)
            params.append('elemento_id', String(Number(elementoActual.id)));
        } else {
            console.log('🔍 [DEBUG] Rama: Usando datos del evento (lazo, numero, etc.)');
            if (lazoInt !== null) params.append('lazo', String(lazoInt));
            if (numeroInt !== null) params.append('numero', String(numeroInt));
            const zonaInt = Number.isFinite(Number(elementoActual.zona)) ? Number(elementoActual.zona) : null;
            if (zonaInt !== null) params.append('zona', String(zonaInt));
            const tipoUpper = (elementoActual.tipo || '').toString().trim().toUpperCase();
            if (tipoUpper) params.append('tipo', tipoUpper);
            if (elementoActual.nombre) params.append('descripcion', elementoActual.nombre);
        }
        // Enviar central solo si ambos existen
        const centralNombreStr = typeof elementoActual.central_nombre === 'string' ? elementoActual.central_nombre.trim() : '';
        if (centralNumeroInt !== null && centralNombreStr.length > 0) {
            params.append('central_numero', String(centralNumeroInt));
            params.append('central_nombre', centralNombreStr);
        }
        // Incluir numero_evento si está disponible para idempotencia/limpieza remota
        if (eventoActual && (eventoActual.numero_evento || elementoActual.numero_evento)) {
            params.append('numero_evento', String(eventoActual.numero_evento || elementoActual.numero_evento));
        }

        // 🔍 DEBUG: Mostrar payload final
        console.log('🔍 [DEBUG] ===== PAYLOAD FINAL =====');
        console.log('🔍 [DEBUG] URL_CONFIRMAR:', URL_CONFIRMAR);
        const payloadLogObj = {};
        for (const [k,v] of params.entries()) { payloadLogObj[k] = v; }
        console.log('🔍 [DEBUG] Payload objeto:', payloadLogObj);
        console.log('🔍 [DEBUG] Payload encoded:', params.toString());
        console.log('🔍 [DEBUG] ===========================');

        const response = await fetch(URL_CONFIRMAR, {
            method: 'POST',
            headers: headers,
            body: params
        });
        
        const data = await response.json();
        
        if (data.success) {
            mostrarAlert(`Estado "${estado}" registrado correctamente`, 'success');
            
            // Capturar datos DESPUÉS de la confirmación (solo en modo desarrollador)
            if (devModeEnabled && datosAntes) {
                // Esperar un momento para que se actualicen los datos
                setTimeout(() => {
                    capturarDatosDespuesConfirmacion(data, datosAntes);
                }, 500);
            }
            
            // Marcar el evento actual como procesado
            if (eventoActual && eventoActual.id) {
                eventosProceados.add(eventoActual.id);
                console.log(`✅ Evento ${eventoActual.id} marcado como confirmado con estado: ${estado}`);
                
                // Limpiar eventos viejos si el conjunto se hace muy grande
                if (eventosProceados.size > 100) {
                    const eventosArray = Array.from(eventosProceados);
                    const eventosRecientes = eventosArray.slice(-50); // Mantener los últimos 50
                    eventosProceados = new Set(eventosRecientes);
                    console.log('🧹 Limpieza de eventos procesados realizada');
                }
            }
            
            // Remover el evento de la lista de "Eventos de central" solo si no es reedición
            if (!elementoActual.es_reedicion) {
                removerEventoDeListaTiempoReal(eventoActual.id);
            } else {
                // Para reediciones, remover de la lista problemática y actualizar listas
                removerElementoProblematico(eventoActual.id);
                // Actualizar las listas para mostrar el cambio de estado
                setTimeout(() => {
                    obtenerElementosRevisados();
                    obtenerElementosProblemas();
                    cargarEstadisticas();
                }, 500);
            }
            
            // Volver al estado de esperando
            volverAEstadoEsperando();
            
            // Actualizar estadísticas y elementos revisados inmediatamente
            obtenerElementosRevisados();
            obtenerElementosProblemas();
            cargarEstadisticas();
            // Refrescar eventos para limpiar lista local inmediatamente
            obtenerEventos();
            
        } else {
            mostrarAlert(data.message || 'Error al registrar el estado', 'danger');
        }
        
    } catch (error) {
        console.error('Error al confirmar estado:', error);
        mostrarAlert('Error de conexión al confirmar el estado', 'danger');
    }
}

/**
 * Cancelar elemento actual y volver al estado de esperando
 */
function cancelarElemento() {
    // Marcar el evento actual como procesado para evitar que se vuelva a abrir
    if (eventoActual && eventoActual.id) {
        eventosProceados.add(eventoActual.id);
        console.log(`🚫 Evento ${eventoActual.id} marcado como cancelado`);
        
        // Limpiar eventos viejos si el conjunto se hace muy grande
        if (eventosProceados.size > 100) {
            const eventosArray = Array.from(eventosProceados);
            const eventosRecientes = eventosArray.slice(-50); // Mantener los últimos 50
            eventosProceados = new Set(eventosRecientes);
            console.log('🧹 Limpieza de eventos procesados realizada');
        }
    }
    
    volverAEstadoEsperando();
}

/**
 * Volver al estado de esperando eventos
 */
function volverAEstadoEsperando() {
    eventoActual = null;
    elementoActual = null;
    
    // Restablecer flag de selección manual para permitir detección automática
    seleccionManualActiva = false;
    actualizarStatusModoManual(false);
    console.log('🔓 Selección manual desactivada - volver a estado esperando');
    
    // Ocultar estado de elemento
    document.getElementById('estadoElemento').style.display = 'none';
    
    // Mostrar estado de esperando
    document.getElementById('estadoEsperando').style.display = 'block';
    
    // Limpiar selección visual en eventos
    document.querySelectorAll('.evento-item').forEach(el => {
        el.classList.remove('border', 'border-primary');
    });
    
    // Remover indicador de actividad
    const iconoRecepcion = document.getElementById('iconoRecepcion');
    iconoRecepcion.classList.remove('signal-indicator');
}



/**
 * Cargar estadísticas de la revisión
 */
async function cargarEstadisticas() {
    try {
        const response = await fetch(URL_ESTADISTICAS);
        const data = await response.json();
        
        if (data.success) {
            const stats = data.estadisticas;
            
            // Actualizar los contadores con datos reales
            document.getElementById('contRevisados').textContent = `${stats.total_revisados}/${stats.total_elementos}`;
            document.getElementById('contPorcentaje').textContent = `${stats.porcentaje}%`;
            document.getElementById('contFunciona').textContent = stats.funcionan;
            document.getElementById('contNoFunciona').textContent = stats.no_funcionan;
            document.getElementById('contPendiente').textContent = stats.pendientes;
            
        } else {
            console.error('Error al obtener estadísticas:', data.message);
        }
        
    } catch (error) {
        console.error('Error de conexión al obtener estadísticas:', error);
    }
}

/**
 * Actualizar status de conexión
 */
function actualizarStatusConexion(conectado) {
    const statusElement = document.getElementById('statusConexion');
    
    if (conectado) {
        statusElement.className = 'badge bg-success';
        statusElement.innerHTML = '<i class="fas fa-wifi"></i> Conectado';
    } else {
        statusElement.className = 'badge bg-danger';
        statusElement.innerHTML = '<i class="fas fa-wifi"></i> Desconectado';
    }
}

/**
 * Mostrar/ocultar indicador de modo manual
 */
function actualizarStatusModoManual(activo) {
    const statusElement = document.getElementById('statusModoManual');
    
    if (activo) {
        statusElement.style.display = 'inline-block';
        statusElement.className = 'badge bg-warning';
        statusElement.innerHTML = '<i class="fas fa-hand-paper"></i> Modo Manual';
    } else {
        statusElement.style.display = 'none';
    }
}



/**
 * Mostrar alert temporal
 */
function mostrarAlert(mensaje, tipo) {
    // Crear alert temporal (se puede mejorar con toasts)
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${tipo} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; max-width: 400px;';
    alertDiv.innerHTML = `
        ${mensaje}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(alertDiv);
    
    // Auto-remover después de 5 segundos
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.parentNode.removeChild(alertDiv);
        }
    }, 5000);
}

/**
 * Remover un evento específico de la lista "Eventos de Central"
 */
function removerEventoDeListaTiempoReal(eventoId) {
    try {
        const elementos = document.querySelectorAll('.evento-item');
        let encontrado = false;
        elementos.forEach((el) => {
            try {
                const data = JSON.parse(el.dataset.evento);
                if (String(data.id) === String(eventoId)) {
                    encontrado = true;
                    // Animación de desvanecimiento antes de remover
                    el.style.transition = 'opacity 0.3s ease-out';
                    el.style.opacity = '0';
                    setTimeout(() => {
                        if (el.parentNode) {
                            el.parentNode.removeChild(el);
                            console.log(`🗑️ Evento ${eventoId} removido de "Eventos de Central"`);
                        }
                    }, 300);
                }
            } catch (_) {}
        });
        if (!encontrado) {
            console.log(`⚠️ No se encontró el evento ${eventoId} en la lista de eventos`);
        }
    } catch (error) {
        console.error('Error al remover evento de lista:', error);
    }
}

/**
 * Remover un elemento específico de la lista "Por Revisar"
 */
function removerElementoProblematico(eventoId) {
    try {
        const elementos = document.querySelectorAll('.elemento-problematico');
        let encontrado = false;
        elementos.forEach((el) => {
            try {
                const data = JSON.parse(el.dataset.evento);
                if (String(data.id) === String(eventoId)) {
                    encontrado = true;
                    // Animación de desvanecimiento antes de remover
                    el.style.transition = 'opacity 0.3s ease-out';
                    el.style.opacity = '0';
                    setTimeout(() => {
                        if (el.parentNode) {
                            el.parentNode.removeChild(el);
                            console.log(`🗑️ Elemento problemático ${eventoId} removido de "Por Revisar"`);
                        }
                    }, 300);
                }
            } catch (_) {}
        });
        if (!encontrado) {
            console.log(`⚠️ No se encontró el elemento problemático ${eventoId} en la lista`);
        }
    } catch (error) {
        console.error('Error al remover elemento problemático de lista:', error);
    }
}

console.log('Monitor de Revisiones V1 - Scripts cargados correctamente');
</script>
<script>
// Utilidad para escapar HTML en DevMode
function escapeHtml(str) {
    try {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    } catch (_) { return ''; }
}

// Copiar el bloque de debug de un evento
async function copiarDebug(btn) {
    try {
        const container = btn.closest('.dev-debug');
        if (!container) return;
        // Extraer texto plano de todo el bloque (incluyendo PREs)
        const text = container.innerText;
        await navigator.clipboard.writeText(text);
        btn.classList.remove('btn-outline-secondary');
        btn.classList.add('btn-success');
        btn.innerHTML = '<i class="fas fa-check me-1"></i>Copiado';
        setTimeout(() => {
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-secondary');
            btn.innerHTML = '<i class="fas fa-copy me-1"></i>Copiar';
        }, 1500);
    } catch (e) {
        console.warn('No se pudo copiar el debug', e);
        try {
            // Fallback seleccionar y copiar manualmente
            const range = document.createRange();
            range.selectNode(container);
            const sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
            document.execCommand('copy');
            sel.removeAllRanges();
        } catch (_) {}
    }
}

/**
 * Inicializar el modal de elementos pendientes por zona
 */
function inicializarModalElementosPendientes() {
    try {
        // Inicializar el modal de Bootstrap
        modalElementosPendientes = new bootstrap.Modal(document.getElementById('modalElementosPendientesZona'));
        
        // Event listener para el botón de ver pendientes
        const btnVerPendientes = document.getElementById('btnVerPendientesZona');
        if (btnVerPendientes) {
            btnVerPendientes.addEventListener('click', function() {
                mostrarElementosPendientesZona();
            });
        }
        
        // Event listener para el botón de actualizar en el modal
        const btnActualizar = document.getElementById('btnActualizarElementosPendientes');
        if (btnActualizar) {
            btnActualizar.addEventListener('click', function() {
                if (zonaActual) {
                    cargarElementosPendientesZona(zonaActual.id);
                }
            });
        }
        
        console.log('Modal de elementos pendientes inicializado correctamente');
    } catch (error) {
        console.error('Error al inicializar modal de elementos pendientes:', error);
    }
}

/**
 * Mostrar el modal con elementos pendientes de la zona del último elemento detectado
 */
async function mostrarElementosPendientesZona() {
    try {
        // Mostrar el modal primero
        modalElementosPendientes.show();
        
        // Obtener la zona del último elemento desde el servidor
        console.log('Obteniendo zona del último elemento desde:', URL_ZONA_ULTIMO_ELEMENTO);
        const response = await fetch(URL_ZONA_ULTIMO_ELEMENTO);
        console.log('Respuesta zona último elemento:', response.status, response.statusText);
        
        const data = await response.json();
        console.log('Datos zona último elemento:', data);
        
        if (data.success) {
            zonaActual = {
                id: data.zona.id,
                nombre: data.zona.nombre,
                numero: data.zona.numero
            };
            console.log('Zona actual establecida:', zonaActual);
            
            // Actualizar la información de la zona en el modal con información del último evento
            actualizarInfoZonaModal(zonaActual, data.zona.ultimo_evento);
            
            // Cargar los elementos pendientes
            await cargarElementosPendientesZona(zonaActual.id);
        } else {
            console.log('No se pudo obtener zona del servidor, usando zona local:', zonaActual);
            // Si no hay zona del servidor, usar la zona local si existe
            if (zonaActual) {
                actualizarInfoZonaModal(zonaActual);
                await cargarElementosPendientesZona(zonaActual.id);
            } else {
                mostrarAlert('No se ha detectado ningún elemento aún', 'warning');
                modalElementosPendientes.hide();
            }
        }
        
    } catch (error) {
        console.error('Error al mostrar elementos pendientes por zona:', error);
        mostrarAlert('Error al cargar los elementos pendientes', 'danger');
        modalElementosPendientes.hide();
    }
}

/**
 * Actualizar la información de la zona en el modal
 */
function actualizarInfoZonaModal(zona, ultimoEvento = null) {
    const zonaInfo = document.getElementById('modalZonaInfo');
    const zonaNombre = document.getElementById('modalZonaNombre');
    const zonaDetalles = document.getElementById('modalZonaDetalles');
    
    if (zonaInfo && zonaNombre && zonaDetalles) {
        zonaNombre.textContent = `Zona ${zona.numero} - ${zona.nombre}`;
        
        if (ultimoEvento) {
            zonaDetalles.innerHTML = `
                <div class="small">
                    <strong>Último evento detectado:</strong> L${ultimoEvento.lazo} ${ultimoEvento.tipo}${ultimoEvento.numero} - ${ultimoEvento.descripcion}<br>
                    <strong>Tipo:</strong> ${ultimoEvento.tipo_evento} | <strong>Fecha:</strong> ${ultimoEvento.fecha_deteccion}
                </div>
            `;
        } else {
            zonaDetalles.textContent = `Elementos pendientes de verificar en esta zona`;
        }
        
        zonaInfo.style.display = 'block';
    }
}

/**
 * Cargar elementos pendientes de una zona específica
 */
async function cargarElementosPendientesZona(zonaId) {
    try {
        console.log('Cargando elementos pendientes para zona ID:', zonaId);
        const container = document.getElementById('modalElementosPendientesLista');
        
        // Mostrar spinner de carga
        container.innerHTML = `
            <div class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Cargando...</span>
                </div>
                <p class="mt-2 text-muted">Cargando elementos pendientes...</p>
            </div>
        `;
        
        // Construir la URL reemplazando el placeholder
        const url = URL_ELEMENTOS_PENDIENTES_ZONA.replace('ZONA_ID', zonaId);
        console.log('URL de elementos pendientes:', url);
        
        const response = await fetch(url);
        console.log('Respuesta del servidor:', response.status, response.statusText);
        
        const data = await response.json();
        console.log('Datos recibidos:', data);
        
        if (data.success) {
            mostrarElementosPendientesEnModal(data.elementos, data.total, data.zona);
        } else {
            console.error('Error del servidor:', data.message);
            container.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                    <p class="text-muted">${data.message || 'Error al cargar los elementos pendientes'}</p>
                </div>
            `;
        }
        
    } catch (error) {
        console.error('Error al cargar elementos pendientes por zona:', error);
        const container = document.getElementById('modalElementosPendientesLista');
        container.innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-exclamation-triangle fa-3x text-danger mb-3"></i>
                <p class="text-muted">Error de conexión al cargar los elementos pendientes</p>
                <small class="text-muted">Error: ${error.message}</small>
            </div>
        `;
    }
}

/**
 * Mostrar los elementos pendientes en el modal
 */
function mostrarElementosPendientesEnModal(elementos, total, zona) {
    const container = document.getElementById('modalElementosPendientesLista');
    
    if (elementos.length === 0) {
        container.innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                <h5 class="text-success">¡Zona Completada!</h5>
                <p class="text-muted">No hay elementos pendientes de verificar en esta zona.</p>
                <small class="text-muted">Todos los elementos de la zona ${zona.numero} - ${zona.nombre} han sido revisados.</small>
            </div>
        `;
        return;
    }
    
    // Crear la lista de elementos pendientes
    const elementosHtml = elementos.map(elemento => crearCardElementoPendiente(elemento)).join('');
    
    container.innerHTML = `
        <div class="mb-3">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                    <i class="fas fa-list me-2"></i>Elementos Pendientes (${total})
                </h6>
                <span class="badge bg-warning">${total} elementos</span>
            </div>
        </div>
        <div class="list-group">
            ${elementosHtml}
        </div>
    `;
}

/**
 * Marcar elemento desde el modal de elementos pendientes
 */
async function marcarElementoDesdeModal(elementoId, centralId, estado, nombreElemento) {
    try {
        console.log('🔍 [DEBUG] Iniciando marcarElementoDesdeModal:', {
            elementoId,
            centralId,
            estado,
            nombreElemento
        });
        
        // Confirmar acción
        const estadoTexto = estado === 'pendiente' ? 'PENDIENTE' : 'NO FUNCIONA';
        if (!confirm(`¿Marcar "${nombreElemento}" como ${estadoTexto}?`)) {
            return;
        }
        
        // Obtener token CSRF
        const csrfMeta = document.querySelector('meta[name="csrf-token"]');
        console.log('🔍 [DEBUG] CSRF Meta encontrado:', csrfMeta ? 'Sí' : 'No');
        console.log('🔍 [DEBUG] CSRF Token:', csrfMeta?.content);
        
        const headers = {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'application/json'
        };
        if (csrfMeta && csrfMeta.content) {
            headers['X-CSRF-TOKEN'] = csrfMeta.content;
        }
        
        // Construir URL
        const revisionId = {{ $revision->id }};
        const accion = estado === 'pendiente' ? 'marcar-pendiente' : 'marcar-no-funciona';
        const url = `/revision/${revisionId}/centrales/${centralId}/elementos/${elementoId}/${accion}`;
        
        console.log('🔍 [DEBUG] URL construida:', url);
        console.log('🔍 [DEBUG] Headers:', headers);
        
        // Hacer la petición
        console.log('🔍 [DEBUG] Haciendo petición POST...');
        const response = await fetch(url, {
            method: 'POST',
            headers: headers
        });
        
        console.log('🔍 [DEBUG] Response status:', response.status);
        console.log('🔍 [DEBUG] Response ok:', response.ok);
        console.log('🔍 [DEBUG] Response headers:', response.headers);
        
        // Intentar leer la respuesta como JSON
        let data;
        try {
            const responseText = await response.text();
            console.log('🔍 [DEBUG] Response text:', responseText);
            data = JSON.parse(responseText);
            console.log('🔍 [DEBUG] Response data:', data);
        } catch (parseError) {
            console.error('❌ [DEBUG] Error al parsear JSON:', parseError);
            throw new Error('La respuesta del servidor no es JSON válido');
        }
        
        if (data.success || response.ok) {
            console.log('✅ [DEBUG] Operación exitosa');
            mostrarAlert(data.message || `Elemento marcado como ${estadoTexto} correctamente`, 'success');
            
            // Recargar la lista de elementos pendientes
            if (zonaActual && zonaActual.id) {
                await cargarElementosPendientesZona(zonaActual.id);
            }
            
            // Actualizar listas del monitor
            obtenerElementosRevisados();
            obtenerElementosProblemas();
            cargarEstadisticas();
        } else {
            console.log('⚠️ [DEBUG] Operación fallida:', data.message);
            mostrarAlert(data.message || 'Error al marcar el elemento', 'danger');
        }
        
    } catch (error) {
        console.error('❌ [DEBUG] Error en marcarElementoDesdeModal:', error);
        console.error('❌ [DEBUG] Error stack:', error.stack);
        mostrarAlert('Error de conexión al marcar el elemento: ' + error.message, 'danger');
    }
}

/**
 * Obtener icono y color según el tipo de elemento (exactamente igual que en index.blade.php)
 */
function obtenerIconoYColorElemento(tipoAbreviatura) {
    const tipo = (tipoAbreviatura || '').toUpperCase();
    
    // === SENSORES === (exactamente como en index.blade.php líneas 172-187)
    if (tipo === 'OPTI') {
        return { icono: 'fa-eye', color: 'info', nombre: 'Óptico' };
    }
    if (tipo === 'TER') {
        return { icono: 'fa-thermometer-half', color: 'warning', nombre: 'Térmico' };
    }
    if (tipo === 'MULT') {
        return { icono: 'fa-layer-group', color: 'success', nombre: 'Multicriteria' };
    }
    if (tipo === 'SMART 4') {
        return { icono: 'fa-microchip', color: 'primary', nombre: 'Smart 4' };
    }
    
    // === MÓDULOS === (exactamente como en index.blade.php líneas 280-319)
    if (tipo === 'PUL') {
        return { icono: 'fa-hand-paper', color: 'primary', nombre: 'Pulsador' }; // bg-primary (azul)
    }
    if (tipo === 'SIRE') {
        return { icono: 'fa-volume-up', color: 'danger', nombre: 'Sirena' }; // bg-danger (rojo)
    }
    if (tipo === 'MON') {
        return { icono: 'fa-desktop', color: 'success', nombre: 'Monitor' }; // bg-success (verde)
    }
    if (tipo === 'CON') {
        return { icono: 'fa-cog', color: 'info', nombre: 'Control' }; // bg-info (azul claro)
    }
    if (tipo === 'AUX') {
        return { icono: 'fa-plug', color: 'warning', nombre: 'Auxiliar' }; // bg-warning (amarillo)
    }
    if (tipo === 'ASPR') {
        return { icono: 'fa-water', color: 'dark', nombre: 'Aspersores' }; // bg-dark (negro)
    }
    if (tipo === 'SPRK') {
        return { icono: 'fa-shower', color: 'info', extraClass: 'text-dark', nombre: 'Sprinkler' }; // bg-info text-dark
    }
    if (tipo === 'ZMX') {
        return { icono: 'fa-map-marker-alt', color: 'custom', customColor: '#6f42c1', nombre: 'Zona Mix' }; // Morado
    }
    if (tipo === 'CDI') {
        return { icono: 'fa-terminal', color: 'custom', customColor: '#fd7e14', nombre: 'CDI' }; // Naranja
    }
    if (tipo === 'BOOSTER') {
        return { icono: 'fa-rocket', color: 'dark', nombre: 'Booster' }; // bg-dark (negro)
    }
    
    // Por defecto
    return { icono: 'fa-circle', color: 'secondary', nombre: 'Otro' };
}

/**
 * Crear card para un elemento pendiente en el modal
 */
function crearCardElementoPendiente(elemento) {
    const tipoDispositivo = esModuloPorAbreviatura(elemento.tipo_abreviatura) ? 'M' : 'S';
    const lazo = `L${elemento.lazo || '0'}`;
    const numero = `${tipoDispositivo}${elemento.numero ? elemento.numero.toString().padStart(2, '0') : '00'}`;
    const zona = `Z${elemento.zona || '0'}`;
    
    // Obtener icono y color según el tipo
    const estiloTipo = obtenerIconoYColorElemento(elemento.tipo_abreviatura);
    
    // Determinar el estilo del badge
    let badgeStyle = '';
    let badgeClass = '';
    if (estiloTipo.color === 'custom') {
        badgeStyle = `style="background-color: ${estiloTipo.customColor}; color: white;"`;
        badgeClass = 'badge';
    } else {
        badgeClass = `badge bg-${estiloTipo.color}`;
        if (estiloTipo.extraClass) {
            badgeClass += ` ${estiloTipo.extraClass}`;
        }
    }
    
    // Determinar el color del icono
    let iconoColor = '';
    if (estiloTipo.color === 'custom') {
        iconoColor = `style="color: ${estiloTipo.customColor};"`;
    } else {
        iconoColor = `class="text-${estiloTipo.color}"`;
    }
    
    return `
        <div class="list-group-item">
            <div class="d-flex align-items-center mb-1">
                <i class="fas ${estiloTipo.icono} me-2" ${iconoColor}></i>
                <h6 class="mb-0 flex-grow-1">${elemento.nombre}</h6>
                <span class="${badgeClass}" ${badgeStyle}>${elemento.tipo_abreviatura}</span>
            </div>
            <div class="row align-items-center">
                <div class="col-md-4">
                    <small class="text-muted d-block">${lazo} ${numero} ${zona}</small>
                    <small class="text-muted d-block">${elemento.tipo}</small>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">${elemento.zona_nombre}</small>
                    <small class="text-muted d-block">${elemento.central_nombre}</small>
                </div>
                <div class="col-md-4 text-end">
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" 
                                class="btn btn-outline-secondary" 
                                onclick="marcarElementoDesdeModal(${elemento.id}, ${elemento.central_id}, 'pendiente', '${elemento.nombre}')"
                                title="Marcar como pendiente">
                            <i class="fa-solid fa-clock"></i>
                        </button>
                        <button type="button" 
                                class="btn btn-outline-danger" 
                                onclick="marcarElementoDesdeModal(${elemento.id}, ${elemento.central_id}, 'no funciona', '${elemento.nombre}')"
                                title="Marcar como no funciona">
                            <i class="fa-solid fa-times-circle"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
}
</script>
@endsection