// /Volumes/Data/Code/FHGR/Frontend/js/map.js
// Add the createMarker function to the window object
window.createMarker = function(lngLat, content = {}) {
    const marker = L.marker(lngLat, {
        draggable: true,
        title: content.title || 'Untitled'
    }).addTo(map);

    // Create popup with marker content
    marker.bindPopup(`<strong>${content.title || 'Untitled'}</strong>${content.description ? `<br>${content.description}` : ''}`);
    
    // When the marker is clicked, open the editor
    marker.on('click', () => {
        openMarkerEditor(marker);
    });

    // Add marker to current journey
    const markerData = {
        id: Date.now(),
        lngLat: [lngLat.lat, lngLat.lng],  // Leaflet uses [lat, lng]
        content: content,
        coordinates: [lngLat.lat, lngLat.lng]
    };

    if (!currentJourney.markers) currentJourney.markers = [];
    currentJourney.markers.push(marker);
    
    updateJourneyPath();
    
    // Add marker to the markers list
    const markersContainer = document.getElementById('markers-container');
    const markerElement = document.createElement('div');
    markerElement.className = 'marker-item';
    markerElement.innerHTML = `
        <div class="marker-title">${content.title || 'Untitled'}</div>
        <div class="marker-coords">${lngLat.lat.toFixed(4)}, ${lngLat.lng.toFixed(4)}</div>
    `;
    
    // Add click event to marker item
    markerElement.addEventListener('click', function() {
        map.flyTo({
            center: [lngLat.lat, lngLat.lng],
            zoom: 10
        });
        openMarkerEditor(marker);
    });
    
    if (markersContainer.children.length === 1 && 
        markersContainer.firstElementChild.id === 'empty-markers') {
        markersContainer.removeChild(markersContainer.firstElementChild);
    }
    markersContainer.appendChild(markerElement);
    
    return marker;
};

// Update the updateJourneyPath function to handle cases where markers array is empty
function updateJourneyPath() {
    if (!map.hasLayer(journeyPath)) {
        journeyPath = L.polyline([], {color: '#3887be', weight: 4});
        map.addLayer(journeyPath);
    }

    const coordinates = currentJourney.markers.map(marker => [
        marker.getLatLng().lat,
        marker.getLatLng().lng
    ]);
    
    journeyPath.setLatLngs(coordinates);
}