document.addEventListener("DOMContentLoaded", function(){

let map;
let lat = 37.99;
let lon = -1.13;
let resultadosGlobal = [];

// MAPA
map = L.map('map').setView([lat, lon], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
.addTo(map);

setTimeout(() => map.invalidateSize(), 500);


// 🔥 BUSCAR CIUDAD (ARREGLADO)
window.buscarCiudad = async function(){

    let ciudad = document.getElementById("ciudad").value.trim();

    if (!ciudad) {
        alert("Introduce una ciudad");
        return;
    }

    try {

        const url = `https://nominatim.openstreetmap.org/search?format=json&limit=1&countrycodes=es&q=${encodeURIComponent(ciudad)}`;

        const res = await fetch(url, {
            headers: {
                "Accept": "application/json"
            }
        });

        const data = await res.json();

        if (data.length > 0) {

            lat = parseFloat(data[0].lat);
            lon = parseFloat(data[0].lon);

            map.setView([lat, lon], 13);

            setTimeout(() => map.invalidateSize(), 300);

            cargarTiendas();

        } else {
            alert("Ciudad no encontrada");
        }

    } catch (error) {
        console.log(error);
        alert("Error al buscar ciudad");
    }
}


// 📍 UBICACION
window.usarUbicacion = function(){

    if (!navigator.geolocation) {
        alert("Geolocalizacion no soportada");
        return;
    }

    navigator.geolocation.getCurrentPosition(pos => {

        lat = pos.coords.latitude;
        lon = pos.coords.longitude;

        map.setView([lat, lon], 13);

        setTimeout(() => map.invalidateSize(), 300);

        cargarTiendas();
    });
}


// ⭐ FAVORITOS
window.guardarFavorito = function(nombre,lat,lon){

    let fav = JSON.parse(localStorage.getItem("fav")) || [];

    fav.push({nombre,lat,lon});

    localStorage.setItem("fav",JSON.stringify(fav));

    alert("Guardado");
}

window.verFavoritos = function(){

    let fav = JSON.parse(localStorage.getItem("fav")) || [];

    let html = "";

    fav.forEach(f=>{
        html += `
        <div class="card">
            ${f.nombre}<br>
            <a href="https://www.google.com/maps?q=${f.lat},${f.lon}" target="_blank">Ver mapa</a>
        </div>`;
    });

    document.getElementById("lista").innerHTML = html;
}


// 🔎 FILTRO
window.filtrarResultados = function(){

    let texto = document.getElementById("busquedaLocal").value.toLowerCase();

    let filtrados = resultadosGlobal.filter(p=>{
        let name = (p.tags.name || "").toLowerCase();
        return name.includes(texto);
    });

    pintarResultados(filtrados);
}


// 📏 DISTANCIA
function calcularDistancia(lat1, lon1, lat2, lon2){

    const R = 6371;

    const dLat = (lat2-lat1)*Math.PI/180;
    const dLon = (lon2-lon1)*Math.PI/180;

    const a = Math.sin(dLat/2)**2 +
        Math.cos(lat1*Math.PI/180) *
        Math.cos(lat2*Math.PI/180) *
        Math.sin(dLon/2)**2;

    return (R*2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a))).toFixed(2);
}


// 🎨 RESULTADOS MEJORADOS
function pintarResultados(data){

    let html = "";

    data.slice(0,8).forEach(p=>{

        let name = p.tags.name || p.tags.brand || p.tags.operator || "Establecimiento";

        let tipo = p.tags.shop || p.tags.amenity || p.tags.tourism || "Lugar";

        let distancia = calcularDistancia(lat,lon,p.lat,p.lon);

        let direccion = p.tags["addr:street"]
            ? p.tags["addr:street"]
            : "Direccion no disponible";

        let telefono = p.tags.phone || "";

        let web = p.tags.website 
            ? `<a href="${p.tags.website}" target="_blank">Web</a>` 
            : "";

        html += `
        <div class="card" style="
            padding:12px;
            border-radius:12px;
            background:#f5f5f5;
            margin-top:10px;
        ">
            <strong>${name}</strong><br>

            <small>${tipo}</small><br>

            📍 ${direccion}<br>
            📏 ${distancia} km<br>

            ${telefono ? `📞 ${telefono}<br>` : ""}

            ${web ? `🌐 ${web}<br>` : ""}

            <br>

            <button onclick="guardarFavorito('${name}',${p.lat},${p.lon})">
                Guardar
            </button>

            <a href="https://www.google.com/maps?q=${p.lat},${p.lon}" target="_blank">
                Ver mapa
            </a>
        </div>
        `;
    });

    document.getElementById("lista").innerHTML = html;
}


// 📦 CARGAR TIENDAS
function cargarTiendas(){

    let tipo = document.getElementById("tipo").value;

    let filtro = {
        supermarket:'["shop"="supermarket"]',
        restaurant:'["amenity"="restaurant"]',
        pharmacy:'["amenity"="pharmacy"]',
        fuel:'["amenity"="fuel"]'
    };

    let query = `
    [out:json];
    node ${filtro[tipo]}(around:2000,${lat},${lon});
    out;
    `;

    fetch("https://overpass-api.de/api/interpreter",{
        method:"POST",
        body:query
    })
    .then(r=>r.json())
    .then(data=>{
        resultadosGlobal = data.elements;
        pintarResultados(resultadosGlobal);
    });
}


// EVENTO SELECT
const tipoSelect = document.getElementById("tipo");
if (tipoSelect) {
    tipoSelect.addEventListener("change", cargarTiendas);
}

// INICIAL
cargarTiendas();

});