// 随机光晕效果控制、Section Item动画控制和弹幕滚动效果控制
document.addEventListener('DOMContentLoaded', function() {


    $(document).on("click",".fixVidBtn",function(){
        $(".fixVideo").addClass($(this).attr("dataclass"));
        $(".fixVideo").fadeIn();
        $(".fixVideo video").attr("src",$(this).attr("datasrc"));
        $('.fixVideo video').trigger('play');
    });
    $(".fixVideoB .close").click(function(){
        $(".fixVideo").removeClass("videoHp");
        $(".fixVideo").removeClass("videoSp");
        $(".fixVideo").hide();
        $(".fixVideo video").attr("src","");
        $('.fixVideo video').trigger('pause');
    });
    $(".fixVideoB").click(function(){
        return false;
    });
    $(".fixVideoA").click(function(){
        $(".fixVideo").removeClass("videoHp");
        $(".fixVideo").removeClass("videoSp");
        $(".fixVideo").hide();
        $(".fixVideo video").attr("src","");
        $('.fixVideo video').trigger('pause');
    });

  // 🎭 弹幕滚动效果控制
  function initDanmuChatEffects() {
    const chatInfos = document.querySelectorAll('.kry-ai-section-chat-info');
    const chatSection = document.querySelector('.kry-ai-section-chat');

    if (!chatSection || !chatInfos.length) return;

    // 为每个聊天消息随机分配动画类型
    chatInfos.forEach((chatInfo, index) => {
      chatInfo.classList.add('danmu-active');
    });

    // 滚动性能优化
    let scrollTimer;
    window.addEventListener('scroll', function() {
      if (scrollTimer) {
        clearTimeout(scrollTimer);
      }

      // 滚动时暂时降低动画性能
      chatSection.style.willChange = 'transform';

      scrollTimer = setTimeout(() => {
        chatSection.style.willChange = 'auto';
      }, 150);
    });

    console.log('🎭 弹幕滚动效果已初始化');
  }

  // 🎯 Section Item 入场动画控制 - 简化版本
  function initSectionItemAnimations() {
    const sectionLists = document.querySelectorAll('.kry-ai-section-list');
    const animatedSections = new Set();

    // 触发动画的函数
    function animateSection(sectionList) {
      if (animatedSections.has(sectionList)) return;

      animatedSections.add(sectionList);
      const items = sectionList.querySelectorAll('.kry-ai-section-item');

      items.forEach((item, index) => {
        setTimeout(() => {
          item.classList.add('animate-in');

          // 第一个添加左滑效果，最后一个添加旋转效果
          if (index === 0) {
            item.classList.add('slide-left');
          } else if (index === items.length - 1 && items.length > 1) {
            item.classList.add('rotate-in');
          }

        }, index * 200); // 增加延迟时间，让效果更明显
      });
    }

    // 创建 Intersection Observer
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          animateSection(entry.target);
        }
      });
    }, {
      threshold: 0.2, // 提高阈值
      rootMargin: '0px 0px -100px 0px' // 更保守的margin
    });

    // 开始观察所有 section-list
    sectionLists.forEach((section, index) => {
      observer.observe(section);
    });
  }

  // 🎨 鼠标悬停特效增强
  function initHoverEffects() {
    const sectionItems = document.querySelectorAll('.kry-ai-section-item');

    sectionItems.forEach(item => {
      // 鼠标进入效果
      item.addEventListener('mouseenter', function() {
        // 添加光晕效果
        this.style.boxShadow = '0 15px 40px rgba(0, 105, 255, 0.2), 0 0 20px rgba(0, 105, 255, 0.1)';

        // 轻微的倾斜效果
        this.style.transform = 'translateY(-8px) scale(1.02) rotateX(2deg)';

        // 为相邻元素添加轻微反应
        const siblings = Array.from(item.parentNode.children);
        siblings.forEach(sibling => {
          if (sibling !== item && sibling.classList.contains('kry-ai-section-item')) {
            sibling.style.transform = 'scale(0.98)';
            sibling.style.opacity = '0.8';
          }
        });
      });

      // 鼠标离开效果
      item.addEventListener('mouseleave', function() {
        this.style.transform = '';
        this.style.boxShadow = '';

        // 恢复相邻元素
        const siblings = Array.from(item.parentNode.children);
        siblings.forEach(sibling => {
          sibling.style.transform = '';
          sibling.style.opacity = '';
        });
      });
    });
  }

  // 🌟 随机动画触发器
  function initRandomAnimations() {
    const sectionItems = document.querySelectorAll('.kry-ai-section-item');

    // 每隔一段时间为随机的 section-item 添加动画
    setInterval(() => {
      const randomItem = sectionItems[Math.floor(Math.random() * sectionItems.length)];
      const animations = ['pulse', 'wiggle', 'glow', 'bounce-small'];
      const randomAnimation = animations[Math.floor(Math.random() * animations.length)];

      randomItem.classList.add(`random-${randomAnimation}`);

      setTimeout(() => {
        randomItem.classList.remove(`random-${randomAnimation}`);
      }, 1000);
    }, 8000 + Math.random() * 10000); // 8-18秒随机间隔
  }

  // 💫 动态CSS样式注入
  function injectDynamicStyles() {
    const style = document.createElement('style');
    style.textContent = `
      /* 波纹效果动画 */
      @keyframes rippleEffect {
        to {
          transform: scale(2);
          opacity: 0;
        }
      }

      /* 随机动画效果 */
      .random-pulse {
        animation: randomPulse 1s ease-out;
      }

      .random-wiggle {
        animation: randomWiggle 0.8s ease-in-out;
      }

      .random-glow {
        animation: randomGlow 1.2s ease-out;
      }

      .random-bounce-small {
        animation: randomBounceSmall 0.6s ease-out;
      }

      @keyframes randomPulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(0, 105, 255, 0.3); }
        100% { transform: scale(1); }
      }

      @keyframes randomWiggle {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(1deg); }
        75% { transform: rotate(-1deg); }
      }

      @keyframes randomGlow {
        0% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); }
        50% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 30px rgba(0, 105, 255, 0.4); }
        100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); }
      }

      @keyframes randomBounceSmall {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
      }

      /* 动画完成状态 */
      .kry-ai-section-item.animate-in {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
      }

      /* 过渡效果增强 */
      .kry-ai-section-item {
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform, opacity, box-shadow;
      }

      /* 3D 变换优化 */
      .kry-ai-section-item:hover {
        transform-style: preserve-3d;
        perspective: 1000px;
      }

      /* 性能优化类 */
      .kry-ai-section-item.gpu-optimized {
        transform: translateZ(0);
        backface-visibility: hidden;
        will-change: transform;
      }
    `;
    document.head.appendChild(style);
  }

  // 🚀 初始化所有功能
  function initSectionItemFeatures() {
    // 为所有 section-item 添加GPU加速类
    const allItems = document.querySelectorAll('.kry-ai-section-item');
    allItems.forEach((item, index) => {
      item.classList.add('gpu-optimized');
      // 添加调试属性
      item.setAttribute('data-item-index', index);
    });

    // 初始化各种功能
    initSectionItemAnimations();
    initHoverEffects();
    initRandomAnimations();
    injectDynamicStyles();
  }

  // 🎬 初始化所有动画功能
  function initAllAnimations() {
    initSectionItemFeatures();
    initDanmuChatEffects();
  }

  // 启动所有动画功能
  initAllAnimations();


  // 页面可见性变化时的性能优化
  document.addEventListener('visibilitychange', function() {
    const glows = document.querySelectorAll('.random-dynamic-glow');
    if (document.hidden) {
      glows.forEach(glow => {
        glow.style.animationPlayState = 'paused';
      });
    } else {
      glows.forEach(glow => {
        glow.style.animationPlayState = 'running';
      });
    }
  });
});