// Initialize the map
const map = new maplibregl.Map({
    container: 'map',
    style: 'https://tiles.openfreemap.org/styles/liberty',
    center: [2.2137, 46.2276], // Default center (center of metropolitan France)
    zoom: 5
});

// Add navigation controls
map.addControl(new maplibregl.NavigationControl());

// Add attribution control with OpenStreetMap attribution
map.addControl(new maplibregl.AttributionControl({
    customAttribution: '© <a href="https://www.openstreetmap.org/copyright" >OpenStreetMap</a> contributors'
}));

// Add marker for event location
let marker = new maplibregl.Marker({
    draggable: true
});

// Function to populate form with event data
function populateForm() {
    if (!eventData || !eventData.properties) {
        showResult('Error loading event data', 'error');
        return;
    }
    
    const properties = eventData.properties;
    
    // Set form values
    document.getElementById('label').value = properties.label || '';
    document.getElementById('type').value = properties.type || 'scheduled';
    document.getElementById('what').value = properties.what || '';
    
    // Handle optional fields
    if (properties['what:series']) {
        document.getElementById('what_series').value = properties['what:series'];
    }
    
    if (properties.where) {
        document.getElementById('where').value = properties.where;
    }
    
    // Format dates for datetime-local input
    if (properties.start) {
        const startDate = new Date(properties.start);
        document.getElementById('start').value = startDate.toISOString().slice(0, 16);
    }
    
    if (properties.stop) {
        const stopDate = new Date(properties.stop);
        document.getElementById('stop').value = stopDate.toISOString().slice(0, 16);
    }
    
    // Set marker on map
    if (eventData.geometry && eventData.geometry.coordinates) {
        const coords = eventData.geometry.coordinates;
        marker.setLngLat(coords).addTo(map);
        
        // Center map on event location
        map.flyTo({
            center: coords,
            zoom: 10
        });
    }
}

// Call function to populate form
populateForm();

// Add marker on map click
map.on('click', function(e) {
    marker.setLngLat(e.lngLat).addTo(map);
});

// Function to show result message
function showResult(message, type) {
    const resultElement = document.getElementById('result');
    resultElement.textContent = message;
    resultElement.className = type;
    resultElement.style.display = 'block';
    
    // Scroll to result
    resultElement.scrollIntoView({ behavior: 'smooth' });
}

// Handle form submission
document.getElementById('eventForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Get event ID
    const eventId = document.getElementById('eventId').value;
    
    // Get form values
    const label = document.getElementById('label').value;
    const type = document.getElementById('type').value;
    const what = document.getElementById('what').value;
    const what_series = document.getElementById('what_series').value;
    const where = document.getElementById('where').value;
    const start = document.getElementById('start').value;
    const stop = document.getElementById('stop').value;
    
    // Check if marker is set
    if (!marker.getLngLat()) {
        showResult('Please set a location by clicking on the map', 'error');
        return;
    }
    
    // Get marker coordinates
    const lngLat = marker.getLngLat();
    
    // Create event object
    const event = {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [lngLat.lng, lngLat.lat]
        },
        properties: {
            label: label,
            type: type,
            what: what,
            start: start,
            stop: stop
        }
    };
    
    // Add optional properties if provided
    if (what_series) {
        event.properties['what:series'] = what_series;
    }
    
    if (where) {
        event.properties.where = where;
    }
    
    // Submit event to API
    fetch(`/event/${eventId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(event)
    })
    .then(response => {
        if (response.ok) {
            return response.json();
        } else {
            return response.text().then(text => {
                throw new Error(text || response.statusText);
            });
        }
    })
    .then(data => {
        showResult(`Event updated successfully with ID: ${data.id}`, 'success');
        
        // Add link to view the event
        const resultElement = document.getElementById('result');
        resultElement.innerHTML += `<p><a href="/event/${data.id}" >View Event</a> | <a href="/demo">Back to Map</a></p>`;
    })
    .catch(error => {
        showResult(`Error: ${error.message}`, 'error');
    });
});

// Handle delete button click
document.getElementById('deleteButton').addEventListener('click', function() {
    // Get event ID
    const eventId = document.getElementById('eventId').value;
    
    // Show confirmation dialog
    if (confirm('Are you sure you want to delete this event? This action cannot be undone.')) {
        // Submit delete request to API
        fetch(`/event/${eventId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (response.ok) {
                showResult('Event deleted successfully', 'success');
                
                // Add link to go back to map
                const resultElement = document.getElementById('result');
                resultElement.innerHTML += `<p><a href="/demo">Back to Map</a></p>`;
                
                // Disable form controls
                const formElements = document.querySelectorAll('#eventForm input, #eventForm select, #eventForm button');
                formElements.forEach(element => {
                    element.disabled = true;
                });
                
                // Redirect to demo page after 2 seconds
                setTimeout(() => {
                    window.location.href = '/demo';
                }, 2000);
            } else {
                return response.text().then(text => {
                    throw new Error(text || response.statusText);
                });
            }
        })
        .catch(error => {
            showResult(`Error deleting event: ${error.message}`, 'error');
        });
    }
});