document.addEventListener('DOMContentLoaded', function () {
    const refreshButton = document.getElementById('refresh-weather-btn');
    const weatherContent = document.getElementById('weather-content');
    const weatherLoading = document.getElementById('weather-loading');
    const weatherError = document.getElementById('weather-error');

    const weatherIcon = document.getElementById('weather-icon');
    const weatherTemp = document.getElementById('weather-temp');
    const weatherFeelsLike = document.getElementById('weather-feels-like');
    const weatherDesc = document.getElementById('weather-desc');
    const weatherLastUpdated = document.getElementById('weather-last-updated');
    const weatherAlerts = document.getElementById('weather-alerts');
    const weatherPlaceholder = document.getElementById('weather-placeholder');

    async function fetchWeather() {
        // Show loading state
        weatherContent.style.display = 'none';
        weatherError.style.display = 'none';
        weatherLoading.style.display = 'block';
        refreshButton.disabled = true;

        try {
            const response = await fetch('api/weather-fetch.php');
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();

            if (data.error) {
                throw new Error(data.error);
            }
            
            // Update UI
            if (weatherPlaceholder) {
                weatherPlaceholder.style.display = 'none';
            }
            weatherIcon.src = `https://openweathermap.org/img/wn/${data[':weather_icon']}@2x.png`;
            weatherTemp.innerHTML = `${Math.round(data[':temperature_f'])}°F`;
            weatherFeelsLike.innerHTML = `Feels like ${Math.round(data[':feels_like_f'])}°F`;
            weatherDesc.textContent = data[':weather_description'].charAt(0).toUpperCase() + data[':weather_description'].slice(1);
            
            const observationDate = new Date(data[':observation_time'].replace(/-/g, '/'));
            weatherLastUpdated.textContent = observationDate.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });

            // Clear and build alerts
            weatherAlerts.innerHTML = '';
            if (data[':is_extreme_heat'] == 1) {
                weatherAlerts.innerHTML += `
                    <div class="alert alert-danger mt-3 mb-0" role="alert">
                        <i class="bi bi-fire"></i> <strong>High AC Demand Expected:</strong> Temp > 95&deg;F.
                    </div>`;
            }
            if (data[':is_extreme_cold'] == 1) {
                 weatherAlerts.innerHTML += `
                    <div class="alert alert-info mt-3 mb-0" role="alert">
                        <i class="bi bi-snow"></i> <strong>High Heating Demand Expected:</strong> Temp < 32&deg;F.
                    </div>`;
            }
            

            weatherContent.style.display = 'block';

        } catch (error) {
            console.error("Error fetching weather:", error);
            weatherError.textContent = 'Failed to fetch weather data. Please try again.';
            weatherError.style.display = 'block';
        } finally {
            // Hide loading state
            weatherLoading.style.display = 'none';
            refreshButton.disabled = false;
        }
    }

    // --- Event Listeners ---
    if(refreshButton) {
        refreshButton.addEventListener('click', fetchWeather);
    }


    // --- Auto-refresh Timer ---
    // Auto-refresh every 30 minutes (1800000 milliseconds)
    setInterval(fetchWeather, 1800000);
});