map.js

// Atmosphere Pro - Interactive Map Logic

// Default Coordinate (Pune, India)
const defaultLat = 18.5204;
const defaultLon = 73.8567;

// Initialize Map
const map = L.map('map').setView([defaultLat, defaultLon], 5);

// Add Tile Layer (Clean modern style)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

let marker = null;

// WMO Weather interpretation codes
const weatherCodeMap = {
    0: { text: "Clear sky", icon: "sun" },
    1: { text: "Mainly clear", icon: "cloud-sun" },
    2: { text: "Partly cloudy", icon: "cloud-sun" },
    3: { text: "Overcast", icon: "cloud" },
    45: { text: "Fog", icon: "cloud-fog" },
    48: { text: "Depositing rime fog", icon: "cloud-fog" },
    51: { text: "Light drizzle", icon: "cloud-drizzle" },
    53: { text: "Moderate drizzle", icon: "cloud-drizzle" },
    55: { text: "Dense drizzle", icon: "cloud-drizzle" },
    61: { text: "Slight rain", icon: "cloud-rain" },
    63: { text: "Moderate rain", icon: "cloud-rain" },
    65: { text: "Heavy rain", icon: "cloud-rain" },
    71: { text: "Slight snow fall", icon: "cloud-snow" },
    73: { text: "Moderate snow fall", icon: "cloud-snow" },
    75: { text: "Heavy snow fall", icon: "cloud-snow" },
    80: { text: "Slight rain showers", icon: "cloud-rain" },
    81: { text: "Moderate rain showers", icon: "cloud-rain" },
    82: { text: "Violent rain showers", icon: "cloud-rain" },
    95: { text: "Thunderstorm", icon: "cloud-lightning" },
};

// Map Click Interaction
map.on('click', function(e) {
    const { lat, lng } = e.latlng;
    
    // 1. Update/Add Marker
    if (marker) {
        marker.setLatLng([lat, lng]);
    } else {
        marker = L.marker([lat, lng]).addTo(map);
    }
    
    // 2. Fetch Location Info
    updateLocationInfo(lat, lng);
    
    // 3. Fetch Weather
    fetchWeatherAtCoords(lat, lng);
});

async function updateLocationInfo(lat, lng) {
    document.getElementById('latVal').textContent = lat.toFixed(3);
    document.getElementById('lonVal').textContent = lng.toFixed(3);
    
    try {
        const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=10`);
        const data = await res.json();
        
        const city = data.address.city || data.address.town || data.address.village || data.address.county || "Selected Area";
        const country = data.address.country || "";
        document.getElementById('locationName').textContent = `${city}, ${country}`;
    } catch (err) {
        document.getElementById('locationName').textContent = "Unknown Location";
    }
}

async function fetchWeatherAtCoords(lat, lng) {
    try {
        const weatherApi = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}&current=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m&timezone=auto`;
        const res = await fetch(weatherApi);
        const data = await res.json();
        
        displayWeather(data.current);
    } catch (err) {
        console.error("Weather fetch failed:", err);
    }
}

function displayWeather(data) {
    // Show sections
    document.getElementById('mapWeatherCard').style.display = "block";
    document.getElementById('emptyState').style.display = "none";
    
    // Update Values
    const tempVal = document.getElementById('mapTempValue');
    const conditionText = document.getElementById('mapConditionText');
    const humidity = document.getElementById('mapHumidity');
    const wind = document.getElementById('mapWind');
    const weatherIcon = document.getElementById('mapWeatherIcon');
    
    tempVal.textContent = Math.round(data.temperature_2m);
    humidity.textContent = `${data.relative_humidity_2m}%`;
    wind.textContent = `${Math.round(data.wind_speed_10m)} km/h`;
    
    const condition = weatherCodeMap[data.weather_code] || { text: "Unknown", icon: "help-circle" };
    conditionText.textContent = condition.text;
    
    // Icon update
    weatherIcon.setAttribute('data-lucide', condition.icon);
    
    // Update Dashboard Link with parameters
    const lat = document.getElementById('latVal').textContent;
    const lon = document.getElementById('lonVal').textContent;
    const city = document.getElementById('locationName').textContent;
    const dashboardBtn = document.getElementById('viewFullDashboardBtn');
    dashboardBtn.href = `dashboard.html?lat=${lat}&lon=${lon}&city=${encodeURIComponent(city)}`;
    
    // Re-init Lucide
    if (window.lucide) {
        window.lucide.createIcons();
    }
}