/**
 * Theme Transition Script
 * 
 * Handles element-specific animations during theme changes.
 * Applies staggered animations to different elements when the theme changes.
 */

document.addEventListener('DOMContentLoaded', () => {
  // Listen for theme change events
  window.addEventListener('theme-changed', (e) => {
    const customEvent = e instanceof CustomEvent ? e : null;
    const theme = customEvent?.detail?.theme || (document.documentElement.classList.contains('dark') ? 'dark' : 'light');
    
    // Skip animations if reduced motion is preferred
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      return;
    }
    
    // Animate headings with staggered delay
    document.querySelectorAll('h1, h2, h3').forEach((heading, index) => {
      // Remove any existing animation classes
      heading.classList.remove('theme-animate-slide');
      
      // Force a reflow to restart the animation
      void heading.offsetWidth;
      
      // Add animation class with delay based on index
      setTimeout(() => {
        heading.classList.add('theme-animate-slide');
      }, 50 + (index * 30));
    });
    
    // Animate cards and sections with staggered delay
    document.querySelectorAll('.card, article, section:not(section section)').forEach((element, index) => {
      // Remove any existing animation classes
      element.classList.remove('theme-animate-scale');
      
      // Force a reflow to restart the animation
      void element.offsetWidth;
      
      // Add animation class with delay based on index
      setTimeout(() => {
        element.classList.add('theme-animate-scale');
      }, 100 + (index * 40));
    });
    
    // Animate images and icons
    document.querySelectorAll('img, svg').forEach((element, index) => {
      // Remove any existing animation classes
      element.classList.remove('theme-animate-fade');
      
      // Force a reflow to restart the animation
      void element.offsetWidth;
      
      // Add animation class with delay based on index
      setTimeout(() => {
        element.classList.add('theme-animate-fade');
      }, 150 + (index * 20));
    });
    
    // Add theme-specific classes to enhance certain elements
    if (theme === 'dark') {
      // Dark theme enhancements
      document.querySelectorAll('code, pre').forEach(element => {
        element.classList.add('dark-theme-code');
      });
      
      // Add subtle glow to important buttons in dark mode
      document.querySelectorAll('.button-primary, .cta-button').forEach(element => {
        element.classList.add('dark-theme-glow');
      });
    } else {
      // Light theme enhancements
      document.querySelectorAll('code, pre').forEach(element => {
        element.classList.remove('dark-theme-code');
      });
      
      // Remove glow from buttons in light mode
      document.querySelectorAll('.button-primary, .cta-button').forEach(element => {
        element.classList.remove('dark-theme-glow');
      });
    }
  });
});

// Add CSS classes for theme-specific enhancements
const addThemeStyles = () => {
  // Create a style element
  const style = document.createElement('style');
  
  // Add CSS for dark theme code blocks
  style.textContent = `
    .dark-theme-code {
      box-shadow: 0 0 8px rgba(254, 128, 25, 0.3);
    }
    
    .dark-theme-glow {
      box-shadow: 0 0 12px rgba(254, 128, 25, 0.4);
    }
    
    @media (prefers-reduced-motion: reduce) {
      .theme-animate-fade,
      .theme-animate-slide,
      .theme-animate-scale {
        animation: none !important;
        transition: none !important;
      }
    }
  `;
  
  // Append the style element to the head
  document.head.appendChild(style);
};

// Add the styles when the DOM is ready
document.addEventListener('DOMContentLoaded', addThemeStyles);
