static/shared/js/ui-animations.js

/**

 * UI Animations & Interactions

 * Smooth animations, transitions, and micro-interactions

 */

export class UIAnimations {
  /**

   * Animate number counting up

   * @param {HTMLElement} element - Target element

   * @param {number} target - Target number

   * @param {number} duration - Animation duration in ms

   * @param {string} suffix - Optional suffix (e.g., '%', 'K')

   */
  static animateNumber(element, target, duration = 1000, suffix = '') {
    if (!element) return;
    
    const start = parseFloat(element.textContent) || 0;
    const increment = (target - start) / (duration / 16);
    let current = start;
    
    const timer = setInterval(() => {
      current += increment;
      
      if ((increment > 0 && current >= target) || (increment < 0 && current <= target)) {
        current = target;
        clearInterval(timer);
      }
      
      element.textContent = Math.round(current) + suffix;
    }, 16);
  }

  /**

   * Animate element entrance with fade and slide

   * @param {HTMLElement} element - Target element

   * @param {string} direction - 'up', 'down', 'left', 'right'

   * @param {number} delay - Delay in ms

   */
  static animateEntrance(element, direction = 'up', delay = 0) {
    if (!element) return;
    
    const directions = {
      up: { x: 0, y: 20 },
      down: { x: 0, y: -20 },
      left: { x: 20, y: 0 },
      right: { x: -20, y: 0 }
    };
    
    const { x, y } = directions[direction] || directions.up;
    
    element.style.opacity = '0';
    element.style.transform = `translate(${x}px, ${y}px)`;
    element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
    
    setTimeout(() => {
      element.style.opacity = '1';
      element.style.transform = 'translate(0, 0)';
    }, delay);
  }

  /**

   * Stagger animation for multiple elements

   * @param {NodeList|Array} elements - Elements to animate

   * @param {number} staggerDelay - Delay between each element in ms

   */
  static staggerAnimation(elements, staggerDelay = 100) {
    if (!elements || elements.length === 0) return;
    
    elements.forEach((element, index) => {
      this.animateEntrance(element, 'up', index * staggerDelay);
    });
  }

  /**

   * Create ripple effect on click

   * @param {Event} event - Click event

   * @param {HTMLElement} element - Target element

   */
  static createRipple(event, element) {
    if (!element) return;
    
    const ripple = document.createElement('span');
    const rect = element.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = event.clientX - rect.left - size / 2;
    const y = event.clientY - rect.top - size / 2;
    
    ripple.style.cssText = `

      position: absolute;

      width: ${size}px;

      height: ${size}px;

      left: ${x}px;

      top: ${y}px;

      background: rgba(255, 255, 255, 0.5);

      border-radius: 50%;

      transform: scale(0);

      animation: ripple 0.6s ease-out;

      pointer-events: none;

    `;
    
    element.style.position = 'relative';
    element.style.overflow = 'hidden';
    element.appendChild(ripple);
    
    setTimeout(() => ripple.remove(), 600);
  }

  /**

   * Smooth scroll to element

   * @param {string|HTMLElement} target - Target element or selector

   * @param {number} offset - Offset from top in px

   */
  static smoothScrollTo(target, offset = 0) {
    const element = typeof target === 'string' 
      ? document.querySelector(target) 
      : target;
    
    if (!element) return;
    
    const targetPosition = element.getBoundingClientRect().top + window.pageYOffset - offset;
    
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
  }

  /**

   * Parallax effect on scroll

   * @param {HTMLElement} element - Target element

   * @param {number} speed - Parallax speed (0.1 - 1)

   */
  static initParallax(element, speed = 0.5) {
    if (!element) return;
    
    const handleScroll = () => {
      const scrolled = window.pageYOffset;
      const rate = scrolled * speed;
      element.style.transform = `translateY(${rate}px)`;
    };
    
    window.addEventListener('scroll', handleScroll, { passive: true });
    
    return () => window.removeEventListener('scroll', handleScroll);
  }

  /**

   * Intersection Observer for lazy animations

   * @param {string} selector - CSS selector for elements

   * @param {Function} callback - Callback when element is visible

   * @param {Object} options - Intersection Observer options

   */
  static observeElements(selector, callback, options = {}) {
    const defaultOptions = {
      threshold: 0.1,
      rootMargin: '0px',
      ...options
    };
    
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          callback(entry.target);
          observer.unobserve(entry.target);
        }
      });
    }, defaultOptions);
    
    document.querySelectorAll(selector).forEach(el => observer.observe(el));
    
    return observer;
  }

  /**

   * Create sparkline SVG

   * @param {Array} data - Array of numbers

   * @param {number} width - SVG width

   * @param {number} height - SVG height

   * @returns {string} SVG string

   */
  static createSparkline(data, width = 60, height = 24) {
    if (!data || data.length === 0) return '';
    
    const max = Math.max(...data);
    const min = Math.min(...data);
    const range = max - min || 1;
    
    const points = data.map((value, index) => {
      const x = (index / (data.length - 1)) * width;
      const y = height - ((value - min) / range) * height;
      return `${x},${y}`;
    }).join(' ');
    
    return `

      <svg class="sparkline" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">

        <polyline points="${points}" fill="none" stroke="currentColor" stroke-width="2" />

      </svg>

    `;
  }

  /**

   * Progress bar animation

   * @param {HTMLElement} element - Progress bar element

   * @param {number} percentage - Target percentage (0-100)

   * @param {number} duration - Animation duration in ms

   */
  static animateProgress(element, percentage, duration = 1000) {
    if (!element) return;
    
    const start = parseFloat(element.style.width) || 0;
    const target = Math.min(Math.max(percentage, 0), 100);
    const increment = (target - start) / (duration / 16);
    let current = start;
    
    const timer = setInterval(() => {
      current += increment;
      
      if ((increment > 0 && current >= target) || (increment < 0 && current <= target)) {
        current = target;
        clearInterval(timer);
      }
      
      element.style.width = `${current}%`;
    }, 16);
  }

  /**

   * Shake animation for errors

   * @param {HTMLElement} element - Target element

   */
  static shake(element) {
    if (!element) return;
    
    element.style.animation = 'shake 0.5s ease';
    
    setTimeout(() => {
      element.style.animation = '';
    }, 500);
  }

  /**

   * Pulse animation

   * @param {HTMLElement} element - Target element

   * @param {number} duration - Duration in ms

   */
  static pulse(element, duration = 1000) {
    if (!element) return;
    
    element.style.animation = `pulse ${duration}ms ease`;
    
    setTimeout(() => {
      element.style.animation = '';
    }, duration);
  }

  /**

   * Typewriter effect

   * @param {HTMLElement} element - Target element

   * @param {string} text - Text to type

   * @param {number} speed - Typing speed in ms per character

   */
  static typewriter(element, text, speed = 50) {
    if (!element) return;
    
    element.textContent = '';
    let index = 0;
    
    const timer = setInterval(() => {
      if (index < text.length) {
        element.textContent += text.charAt(index);
        index++;
      } else {
        clearInterval(timer);
      }
    }, speed);
    
    return timer;
  }

  /**

   * Confetti effect (lightweight)

   * @param {Object} options - Confetti options

   */
  static confetti(options = {}) {
    const defaults = {
      particleCount: 50,
      spread: 70,
      origin: { y: 0.6 },
      colors: ['#2dd4bf', '#22d3ee', '#3b82f6']
    };
    
    const config = { ...defaults, ...options };
    const container = document.createElement('div');
    container.style.cssText = `

      position: fixed;

      inset: 0;

      pointer-events: none;

      z-index: 9999;

    `;
    document.body.appendChild(container);
    
    for (let i = 0; i < config.particleCount; i++) {
      const particle = document.createElement('div');
      const color = config.colors[Math.floor(Math.random() * config.colors.length)];
      const angle = Math.random() * config.spread - config.spread / 2;
      const velocity = Math.random() * 10 + 5;
      
      particle.style.cssText = `

        position: absolute;

        width: 8px;

        height: 8px;

        background: ${color};

        left: 50%;

        top: ${config.origin.y * 100}%;

        border-radius: 50%;

        animation: confetti 2s ease-out forwards;

        transform: rotate(${angle}deg) translateY(-${velocity}px);

      `;
      
      container.appendChild(particle);
    }
    
    setTimeout(() => container.remove(), 2000);
  }

  /**

   * Initialize all animations on page load

   */
  static init() {
    // Add ripple effect to buttons
    document.querySelectorAll('.btn-primary, .btn-gradient').forEach(button => {
      button.addEventListener('click', (e) => this.createRipple(e, button));
    });
    
    // Animate elements on scroll
    this.observeElements('.stat-card-enhanced, .glass-card', (element) => {
      this.animateEntrance(element, 'up');
    });
    
    // Add shake animation keyframes if not exists
    if (!document.querySelector('#ui-animations-styles')) {
      const style = document.createElement('style');
      style.id = 'ui-animations-styles';
      style.textContent = `

        @keyframes ripple {

          to {

            transform: scale(4);

            opacity: 0;

          }

        }

        

        @keyframes shake {

          0%, 100% { transform: translateX(0); }

          10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }

          20%, 40%, 60%, 80% { transform: translateX(5px); }

        }

        

        @keyframes confetti {

          0% {

            transform: translateY(0) rotate(0deg);

            opacity: 1;

          }

          100% {

            transform: translateY(100vh) rotate(720deg);

            opacity: 0;

          }

        }

      `;
      document.head.appendChild(style);
    }
  }
}

// Auto-initialize on DOM ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => UIAnimations.init());
} else {
  UIAnimations.init();
}

export default UIAnimations;