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;
    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');
});