script.js

// API Configuration
const API_KEY = 'bd5e378503939ddaee76f12ad7a97608';
const WEATHER_API = 'https://api.openweathermap.org/data/2.5/weather';
const FORECAST_API = 'https://api.openweathermap.org/data/2.5/forecast';

// Global state
let currentUnit = 'celsius';
let searchHistory = JSON.parse(localStorage.getItem('weatherHistory')) || [];

// DOM Elements
const cityInput = document.getElementById('cityInput');
const searchBtn = document.getElementById('searchBtn');
const locationBtn = document.getElementById('locationBtn');
const unitToggle = document.getElementById('unitToggle');
const weatherInfo = document.getElementById('weatherInfo');
const forecastContainer = document.getElementById('forecastContainer');
const searchHistory_el = document.getElementById('searchHistory');

// Weather data elements
const cityName = document.getElementById('cityName');
const temperature = document.getElementById('temperature');
const description = document.getElementById('description');
const weatherIcon = document.getElementById('weatherIcon');
const feelsLike = document.getElementById('feelsLike');
const humidity = document.getElementById('humidity');
const windSpeed = document.getElementById('windSpeed');
const visibility = document.getElementById('visibility');
const pressure = document.getElementById('pressure');
const uvIndex = document.getElementById('uvIndex');
const forecastGrid = document.getElementById('forecastGrid');

// Event Listeners
searchBtn.addEventListener('click', () => searchWeather());
cityInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') searchWeather();
});
locationBtn.addEventListener('click', getUserLocation);
unitToggle.addEventListener('click', toggleUnit);

// Weather Icons mapping
const weatherIcons = {
    '01d': 'fas fa-sun',
    '01n': 'fas fa-moon',
    '02d': 'fas fa-cloud-sun',
    '02n': 'fas fa-cloud-moon',
    '03d': 'fas fa-cloud',
    '03n': 'fas fa-cloud',
    '04d': 'fas fa-clouds',
    '04n': 'fas fa-clouds',
    '09d': 'fas fa-cloud-showers-heavy',
    '09n': 'fas fa-cloud-showers-heavy',
    '10d': 'fas fa-cloud-rain',
    '10n': 'fas fa-cloud-rain',
    '11d': 'fas fa-bolt',
    '11n': 'fas fa-bolt',
    '13d': 'fas fa-snowflake',
    '13n': 'fas fa-snowflake',
    '50d': 'fas fa-smog',
    '50n': 'fas fa-smog'
};

// Main search function
async function searchWeather(city = null) {
    const searchCity = city || cityInput.value.trim();
    
    if (!searchCity) {
        showAlert('Please enter a city name!', 'error');
        return;
    }
    
    try {
        showLoading(true);
        
        // Get current weather
        const weatherData = await fetchWeatherData(searchCity);
        displayCurrentWeather(weatherData);
        
        // Get forecast data
        const forecastData = await fetchForecastData(searchCity);
        displayForecast(forecastData);
        
        // Add to search history
        addToHistory(searchCity);
        
        // Show weather info
        weatherInfo.classList.add('show');
        forecastContainer.classList.add('show');
        
    } catch (error) {
        showAlert(error.message, 'error');
        console.error('Weather fetch error:', error);
    } finally {
        showLoading(false);
    }
}

// Fetch weather data
async function fetchWeatherData(city) {
    const units = currentUnit === 'celsius' ? 'metric' : 'imperial';
    const response = await fetch(`${WEATHER_API}?q=${city}&appid=${API_KEY}&units=${units}`);
    
    if (!response.ok) {
        if (response.status === 404) {
            throw new Error('City not found! Please check the spelling.');
        }
        throw new Error('Weather data unavailable. Please try again.');
    }
    
    return await response.json();
}

// Fetch forecast data
async function fetchForecastData(city) {
    const units = currentUnit === 'celsius' ? 'metric' : 'imperial';
    const response = await fetch(`${FORECAST_API}?q=${city}&appid=${API_KEY}&units=${units}`);
    
    if (!response.ok) {
        throw new Error('Forecast data unavailable.');
    }
    
    return await response.json();
}

// Display current weather
function displayCurrentWeather(data) {
    const tempUnit = currentUnit === 'celsius' ? '°C' : '°F';
    const speedUnit = currentUnit === 'celsius' ? 'm/s' : 'mph';
    
    cityName.textContent = `${data.name}, ${data.sys.country}`;
    temperature.textContent = `${Math.round(data.main.temp)}${tempUnit}`;
    description.textContent = data.weather[0].description;
    
    // Set weather icon
    const iconCode = data.weather[0].icon;
    weatherIcon.innerHTML = `<i class="${weatherIcons[iconCode] || 'fas fa-sun'}"></i>`;
    
    // Update details
    feelsLike.textContent = `${Math.round(data.main.feels_like)}${tempUnit}`;
    humidity.textContent = `${data.main.humidity}%`;
    windSpeed.textContent = `${data.wind.speed} ${speedUnit}`;
    visibility.textContent = `${(data.visibility / 1000).toFixed(1)} km`;
    pressure.textContent = `${data.main.pressure} hPa`;
    uvIndex.textContent = 'N/A'; // UV index requires separate API call
}

// Display forecast
function displayForecast(data) {
    forecastGrid.innerHTML = '';
    
    // Get one forecast per day (every 8th item = 24 hours)
    const dailyForecasts = data.list.filter((_, index) => index % 8 === 0).slice(0, 5);
    
    dailyForecasts.forEach(forecast => {
        const date = new Date(forecast.dt * 1000);
        const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
        const iconCode = forecast.weather[0].icon;
        const tempUnit = currentUnit === 'celsius' ? '°C' : '°F';
        
        const forecastItem = document.createElement('div');
        forecastItem.className = 'forecast-item';
        
        forecastItem.innerHTML = `
            <div class="forecast-day">${dayName}</div>
            <div class="forecast-icon">
                <i class="${weatherIcons[iconCode] || 'fas fa-sun'}"></i>
            </div>
            <div class="forecast-desc">${forecast.weather[0].description}</div>
            <div class="forecast-temps">
                <span class="forecast-high">${Math.round(forecast.main.temp_max)}${tempUnit}</span>
                <span class="forecast-low">${Math.round(forecast.main.temp_min)}${tempUnit}</span>
            </div>
        `;
        
        forecastGrid.appendChild(forecastItem);
    });
}

// Get user location
function getUserLocation() {
    if (!navigator.geolocation) {
        showAlert('Geolocation is not supported by this browser.', 'error');
        return;
    }
    
    showLoading(true);
    
    navigator.geolocation.getCurrentPosition(
        async (position) => {
            try {
                const { latitude, longitude } = position.coords;
                const units = currentUnit === 'celsius' ? 'metric' : 'imperial';
                
                const response = await fetch(
                    `${WEATHER_API}?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=${units}`
                );
                
                if (!response.ok) throw new Error('Location weather unavailable');
                
                const data = await response.json();
                displayCurrentWeather(data);
                
                // Get forecast for current location
                const forecastResponse = await fetch(
                    `${FORECAST_API}?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=${units}`
                );
                
                if (forecastResponse.ok) {
                    const forecastData = await forecastResponse.json();
                    displayForecast(forecastData);
                }
                
                cityInput.value = data.name;
                weatherInfo.classList.add('show');
                forecastContainer.classList.add('show');
                
            } catch (error) {
                showAlert('Unable to get weather for your location.', 'error');
            } finally {
                showLoading(false);
            }
        },
        (error) => {
            showLoading(false);
            showAlert('Location access denied. Please enter a city manually.', 'error');
        }
    );
}

// Toggle temperature unit
function toggleUnit() {
    currentUnit = currentUnit === 'celsius' ? 'fahrenheit' : 'celsius';
    unitToggle.textContent = currentUnit === 'celsius' ? '°C' : '°F';
    
    // Re-search current city if weather is displayed
    if (weatherInfo.classList.contains('show') && cityInput.value) {
        searchWeather();
    }
}

// Add to search history
function addToHistory(city) {
    if (!searchHistory.includes(city)) {
        searchHistory.unshift(city);
        if (searchHistory.length > 5) {
            searchHistory = searchHistory.slice(0, 5);
        }
        localStorage.setItem('weatherHistory', JSON.stringify(searchHistory));
        updateHistoryDisplay();
    }
}

// Update search history display
function updateHistoryDisplay() {
    searchHistory_el.innerHTML = '';
    searchHistory.forEach(city => {
        const historyItem = document.createElement('span');
        historyItem.className = 'history-item';
        historyItem.textContent = city;
        historyItem.addEventListener('click', () => {
            cityInput.value = city;
            searchWeather();
        });
        searchHistory_el.appendChild(historyItem);
    });
}

// Show loading state
function showLoading(isLoading) {
    if (isLoading) {
        searchBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        searchBtn.disabled = true;
        locationBtn.disabled = true;
    } else {
        searchBtn.innerHTML = '<i class="fas fa-search"></i>';
        searchBtn.disabled = false;
        locationBtn.disabled = false;
    }
}

// Show alert messages
function showAlert(message, type = 'info') {
    // Create alert element
    const alert = document.createElement('div');
    alert.className = `alert alert-${type}`;
    alert.innerHTML = `
        <i class="fas fa-${type === 'error' ? 'exclamation-triangle' : 'info-circle'}"></i>
        ${message}
    `;
    
    // Add styles
    alert.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: ${type === 'error' ? '#e74c3c' : '#3498db'};
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 10px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        z-index: 1000;
        animation: slideInRight 0.3s ease-out;
    `;
    
    document.body.appendChild(alert);
    
    // Remove after 4 seconds
    setTimeout(() => {
        alert.style.animation = 'slideOutRight 0.3s ease-out';
        setTimeout(() => alert.remove(), 300);
    }, 4000);
}

// Add CSS animations for alerts
const style = document.createElement('style');
style.textContent = `
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOutRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

// Initialize app
window.addEventListener('load', () => {
    updateHistoryDisplay();
    
    // Load default city
    if (searchHistory.length > 0) {
        cityInput.value = searchHistory[0];
        searchWeather();
    } else {
        cityInput.value = 'Tehran';
        searchWeather();
    }
});