// Main JavaScript for Simcoe Connect Hub

// API Configuration
const API_CONFIG = {
    baseURL: '/api',
    endpoints: {
        weather: '/weather',
        alerts: '/alerts',
        events: '/events',
        businesses: '/businesses',
        chat: '/functions/chatbot-rag'
    }
};

// Utility Functions
class Utils {
    static formatDate(date) {
        return new Intl.DateTimeFormat('en-CA', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        }).format(date);
    }

    static debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    static showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transform transition-transform duration-300 ${
            type === 'error' ? 'bg-red-500 text-white' : 
            type === 'success' ? 'bg-green-500 text-white' : 
            'bg-blue-500 text-white'
        }`;
        notification.textContent = message;
        document.body.appendChild(notification);

        setTimeout(() => {
            notification.style.transform = 'translateX(100%)';
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }
}

// Live Data Management
class LiveDataManager {
    static async fetchWeatherData() {
        try {
            const response = await fetch(`${API_CONFIG.baseURL}${API_CONFIG.endpoints.weather}`);
            if (!response.ok) throw new Error('Weather data unavailable');
            return await response.json();
        } catch (error) {
            console.error('Failed to fetch weather data:', error);
            return null;
        }
    }

    static async fetchWeatherAlerts() {
        try {
            const response = await fetch(`${API_CONFIG.baseURL}${API_CONFIG.endpoints.alerts}`);
            if (!response.ok) throw new Error('Alert data unavailable');
            return await response.json();
        } catch (error) {
            console.error('Failed to fetch weather alerts:', error);
            return null;
        }
    }

    static async fetchFeaturedEvents() {
        try {
            const response = await fetch(`${API_CONFIG.baseURL}${API_CONFIG.endpoints.events}?featured=true&limit=3`);
            if (!response.ok) throw new Error('Events data unavailable');
            return await response.json();
        } catch (error) {
            console.error('Failed to fetch events:', error);
            return [];
        }
    }

    static async fetchFeaturedBusinesses() {
        try {
            const response = await fetch(`${API_CONFIG.baseURL}${API_CONFIG.endpoints.businesses}?featured=true&limit=3`);
            if (!response.ok) throw new Error('Businesses data unavailable');
            return await response.json();
        } catch (error) {
            console.error('Failed to fetch businesses:', error);
            return [];
        }
    }
}

// UI Controller
class UIController {
    static updateWeatherDisplay(weatherData) {
        const weatherContainer = document.getElementById('weatherData');
        if (!weatherData) {
            weatherContainer.innerHTML = `
                <div class="text-center text-gray-500 py-4">
                    <i data-feather="cloud-off" class="w-8 h-8 mx-auto mb-2"></i>
                    <p>Weather data temporarily unavailable</p>
                </div>
            `;
            return;
        }

        weatherContainer.innerHTML = `
            <div class="flex justify-between items-center">
                <span class="text-gray-600">Temperature</span>
                <span class="font-semibold text-gray-900">${weatherData.temperature}°C</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-600">Conditions</span>
                <span class="font-semibold text-gray-900">${weatherData.conditions}</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-600">Updated</span>
                <span class="font-semibold text-gray-900">${Utils.formatDate(new Date(weatherData.updatedAt))}</span>
            </div>
        `;
        feather.replace();
    }

    static updateEventsDisplay(events) {
        const eventsContainer = document.getElementById('eventsList');
        if (!events || events.length === 0) {
            eventsContainer.innerHTML = `
                <div class="text-center text-gray-500 py-4">
                    <i data-feather="calendar" class="w-8 h-8 mx-auto mb-2"></i>
                    <p>No upcoming events</p>
                </div>
            `;
            return;
        }

        eventsContainer.innerHTML = events.map(event => `
            <div class="border-l-4 border-secondary-500 pl-3 py-1">
                <h4 class="font-semibold text-gray-900 text-sm">${event.title}</h4>
                <p class="text-gray-600 text-xs">${Utils.formatDate(new Date(event.date))}</p>
            </div>
        `).join('');
    }

    static updateBusinessesDisplay(businesses) {
        const businessesContainer = document.getElementById('businessesList');
        if (!businesses || businesses.length === 0) {
            businessesContainer.innerHTML = `
                <div class="text-center text-gray-500 py-4">
                    <i data-feather="store" class="w-8 h-8 mx-auto mb-2"></i>
                    <p>No featured businesses</p>
                </div>
            `;
            return;
        }

        businessesContainer.innerHTML = businesses.map(business => `
            <div class="flex items-center space-x-3 py-2">
                <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
                    <i data-feather="store" class="w-4 h-4 text-primary-600"></i>
            </div>
            <div>
                <h4 class="font-semibold text-gray-900 text-sm">${business.name}</h4>
                <p class="text-gray-600 text-xs">${business.category}</p>
            </div>
        `).join('');
        feather.replace();
    }

    static showWeatherAlert(alert) {
        if (!alert || !alert.message) return;
        
        const alertBanner = document.getElementById('weatherAlert');
        const alertText = document.getElementById('alertText');
        
        alertText.textContent = alert.message;
        alertBanner.classList.remove('hidden');
        
        // Add appropriate styling based on alert severity
        if (alert.severity === 'high') {
            alertBanner.className = alertBanner.className.replace('from-primary-500 to-primary-600', 'from-red-500 to-red-600');
        }
    }
}

// Event Handlers
function closeAlert() {
    const alertBanner = document.getElementById('weatherAlert');
    alertBanner.classList.add('hidden');
}

// Search functionality
const searchHandler = Utils.debounce((query) => {
    if (query.length > 2) {
        window.location.href = `/search?q=${encodeURIComponent(query)}`;
    }
}, 500);

document.getElementById('mainSearch')?.addEventListener('input', (e) => {
    searchHandler(e.target.value);
});

// Live Data Loading Functions
async function loadWeatherData() {
    const weatherData = await LiveDataManager.fetchWeatherData();
    UIController.updateWeatherDisplay(weatherData);
}

async function checkWeatherAlerts() {
    const alerts = await LiveDataManager.fetchWeatherAlerts();
    if (alerts && alerts.length > 0) {
        alerts.forEach(alert => UIController.showWeatherAlert(alert));
    }
}

async function loadFeaturedEvents() {
    const events = await LiveDataManager.fetchFeaturedEvents();
    UIController.updateEventsDisplay(events);
}

async function loadFeaturedBusinesses() {
    const businesses = await LiveDataManager.fetchFeaturedBusinesses();
    UIController.updateBusinessesDisplay(businesses);
}

// Auto-refresh live data every 30 seconds
setInterval(() => {
    loadWeatherData();
    loadFeaturedEvents();
    loadFeaturedBusinesses();
    checkWeatherAlerts();
}, 30000);

// Initialize service worker for offline functionality
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
            .then(registration => {
                console.log('SW registered: ', registration);
            })
            .catch(registrationError => {
                console.log('SW registration failed: ', registrationError);
            });
    });
}

// Error handling
window.addEventListener('error', (event) => {
    console.error('Global error:', event.error);
    Utils.showNotification('Something went wrong. Please try again.', 'error');
});