<!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</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

    <style>
        body, html { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; }
        #map { height: 100vh; width: 100vw; z-index: 1; background: #e5e7eb; }
        .modal { z-index: 2000; display: none; }
        .modal.active { display: flex; }
        /* Estilo para que el popup se vea mejor en Oaxaca */
        .leaflet-popup-content-wrapper { border-radius: 12px; padding: 5px; }
    </style>
</head>
<body class="bg-gray-100">

    <div class="absolute top-4 left-1/2 -translate-x-1/2 z-[1000] w-11/12 max-w-md">
        <div class="bg-white/90 backdrop-blur shadow-lg rounded-full px-6 py-3 flex justify-between items-center border border-gray-200">
            <h1 class="font-bold text-gray-800 tracking-tight text-sm md:text-base">
                Cierres Viales <span class="text-orange-600">Oaxaca</span>
            </h1>
            <span id="status-dot" class="h-2 w-2 rounded-full bg-green-500 animate-pulse"></span>
        </div>
    </div>

    <div id="map"></div>

    <button onclick="toggleModal()" class="absolute bottom-8 right-6 z-[1000] bg-orange-600 hover:bg-orange-700 text-white w-16 h-16 rounded-full shadow-2xl flex items-center justify-center transition-transform active:scale-90 border-4 border-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </button>

    <div id="reportModal" class="modal fixed inset-0 bg-black/60 backdrop-blur-sm items-center justify-center p-4">
        <div class="bg-white rounded-3xl w-full max-w-sm p-6 shadow-2xl text-left transform transition-all">
            <h2 class="text-2xl font-black text-gray-800 mb-2">Nuevo Reporte</h2>
            <p class="text-sm text-gray-500 mb-6">Selecciona qué está pasando en este punto de la ciudad.</p>
            
            <label class="block text-xs font-bold uppercase text-gray-400 mb-2 tracking-widest">Tipo de incidente</label>
            <select id="reportType" class="w-full border-2 border-gray-100 rounded-xl p-4 mb-6 bg-gray-50 text-gray-800 font-medium focus:border-orange-500 outline-none transition-colors">
                <option value="Manifestación">🚩 Manifestación / Bloqueo</option>
                <option value="Accidente">🚗 Accidente Vial</option>
                <option value="Obra">🚧 Obra Pública</option>
                <option value="Socavón">🕳️ Bache / Socavón</option>
            </select>

            <div class="flex gap-4">
                <button onclick="toggleModal()" class="flex-1 py-4 text-gray-400 font-bold hover:text-gray-600">CANCELAR</button>
                <button onclick="sendReport()" class="flex-1 py-4 bg-orange-600 text-white rounded-xl font-black shadow-lg shadow-orange-200 hover:bg-orange-700 transition-all">ENVIAR</button>
            </div>
        </div>
    </div>

    <script>
        // CONFIGURACIÓN DE SUPABASE
        const SUPABASE_URL = 'https://zlqpmhzzkdtexdxhsdft.supabase.co';
        // IMPORTANTE: Pega tu Publishable Key aquí abajo entre las comillas
        const SUPABASE_KEY = 'sb_publishable_gy4kp8kmATozO9c_jhqh-w_l_rxU9UW'; 
        
        // Usamos 'sbClient' para evitar conflicto con la palabra global 'supabase'
        const sbClient = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

        // Inicializar Mapa centrado en el Zócalo de Oaxaca
        const map = L.map('map', {
            doubleClickZoom: false // Desactivamos zoom por doble clic para usarlo después
        }).setView([17.0605, -96.7251], 14);

        // Capa de mapa elegante (CartoDB Light)
        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
            attribution: '© OpenStreetMap'
        }).addTo(map);

        let tempMarker = null;

        // Cargar reportes de la base de datos
        async function cargarReportes() {
            const { data, error } = await sbClient.from('reportes').select('*');
            if (error) { console.error('Error al cargar:', error); return; }
            
            data.forEach(rep => {
                L.circle([rep.lat, rep.lng], {
                    color: '#ea580c',
                    fillColor: '#fb923c',
                    fillOpacity: 0.5,
                    radius: 80
                }).addTo(map)
                  .bindPopup(`<div class="font-sans"><b>${rep.tipo}</b><br><span class="text-gray-400 text-xs">${new Date(rep.created_at).toLocaleString()}</span></div>`);
            });
        }
        cargarReportes();

        // ACCIÓN: Clic izquierdo pone el marcador
        map.on('click', (e) => {
            if (tempMarker) map.removeLayer(tempMarker);
            tempMarker = L.marker(e.latlng).addTo(map);
        });

        // ACCIÓN: Clic derecho (o toque largo) abre el menú directamente
        map.on('contextmenu', (e) => {
            if (tempMarker) map.removeLayer(tempMarker);
            tempMarker = L.marker(e.latlng).addTo(map);
            toggleModal();
        });

        function toggleModal() {
            document.getElementById('reportModal').classList.toggle('active');
        }

        // GUARDAR REPORTE
        async function sendReport() {
            if (!tempMarker) {
                alert("Primero toca el mapa para indicar dónde es el cierre.");
                return;
            }
            
            const type = document.getElementById('reportType').value;
            const { lat, lng } = tempMarker.getLatLng();

            const { error } = await sbClient.from('reportes').insert([
                { tipo: type, lat: lat, lng: lng }
            ]);

            if (error) {
                alert("Error de conexión: " + error.message);
            } else {
                alert("¡Reporte publicado en Oaxaca!");
                location.reload(); 
            }
        }
    </script>
</body>
</html>