script.js

const cityInput = document.getElementById('cityInput');
const searchBtn = document.getElementById('searchBtn');
const loading = document.getElementById('loading');
const weatherInfo = document.getElementById('weatherInfo');
const error = document.getElementById('error');
const dateTimeEl = document.getElementById('dateTime');
const bgVideo = document.getElementById('bgVideo');
const overlay = document.querySelector('.overlay');
const themeToggle = document.getElementById('themeToggle');
const themeIcon = themeToggle.querySelector('.theme-icon');

const cityNameEl = document.getElementById('cityName');
const weatherIconEl = document.getElementById('weatherIcon');
const temperatureEl = document.getElementById('temperature');
const conditionEl = document.getElementById('condition');
const humidityEl = document.getElementById('humidity');
const windSpeedEl = document.getElementById('windSpeed');

bgVideo.src = 'vedio/5643474-hd_1920_1080_30fps.mp4';

window.addEventListener('load', () => {
    const playVideo = () => {
        bgVideo.play().then(() => {
            bgVideo.playbackRate = 0.5;
        }).catch(e => {
            setTimeout(playVideo, 500);
        });
    };
    playVideo();
});

setInterval(() => {
    if (bgVideo.paused) {
        bgVideo.play().catch(() => {});
    }
    bgVideo.playbackRate = 0.5;
}, 1000);

function updateBackground(isNight) {
    if (isNight) {
        bgVideo.src = 'vedio/5643474-hd_1920_1080_30fps.mp4';
    } else {
        bgVideo.src = 'vedio/5643474-hd_1920_1080_30fps.mp4';
    }
}

const weatherIcons = {
    '01d': '☀️',
    '01n': '🌙',
    '02d': '⛅',
    '02n': '☁️',
    '03d': '☁️',
    '03n': '☁️',
    '04d': '☁️',
    '04n': '☁️',
    '09d': '🌧️',
    '09n': '🌧️',
    '10d': '🌦️',
    '10n': '🌧️',
    '11d': '⛈️',
    '11n': '⛈️',
    '13d': '❄️',
    '13n': '❄️',
    '50d': '🌫️',
    '50n': '🌫️'
};

function updateDateTime() {
    const now = new Date();
    const options = { 
        weekday: 'long', 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    };
    dateTimeEl.textContent = now.toLocaleDateString('en-US', options);
}

function showLoading() {
    loading.classList.add('active');
    weatherInfo.classList.remove('active');
    error.classList.remove('active');
}

function hideLoading() {
    loading.classList.remove('active');
}

function showError(message) {
    hideLoading();
    weatherInfo.classList.remove('active');
    error.textContent = message;
    error.classList.add('active');
}

function displayWeather(data) {
    hideLoading();
    error.classList.remove('active');

    cityNameEl.textContent = data.city;
    
    const iconCode = data.icon;
    weatherIconEl.textContent = weatherIcons[iconCode] || '🌤️';
    
    temperatureEl.innerHTML = `${Math.round(data.temp)}<span>°C</span>`;
    conditionEl.textContent = data.condition;
    humidityEl.textContent = `${data.humidity}%`;
    windSpeedEl.textContent = `${data.wind} m/s`;

    if (iconCode.endsWith('n')) {
        if (document.body.classList.contains('dark-mode')) {
            overlay.style.background = 'rgba(0, 0, 0, 0.7)';
        } else {
            overlay.style.background = 'rgba(0, 0, 0, 0.5)';
        }
    } else {
        if (document.body.classList.contains('dark-mode')) {
            overlay.style.background = 'rgba(0, 0, 0, 0.5)';
        } else {
            overlay.style.background = 'rgba(0, 0, 0, 0.3)';
        }
    }

    weatherInfo.classList.add('active');
}

async function fetchWeather(city) {
    showLoading();

    try {
        const response = await fetch(`/api/weather?city=${encodeURIComponent(city)}`);
        
        if (!response.ok) {
            const errData = await response.json();
            throw new Error(errData.error || 'Failed to fetch weather data');
        }
        
        const data = await response.json();
        displayWeather(data);
        
    } catch (err) {
        showError(err.message || 'Something went wrong. Please try again.');
    }
}

function handleSearch() {
    const city = cityInput.value.trim();
    if (!city) {
        showError('Please enter a city name');
        return;
    }
    fetchWeather(city);
}

searchBtn.addEventListener('click', handleSearch);

cityInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        handleSearch();
    }
});

updateDateTime();
setInterval(updateDateTime, 60000);

cityInput.focus();

themeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    document.body.classList.toggle('light-mode');
    
    if (document.body.classList.contains('light-mode')) {
        themeIcon.src = 'vedio/sun.png';
    } else {
        themeIcon.src = 'vedio/moon.png';
    }
});