<?php
// Establece la zona horaria de Ecuador para todo el sistema
date_default_timezone_set('America/Guayaquil');

if (session_status() === PHP_SESSION_NONE) { 
    session_start(); 
}

if (!isset($_SESSION['usu_id'])) {
    echo '<div class="alert alert-danger small p-2 mb-0">⚠️ Error: Sesión expirada. Por favor, <a href="/stage/login.php">inicie sesión nuevamente</a>.</div>';
    exit();
}

$id_juez_sesion = intval($_SESSION['usu_id']);
$bd = new clsbdd();
$tipo_juez_sesion = $_SESSION['usu_tipo_juez'] ?? 'TODOS'; 

// Clave maestra de autorización para directores/administradores
$clave_autorizacion = "DIRECTOR2026"; 

// Función auxiliar para capturar la IP real del usuario para la auditoría
function obtenerIPUsuario() {
    if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
        return $_SERVER['HTTP_CLIENT_IP'];
    } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
        return explode(',', $_SERVER['HTTP_X_FORWARDED_FOR'])[0];
    }
    return $_SERVER['REMOTE_ADDR'] ?? '127.0.0.1';
}

// ==========================================
// PROCESAMIENTO POST: GUARDAR CALIFICACIÓN
// ==========================================
$mensaje = '';
$tipo_mensaje = '';
$evento_recargado = ''; 
$guardado_exitoso_js = false; 
$participante_evaluado_js = 0;

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'guardar_calificacion_detallada') {
    
    $ins_id = isset($_POST['participante_id']) ? intval($_POST['participante_id']) : 0;
    $usu_id = isset($id_juez_sesion) ? intval($id_juez_sesion) : 0; 
    $evento_recargado = isset($_POST['evento_id']) ? intval($_POST['evento_id']) : ''; 
    $tiempo_registro = $_POST['tiempo_empleado'] ?? '00:00';
    $observaciones = htmlspecialchars(trim($_POST['observaciones'] ?? ''), ENT_QUOTES, 'UTF-8');
    $recalificacion_autorizada = isset($_POST['recalificacion_autorizada']) && $_POST['recalificacion_autorizada'] === '1';

    if ($ins_id <= 0 || $usu_id <= 0) {
        $mensaje = "ID de inscripción o sesión de juez no válidos.";
        $tipo_mensaje = "danger";
    } else {
        // Validación de Backend: Si ya está calificado, exigir que la recalificación esté autorizada
        $sql_check_previo = "SELECT cal_id FROM bas_calificaciones_jueces WHERE ins_id = $ins_id AND usu_id = $usu_id LIMIT 1";
        $res_check_previo = $bd->ejecutar_array($sql_check_previo);
        $es_recalificacion = !empty($res_check_previo);

        if ($es_recalificacion && !$recalificacion_autorizada) {
            $mensaje = "⚠️ Error: Esta participación ya fue evaluada. Requiere clave de autorización.";
            $tipo_mensaje = "danger";
        } else {
            $pnt_estilo = 0.00;       
            $pnt_dificultad = 0.00;   
            $total_penalidades = 0.00;
            $desglose_detallado = [];
            $componentes_valores = [];

            if (isset($_POST['componentes']) && is_array($_POST['componentes'])) {
                $com_ids_raw = array_keys($_POST['componentes']);
                $com_ids_clean = array_map('intval', $com_ids_raw);
                
                if (!empty($com_ids_clean)) {
                    $lista_ids_sql = implode(',', $com_ids_clean);
                    
                    $sql_bulk_c = "SELECT c.com_id, c.com_nombre, t.tip_nombre 
                                   FROM bas_rubrica_componentes c
                                   INNER JOIN bas_juzgamiento_tipos t ON c.tip_id = t.tip_id
                                   WHERE c.com_id IN ($lista_ids_sql)";
                    
                    $res_bulk = $bd->ejecutar_array($sql_bulk_c);
                    $mapa_componentes = [];
                    if (!empty($res_bulk)) {
                        foreach ($res_bulk as $item) {
                            $mapa_componentes[intval($item['com_id'])] = $item;
                        }
                    }

                    foreach ($_POST['componentes'] as $com_id => $valor) {
                        $com_id = intval($com_id);
                        $valor_calificado = floatval($valor);
                        $componentes_valores[$com_id] = $valor_calificado;

                        if (isset($mapa_componentes[$com_id])) {
                            $comp = $mapa_componentes[$com_id];
                            $tipo_comp = strtoupper(trim($comp['tip_nombre']));
                            
                            if ($tipo_comp === 'TÉCNICO' || $tipo_comp === 'TECNICO') $pnt_estilo += $valor_calificado;
                            if ($tipo_comp === 'COREOGRÁFICO' || $tipo_comp === 'COREOGRAFICO') $pnt_dificultad += $valor_calificado;
                            if ($tipo_comp === 'PENALIDADES') $total_penalidades += $valor_calificado;
                            
                            $desglose_detallado[] = "{$comp['com_nombre']}: {$valor_calificado}";
                        }
                    }
                }
            }

            $pnt_estilo_final = $pnt_estilo;
            $pnt_dificultad_final = $pnt_dificultad;
            $obs_previa = '';

            if ($es_recalificacion) {
                $sql_full_check = "SELECT cal_id, pnt_estilo, pnt_dificultad, cal_observaciones FROM bas_calificaciones_jueces WHERE ins_id = $ins_id AND usu_id = $usu_id";
                $res_full = $bd->ejecutar_array($sql_full_check);
                if(!empty($res_full)) {
                    $existe = $res_full[0];
                    $obs_previa = $existe['cal_observaciones'] . " | RECALIFICADO: ";
                    $tipo_juez_voto = strtoupper(trim($tipo_juez_sesion));
                    
                    if ($tipo_juez_voto === 'TÉCNICO' || $tipo_juez_voto === 'TECNICO') { 
                        $pnt_dificultad_final = floatval($existe['pnt_dificultad']); 
                    }
                    if ($tipo_juez_voto === 'COREOGRÁFICO' || $tipo_juez_voto === 'COREOGRAFICO') { 
                        $pnt_estilo_final = floatval($existe['pnt_estilo']); 
                    }
                }
            }

            $cal_total = max(0, ($pnt_estilo_final + $pnt_dificultad_final) - $total_penalidades);
            $cadena_desglose = "[Juez: $tipo_juez_sesion][Tiempo: {$tiempo_registro}] [" . implode(', ', $desglose_detallado) . "]";
            $cal_observaciones = addslashes($obs_previa . $cadena_desglose . " - Obs: " . $observaciones);

            $sql_save = "INSERT INTO bas_calificaciones_jueces 
                        (ins_id, usu_id, pnt_estilo, pnt_precision, pnt_ritmo, pnt_sincronizacion, pnt_dificultad, pen_caida_baston, pen_cruze_padres, pen_gritos, cal_total, cal_observaciones, updated_at) 
                        VALUES 
                        ($ins_id, $usu_id, $pnt_estilo_final, 0, 0, 0, $pnt_dificultad_final, 0, 0, 0, $cal_total, '$cal_observaciones', NOW())
                        ON DUPLICATE KEY UPDATE 
                        pnt_estilo = $pnt_estilo_final,
                        pnt_dificultad = $pnt_dificultad_final,
                        cal_total = $cal_total,
                        cal_observaciones = '$cal_observaciones',
                        updated_at = NOW()";

            if ($bd->ejecutar($sql_save)) {
                $cal_id_real = $es_recalificacion ? intval($res_check_previo[0]['cal_id']) : $bd->ultimo_id(); 
                
                if ($cal_id_real > 0) {
                    foreach ($componentes_valores as $com_id => $det_valor) {
                        $sql_det = "INSERT INTO bas_calificaciones_detalles (cal_id, com_id, det_puntaje) 
                                    VALUES ($cal_id_real, $com_id, $det_valor)
                                    ON DUPLICATE KEY UPDATE det_puntaje = $det_valor";
                        $bd->ejecutar($sql_det);
                    }
                }

                $sqlPromedio = "SELECT ROUND(AVG(cal_total), 2) as promedio_general FROM bas_calificaciones_jueces WHERE ins_id = $ins_id";
                $resPromedio = $bd->ejecutar_array($sqlPromedio);
                $promedio_final = !empty($resPromedio) ? $resPromedio[0]['promedio_general'] : 0.00;

                $sqlUpdGeneral = "UPDATE bas_inscripciones_niveles 
                                  SET puntaje_final = '$promedio_final', calificado = 1 
                                  WHERE ins_id = $ins_id";
                $bd->ejecutar($sqlUpdGeneral);

                // ==========================================
                // REGISTRO EN LA TABLA DE AUDITORÍA
                // ==========================================
                $aud_accion = $es_recalificacion ? 'RECALIFICACION_AUTORIZADA' : 'NUEVA_CALIFICACION';
                $aud_tabla = 'bas_calificaciones_jueces';
                $aud_registro_id = $cal_id_real;
                $aud_ip = addslashes(obtenerIPUsuario());
                $aud_descripcion = addslashes("El juez asignó un puntaje total de {$cal_total} al participante ID {$ins_id}. Desglose preliminar: " . implode(', ', $desglose_detallado));

                $sql_audit = "INSERT INTO bas_auditoria (usu_id, aud_accion, aud_tabla, aud_registro_id, aud_descripcion, aud_fecha, aud_ip) 
                              VALUES ($usu_id, '$aud_accion', '$aud_tabla', $aud_registro_id, '$aud_descripcion', NOW(), '$aud_ip')";
                $bd->ejecutar($sql_audit);
                // ==========================================

                $mensaje = "Evaluación almacenada con éxito y registrada en auditoría.";
                $tipo_mensaje = "success";
                $guardado_exitoso_js = true;
                $participante_evaluado_js = $ins_id;
            } else {
                $mensaje = "Error al almacenar cambios en la base de datos.";
                $tipo_mensaje = "danger";
            }
        }
    }
}
?>

<?php if (!empty($mensaje)): ?>
    <div class="alert alert-<?= $tipo_mensaje ?> alert-dismissible fade show" role="alert">
        <?= $mensaje ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
<?php endif; ?>

<div class="row mb-4">
    <div class="col">
        <h2 class="h3 text-dark fw-bold mb-0"><i class="fas fa-gavel text-pink me-2"></i>Panel de Calificación Activa</h2>
        <span class="badge bg-dark mt-1 text-uppercase">Área Asignada: <?= htmlspecialchars($tipo_juez_sesion, ENT_QUOTES, 'UTF-8') ?></span>
    </div>
</div>

<!-- SELECT DE EVENTO -->
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">
        <label class="form-label fw-bold text-secondary small text-uppercase">Selecciona el Evento Activo</label>
        <select class="form-select form-select-lg bg-light border-0 fw-bold text-dark" id="select_evento_activo">
            <option value="">-- SELECCIONE UN EVENTO PROPIO --</option>
            <?php
            $sql_evt = "SELECT e.evp_id, e.evp_nombre, e.evp_fecha 
                        FROM bas_eventos_propios e 
                        INNER JOIN bas_jueces_eventos j ON e.evp_id = j.evp_id 
                        WHERE j.usu_id = $id_juez_sesion 
                          AND e.evp_estado IN ('PLANIFICACION', 'REGISTRO', 'CONCLUIDO') 
                        ORDER BY e.evp_fecha DESC";
                        
            $res_evt = $bd->ejecutar_array($sql_evt);
            if (!empty($res_evt)) {
                foreach ($res_evt as $evt) {
                    $selected = ($evento_recargado == $evt['evp_id']) ? 'selected' : '';
                    echo "<option value='{$evt['evp_id']}' {$selected}>" . htmlspecialchars($evt['evp_nombre'], ENT_QUOTES, 'UTF-8') . "</option>";
                }
            } else {
                echo "<option value='' disabled>No tienes eventos asignados actualmente</option>";
            }
            ?>
        </select>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 d-none" id="contenedor_escaleta">
    <div class="card-body text-center p-4">
        <div class="spinner-border text-primary"></div>
    </div>
</div>

<!-- MODAL DE CALIFICACIÓN -->
<div class="modal fade" id="modalCalificar" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow rounded-4" style="max-height: 95vh;">
            <div class="modal-header bg-dark text-white py-3 border-0 d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <div>
                        <h5 class="modal-title fw-bold mb-0 text-uppercase" id="calificar_titulo_bastonera">Evaluando: -</h5>
                        <small class="text-pink font-monospace" id="calificar_subtitulo_nivel"></small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <form id="formFichaCalificacion" method="POST" action="index.php?page=calificaciones/competencias" style="overflow: hidden;">
                <div class="modal-body p-4 bg-light" style="max-height: calc(95vh - 130px); overflow-y: auto;">
                    <input type="hidden" name="action" value="guardar_calificacion_detallada">
                    <input type="hidden" name="evento_id" id="form_evento_id">
                    <input type="hidden" name="participante_id" id="form_participante_id">
                    <input type="hidden" name="tiempo_empleado" id="form_tiempo_empleado" value="00:00">
                    <input type="hidden" name="recalificacion_autorizada" id="form_recalificacion_autorizada" value="0">

                    <div class="row g-4">
                        <div class="col-lg-8" style="max-height: 68vh; overflow-y: auto; padding-right: 15px;">
                            <div class="card border-0 shadow-sm rounded-4">
                                <div class="card-header bg-white border-0 py-3">
                                    <h6 class="mb-0 text-uppercase fw-bold text-dark"><i class="fas fa-list text-pink me-2"></i>Rúbrica Específica Recomendada</h6>
                                </div>
                                <div class="card-body p-4" id="contenedor_componentes_dinamicos">
                                    <!-- Componentes dinámicos -->
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <!-- BLOQUE DE FEEDBACK -->
                            <div class="card border-0 shadow-sm rounded-4 mb-4">
                                <div class="card-body p-4">
                                    <label class="form-label fw-bold text-dark small">Feedback y Observaciones</label>
                                    <textarea class="form-control bg-light border-0" name="observaciones" id="input_observaciones" rows="4"></textarea>
                                </div>
                            </div>

                            <!-- CRONÓMETRO DE PISTA (Mover debajo de Feedback, exclusivo para Juez de Penalidades) -->
                            <div class="card border-0 shadow-sm rounded-4 mb-4 bg-dark text-white d-none" id="wrapper_cronometro_pista">
                                <div class="card-body p-3">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-stopwatch text-warning fa-2x me-3"></i>
                                            <div>
                                                <small class="text-white-50 text-uppercase d-block fw-bold" style="font-size: 0.65rem; letter-spacing: 0.5px;">Cronómetro de Pista</small>
                                                <span class="font-monospace fw-bold text-warning fs-3" id="cronometro_pantalla">00:00</span>
                                            </div>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-success btn-sm px-3" id="btn_cronometro_play" title="Iniciar/Pausar">
                                                <i class="fas fa-play"></i>
                                            </button>
                                            <button type="button" class="btn btn-outline-light btn-sm px-3" id="btn_cronometro_reset" title="Reiniciar">
                                                <i class="fas fa-undo-alt"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- SUBTOTAL PARCIAL -->
                            <div class="card border-0 text-white rounded-4 shadow-sm" style="background: #111b24;">
                                <div class="card-body p-4 text-center">
                                    <span class="text-uppercase small text-white-50">Subtotal Parcial Agregado</span>
                                    <h2 class="display-4 fw-bold my-2 text-warning" id="live_total_puntos">0.00</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 bg-light">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-5">Guardar Nota</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const selectEvento = document.getElementById("select_evento_activo");
    const contenedorEscaleta = document.getElementById("contenedor_escaleta");
    const wrapperCronometro = document.getElementById("wrapper_cronometro_pista");
    const modalElement = document.getElementById("modalCalificar");
    const liveTotalPuntos = document.getElementById("live_total_puntos");

    let cronometroIntervalo = null;
    let cronometroSegundos = 0; 
    let cronometroCorriendo = false;

    // Normalización de la cadena del tipo de juez
    const tipoJuezLogueado = "<?= strtoupper(trim($tipo_juez_sesion)) ?>"; 
    const CLAVE_MAESTRA = "<?= $clave_autorizacion ?>";

    function actualizarPantallaCronometro() {
        const m = Math.floor(cronometroSegundos / 60).toString().padStart(2, '0');
        const s = (cronometroSegundos % 60).toString().padStart(2, '0');
        const pantalla = document.getElementById("cronometro_pantalla");
        const inputTiempo = document.getElementById("form_tiempo_empleado");
        if(pantalla) pantalla.textContent = `${m}:${s}`;
        if(inputTiempo) inputTiempo.value = `${m}:${s}`;
    }

    const btnPlay = document.getElementById("btn_cronometro_play");
    if(btnPlay) {
        btnPlay.addEventListener("click", function() {
            if (!cronometroCorriendo) {
                cronometroIntervalo = setInterval(() => { cronometroSegundos++; actualizarPantallaCronometro(); }, 1000);
                this.innerHTML = '<i class="fas fa-pause"></i>';
                cronometroCorriendo = true;
            } else {
                clearInterval(cronometroIntervalo);
                this.innerHTML = '<i class="fas fa-play"></i>';
                cronometroCorriendo = false;
            }
        });
    }

    const btnReset = document.getElementById("btn_cronometro_reset");
    if(btnReset) {
        btnReset.addEventListener("click", function() {
            clearInterval(cronometroIntervalo);
            cronometroSegundos = 0; 
            cronometroCorriendo = false;
            if(btnPlay) btnPlay.innerHTML = '<i class="fas fa-play"></i>';
            actualizarPantallaCronometro();
        });
    }

    function calcularSubtotal() {
        let total = 0;
        const inputs = document.querySelectorAll(".btn-check-score");
        inputs.forEach(input => {
            if (input.type === "checkbox" && input.checked) {
                total += parseFloat(input.value) || 0;
            } else if (input.type === "radio" && input.checked) {
                total += parseFloat(input.value) || 0;
            }
        });
        if (liveTotalPuntos) {
            liveTotalPuntos.textContent = total.toFixed(2);
        }
    }

    function cargarEscaleta(evp_id) {
        if (!evp_id) { 
            contenedorEscaleta.classList.add("d-none"); 
            return; 
        }
        contenedorEscaleta.classList.remove("d-none");
        contenedorEscaleta.innerHTML = '<div class="card-body text-center p-4"><div class="spinner-border text-primary"></div></div>';
        
        fetch(`vista/eventos_propios/get_escaleta.php?evp_id=${evp_id}`)
            .then(res => {
                if(!res.ok) throw new Error("Código de estado HTTP: " + res.status);
                return res.text();
            })
            .then(html => {
                contenedorEscaleta.innerHTML = html;
                asignarEventosFilas(evp_id);
                
                <?php if ($guardado_exitoso_js): ?>
                    setTimeout(() => {
                        marcarFilaComoCalificada("<?= $participante_evaluado_js ?>");
                    }, 100);
                <?php endif; ?>
            })
            .catch(err => {
                console.error("Error al cargar la escaleta:", err);
                contenedorEscaleta.innerHTML = '<div class="alert alert-danger p-3 m-3">Error al conectar con la escaleta de registros. Detalle: ' + err.message + '</div>';
            });
    }

    if (selectEvento && selectEvento.value) {
        cargarEscaleta(selectEvento.value);
    }
    
    if (selectEvento) {
        selectEvento.addEventListener("change", function () { 
            cargarEscaleta(this.value); 
        });
    }

    function asignarEventosFilas(eventoId) {
        const filas = contenedorEscaleta.querySelectorAll("table tbody tr");
        if(filas.length === 0) return;

        filas.forEach(fila => {
            const badge = fila.querySelector(".badge");
            const esCalificado = fila.getAttribute('data-calificado') === 'true' || (badge && badge.classList.contains('bg-success'));

            if(esCalificado) {
                fila.style.cursor = "pointer";
                fila.style.opacity = "0.85";
                fila.title = "Clic para Recalificar (Requiere clave del Director)";
                
                if(badge && !badge.querySelector(".fa-pencil-alt")) {
                    badge.innerHTML = 'Calificado <i class="fas fa-pencil-alt ms-2" style="font-size: 0.8rem;"></i>';
                    badge.classList.add("d-inline-flex", "align-items-center");
                }
            } else {
                fila.style.cursor = "pointer";
            }

            fila.onclick = function() {
                const columns = fila.querySelectorAll("td");
                if (columns.length < 2) return;

                const idParticipanteReal = fila.getAttribute('data-ins-id');
                const estadoFilaCalificado = fila.getAttribute('data-calificado') === 'true' || (badge && badge.classList.contains('bg-success'));
                
                if (estadoFilaCalificado) {
                    let pass = prompt("Esta participación ya tiene nota. Ingrese la clave del Director para poder recalificar/editar:");
                    if (pass === null) return; 
                    
                    if (pass !== CLAVE_MAESTRA) {
                        alert("Clave incorrecta. Acción rechazada.");
                        return;
                    }
                    document.getElementById("form_recalificacion_autorizada").value = "1";
                } else {
                    document.getElementById("form_recalificacion_autorizada").value = "0";
                }

                const nombreBastonera = columns[1].querySelector(".fw-bold")?.textContent.trim() || columns[1].textContent.trim();
                const subtextoNivel = columns[1].querySelector(".text-muted")?.textContent.trim() || "";
                
                let textoLimpio = subtextoNivel.replace(/-+$/, "").trim(); 
                let partes = textoLimpio.split("-");
                let nivelLimpio = partes[partes.length - 1].toUpperCase().trim();

                if (!nivelLimpio && textoLimpio) {
                    nivelLimpio = textoLimpio.toUpperCase();
                }

                abrirFichaEvaluacionDinamica(idParticipanteReal, nombreBastonera, nivelLimpio, eventoId);
            };
        });
    }

    function marcarFilaComoCalificada(idInscripcion) {
        const filas = contenedorEscaleta.querySelectorAll("table tbody tr");
        filas.forEach(fila => {
            const currentInsId = fila.getAttribute('data-ins-id');
            if(currentInsId === idInscripcion.toString()) {
                const badge = fila.querySelector(".badge");
                if(badge) {
                    badge.innerHTML = 'Calificado <i class="fas fa-pencil-alt ms-2" style="font-size: 0.8rem;"></i>';
                    badge.className = "badge bg-success text-uppercase text-white p-2 d-inline-flex align-items-center";
                }
                
                fila.style.opacity = "0.85";
                fila.style.backgroundColor = "#f8f9fa";
                fila.setAttribute('data-calificado', 'true');
                asignarEventosFilas(document.getElementById("select_evento_activo").value);
            }
        });
    }

    function abrirFichaEvaluacionDinamica(id, nombre, nivel, eventoId) {
        // Reset subtotal
        if (liveTotalPuntos) liveTotalPuntos.textContent = "0.00";

        // Reset cronómetro
        clearInterval(cronometroIntervalo);
        cronometroSegundos = 0; 
        cronometroCorriendo = false;
        if(btnPlay) btnPlay.innerHTML = '<i class="fas fa-play"></i>';
        actualizarPantallaCronometro();

        // CONTROL EXCLUSIVO: Si la cadena tipoJuezLogueado contiene 'PENALIDADES' o 'TODOS'
        if (wrapperCronometro) {
            if (tipoJuezLogueado.includes('PENALIDADES') || tipoJuezLogueado.includes('TODOS')) {
                wrapperCronometro.classList.remove("d-none");
            } else {
                wrapperCronometro.classList.add("d-none");
            }
        }

        document.getElementById("calificar_titulo_bastonera").textContent = `Evaluando: ${nombre}`;
        document.getElementById("calificar_subtitulo_nivel").textContent = `RÚBRICA DE NIVEL - ${nivel}`;
        document.getElementById("form_evento_id").value = eventoId;
        document.getElementById("form_participante_id").value = id;

        // Desplegar Modal
        if (modalElement) {
            const bsModal = bootstrap.Modal.getOrCreateInstance(modalElement);
            bsModal.show();
        }

        const contenedor = document.getElementById("contenedor_componentes_dinamicos");
        contenedor.innerHTML = '<div class="text-center p-3"><div class="spinner-border text-pink"></div></div>';

        let urlConsulta = `vista/eventos_propios/get_rubrica_config.php?get_config_nivel=${encodeURIComponent(nivel)}&tipo_juez=${encodeURIComponent(tipoJuezLogueado)}`;

        fetch(urlConsulta)
            .then(res => {
                if (!res.ok) return res.text().then(text => { throw new Error(text) });
                return res.json();
            })
            .then(componentes => {
                contenedor.innerHTML = "";

                let componentesFiltrados = componentes;
                if (tipoJuezLogueado !== 'TODOS') {
                    componentesFiltrados = componentes.filter(comp => {
                        const tipoComp = comp.tipo_juzgamiento.toUpperCase().trim();
                        
                        const esTecnico = (tipoComp === 'TÉCNICO' || tipoComp === 'TECNICO');
                        const esCoreografico = (tipoComp === 'COREOGRÁFICO' || tipoComp === 'COREOGRAFICO');
                        
                        if (tipoJuezLogueado.includes('TÉCNICO') || tipoJuezLogueado.includes('TECNICO')) return esTecnico;
                        if (tipoJuezLogueado.includes('COREOGRÁFICO') || tipoJuezLogueado.includes('COREOGRAFICO')) return esCoreografico;
                        if (tipoJuezLogueado.includes('PENALIDADES')) return tipoComp === 'PENALIDADES';
                        
                        return false;
                    });
                }

                if(componentesFiltrados.length === 0) {
                    contenedor.innerHTML = `<div class="alert alert-warning text-center">No posees componentes asignados para evaluar en este nivel (${nivel}) como Juez ${tipoJuezLogueado}.</div>`;
                    return;
                }
                
                componentesFiltrados.forEach(comp => {
                    const block = document.createElement("div");
                    block.className = "mb-4 p-3 rounded-3 border-start border-4 bg-white shadow-sm border-primary";
                    block.setAttribute('data-tipo-componente', comp.tipo_juzgamiento.toUpperCase().trim());

                    let listaGuia = "";
                    if(comp.descriptores && comp.descriptores.length > 0){
                        listaGuia = `<ul class="text-muted small mt-2 mb-0 ps-3">`;
                        comp.descriptores.forEach(desc => { listaGuia += `<li>${desc}</li>`; });
                        listaGuia += `</ul>`;
                    }

                    const maxPuntos = parseFloat(comp.com_puntaje_max) || 0.00;
                    const esPenalidad = (comp.tipo_juzgamiento.toUpperCase().trim() === 'PENALIDADES');
                    let controlHtml = "";

                    if (esPenalidad) {
                        controlHtml = `
                            <div class="row align-items-center bg-light p-3 rounded-3 border">
                                <div class="col-md-7">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input btn-check-score" 
                                               type="checkbox" 
                                               role="switch"
                                               name="componentes[${comp.com_id}]" 
                                               id="comp_${comp.com_id}" 
                                               value="${maxPuntos}">
                                        <label class="form-check-label fw-bold text-danger ms-2" for="comp_${comp.com_id}">
                                            Aplicar Penalización (-${maxPuntos.toFixed(2)} pts)
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-5 text-end">
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle">Descuento único</span>
                                </div>
                            </div>
                        `;
                    } else {
                        const escalaCalculada = [
                            { valor: maxPuntos, texto: `Excelente (${maxPuntos.toFixed(2)})`, color: "btn-outline-success" },
                            { valor: (maxPuntos * 0.75), texto: `Bien (${(maxPuntos * 0.75).toFixed(2)})`, color: "btn-outline-info" },
                            { valor: (maxPuntos * 0.50), texto: `Regular (${(maxPuntos * 0.50).toFixed(2)})`, color: "btn-outline-warning" },
                            { valor: (maxPuntos * 0.25), texto: `Necesitas Mejorar (${(maxPuntos * 0.25).toFixed(2)})`, color: "btn-outline-danger" }
                        ];

                        controlHtml = `<div class="btn-group w-100" role="group">`;
                        escalaCalculada.forEach((esc, idx) => {
                            controlHtml += `
                                <input type="radio" class="btn-check btn-check-score" 
                                       name="componentes[${comp.com_id}]" 
                                       id="comp_${comp.com_id}_val_${idx}" 
                                       value="${esc.valor}" 
                                       required>
                                <label class="btn ${esc.color} fw-bold py-2" for="comp_${comp.com_id}_val_${idx}" style="font-size: 0.8rem; padding: .375rem .25rem;">
                                    ${esc.texto}
                                </label>
                            `;
                        });
                        controlHtml += `</div>`;
                    }

                    block.innerHTML = `
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="badge ${esPenalidad ? 'bg-danger' : 'bg-primary'} text-uppercase small">${comp.tipo_juzgamiento}</span>
                            <span class="fw-bold text-dark text-uppercase small" style="font-size:0.8rem;">
                                ${comp.com_nombre} ${esPenalidad ? `(Sanción: -${maxPuntos.toFixed(2)} pts)` : `(Máx: ${maxPuntos.toFixed(2)} pts)`}
                            </span>
                        </div>
                        ${controlHtml}
                        ${listaGuia}
                    `;
                    contenedor.appendChild(block);
                });

                // Asignar listeners a los radio/checkbox generados para actualizar subtotal
                document.querySelectorAll(".btn-check-score").forEach(input => {
                    input.addEventListener("change", calcularSubtotal);
                });
            });
    }
});
</script>