document.addEventListener('DOMContentLoaded', function() {
  // Mode switching
  const modeCreateBtn = document.getElementById('mode-create');
  const modeViewBtn = document.getElementById('mode-view');
  const createPanel = document.getElementById('create-panel');
  const viewPanel = document.getElementById('view-panel');
  const markersContainer = document.getElementById('markers-container');
  const emptyMarkers = document.getElementById('empty-markers');

  function switchMode(mode) {
    if (mode === 'create') {
      modeCreateBtn.classList.add('active');
      modeViewBtn.classList.remove('active');
      createPanel.classList.add('active-panel');
      viewPanel.classList.remove('active-panel');
      // Enable marker adding
      window.isCreatingJourney = true;
    } else { // view mode
      modeCreateBtn.classList.remove('active');
      modeViewBtn.classList.add('active');
      createPanel.classList.remove('active-panel');
      viewPanel.classList.add('active-panel');
      // Disable marker adding
      window.isCreatingJourney = false;
    }
  }

  modeCreateBtn.addEventListener('click', () => switchMode('create'));
  modeViewBtn.addEventListener('click', () => switchMode('view'));

  // Journey save handler
  document.getElementById('save-journey').addEventListener('click', function() {
    const title = document.getElementById('journey-title').value;
    const description = document.getElementById('journey-description').value;
    
    if (!title.trim()) {
      alert('Journey title cannot be empty');
      return;
    }
    
    window.currentJourney.name = title;
    window.currentJourney.description = description;

    // Add the current journey to the journeys array if not already added
    const existingJourneyIndex = window.journeys.findIndex(j => j.id === window.currentJourney.id);
    if (existingJourneyIndex === -1) {
      window.journeys.push({
        id: window.currentJourney.id,
        name: window.currentJourney.name,
        description: window.currentJourney.description,
        markers: window.currentJourney.markers.map(marker => ({
          id: marker.id,
          lngLat: marker.getLngLat(),
          content: marker.content
        }))
      });
    } else {
      window.journeys[existingJourneyIndex] = {
        ...window.journeys[existingJourneyIndex],
        name: window.currentJourney.name,
        description: window.currentJourney.description,
        markers: window.currentJourney.markers.map(marker => ({
          id: marker.id,
          lngLat: marker.getLngLat(),
          content: marker.content
        }))
      };
    }

    window.saveJourneyToLocalStorage();
    
    // Show notification
    document.getElementById('toast-message').textContent = 'Journey saved successfully!';
    document.getElementById('toast').classList.add('show');
    setTimeout(() => {
      document.getElementById('toast').classList.remove('show');
    }, 3000);
  });

  // Clear markers
  document.getElementById('clear-markers').addEventListener('click', function() {
    if (window.currentJourney.markers.length > 0 && confirm('Are you sure you want to clear all markers?')) {
      window.currentJourney.markers.forEach(marker => marker.remove());
      window.currentJourney.markers = [];
      markersContainer.innerHTML = '';
      emptyMarkers.style.display = 'block';
      window.updateJourneyPath();
    }
  });
  
  // Toggle sidebar
  document.getElementById('toggle-sidebar').addEventListener('click', function() {
    document.querySelector('.sidebar').classList.toggle('collapsed');
  });
  
  // Initialize in create mode
  switchMode('create');
});