// /Volumes/Data/Code/FHGR/Frontend/js/map.js
// Add the createMarker function to the window object
window.createMarker = function(lngLat, content = {}) {
    const marker = new maplibregl.Marker({
        color: '#3887be',
        draggable: true
    })
    .setLngLat(lngLat)
    .addTo(map);

    // Create popup with marker content
    const popup = new maplibregl.Popup({ offset: 25 })
        .setHTML(`<strong>${content.title || 'Untitled'}</strong>${content.description ? `<br>${content.description}` : ''}`);
    
    marker.setPopup(popup);

    // 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.toArray(),
        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.lng.toFixed(4)}, ${lngLat.lat.toFixed(4)}</div>
    `;
    
    // Add click event to marker item
    markerElement.addEventListener('click', function() {
        map.flyTo({
            center: [lngLat.lng, lngLat.lat],
            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.getSource('journey-path')) {
        map.addSource('journey-path', {
            type: 'geojson',
            data: {
                type: 'Feature',
                properties: {},
                geometry: {
                    type: 'LineString',
                    coordinates: []
                }
            }
        });
        
        map.addLayer({
            id: 'journey-path',
            type: 'line',
            source: 'journey-path',
            layout: {
                'line-join': 'round',
                'line-cap': 'round'
            },
            paint: {
                'line-color': '#3887be',
                'line-width': 4
            }
        });
    }

    if (currentJourney.markers.length === 0) {
        map.getSource('journey-path').setData({
            type: 'Feature',
            properties: {},
            geometry: {
                type: 'LineString',
                coordinates: []
            }
        });
        return;
    }
    
    const coordinates = currentJourney.markers.map(marker => [
        marker.getLngLat().lng,
        marker.getLngLat().lat
    ]);
    
    map.getSource('journey-path').setData({
        type: 'Feature',
        properties: {},
        geometry: {
            type: 'LineString',
            coordinates: coordinates
        }
    });
}