<?php
// vista/competencias/auditoria_computos.php
error_reporting(E_ALL);
ini_set('display_errors', 1);

foreach (['bd', 'db', 'conexion', 'conn', 'database', 'link'] as $varName) {
    if (isset($GLOBALS[$varName]) && is_object($GLOBALS[$varName])) {
        $bd = $GLOBALS[$varName];
        break;
    }
}
if (!isset($bd) && class_exists('clsbdd')) { 
    $bd = new clsbdd(); 
}

// 1. Cargar eventos activos
try {
    $sql_select_evt = "SELECT evp_id, evp_nombre FROM bas_eventos_propios ORDER BY evp_id DESC";
    $res_select_evt = $bd->ejecutar($sql_select_evt);
} catch (Exception $e) {
    $err_evt = $e->getMessage();
}

// 2. Cargar niveles/clasificaciones DIRECTAMENTE de bas_clasificaciones
try {
    $sql_select_niv = "SELECT DISTINCT cla_categoria 
                       FROM bas_clasificaciones 
                       WHERE cla_estado = 1 
                         AND cla_categoria IS NOT NULL 
                         AND cla_categoria != '' 
                       ORDER BY cla_categoria ASC";
    $res_select_niv = $bd->ejecutar($sql_select_niv);
} catch (Exception $e) {
    $res_select_niv = false;
}
?>

<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h2 class="h3 text-dark fw-bold mb-1"><i class="fas fa-poll text-pink me-2"></i>Auditoría de Cómputos Oficiales</h2>
                <p class="text-muted small mb-0">Control analítico de calificaciones por mesa de jueces y despliegue del Podio Olímpico.</p>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 small">
                    <li class="breadcrumb-item"><a href="index.php" class="text-decoration-none">Inicio</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Cómputos</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- TABLERO PRINCIPAL -->
    <div class="card border-0 shadow-sm rounded-4 mt-2 mb-5">
        <div class="card-header bg-dark text-white p-4 rounded-top-4 d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
            <div>
                <h5 class="mb-0 fw-bold"><i class="fas fa-calculator text-warning me-2"></i> Mesa de Control y Sumatoria</h5>
                <small class="text-white-50">Filtre por evento, modalidad y nivel para auditar los resultados exactos.</small>
            </div>
            <!-- FILTROS (3 SELECTORES DINÁMICOS) -->
            <div class="d-flex gap-2 flex-wrap">
                <select class="form-select bg-secondary border-0 text-white fw-bold shadow-sm small" id="select_evento_activo" style="min-width: 170px;">
                    <option value="">-- Evento --</option>
                    <?php 
                    if (isset($res_select_evt) && is_object($res_select_evt) && $res_select_evt->num_rows > 0) {
                        while ($evt = $res_select_evt->fetch_assoc()) {
                            echo "<option value='".intval($evt['evp_id'])."'>".htmlspecialchars($evt['evp_nombre'], ENT_QUOTES, 'UTF-8')."</option>";
                        }
                    }
                    ?>
                </select>
                <select class="form-select bg-secondary border-0 text-white fw-bold shadow-sm small" id="select_categoria_resultados" style="min-width: 150px;">
                    <option value="">-- Modalidad --</option>
                    <option value="SOLISTAS">Solistas</option>
                    <option value="DUOS">Dúos</option>
                    <option value="TRIOS">Trios</option>
                    <option value="CUARTETOS">Cuartetos</option>
                    <option value="QUINTETOS">Quintetos</option>
                </select>
                
                <!-- SELECTOR DE NIVEL POBLADO DINÁMICAMENTE DESDE LA BASE DE DATOS (bas_clasificaciones) -->
                <select class="form-select bg-secondary border-0 text-white fw-bold shadow-sm small" id="select_nivel_resultados" style="min-width: 170px;">
                    <option value="">-- Todos los Niveles --</option>
                    <?php 
                    if (isset($res_select_niv) && is_object($res_select_niv) && $res_select_niv->num_rows > 0) {
                        while ($cla = $res_select_niv->fetch_assoc()) {
                            $valCat = htmlspecialchars($cla['cla_categoria'], ENT_QUOTES, 'UTF-8');
                            $lblCat = ucwords(strtolower(str_replace('-', ' - ', $valCat)));
                            echo "<option value='{$valCat}'>{$lblCat}</option>";
                        }
                    }
                    ?>
                </select>
            </div>
        </div>
        
        <div class="card-body p-4 position-relative" id="contenedor_resultados_dashboard">
            <!-- PANELES DE ESTADO -->
            <div id="panel_estado_inicial" class="text-center py-5">
                <i class="fas fa-layer-group text-muted display-4 mb-3"></i>
                <h5 class="text-secondary fw-semibold">Defina evento y modalidad para auditar las evaluaciones</h5>
            </div>

            <div id="panel_resultados_bloqueado" class="d-none text-center py-5 border rounded-4 bg-light bg-opacity-50">
                <div class="mx-auto bg-white rounded-circle shadow-sm d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
                    <i class="fas fa-lock text-danger fs-4 animate__animated animate__pulse animate__infinite"></i>
                </div>
                <h4 class="fw-bold mt-3 text-dark mb-1">Cómputos en Proceso</h4>
                <p class="text-muted small mb-4 px-3">El podio y las actas se desbloquearán automáticamente cuando todos los jueces asignados terminen de calificar.</p>
                <div class="mx-auto px-3" style="max-width: 450px;">
                    <div class="d-flex justify-content-between mb-1 small fw-bold text-secondary">
                        <span>Progreso General</span>
                        <span id="txt_progreso_porcentaje">0%</span>
                    </div>
                    <div class="progress rounded-pill shadow-sm mb-2" style="height: 10px;">
                        <div id="barra_progreso_votos" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%; background-color:#f26a8d !important;"></div>
                    </div>
                    <span class="badge bg-secondary-subtle text-secondary px-3 py-1.5 rounded-pill font-monospace small" id="txt_progreso_conteo">0 de 0 listas</span>
                </div>
            </div>

            <!-- VISTA DESBLOQUEADA CON PODIO Y DETALLES -->
            <div id="panel_resultados_desbloqueado" class="d-none">
                <div class="row align-items-end justify-content-center g-3 my-2 py-3 bg-light rounded-4 border px-2">
                    <!-- 2DO LUGAR -->
                    <div class="col-md-3 text-center order-2 order-md-1">
                        <div class="p-3 bg-white rounded-4 shadow-sm border border-light position-relative mb-2 animate__animated animate__fadeInUp">
                            <span class="badge bg-secondary position-absolute top-0 start-50 translate-middle rounded-circle p-2 fs-6 shadow d-flex align-items-center justify-content-center" style="width:32px; height:32px;">2</span>
                            <div class="avatar-placeholder mx-auto my-2 rounded-circle bg-secondary bg-opacity-10 d-flex align-items-center justify-content-center text-secondary fw-bold" style="width: 55px; height:55px;">
                                <i class="fas fa-medal fs-4"></i>
                            </div>
                            <h6 class="fw-bold text-dark mb-0 text-truncate small" id="podio_2_nombre">-</h6>
                            <small class="text-muted d-block text-truncate mb-1" id="podio_2_inst">-</small>
                            <span class="badge bg-light border text-dark font-monospace fw-bold px-2.5 small" id="podio_2_nota">0.00 pts</span>
                        </div>
                        <div class="bg-secondary bg-opacity-25 rounded-top-3 shadow-sm pt-3" style="height: 75px;">
                            <span class="fw-bold text-secondary small">PLATA</span>
                        </div>
                    </div>

                    <!-- 1ER LUGAR -->
                    <div class="col-md-4 text-center order-1 order-md-2 mb-3 mb-md-0">
                        <div class="p-4 bg-white rounded-4 shadow border border-warning position-relative mb-2 animate__animated animate__bounceIn" style="transform: scale(1.03); z-index: 2;">
                            <span class="badge bg-warning position-absolute top-0 start-50 translate-middle rounded-circle p-2 fs-5 shadow-sm d-flex align-items-center justify-content-center" style="width:40px; height:40px; color:#543800;"><i class="fas fa-crown"></i></span>
                            <div class="avatar-placeholder mx-auto my-2 rounded-circle bg-warning bg-opacity-10 d-flex align-items-center justify-content-center text-warning fw-bold" style="width: 65px; height:65px;">
                                <i class="fas fa-trophy fs-4"></i>
                            </div>
                            <h5 class="fw-bold text-dark mb-0 text-uppercase text-truncate fs-6" id="podio_1_nombre">-</h5>
                            <small class="text-muted d-block text-truncate mb-2" id="podio_1_inst">-</small>
                            <span class="badge bg-warning text-dark font-monospace fw-bolder px-3 py-1.5 shadow-sm small" id="podio_1_nota">0.00 pts</span>
                        </div>
                        <div class="bg-warning bg-opacity-25 rounded-top-3 shadow border-top border-warning pt-3" style="height: 110px;">
                            <span class="fw-bold text-warning-emphasis d-block" style="color: #664d03 !important;">ORO</span>
                        </div>
                    </div>

                    <!-- 3ER LUGAR -->
                    <div class="col-md-3 text-center order-3 order-md-3">
                        <div class="p-3 bg-white rounded-4 shadow-sm border border-light position-relative mb-2 animate__animated animate__fadeInUp">
                            <span class="badge bg-danger position-absolute top-0 start-50 translate-middle rounded-circle p-2 fs-6 shadow d-flex align-items-center justify-content-center" style="width:32px; height:32px; background-color: #c47947 !important;">3</span>
                            <div class="avatar-placeholder mx-auto my-2 rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center text-danger fw-bold" style="width: 55px; height:55px; color: #c47947 !important;">
                                <i class="fas fa-award fs-4"></i>
                            </div>
                            <h6 class="fw-bold text-dark mb-0 text-truncate small" id="podio_3_nombre">-</h6>
                            <small class="text-muted d-block text-truncate mb-1" id="podio_3_inst">-</small>
                            <span class="badge bg-light border text-dark font-monospace fw-bold px-2.5 small" id="podio_3_nota">0.00 pts</span>
                        </div>
                        <div class="bg-danger bg-opacity-10 rounded-top-3 shadow-sm pt-3" style="height: 60px; background-color: rgba(196,121,71,0.15) !important;">
                            <span class="fw-bold small" style="color: #c47947;">BRONCE</span>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3 mt-4">
                    <h5 class="fw-bold text-dark text-uppercase mb-0 small"><i class="fas fa-list-ol text-pink me-2"></i>Clasificación y Reporte de Evaluación</h5>
                    <button type="button" class="btn btn-outline-dark btn-sm fw-bold px-3" onclick="window.print()"><i class="fas fa-print me-1"></i> Imprimir Reporte</button>
                </div>

                <div class="table-responsive rounded-3 border">
                    <table class="table table-hover align-middle mb-0 text-center small" id="tabla_resultados_oficiales">
                        <thead class="table-dark">
                            <tr>
                                <th style="width: 60px;">Pos</th>
                                <th class="text-start">Bastonera / Grupo</th>
                                <th class="text-start">Institución / Delegación</th>
                                <th>Nivel</th>
                                <th>Total Acumulado</th>
                                <th style="width: 160px;">Auditoría</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_resultados_oficiales"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const selEvt = document.getElementById("select_evento_activo");
    const selCat = document.getElementById("select_categoria_resultados");
    const selNiv = document.getElementById("select_nivel_resultados");

    function escapeHtml(str) {
        if (!str) return '';
        return String(str)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    function resetPodio() {
        for (let i = 1; i <= 3; i++) {
            const elNom = document.getElementById(`podio_${i}_nombre`);
            const elIns = document.getElementById(`podio_${i}_inst`);
            const elNot = document.getElementById(`podio_${i}_nota`);
            if (elNom) elNom.textContent = "-";
            if (elIns) elIns.textContent = "-";
            if (elNot) elNot.textContent = "0.00 pts";
        }
    }

    function verificarComputos() {
        const evId = selEvt.value;
        const catName = selCat.value;
        const nivelName = selNiv ? selNiv.value : '';
        const nombreEvento = selEvt.options[selEvt.selectedIndex] ? selEvt.options[selEvt.selectedIndex].text : '';

        const pInicial = document.getElementById("panel_estado_inicial");
        const pBloqueado = document.getElementById("panel_resultados_bloqueado");
        const pDesbloqueado = document.getElementById("panel_resultados_desbloqueado");

        if (!evId || !catName) {
            pInicial.classList.remove("d-none");
            pBloqueado.classList.add("d-none");
            pDesbloqueado.classList.add("d-none");
            return;
        }

        pInicial.classList.add("d-none");

        fetch(`vista/eventos_propios/get_resultados_categoria.php?evp_id=${encodeURIComponent(evId)}&categoria=${encodeURIComponent(catName)}&nivel=${encodeURIComponent(nivelName)}`)
            .then(res => {
                if (!res.ok) throw new Error(`Status ${res.status}`);
                return res.json();
            })
            .then(data => {
                if (!data || !data.success) {
                    alert("Error en el servidor al recuperar datos de calificación.");
                    return;
                }

                if (data.completado === false) {
                    pDesbloqueado.classList.add("d-none");
                    pBloqueado.classList.remove("d-none");
                    
                    const pct = data.progreso ? data.progreso.porcentaje : 0;
                    const eval = data.progreso ? data.progreso.evaluados : 0;
                    const tot = data.progreso ? data.progreso.total : 0;

                    document.getElementById("txt_progreso_porcentaje").textContent = `${pct}%`;
                    document.getElementById("barra_progreso_votos").style.width = `${pct}%`;
                    document.getElementById("txt_progreso_conteo").textContent = `${eval} de ${tot} Registros`;
                } else {
                    pBloqueado.classList.add("d-none");
                    pDesbloqueado.classList.remove("d-none");

                    resetPodio();

                    const tbody = document.getElementById("tbody_resultados_oficiales");
                    tbody.innerHTML = "";

                    if (!data.podio || data.podio.length === 0) {
                        tbody.innerHTML = `<tr><td colspan="6" class="text-center text-muted py-4"><i class="fas fa-info-circle me-1"></i> Sin registros calificados para este filtro.</td></tr>`;
                        return;
                    }

                    data.podio.forEach((part, index) => {
                        const pos = index + 1;
                        const bastoneraSafe = escapeHtml(part.ins_bastonera || 'Sin Nombre');
                        const institucionSafe = escapeHtml(part.ins_institucion || 'Sin Institución');
                        const nivelSafe = escapeHtml(part.ins_nivel || 'General');
                        
                        // Cálculo de garantía en JS
                        let sumaPuntos = 0;
                        let sumaPenalidades = 0;

                        if (part.desglose_jueces && part.desglose_jueces.length > 0) {
                            part.desglose_jueces.forEach(j => {
                                const tipoJuez = (j.juez_tipo || j.usu_tipo_juez || '').toUpperCase().trim();
                                const pVal = parseFloat(j.puntaje) || 0;
                                let penVal = parseFloat(j.penalizacion) || 0;
                                const obsText = j.observaciones || '';

                                // Si viene en 0 la penalización pero el texto dice [CAÍDA: X]
                                if (penVal === 0) {
                                    const matches = obsText.match(/\[(?:CAÍDA|CAIDA|CRUCE|GRITOS|PENALIZACION)[^\]]*:\s*(\d+(?:\.\d+)?)\]/gi);
                                    if (matches) {
                                        matches.forEach(m => {
                                            const num = m.match(/\d+(?:\.\d+)?/);
                                            if (num) penVal += parseFloat(num[0]);
                                        });
                                    }
                                }

                                if (tipoJuez.includes('PENALIDADES')) {
                                    const penalidadReal = (penVal > 0) ? penVal : Math.abs(pVal);
                                    sumaPenalidades += penalidadReal;
                                    j.penalizacion = penalidadReal; // asignación local
                                } else {
                                    sumaPuntos += pVal;
                                }
                            });
                        }

                        const puntajeCalculado = Math.max(0, sumaPuntos - sumaPenalidades);
                        const puntajeFinal = (part.puntaje_final !== undefined && !isNaN(parseFloat(part.puntaje_final))) 
                            ? parseFloat(part.puntaje_final).toFixed(2) 
                            : puntajeCalculado.toFixed(2);

                        if (pos <= 3) {
                            const podNom = document.getElementById(`podio_${pos}_nombre`);
                            const podIns = document.getElementById(`podio_${pos}_inst`);
                            const podNot = document.getElementById(`podio_${pos}_nota`);
                            if (podNom) podNom.textContent = part.ins_bastonera || '-';
                            if (podIns) podIns.textContent = part.ins_institucion || '-';
                            if (podNot) podNot.textContent = `${puntajeFinal} pts`;
                        }

                        let badgePos = `<span class="fw-bold text-muted">${pos}</span>`;
                        if (pos === 1) badgePos = `<span class="badge bg-warning text-dark rounded-circle px-2 py-1"><i class="fas fa-crown"></i> 1</span>`;
                        if (pos === 2) badgePos = `<span class="badge bg-secondary rounded-circle px-2 py-1">2</span>`;
                        if (pos === 3) badgePos = `<span class="badge bg-danger rounded-circle px-2 py-1" style="background-color: #c47947 !important;">3</span>`;

                        let filasDesglose = '';
                        if (part.desglose_jueces && part.desglose_jueces.length > 0) {
                            part.desglose_jueces.forEach(j => {
                                const puntajeVal = parseFloat(j.puntaje) || 0;
                                let penalizacionVal = parseFloat(j.penalizacion) || 0;
                                let obsTexto = escapeHtml(j.observaciones || '');

                                const nombreJuez = escapeHtml(j.juez_nombre || j.usu_nombre || `Juez #${j.juez_id}`);
                                const tipoJuez = escapeHtml(j.juez_tipo || j.usu_tipo_juez || '').toUpperCase().trim();

                                // Ocultar cronómetro para técnico y coreográfico
                                if (!tipoJuez.includes('PENALIDADES')) {
                                    obsTexto = obsTexto.replace(/\[Tiempo:\s*\d{2}:\d{2}\]/gi, '').trim();
                                }

                                let badgeTipoClass = 'bg-secondary';
                                if (tipoJuez.includes('TECNICO')) badgeTipoClass = 'bg-info text-dark';
                                if (tipoJuez.includes('COREOGRAFICO')) badgeTipoClass = 'bg-primary';
                                if (tipoJuez.includes('PENALIDADES')) badgeTipoClass = 'bg-warning text-dark';

                                let badgeTipoHtml = tipoJuez ? `<span class="badge ${badgeTipoClass} me-1" style="font-size:0.7rem;">${tipoJuez}</span>` : '';

                                let valoresHtml = '';
                                if (tipoJuez.includes('PENALIDADES')) {
                                    const valorPen = (penalizacionVal > 0) ? penalizacionVal : Math.abs(puntajeVal);
                                    valoresHtml = `<span class="text-danger fw-bold">-${valorPen.toFixed(2)} pen</span>`;
                                } else {
                                    if (puntajeVal > 0) {
                                        valoresHtml += `<span class="text-success fw-bold me-2">+${puntajeVal.toFixed(2)} pts</span>`;
                                    } else {
                                        valoresHtml += `<span class="text-muted fw-bold">0.00 pts</span>`;
                                    }
                                }

                                filasDesglose += `
                                    <div class="d-flex justify-content-between align-items-center border-bottom py-1 text-start">
                                        <div>
                                            <span class="badge bg-dark me-1"><i class="fas fa-user-check me-1"></i>${nombreJuez}</span>
                                            ${badgeTipoHtml}
                                            <small class="text-muted ms-1">${obsTexto || 'Sin observaciones'}</small>
                                        </div>
                                        <div>
                                            ${valoresHtml}
                                        </div>
                                    </div>`;
                            });
                        } else {
                            filasDesglose = `<div class="text-muted small py-1">No hay votos individuales registrados aún.</div>`;
                        }

                        const textoWs = `*RESULTADOS OFICIALES DE COMPETENCIA*\n` +
                            `🏆 *Evento:* ${nombreEvento}\n` +
                            `📌 *Categoría:* ${catName}\n` +
                            `🏅 *Puesto Obtención:* #${pos}\n` +
                            `📊 *Puntaje Total Acumulado:* *${puntajeFinal} pts*\n\n` +
                            `_Mensaje enviado automáticamente desde la Mesa de Control._`;

                        const urlWhatsapp = `https://api.whatsapp.com/send?text=${encodeURIComponent(textoWs)}`;

                        tbody.innerHTML += `
                            <tr>
                                <td>${badgePos}</td>
                                <td class="text-start fw-bold text-dark">${bastoneraSafe}</td>
                                <td class="text-start text-muted">${institucionSafe}</td>
                                <td><span class="badge bg-dark-subtle text-dark">${nivelSafe}</span></td>
                                <td><h6 class="font-monospace fw-bold mb-0 text-primary">${puntajeFinal}</h6></td>
                                <td>
                                    <div class="d-flex justify-content-center gap-1">
                                        <button class="btn btn-sm btn-outline-secondary py-0 px-2" type="button" data-bs-toggle="collapse" data-bs-target="#detalle_jueces_${index}" title="Ver Desglose">
                                            <i class="fas fa-eye"></i> Detalle
                                        </button>
                                        <a href="${urlWhatsapp}" target="_blank" class="btn btn-sm btn-success py-0 px-2 fw-semibold" title="Enviar Resultados al Representante">
                                            <i class="fab fa-whatsapp me-1"></i> Enviar
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <tr class="collapse bg-light" id="detalle_jueces_${index}">
                                <td colspan="6" class="p-3">
                                    <div class="card card-body border-0 shadow-sm rounded-3">
                                        <h6 class="fw-bold mb-2 text-dark text-start small"><i class="fas fa-gavel me-1 text-warning"></i> Calificaciones Desglosadas por Mesa:</h6>
                                        ${filasDesglose}
                                    </div>
                                </td>
                            </tr>`;
                    });
                }
            })
            .catch(err => console.error("Error en fetch al recuperar cómputos:", err));
    }

    if (selEvt) selEvt.addEventListener("change", verificarComputos);
    if (selCat) selCat.addEventListener("change", verificarComputos);
    if (selNiv) selNiv.addEventListener("change", verificarComputos);
});
</script>