const { chromium } = require('playwright');

(async () => {
  let browser;
  
  try {
    console.log('启动浏览器检查菜单错误...');
    browser = await chromium.launch({ 
      headless: false,
      slowMo: 50
    });
    
    const context = await browser.newContext({
      viewport: { width: 1920, height: 1080 }
    });
    
    const page = await context.newPage();
    
    // 监听控制台错误
    const errors = [];
    page.on('console', msg => {
      if (msg.type() === 'error') {
        const text = msg.text();
        errors.push(text);
        console.log('[控制台错误]', text);
      }
    });
    
    // 监听页面错误
    page.on('pageerror', error => {
      console.log('[页面错误]', error.message);
      errors.push(error.message);
    });
    
    console.log('\n1. 访问登录页面...');
    await page.goto('http://localhost:5173/', { waitUntil: 'networkidle' });
    await page.waitForTimeout(1000);
    
    console.log('\n2. 执行登录...');
    await page.fill('[name="username"]', 'admin');
    await page.fill('[name="password"]', '111111');
    await page.click('button:has-text("登录")');
    await page.waitForTimeout(2000);
    
    console.log('\n3. 检查菜单状态...');
    
    // 安全地检查Vue应用
    const appStatus = await page.evaluate(() => {
      try {
        // 查找Vue应用
        let app = null;
        if (window.__VUE_APP__) {
          app = window.__VUE_APP__;
        } else if (window.app) {
          app = window.app;
        } else {
          const appEl = document.querySelector('#app');
          if (appEl && appEl.__vue_app__) {
            app = appEl.__vue_app__;
          }
        }
        
        if (!app) {
          return { error: 'Vue应用未找到' };
        }
        
        // 检查Pinia
        if (!app._context || !app._context.provides || !app._context.provides.pinia) {
          return { error: 'Pinia未初始化' };
        }
        
        const pinia = app._context.provides.pinia;
        const stores = pinia._s;
        
        if (!stores || stores.size === 0) {
          return { error: 'Pinia stores为空' };
        }
        
        // 查找access store
        let accessStore = null;
        stores.forEach(store => {
          if (store.$id === 'core-access' || (store.accessMenus !== undefined)) {
            accessStore = store;
          }
        });
        
        if (!accessStore) {
          return { error: 'Access store未找到' };
        }
        
        return {
          success: true,
          storeId: accessStore.$id,
          accessMenus: accessStore.accessMenus,
          menuCount: accessStore.accessMenus?.length || 0,
          isAccessChecked: accessStore.isAccessChecked,
          accessCodes: accessStore.accessCodes,
          accessToken: !!accessStore.accessToken
        };
      } catch (err) {
        return { error: err.message };
      }
    });
    
    console.log('Vue应用状态:', JSON.stringify(appStatus, null, 2));
    
    // 检查DOM中的菜单
    const domStatus = await page.evaluate(() => {
      const result = {
        menuContainers: [],
        menuItems: []
      };
      
      // 查找所有可能的菜单容器
      const selectors = [
        '.ant-menu',
        '.ant-layout-sider',
        '[class*="menu"]',
        '[class*="sidebar"]',
        'aside'
      ];
      
      selectors.forEach(selector => {
        const elements = document.querySelectorAll(selector);
        elements.forEach(el => {
          if (el.offsetWidth > 0 || el.offsetHeight > 0) {
            result.menuContainers.push({
              selector,
              className: el.className,
              id: el.id,
              visible: el.offsetWidth > 0 && el.offsetHeight > 0,
              childCount: el.children.length
            });
          }
        });
      });
      
      // 查找菜单项
      const menuItems = document.querySelectorAll('.ant-menu-item, .ant-menu-submenu');
      menuItems.forEach(item => {
        result.menuItems.push({
          text: item.textContent,
          className: item.className,
          visible: item.offsetWidth > 0 && item.offsetHeight > 0
        });
      });
      
      return result;
    });
    
    console.log('\nDOM状态:', JSON.stringify(domStatus, null, 2));
    
    // 检查路由状态
    const routerStatus = await page.evaluate(() => {
      try {
        const app = window.__VUE_APP__ || window.app || document.querySelector('#app')?.__vue_app__;
        if (!app) return { error: '无法访问Vue应用' };
        
        const router = app._context.provides.$router;
        if (!router) return { error: '路由器未找到' };
        
        return {
          currentRoute: router.currentRoute.value.path,
          routes: router.getRoutes().map(r => ({
            path: r.path,
            name: r.name,
            meta: r.meta
          }))
        };
      } catch (err) {
        return { error: err.message };
      }
    });
    
    console.log('\n路由状态:', JSON.stringify(routerStatus, null, 2));
    
    // 尝试点击一个特定位置看看有没有反应
    console.log('\n4. 尝试点击侧边栏区域...');
    await page.click('aside', { position: { x: 100, y: 200 } }).catch(() => {
      console.log('无法点击侧边栏');
    });
    
    await page.waitForTimeout(1000);
    
    // 总结
    console.log('\n\n=== 检查总结 ===');
    if (errors.length > 0) {
      console.log('发现以下错误:');
      errors.forEach((err, i) => console.log(`${i + 1}. ${err}`));
    } else {
      console.log('没有捕获到明显的JavaScript错误');
    }
    
    // 截图
    await page.screenshot({ path: 'test-screenshots/menu-debug.png', fullPage: true });
    
    console.log('\n保持浏览器打开，按F12查看开发者工具...');
    await new Promise(() => {});
    
  } catch (error) {
    console.error('脚本错误:', error);
    if (browser) {
      await browser.close();
    }
  }
})();