import { showNotification } from './99_functions.js';

const csvFileInputEl = document.getElementById('csv-file');
const loadingIndicator = document.getElementById('loading-indicator');

document.getElementById('csv-file').addEventListener('change', function (e) {
  const file = e.target.files[0];
  if (!file) return;

  // emular loading de carga de archivo csv
  if (this.files.length > 0) {
    loadingIndicator.style.display = 'block';
    // Simular carga 
    setTimeout(() => {
      loadingIndicator.style.display = 'none';
      // showNotification('Archivo CSV cargado exitosamente', 'success');
    }, 500);
  }

  // PapaParse convierte el texto del CSV a objetos JSON automáticamente
  Papa.parse(file, {
    header: true,         // Importante: Usa tus encabezados (Etiqueta_pin, Latitud, etc.)
    skipEmptyLines: true,
    dynamicTyping: true,  // Convierte lat/lng a números automáticamente
    complete: function (results) {
      const data = results.data;
      if (data.length === 0) {
        showNotification("El archivo CSV está vacío.");
        return;
      }
      procesarYPintarPines(data);
    },
    error: function (err) {
      console.error("Error al procesar CSV:", err);
      showNotification("Hubo un error al leer el archivo.", "error");
    }
  });
});





function procesarYPintarPines(puntos) {
    // Usaremos esto para centrar el mapa en todos los puntos cargados
    const bounds = new maplibregl.LngLatBounds();
    let puntosValidos = 0;

    puntos.forEach(punto => {
        // Extraer datos usando tus encabezados exactos
        const lat = parseFloat(punto.Latitud);
        const lng = parseFloat(punto.Longitud);
        const nombre = punto.Etiqueta_pin || "Sin nombre";

        if (!isNaN(lat) && !isNaN(lng)) {
            // Crear el HTML del Popup con toda tu información
            const contenido = `
                <div style="font-family: Arial, sans-serif; min-width: 150px;">
                    <h4 style="margin: 0 0 5px 0; color: #d32f2f;">${nombre}</h4>
                    <p style="margin: 0; font-size: 11px;">
                        <b>Estado:</b> ${punto.Estado || 'N/A'}<br>
                        <b>Municipio:</b> ${punto.Municipio || 'N/A'}<br>
                        <b>Localidad:</b> ${punto.Localidad || 'N/A'}<br>
                        <b>Nota:</b> ${punto.Comentario || '...'}
                    </p>
                </div>
            `;


            // Crear marcador y añadirlo al mapa
            const marker = new maplibregl.Marker({ color: "#d32f2f" })
                .setLngLat([lng, lat])
                .setPopup(new maplibregl.Popup({ offset: 25 }).setHTML(contenido))
                .addTo(map);

            // Guardar en tu lista global (la que definimos en pasos anteriores)
            if (typeof allMarkers !== 'undefined') {
                allMarkers.push(marker);
            }

            // Extender los límites para que el mapa sepa qué área cubrir
            bounds.extend([lng, lat]);
            puntosValidos++;
        }
    });

    if (puntosValidos > 0) {
        // Mover la cámara para encuadrar todos los pines nuevos
        map.fitBounds(bounds, { padding: 50, maxZoom: 15 }); 
        showNotification(`Éxito: Se cargaron ${puntosValidos} pines.`, "success");
    } else {
        showNotification("Error: No se cargaron pines. Verifica el archivo CSV en los valores de 'latitud' y 'longitud' .", "error");
    }
}