<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Cierres Viales Oaxaca - Oficial</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: #f3f4f6;
        }

        #map {
            height: 100%;
            width: 100%;
            z-index: 1;
        }

        /* Popups y Tooltips */
        .tooltip-info {
            background: rgba(31, 41, 55, 0.9);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            pointer-events: none;
        }

        .popup-content {
            text-align: center;
            min-width: 160px;
        }

        .popup-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 4px;
            color: #1f2937;
            text-transform: uppercase;
        }

        .popup-time {
            font-size: 11px;
            color: #6b7280;
            margin-bottom: 8px;
        }

        /* Botones Flotantes */
        #btn-reportar {
            position: fixed;
            bottom: 30px;
            right: 20px;
            background: #facc15;
            border: 3px solid #ffffff;
            border-radius: 50%;
            width: 65px;
            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            cursor: pointer;
        }

        #btn-ubicacion {
            position: fixed;
            bottom: 110px;
            right: 27px;
            background: white;
            border: 2px solid #ccc;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            z-index: 1000;
            cursor: pointer;
        }

        /* Modales y Menú */
        .modal-caja {
            background: white;
            padding: 25px;
            border-radius: 12px;
            width: 310px;
            text-align: center;
        }

        #modal-reporte,
        #modal-evento {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .cuadricula-iconos {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px 10px;
            margin-top: 20px;
        }

        .btn-icono {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: #374151;
        }

        .circulo-icono {
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            border: 2px solid #e5e7eb;
            margin-bottom: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* Botones del Popup */
        .btn-votar {
            background: #f3f4f6;
            border: 1px solid #d1d5db;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            width: 100%;
            margin-bottom: 5px;
        }

        .btn-terminar {
            background: #10b981;
            color: white;
            border: none;
            padding: 10px;
            width: 100%;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
        }

        .btn-urgente {
            background: #fef08a !important;
            border: 2px solid #eab308 !important;
            color: #854d0e !important;
        }

        /* Estilos de Iconos y Animaciones */
        .icono-mapa {
            border: 2px solid white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
        }

        .icono-mapa div {
            font-size: 22px !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bg-bloqueo {
            background-color: #f97316 !important;
        }

        .bg-accidente {
            background-color: #ef4444 !important;
        }

        .bg-evento {
            background-color: #a855f7 !important;
        }

        .bg-obra {
            background-color: #eab308 !important;
        }

        .bg-inundacion {
            background-color: #3b82f6 !important;
        }

        .bg-obstruccion {
            background-color: #06b6d4 !important;
        }

        @keyframes latidoExpiracion {
            0% {
                opacity: 0.4;
                transform: scale(1);
            }

            50% {
                opacity: 1.0;
                transform: scale(1.1);
                box-shadow: 0 0 15px #facc15;
            }

            100% {
                opacity: 0.4;
                transform: scale(1);
            }
        }

        .pulso-expirar {
            animation: latidoExpiracion 1.5s infinite ease-in-out !important;
        }
// --------------------------------------------------------
        // LÓGICA DEL PUNTO AZUL Y GPS SEGURO
        // --------------------------------------------------------
        
        let marcadorPrevisualizacion = null;

        function actualizarPuntoPrevisualizacion(lat, lng) {
            if (marcadorPrevisualizacion) {
                marcadorPrevisualizacion.setLatLng([lat, lng]);
            } else {
                const iconoAzul = L.divIcon({
                    className: '', // Vacío para que Leaflet no rompa la animación
                    iconSize: [16, 16],
                    iconAnchor: [8, 8],
                    html: '<div class="punto-previsualizacion" style="width:100%;height:100%;"></div>'
                });
                marcadorPrevisualizacion = L.marker([lat, lng], { icon: iconoAzul, interactive: false }).addTo(map);
            }
        }

        // 1. Cuando Leaflet detecta tu ubicación física
        map.on('locationfound', (e) => {
            // Guarda las variables del administrador para que el reporte se haga ahí
            if (typeof esAdmin !== 'undefined' && esAdmin) {
                if (typeof latFijaAdmin !== 'undefined' && latFijaAdmin === null) {
                    latFijaAdmin = e.latlng.lat;
                    lngFijaAdmin = e.latlng.lng;
                }
            }
            // Clava el cursor azul en la calle actual
            actualizarPuntoPrevisualizacion(e.latlng.lat, e.latlng.lng);
        });

        // 2. Si el navegador bloquea el GPS (para que no se quede la pantalla en gris)
        map.on('locationerror', (e) => {
            console.warn("GPS bloqueado por el navegador:", e.message);
            actualizarPuntoPrevisualizacion(17.0605, -96.7251); // Centro de Oaxaca por defecto
        });

        // 3. Mover el cursor con clic (solo Superusuario)
        map.on('click', (e) => {
            // No hacer nada si está dibujando ruta
            if (typeof modoTrazo !== 'undefined' && modoTrazo) return;

            if (typeof esAdmin !== 'undefined' && esAdmin) {
                latFijaAdmin = e.latlng.lat;
                lngFijaAdmin = e.latlng.lng;
                actualizarPuntoPrevisualizacion(e.latlng.lat, e.latlng.lng);
            }
        });

        // 4. Iniciar la búsqueda del GPS al cargar la página
        map.locate({ setView: true, maxZoom: 15, enableHighAccuracy: true });
    </style>
</head>

<body>
    <div id="map"></div>
    <button id="btn-ubicacion" onclick="centrarMapa()">🎯</button>
    <button id="btn-reportar" onclick="abrirModal()">
        <svg viewBox="0 0 24 24" width="32" height="32">
            <path d="M12 2L1 21h22L12 2z" fill="#1e293b" />
            <path d="M12 9v8m-4-4h8" stroke="#facc15" stroke-width="2" />
        </svg>
    </button>

    <div id="panel-admin"
        style="display: none; position: fixed; top: 15px; left: 50%; transform: translateX(-50%); background: white; padding: 10px 15px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 1000; gap: 10px; align-items: center;">
        <button onclick="iniciarTrazo()">✏️ Trazar</button>
        <button onclick="deshacerTrazo()">↩️</button>
        <button onclick="abrirModalEvento()" style="background: #10b981; color: white;">✅ Guardar</button>
        <button onclick="cancelarTrazo()" style="background: #ef4444; color: white;">🗑️</button>
    </div>

    <div id="modal-evento">
        <div class="modal-caja">
            <h3>Programar Cierre</h3>
            <input type="text" id="ev-nombre" placeholder="Nombre" style="width: 90%; margin-bottom: 10px; padding: 8px;">
    
            <label
                style="display:block; text-align:left; font-size:12px; font-weight:bold; margin-bottom:2px;">Inicio:</label>
            <input type="datetime-local" id="ev-inicio" style="width: 100%; margin-bottom: 10px; padding: 5px;">
    
            <label style="display:block; text-align:left; font-size:12px; font-weight:bold; margin-bottom:2px;">Fin:</label>
            <input type="datetime-local" id="ev-fin" style="width: 100%; margin-bottom: 15px; padding: 5px;">
    
            <button onclick="guardarEventoProgramado()" class="btn-terminar">Guardar Cierre</button>
            <button id="btn-eliminar-db" onclick="eliminarEventoDeBaseDeDatos()"
                style="display:none; background:#ef4444; color:white; width:100%; padding:8px; margin-top:5px; border:none; border-radius:5px; font-weight:bold;">ELIMINAR
                DE BD</button>
            <button onclick="cerrarModalEvento()"
                style="background:none; border:none; color:#666; margin-top:10px;">Cancelar</button>
        </div>
    </div>

    <div id="modal-reporte">
        <div class="modal-caja">
            <h3 id="modal-titulo">¿Qué sucede aquí?</h3>
            <div id="menu-principal" class="cuadricula-iconos">
                <div class="btn-icono" onclick="enviarReporte('bloqueo')">
                    <div class="circulo-icono">⛔</div>Bloqueo
                </div>
                <div class="btn-icono" onclick="enviarReporte('accidente')">
                    <div class="circulo-icono">💥</div>Accidente
                </div>
                <div class="btn-icono" onclick="enviarReporte('obra')">
                    <div class="circulo-icono">👷</div>Obra
                </div>
                <div class="btn-icono" onclick="enviarReporte('calenda')">
                    <div class="circulo-icono">🎺</div>Calenda
                </div>
                <div class="btn-icono" onclick="enviarReporte('inundacion')">
                    <div class="circulo-icono">⛈️</div>Inundación
                </div>
                <div class="btn-icono" onclick="enviarReporte('obstruccion')">
                    <div class="circulo-icono" style="position: relative;">🚚<span
                            style="position: absolute; top: 5px; right: 5px; font-size: 18px;">💧</span></div>
                    Pipa
                </div>
                <div class="btn-icono" onclick="cerrarModal()">
                    <div class="circulo-icono" style="border-color:#fca5a5; color:red;">❌</div>Cancelar
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script>
        const sb = supabase.createClient('https://zlqpmhzzkdtexdxhsdft.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InpscXBtaHp6a2R0ZXhkeGhzZGZ0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQxMzE4NTgsImV4cCI6MjA4OTcwNzg1OH0.pXNBWuLt1Egx_BaQmuuujojFZa41Br3NIH98q3QVKqQ');

        const limitesOaxaca = [[16.9600, -96.8000], [17.1500, -96.6500]];
        let map = L.map('map', { zoomControl: false, maxBounds: limitesOaxaca, maxBoundsViscosity: 1.0, minZoom: 12, maxZoom: 20 }).setView([17.0605, -96.7251], 15);

    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/traffic-day-v2/tiles/256/{z}/{x}/{y}{r}?access_token=pk.eyJ1IjoiZGlhemNhbHZvamEiLCJhIjoiY21wOHl1ZG9nMDlodzJybjE0OHZ4ejl4bCJ9.k87SWWmmehSMvfCSky1YrA', {
        maxZoom: 20,
        minZoom: 12,
        bounds: limitesOaxaca,
        r: map.options.detectRetina && L.Browser.retina ? '@2x' : '',
        attribution: '© Mapbox © OpenStreetMap'
    }).addTo(map);

        let marcadoresCapa = L.layerGroup().addTo(map);
        let poligonosCapa = L.layerGroup().addTo(map);
        let iconosBloqueoCapa = L.layerGroup().addTo(map);
        let reportesActualesMemoria = [];

        const urlParams = new URLSearchParams(window.location.search);
        const esAdmin = urlParams.get('Sector2mF2X') === 'true';
        let modoDibujo = false, coordenadasRuta = [], polylineRutaTemp = null, latAdminTemp = null, lngAdminTemp = null;
        window.idEventoEdicion = null;

    if (esAdmin) {
        document.getElementById('panel-admin').style.display = 'flex';
        map.on('contextmenu', e => { if (!modoDibujo) { latAdminTemp = e.latlng.lat; lngAdminTemp = e.latlng.lng; abrirModal(); } });
    }

        /* --- LÓGICA DE DIBUJO --- */
        function iniciarTrazo() { modoDibujo = true; coordenadasRuta = []; if (polylineRutaTemp) map.removeLayer(polylineRutaTemp); }
        function actualizarTrazoFalso() {
            if (polylineRutaTemp) map.removeLayer(polylineRutaTemp);
            polylineRutaTemp = L.polyline(coordenadasRuta.map(p => [p.lat, p.lng]), { color: '#ef4444', weight: 5, dashArray: '5, 5' }).addTo(map);
        }
        function deshacerTrazo() { coordenadasRuta.pop(); actualizarTrazoFalso(); }
        function cancelarTrazo() { modoDibujo = false; coordenadasRuta = []; if (polylineRutaTemp) map.removeLayer(polylineRutaTemp); window.idEventoEdicion = null; }

        function abrirModalEvento() {
                if (!window.idEventoEdicion && coordenadasRuta.length < 2) return alert("Traza la ruta primero.");
                document.getElementById('btn-eliminar-db').style.display = window.idEventoEdicion ? 'block' : 'none';

                // Si es un evento nuevo, colocar la hora actual y 1 hora de duración por defecto
                if (!window.idEventoEdicion) {
                    const ahora = new Date();
                    const despues = new Date(ahora.getTime() + 60 * 60 * 1000); // +1 hora

                    const formatearFechaLocal = (fecha) => {
                        // Ajuste de zona horaria local para que coincida con lo que el usuario ve
                        const tzoffset = fecha.getTimezoneOffset() * 60000;
                        return (new Date(fecha - tzoffset)).toISOString().slice(0, 16);
                    };

                    document.getElementById('ev-inicio').value = formatearFechaLocal(ahora);
                    document.getElementById('ev-fin').value = formatearFechaLocal(despues);
                }

                document.getElementById('modal-evento').style.display = 'flex';
            }

            async function guardarEventoProgramado() {
                const nombreCamp = document.getElementById('ev-nombre').value.trim();
                const inicioVal = document.getElementById('ev-inicio').value;
                const finVal = document.getElementById('ev-fin').value;

                if (!nombreCamp) return alert("Por favor, asigna un nombre al cierre.");
                if (!inicioVal || !finVal) return alert("Debes definir fechas válidas de inicio y fin.");

                // Conversión a ISO string para Supabase
                const fechaInicioISO = new Date(inicioVal).toISOString();
                const fechaFinISO = new Date(finVal).toISOString();

                if (new Date(fechaFinISO) <= new Date(fechaInicioISO)) {
                    return alert("La fecha de fin debe ser posterior a la fecha de inicio.");
                }

                const datos = {
                    nombre: nombreCamp,
                    inicio: fechaInicioISO,
                    fin: fechaFinISO,
                    activo: true
                };

                try {
                    if (window.idEventoEdicion) {
                        const { error } = await sb.from('eventos_programados').update(datos).eq('id', window.idEventoEdicion);
                        if (error) throw error;
                    } else {
                        if (coordenadasRuta.length < 2) return alert("Traza la ruta primero.");
                        datos.tipo_trazo = 'ruta';
                        datos.geometria = coordenadasRuta;
                        const { error } = await sb.from('eventos_programados').insert([datos]);
                        if (error) throw error;
                    }

                    cerrarModalEvento();
                    cancelarTrazo();
                    await cargarCierresProgramados();
                } catch (err) {
                    console.error("Error al guardar en Supabase:", err);
                    alert("Error al guardar en la base de datos: " + err.message);
                }
            }

        async function eliminarEventoDeBaseDeDatos() {
            if (confirm("¿Borrar definitivamente este evento?")) {
                await sb.from('eventos_programados').delete().eq('id', window.idEventoEdicion);
                cerrarModalEvento(); cancelarTrazo(); cargarCierresProgramados();
            }
        }

        function cerrarModalEvento() { document.getElementById('modal-evento').style.display = 'none'; window.idEventoEdicion = null; }

        async function cargarCierresProgramados() {
            poligonosCapa.clearLayers(); iconosBloqueoCapa.clearLayers();
            const { data } = await sb.from('eventos_programados').select('*').eq('activo', true).lte('inicio', new Date().toISOString()).gte('fin', new Date().toISOString());
            if (data) {
                data.forEach(evento => {
                    const geoDatos = evento.geometria || evento.coordenadas;
                    if (!geoDatos || geoDatos.length < 2) return;

                    const coords = geoDatos.map(p => [Number(p.lat), Number(p.lng)]);
                    const obj = L.polyline(coords, { color: '#D32F2F', weight: 4, dashArray: '4, 6', interactive: true }).addTo(poligonosCapa);

                    const iconDoNotEnter = L.divIcon({
                        className: 'custom-icon',
                        html: `<div style="background:#D32F2F; width:24px; height:24px; border-radius:50%; border:2px solid white; display:flex; align-items:center; justify-content:center;"><div style="background:white; width:14px; height:3px;"></div></div>`,
                        iconSize: [24, 24],
                        iconAnchor: [12, 12]
                    });

                    L.marker(coords[0], { icon: iconDoNotEnter }).addTo(iconosBloqueoCapa);
                    L.marker(coords[coords.length - 1], { icon: iconDoNotEnter }).addTo(iconosBloqueoCapa);

                    obj.bindTooltip(`<b>${evento.nombre}</b>`, { sticky: true, className: 'tooltip-info' });

                    // Formatear la fecha 'fin' de Supabase a formato legible de México
                    const fechaFinFmt = new Date(evento.fin).toLocaleString('es-MX', {
                        day: '2-digit',
                        month: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: true
                    });

                    // Configurar el popup con el nombre y la fecha de finalización
                    obj.bindPopup(`
                        <div class="popup-content" style="font-family: sans-serif; font-size: 13px; min-width: 160px;">
                            <div class="popup-title" style="font-weight: bold; font-size: 14px; margin-bottom: 4px;">${evento.nombre}</div>
                            <div style="color: #b91c1c; font-weight: bold; margin-bottom: 8px; font-size: 12px;">⏳ Finaliza: ${fechaFinFmt}</div>
                            <button class="btn-terminar" style="width: 100%;" onclick="terminar('${evento.id}', ${coords[0][0]}, ${coords[0][1]}, true)">🏁 Paso Libre</button>
                        </div>
                    `);

                    if (esAdmin) {
                        obj.on('contextmenu', (e) => {
                            L.DomEvent.stopPropagation(e);
                            window.idEventoEdicion = evento.id;
                            document.getElementById('ev-nombre').value = evento.nombre;
                            abrirModalEvento();
                        });
                    }
                });
            }
        }

        /* --- LÓGICA DE REPORTES, ENCIZADO Y GEOFENCING --- */
        function calcularDistancia(lat1, lon1, lat2, lon2) {
            const R = 6371e3;
            const f1 = lat1 * Math.PI / 180, f2 = lat2 * Math.PI / 180;
            const df = (lat2 - lat1) * Math.PI / 180, dl = (lon2 - lon1) * Math.PI / 180;
            const a = Math.sin(df / 2) * Math.sin(df / 2) + Math.cos(f1) * Math.cos(f2) * Math.sin(dl / 2) * Math.sin(dl / 2);
            return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)));
        }

        async function enviarReporte(tipo) {
            const latFijaAdmin = latAdminTemp !== null ? Number(latAdminTemp) : null;
            const lngFijaAdmin = lngAdminTemp !== null ? Number(lngAdminTemp) : null;

            const procesar = async (lt, lg) => {
                const numLat = Number(lt);
                const numLng = Number(lg);

                const reporteCercano = reportesActualesMemoria.find(r => r.tipo === tipo && calcularDistancia(numLat, numLng, Number(r.lat), Number(r.lng)) < 80);
                if (reporteCercano && !esAdmin) {
                    alert("Ya existe un reporte similar aquí. Se sumará tu validación automáticamente.");
                    await sb.rpc('increment_voto', { row_id: reporteCercano.id, col_name: 'confirmaciones' });
                    cerrarModal(); return cargarReportes();
                }

                await sb.from('reportes').insert([{ tipo, lat: numLat, lng: numLng, confirmaciones: esAdmin ? 3 : 1, votos_terminado: 0 }]);
                cerrarModal(); cargarReportes();
            };

            if (esAdmin && latFijaAdmin !== null && lngFijaAdmin !== null) {
                await procesar(latFijaAdmin, lngFijaAdmin);
            } else {
                navigator.geolocation.getCurrentPosition(
                    p => procesar(p.coords.latitude, p.coords.longitude),
                    err => alert("Error al obtener GPS público.")
                );
            }
        }

        async function cargarReportes() {
            marcadoresCapa.clearLayers();
            const ahora = Date.now();
            const { data } = await sb.from('reportes').select('*').gte('created_at', new Date(ahora - 12 * 3600000).toISOString());
            if (data) {
                reportesActualesMemoria = data;
                data.forEach(r => {
                    const markerLat = Number(r.lat);
                    const markerLng = Number(r.lng);

                    const antiguedad = (ahora - new Date(r.created_at).getTime()) / 3600000;
                    let vida = (r.tipo === 'bloqueo') ? 4 : 2;
                    if (antiguedad > vida || (r.confirmaciones - r.votos_terminado) < -2) return;

                    const porExpirar = (vida - antiguedad) <= 0.5;

                    let icono = '🚧', clase = 'bg-bloqueo', htmlInyectado = '';
                    if (r.tipo === 'accidente') { icono = '💥'; clase = 'bg-obra'; }
                    else if (r.tipo === 'bloqueo') { icono = '⛔'; clase = 'bg-accidente'; }
                    else if (r.tipo === 'obra') { icono = '👷'; clase = 'bg-obra'; }
                    else if (r.tipo === 'calenda') { icono = '🎺'; clase = 'bg-evento'; }
                    else if (r.tipo === 'inundacion') { icono = '⛈️'; clase = 'bg-inundacion'; }
                    // CORRECCIÓN PIPA UNIFICADA: Gota superpuesta milimétricamente en la esquina superior usando posición absoluta exacta
                    else if (r.tipo === 'obstruccion') {
                        clase = 'bg-obstruccion';
                        htmlInyectado = `<div style="position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">🚚<span style="position: absolute; top: -3px; right: -3px; font-size: 13px; z-index: 10;">💧</span></div>`;
                    }

                    if (r.tipo !== 'obstruccion') {
                        htmlInyectado = `<div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">${icono}</div>`;
                    }

                    const marker = L.marker([markerLat, markerLng], {
                        icon: L.divIcon({ className: `icono-mapa ${clase} ${porExpirar ? 'pulso-expirar' : ''}`, html: htmlInyectado, iconSize: [36, 36], iconAnchor: [18, 18] }),
                        opacity: r.confirmaciones >= 3 ? 1.0 : 0.4
                    }).addTo(marcadoresCapa);

                    // Estimar finalización según el tipo de reporte
                    const horasVida = (r.tipo === 'bloqueo') ? 4 : (r.tipo === 'calenda') ? 0.5 : 2;
                    const fechaFinEstimada = new Date(new Date(r.created_at).getTime() + horasVida * 3600000).toLocaleString('es-MX', {
                        day: '2-digit',
                        month: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: true
                    });

                    marker.bindPopup(`
                        <div class="popup-content" style="font-family: sans-serif; font-size: 13px;">
                            <div class="popup-title">${r.tipo}</div>
                            <b style="color: #4b5563; font-size: 11px; display: block; margin-bottom: 5px;">⏳ Termina aprox: ${fechaFinEstimada}</b>
                            <button class="btn-votar ${porExpirar ? 'btn-urgente' : ''}" onclick="votar('${r.id}', ${markerLat}, ${markerLng})">👍 ${r.confirmaciones || 0}</button>
                            <button class="btn-terminar" onclick="terminar('${r.id}', ${markerLat}, ${markerLng}, false)">🏁 Paso Libre</button>
                        </div>
                    `);
                });
            }
        }

        async function votar(id, lt, lg) {
            if (esAdmin) {
                await sb.rpc('increment_voto', { row_id: id, col_name: 'confirmaciones' });
                setTimeout(() => { cargarReportes(); }, 100);
                return;
            }

            navigator.geolocation.getCurrentPosition(async p => {
                if (calcularDistancia(p.coords.latitude, p.coords.longitude, Number(lt), Number(lg)) > 100) return alert("Estás muy lejos de la ubicación para validar.");
                await sb.rpc('increment_voto', { row_id: id, col_name: 'confirmaciones' });
                setTimeout(() => { cargarReportes(); }, 100);
            });
        }

        async function terminar(id, lt, lg, esEventoTrazo) {
            map.closePopup();

            if (esAdmin) {
                if (esEventoTrazo === true) {
                    await sb.from('eventos_programados').delete().eq('id', id);
                } else {
                   // Cambio quirúrgico: update para evadir restricción RLS anónima
                    await sb.from('reportes').update({ votos_terminado: 99 }).eq('id', id);
                }

                // Sincronización estricta encadenada secuencialmente para pintar el mapa limpio
                await cargarReportes();
                await cargarCierresProgramados();
                return;
            }

            navigator.geolocation.getCurrentPosition(async p => {
                if (calcularDistancia(p.coords.latitude, p.coords.longitude, Number(lt), Number(lg)) > 100) return alert("Estás muy lejos de la ubicación para reportar paso libre.");

                const { data } = await sb.from('reportes').select('votos_terminado').eq('id', id).single();
                if ((data.votos_terminado || 0) >= 2) await sb.from('reportes').update({ votos_terminado: 99 }).eq('id', id);
                else await sb.from('reportes').update({ votos_terminado: (data.votos_terminado || 0) + 1 }).eq('id', id);

                setTimeout(() => {
                    cargarReportes();
                    cargarCierresProgramados();
                }, 100);
            });
        }

 function abrirModal() { document.getElementById('modal-reporte').style.display = 'flex'; }
    function cerrarModal() { document.getElementById('modal-reporte').style.display = 'none'; latAdminTemp = null; lngAdminTemp = null; }

    function centrarMapa() { map.locate({ setView: true, maxZoom: 16 }); }

    // Control de consumo y marcador de previsualización dinámico
    let intervaloTrafico = null;
    let marcadorPrevisualizacion = null;

    function actualizarPuntoPrevisualizacion(lat, lng) {
        const iconoAzul = L.divIcon({
            className: 'punto-previsualizacion',
            iconSize: [16, 16],
            iconAnchor: [8, 8]
        });

        if (marcadorPrevisualizacion) {
            marcadorPrevisualizacion.setLatLng([lat, lng]);
        } else {
            marcadorPrevisualizacion = L.marker([lat, lng], { icon: iconoAzul }).addTo(map);
        }
    }

    function iniciarActualizaciones() {
        if (!intervaloTrafico) {
            intervaloTrafico = setInterval(() => {
                cargarReportes();
            }, 45000);
        }
    }

    function detenerActualizaciones() {
        clearInterval(intervaloTrafico);
        intervaloTrafico = null;
    }

    // Eventos de geolocalización nativos de Leaflet
    map.on('locationfound', (e) => {
        // Coloca el punto azul parpadeante exactamente en la calle/ubicación actual real del usuario
        actualizarPuntoPrevisualizacion(e.latlng.lat, e.latlng.lng);
    });

    // UNIFICACIÓN DE CLICS (Resuelve el bloqueo de Edge y permite mover el punto al superusuario)
    map.on('click', (e) => {
        if (modoDibujo) {
            coordenadasRuta.push({ lat: e.latlng.lat, lng: e.latlng.lng });
            actualizarTrazoFalso();
            return;
        }

        // Si es superusuario, el clic mueve el punto azul a la nueva calle elegida para el reporte
        if (esAdmin) {
            latAdminTemp = e.latlng.lat;
            lngAdminTemp = e.latlng.lng;
            actualizarPuntoPrevisualizacion(e.latlng.lat, e.latlng.lng);
        }
    });

    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            detenerActualizaciones();
        } else {
            cargarReportes();
            iniciarActualizaciones();
        }
    });

    window.onload = () => {
        // Dispara el GPS para buscar la calle del usuario inmediatamente al cargar
        map.locate({ setView: true, maxZoom: 15, enableHighAccuracy: true });

        cargarReportes();
        cargarCierresProgramados();
        iniciarActualizaciones();
    };
</script>
</body>

</html>