// TransitionManager.js
// 过渡效果管理器

class TransitionManager {
  constructor(engine) {
    this.engine = engine;
    this.currentTransition = null;
    this.isTransitioning = false;
  }

  // 淡入淡出过渡
  fade(toScene, duration = 1000, options = {}) {
    if (this.isTransitioning) return;
    
    this.isTransitioning = true;
    
    // 创建过渡覆盖层
    const overlay = document.createElement('div');
    overlay.style.position = 'absolute';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = options.color || '#000000';
    overlay.style.opacity = '0';
    overlay.style.zIndex = '9999';
    overlay.style.pointerEvents = 'none';
    
    this.engine.stage.appendChild(overlay);
    
    // 淡出当前场景
    const fadeOutTween = this.engine.tween(overlay.style, duration / 2, 'easeInOutQuad')
      .to({ opacity: 1 })
      .onComplete(() => {
        // 切换场景
        this.engine.switchScene(toScene);
        
        // 淡入新场景
        const fadeInTween = this.engine.tween(overlay.style, duration / 2, 'easeInOutQuad')
          .to({ opacity: 0 })
          .onComplete(() => {
            // 移除覆盖层
            if (overlay.parentNode) {
              overlay.parentNode.removeChild(overlay);
            }
            this.isTransitioning = false;
            if (options.onComplete) options.onComplete();
          })
          .start();
      })
      .start();
    
    return this;
  }

  // 滑动过渡
  slide(toScene, direction = 'left', duration = 1000, options = {}) {
    if (this.isTransitioning) return;
    
    this.isTransitioning = true;
    
    // 获取当前场景和新场景的容器
    const currentStage = this.engine.stage;
    
    // 创建新场景容器
    const newStage = document.createElement('div');
    newStage.style.position = 'absolute';
    newStage.style.top = '0';
    newStage.style.left = '0';
    newStage.style.width = '100%';
    newStage.style.height = '100%';
    newStage.style.overflow = 'hidden';
    
    // 设置初始位置
    const stageWidth = this.engine.width;
    const stageHeight = this.engine.height;
    
    switch (direction) {
      case 'left':
        newStage.style.transform = `translateX(${stageWidth}px)`;
        break;
      case 'right':
        newStage.style.transform = `translateX(${-stageWidth}px)`;
        break;
      case 'up':
        newStage.style.transform = `translateY(${stageHeight}px)`;
        break;
      case 'down':
        newStage.style.transform = `translateY(${-stageHeight}px)`;
        break;
    }
    
    // 添加到舞台
    currentStage.parentNode.appendChild(newStage);
    
    // 创建新场景
    const newScene = this.engine.createScene(`temp_${Date.now()}`);
    // 这里需要实际实现场景内容的复制，简化处理
    
    // 滑动动画
    const slideTween = this.engine.tween(newStage.style, duration, 'easeInOutQuad')
      .to({ transform: 'translateX(0) translateY(0)' })
      .onComplete(() => {
        // 切换场景
        this.engine.switchScene(toScene);
        
        // 移除临时容器
        if (newStage.parentNode) {
          newStage.parentNode.removeChild(newStage);
        }
        
        this.isTransitioning = false;
        if (options.onComplete) options.onComplete();
      })
      .start();
    
    return this;
  }

  // 缩放过渡
  zoom(toScene, duration = 1000, options = {}) {
    if (this.isTransitioning) return;
    
    this.isTransitioning = true;
    
    // 创建过渡覆盖层
    const overlay = document.createElement('div');
    overlay.style.position = 'absolute';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = options.color || '#000000';
    overlay.style.transform = 'scale(0)';
    overlay.style.transformOrigin = 'center center';
    overlay.style.zIndex = '9999';
    overlay.style.pointerEvents = 'none';
    
    this.engine.stage.appendChild(overlay);
    
    // 缩放动画
    const zoomTween = this.engine.tween(overlay.style, duration, 'easeInOutQuad')
      .to({ transform: 'scale(1)' })
      .onComplete(() => {
        // 切换场景
        this.engine.switchScene(toScene);
        
        // 反向缩放
        overlay.style.transform = 'scale(1)';
        const reverseZoomTween = this.engine.tween(overlay.style, duration, 'easeInOutQuad')
          .to({ transform: 'scale(0)' })
          .onComplete(() => {
            // 移除覆盖层
            if (overlay.parentNode) {
              overlay.parentNode.removeChild(overlay);
            }
            this.isTransitioning = false;
            if (options.onComplete) options.onComplete();
          })
          .start();
      })
      .start();
    
    return this;
  }

  // 翻转过渡
  flip(toScene, duration = 1000, options = {}) {
    if (this.isTransitioning) return;
    
    this.isTransitioning = true;
    
    // 创建3D容器
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.width = '100%';
    container.style.height = '100%';
    container.style.perspective = '1000px';
    
    // 创建翻转面板
    const panel = document.createElement('div');
    panel.style.position = 'absolute';
    panel.style.width = '100%';
    panel.style.height = '100%';
    panel.style.transformStyle = 'preserve-3d';
    panel.style.transition = `transform ${duration}ms ease-in-out`;
    
    // 正面（当前场景）
    const front = document.createElement('div');
    front.style.position = 'absolute';
    front.style.width = '100%';
    front.style.height = '100%';
    front.style.backfaceVisibility = 'hidden';
    front.style.backgroundColor = options.color || '#000000';
    
    // 背面
    const back = document.createElement('div');
    back.style.position = 'absolute';
    back.style.width = '100%';
    back.style.height = '100%';
    back.style.backfaceVisibility = 'hidden';
    back.style.backgroundColor = options.color || '#000000';
    back.style.transform = 'rotateY(180deg)';
    
    panel.appendChild(front);
    panel.appendChild(back);
    container.appendChild(panel);
    this.engine.stage.appendChild(container);
    
    // 执行翻转
    setTimeout(() => {
      panel.style.transform = 'rotateY(180deg)';
      
      setTimeout(() => {
        // 切换场景
        this.engine.switchScene(toScene);
        
        // 反向翻转
        panel.style.transform = 'rotateY(0deg)';
        
        setTimeout(() => {
          // 移除容器
          if (container.parentNode) {
            container.parentNode.removeChild(container);
          }
          this.isTransitioning = false;
          if (options.onComplete) options.onComplete();
        }, duration);
      }, duration);
    }, 50);
    
    return this;
  }
}

export default TransitionManager;