<!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;
        }

        .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;
        }

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

        #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;
        }

        .modal-caja {
            background: white;
            padding: 25px;
            border-radius: 12px;
            width: 300px;
            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;
        }

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

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

        .btn-icono {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }

        .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;
        }

        .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);
        }

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

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

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

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

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

        .bg-obstruccion {
            background-color: #06b6d4;
        }
    </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">
            <path d="M12 2L1 21h22L12 2z" fill="#1e293b" />
            <path d="M12 9v8m-4-4h8" stroke="#facc15" stroke-width="2" />
        </svg>
    </button>

    <!-- Panel Admin -->
    <div id="panel-admin"
        style="display: none; position: fixed; top: 15px; left: 50%; transform: translateX(-50%); background: white; padding: 8px 12px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 1000; gap: 8px; 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>

    <!-- Modales -->
    <div id="modal-evento">
        <div class="modal-caja">
            <h3>Configurar Trazado</h3>
            <input type="text" id="ev-nombre" placeholder="Nombre"
                style="width: 90%; margin-bottom: 10px; padding: 8px;">
            <select id="ev-duracion-rapida" onchange="ajustarTiempoAutomatico()"
                style="width: 100%; margin-bottom: 10px; padding: 8px;">
                <option value="custom">Personalizado...</option>
                <option value="1">1 hora</option>
                <option value="2" selected>2 horas</option>
                <option value="4">4 horas</option>
                <option value="0">Terminar Ahora (Borrar)</option>
            </select>
            <input type="datetime-local" id="ev-inicio" style="width: 100%; margin-bottom: 5px;">
            <input type="datetime-local" id="ev-fin" style="width: 100%; margin-bottom: 15px;">
            <button onclick="guardarEventoProgramado()" class="btn-terminar">Confirmar</button>
            <!-- NUEVO: Botón de borrar definitivo para edición -->
            <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 BASE DE DATOS</button>
            <button onclick="cerrarModalEvento()"
                style="width: 100%; margin-top: 5px; background: none; border: none; color: #666;">Cancelar</button>
        </div>
    </div>

    <div id="modal-reporte">
        <div class="modal-caja">
            <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('evento')">
                    <div class="circulo-icono">📢</div>Evento
                </div>
                <div class="btn-icono" onclick="cerrarModal()">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 supabaseUrl = 'https://zlqpmhzzkdtexdxhsdft.supabase.co';
        const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InpscXBtaHp6a2R0ZXhkeGhzZGZ0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQxMzE4NTgsImV4cCI6MjA4OTcwNzg1OH0.pXNBWuLt1Egx_BaQmuuujojFZa41Br3NIH98q3QVKqQ';
        const sb = supabase.createClient(supabaseUrl, supabaseKey);

        let map = L.map('map', { zoomControl: false }).setView([17.0605, -96.7251], 15);
        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png').addTo(map);

        let marcadoresCapa = L.layerGroup().addTo(map);
        let poligonosCapa = L.layerGroup().addTo(map);
        let lineasCapa = L.layerGroup().addTo(map);

        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(); } });
            map.on('click', e => { if (modoDibujo) { coordenadasRuta.push({ lat: e.latlng.lat, lng: e.latlng.lng }); actualizarTrazoFalso(); } });
        }

        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 al menos 2 puntos.");
            document.getElementById('btn-eliminar-db').style.display = window.idEventoEdicion ? 'block' : 'none';
            ajustarTiempoAutomatico();
            document.getElementById('modal-evento').style.display = 'flex';
        }

        function ajustarTiempoAutomatico() {
            const dur = document.getElementById('ev-duracion-rapida').value;
            if (dur === 'custom') return;
            const ahora = new Date(), fin = new Date();
            if (dur === "0") fin.setMinutes(ahora.getMinutes() - 1);
            else fin.setHours(ahora.getHours() + parseInt(dur));
            const fmt = f => f.toISOString().slice(0, 16);
            document.getElementById('ev-inicio').value = fmt(ahora);
            document.getElementById('ev-fin').value = fmt(fin);
        }

        async function guardarEventoProgramado() {
            const datos = {
                nombre: document.getElementById('ev-nombre').value,
                inicio: new Date(document.getElementById('ev-inicio').value).toISOString(),
                fin: new Date(document.getElementById('ev-fin').value).toISOString(),
                activo: true
            };
            let res;
            if (window.idEventoEdicion) res = await sb.from('eventos_programados').update(datos).eq('id', window.idEventoEdicion);
            else { datos.tipo_trazo = 'ruta'; datos.geometria = coordenadasRuta; res = await sb.from('eventos_programados').insert([datos]); }

            if (res.error) alert("Error: " + res.error.message);
            else { alert("Guardado."); cerrarModalEvento(); cancelarTrazo(); cargarCierresProgramados(); }
        }

        async function eliminarEventoDeBaseDeDatos() {
            if (confirm("¿Borrar definitivamente?")) {
                const res = await sb.from('eventos_programados').delete().eq('id', window.idEventoEdicion);
                if (res.error) alert(res.error.message);
                else { alert("Eliminado."); cerrarModalEvento(); cargarCierresProgramados(); }
            }
        }

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

    async function cargarCierresProgramados() {
            poligonosCapa.clearLayers();
            const ahora = new Date().toISOString();
            const { data } = await sb.from('eventos_programados')
                .select('*')
                .eq('activo', true)
                .lte('inicio', ahora)
                .gte('fin', ahora);

            if (data) {
                data.forEach(evento => {
                    const coords = evento.geometria.map(p => [p.lat, p.lng]);

                    // NUEVO: Formato de fecha y hora completo (ej. 05 may, 19:30)
                    const fechaFin = new Date(evento.fin).toLocaleDateString('es-MX', { day: '2-digit', month: 'short' });
                    const horaFin = new Date(evento.fin).toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' });

                    let obj;
                    if (evento.tipo_trazo === 'ruta') {
                        obj = L.polyline(coords, { color: '#8b5cf6', weight: 12, dashArray: '10, 10', interactive: true }).addTo(poligonosCapa);
                    } else {
                        obj = L.polygon(coords, { color: '#ef4444', fillColor: '#ef4444', fillOpacity: 0.2, weight: 5, interactive: true }).addTo(poligonosCapa);
                    }

                    // Se agrega la fecha al contenido del Tooltip
                    obj.bindTooltip(`<strong>${evento.nombre}</strong><br>Termina: ${fechaFin}, ${horaFin}`, {
                        sticky: true,
                        className: 'tooltip-info',
                        permanent: false,
                        direction: 'auto'
                    });

                    const mostrarInfo = (e) => {
                        const tooltip = obj.getTooltip();
                        if (tooltip) {
                            tooltip.setOpacity(1);
                            obj.openTooltip(e.latlng);
                        }
                    };

                    const ocultarInfo = () => {
                        const tooltip = obj.getTooltip();
                        if (tooltip) tooltip.setOpacity(0);
                        obj.closeTooltip();
                    };

                    obj.on('mousedown touchstart', (e) => {
                        mostrarInfo(e);
                    });

                    obj.on('contextmenu', (e) => {
                        L.DomEvent.stopPropagation(e);
                        mostrarInfo(e);
                        if (esAdmin) {
                            window.idEventoEdicion = evento.id;
                            document.getElementById('ev-nombre').value = evento.nombre;
                            document.getElementById('ev-inicio').value = new Date(evento.inicio).toISOString().slice(0, 16);
                            document.getElementById('ev-fin').value = new Date(evento.fin).toISOString().slice(0, 16);
                            abrirModalEvento();
                        }
                    });

                    obj.on('mouseup mouseout touchend', () => {
                        ocultarInfo();
                    });
                });
            }
        }

        // Resto de funciones (cargarReportes, centrarMapa, etc.) se mantienen igual
        function abrirModal() { document.getElementById('modal-reporte').style.display = 'flex'; }
        function cerrarModal() { document.getElementById('modal-reporte').style.display = 'none'; }
        function centrarMapa() { map.locate({ setView: true, maxZoom: 16 }); }

    async function cargarReportes() {
        marcadoresCapa.clearLayers();
        const hace12 = new Date(Date.now() - 12 * 3600000).toISOString();
        const { data, error } = await sb.from('reportes').select('*').gte('created_at', hace12);

        if (error) return console.error("Error BD:", error.message);

        if (data) {
            data.forEach(r => {
                // Restauramos la lógica de iconos y colores por tipo
                let icono = '🚧';
                let claseBg = 'bg-bloqueo';

                if (r.tipo === 'bloqueo') { icono = '⛔'; claseBg = 'bg-accidente'; }
                else if (r.tipo === 'bloqueo_parcial') { icono = '🚧'; claseBg = 'bg-bloqueo'; }
                else if (r.tipo === 'evento') { icono = '📢'; claseBg = 'bg-evento'; }
                else if (r.tipo === 'accidente') { icono = '💥'; claseBg = 'bg-accidente'; }
                else if (r.tipo === 'obra') { icono = '👷'; claseBg = 'bg-obra'; }
                else if (r.tipo === 'inundacion') { icono = '⛈️'; claseBg = 'bg-inundacion'; }
                else if (r.tipo === 'obstruccion') { icono = '💧'; claseBg = 'bg-obstruccion'; }

                // Creamos el marcador con el estilo dinámico
                L.marker([r.lat, r.lng], {
                    icon: L.divIcon({
                        className: `icono-mapa ${claseBg}`,
                        html: `<div style="font-size: 18px;">${icono}</div>`,
                        iconSize: [36, 36],
                        iconAnchor: [18, 18]
                    })
                }).addTo(marcadoresCapa);
            });
        }
    }

        cargarReportes(); cargarCierresProgramados();
        setInterval(() => { cargarReportes(); cargarCierresProgramados(); }, 60000);
    </script>
</body>

</html>