export default class BootScene extends Phaser.Scene {
  constructor() {
    super({ key: 'BootScene' });
  }

  create() {
    // 设置背景色
    this.cameras.main.setBackgroundColor('#000000');

    // 添加标题文本
    const title = this.add.text(this.sys.game.config.width / 2, 50, '测试场景菜单', {
      fontSize: '32px',
      fill: '#ffffff',
      fontFamily: 'Arial'
    }).setOrigin(0.5, 0.5);
    title.setScrollFactor(0); // 固定标题，不随滚动移动

    // 测试场景列表
    const testScenes = [
      { key: 'WeaponTestScene', name: '测试场景22：武器测试' },
      { key: 'CharacterClassTestScene', name: '测试场景21：角色类测试' },
      { key: 'MultiTouchTestScene', name: '测试场景20：多触摸测试' },
      { key: 'TestObjectsScene', name: '测试场景19：测试对象场景' },
      { key: 'TmpScene', name: '测试场景18：临时场景' },
      { key: 'FogOfWarTestScene', name: '测试场景17：迷雾系统测试' },
      { key: 'AttackSkillTestScene', name: '测试场景16：攻击技能测试' },
      { key: 'SkillTestScene', name: '测试场景15：技能移动效果测试' },
      { key: 'FarmingTestScene', name: '测试场景14：种田功能测试' },
      { key: 'CharacterAnimationTestScene', name: '测试场景13：角色动画测试' },
      { key: 'MapEditTestScene', name: '测试场景12：地图编辑测试' },
      { key: 'MapEditSinglePicTestScene', name: '测试场景11：地图编辑单瓦片图资源测试' },
      { key: 'ResourceTestScene', name: '测试场景10：资源包测试' },
      { key: 'ItemListTestScene', name: '测试场景9：物品列表菜单测试' },
      { key: 'InventoryTestScene', name: '测试场景8：背包系统测试' },
      { key: 'ItemTestScene', name: '测试场景7：物品系统测试' },
      { key: 'MiniMapTestScene', name: '测试场景6：小地图测试' },
      { key: 'AutoMovementTestScene', name: '测试场景5：移动更新逻辑' },
      { key: 'JoystickMovementTestScene', name: '测试场景4：虚拟摇杆控制' },
      { key: 'SelectionAndMovementTestScene', name: '测试场景3：单位选择与移动命令' },
      { key: 'TargetMovementTestScene', name: '测试场景2：目标点移动' },
      { key: 'KeyboardMovementTestScene', name: '测试场景1：相对移动（键盘控制）' },
      { key: 'GameScene', name: '返回主游戏场景' },
      { key: 'MenuScene', name: '返回菜单场景' }
    ];

    // 滚动容器配置
    const containerWidth = this.sys.game.config.width - 40;
    const containerHeight = this.sys.game.config.height - 150;
    const containerX = 20;
    const containerY = 100;
    
    // 创建滚动容器背景
    const scrollBackground = this.add.rectangle(
      this.sys.game.config.width / 2, 
      containerY + containerHeight / 2, 
      containerWidth, 
      containerHeight, 
      0x111111, 
      0.5
    );
    scrollBackground.setOrigin(0.5, 0.5);
    scrollBackground.setScrollFactor(0); // 固定背景，不随滚动移动

    // 创建滚动容器
    this.scrollContainer = this.add.container(containerX, containerY);
    
    // 按钮配置
    const columns = 2; // 2列布局
    const buttonWidth = (containerWidth - 30) / columns; // 两列按钮，留出间距
    const buttonHeight = 50;
    const buttonSpacing = 20; // 按钮间距
    const columnSpacing = 10; // 列间距
    
    // 创建按钮
    testScenes.forEach((scene, index) => {
      // 计算按钮位置（2列布局）
      const col = index % columns;
      const row = Math.floor(index / columns);
      const x = col * (buttonWidth + columnSpacing);
      const y = row * (buttonHeight + buttonSpacing);

      // 创建按钮背景
      const button = this.add.rectangle(
        x + buttonWidth / 2,
        y + buttonHeight / 2,
        buttonWidth,
        buttonHeight,
        0x333333
      ).setOrigin(0.5, 0.5);

      // 添加按钮文本
      const text = this.add.text(
        x + buttonWidth / 2,
        y + buttonHeight / 2,
        scene.name,
        {
          fontSize: '16px',
          fill: '#ffffff',
          fontFamily: 'Arial'
        }
      ).setOrigin(0.5, 0.5);
      text.setWordWrapWidth(buttonWidth - 20); // 文本自动换行

      // 使按钮可交互
      button.setInteractive({
        useHandCursor: true
      });

      // 添加点击事件
      button.on('pointerdown', () => {
        this.scene.start(scene.key);
      });

      // 添加悬停效果
      button.on('pointerover', () => {
        button.setFillStyle(0x555555);
      });

      button.on('pointerout', () => {
        button.setFillStyle(0x333333);
      });
      
      // 将按钮和文本添加到滚动容器
      this.scrollContainer.add(button);
      this.scrollContainer.add(text);
    });
    
    // 计算滚动容器的实际高度
    const rows = Math.ceil(testScenes.length / columns);
    const contentHeight = rows * (buttonHeight + buttonSpacing);
    
    // 添加滚动功能
    this.setupScrolling(contentHeight, containerHeight);
    
    // 添加滚动提示
    const scrollHint = this.add.text(
      this.sys.game.config.width / 2, 
      this.sys.game.config.height - 30, 
      '鼠标滚轮或触摸滑动滚动', 
      {
        fontSize: '14px',
        fill: '#aaaaaa',
        fontFamily: 'Arial'
      }
    ).setOrigin(0.5, 0.5);
    scrollHint.setScrollFactor(0); // 固定提示，不随滚动移动
  }
  
  /**
   * 设置滚动功能
   * @param {number} contentHeight - 内容高度
   * @param {number} containerHeight - 容器高度
   */
  setupScrolling(contentHeight, containerHeight) {
    // 只有当内容高度大于容器高度时才添加滚动
    if (contentHeight <= containerHeight) {
      return;
    }
    
    // 滚动位置
    this.scrollY = 0;
    // 最大滚动位置
    this.maxScrollY = contentHeight - containerHeight;
    // 容器初始Y位置
    const initialContainerY = this.scrollContainer.y;
    
    // 添加鼠标滚轮事件
    this.input.on('wheel', (pointer, gameObjects, deltaX, deltaY, deltaZ) => {
      // 计算新的滚动位置（向下滚动为正，应该增加 scrollY）
      this.scrollY += deltaY * 0.5; // 调整滚动速度
      
      // 限制滚动范围
      this.scrollY = Math.max(0, Math.min(this.scrollY, this.maxScrollY));
      
      // 应用滚动（容器Y = 初始Y - scrollY，确保向下滚动时容器向上移动）
      this.scrollContainer.setPosition(this.scrollContainer.x, initialContainerY - this.scrollY);
    });
    
    // 添加触摸滚动支持
    let isDragging = false;
    let lastY = 0;
    
    this.input.on('pointerdown', (pointer) => {
      isDragging = true;
      lastY = pointer.y;
    });
    
    this.input.on('pointermove', (pointer) => {
      if (isDragging) {
        const deltaY = pointer.y - lastY;
        
        // 计算新的滚动位置（手指向下移动时，应该增加 scrollY）
        this.scrollY += deltaY * 0.5; // 调整滚动速度
        
        // 限制滚动范围
        this.scrollY = Math.max(0, Math.min(this.scrollY, this.maxScrollY));
        
        // 应用滚动（容器Y = 初始Y - scrollY）
        this.scrollContainer.setPosition(this.scrollContainer.x, initialContainerY - this.scrollY);
        
        lastY = pointer.y;
      }
    });
    
    this.input.on('pointerup', () => {
      isDragging = false;
    });
    
    this.input.on('pointerout', () => {
      isDragging = false;
    });
  }
}