import { config } from './config.js';

document.addEventListener('DOMContentLoaded', () => {
  // Elements
  const symbols = document.querySelectorAll('.symbol');
  const textPanels = document.querySelectorAll('.text-panel');
  const prevBtn = document.getElementById('prev-btn');
  const nextBtn = document.getElementById('next-btn');
  const progressDots = document.querySelectorAll('.progress-dot');
  const video = document.getElementById('background-video');
  
  // Set initial state
  let currentStage = 0;
  const totalStages = symbols.length;
  
  // Update CSS variables from config
  document.documentElement.style.setProperty('--intimate-color', config.colors.intimate);
  document.documentElement.style.setProperty('--universal-color', config.colors.universal);
  document.documentElement.style.setProperty('--divine-color', config.colors.divine);
  document.documentElement.style.setProperty('--transition-time', `${config.transitionTime}s`);
  
  // Background video settings
  video.style.opacity = config.background.opacity;
  
  // Initialize the first stage
  updateStage();
  
  // Event listeners
  prevBtn.addEventListener('click', navigateToPrevious);
  nextBtn.addEventListener('click', navigateToNext);
  
  progressDots.forEach(dot => {
    dot.addEventListener('click', (e) => {
      const index = parseInt(e.target.dataset.index);
      goToStage(index);
    });
  });
  
  // Keyboard navigation
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft') navigateToPrevious();
    if (e.key === 'ArrowRight') navigateToNext();
  });
  
  // Automatic progression if enabled
  let autoProgressInterval;
  
  if (config.autoProgress.enabled) {
    startAutoProgress();
  }
  
  function startAutoProgress() {
    autoProgressInterval = setInterval(() => {
      if (currentStage < totalStages - 1) {
        navigateToNext();
      } else {
        goToStage(0);
      }
    }, config.autoProgress.interval);
  }
  
  // Navigation functions
  function navigateToNext() {
    if (currentStage < totalStages - 1) {
      currentStage++;
      updateStage();
    }
  }
  
  function navigateToPrevious() {
    if (currentStage > 0) {
      currentStage--;
      updateStage();
    }
  }
  
  function goToStage(index) {
    if (index >= 0 && index < totalStages) {
      currentStage = index;
      updateStage();
    }
  }
  
  function updateStage() {
    // Update symbols
    symbols.forEach((symbol, index) => {
      if (index === currentStage) {
        symbol.classList.add('active');
      } else {
        symbol.classList.remove('active');
      }
    });
    
    // Update text panels
    textPanels.forEach((panel, index) => {
      if (index === currentStage) {
        panel.classList.add('active');
      } else {
        panel.classList.remove('active');
      }
    });
    
    // Update progress dots
    progressDots.forEach((dot, index) => {
      if (index === currentStage) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
    
    // Update buttons
    prevBtn.disabled = currentStage === 0;
    nextBtn.disabled = currentStage === totalStages - 1;
    
    // Set background color based on current stage
    let currentColor;
    switch(currentStage) {
      case 0:
        currentColor = config.colors.intimate;
        break;
      case 1:
        currentColor = config.colors.universal;
        break;
      case 2:
        currentColor = config.colors.divine;
        break;
    }
    
    // Apply subtle color overlay to background
    document.getElementById('background').style.boxShadow = `inset 0 0 100px ${currentColor}33`;
    
    // Reset auto-progression timer if enabled
    if (config.autoProgress.enabled) {
      clearInterval(autoProgressInterval);
      startAutoProgress();
    }
  }
});