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

async function testUsagePage() {
    const browser = await chromium.launch({ headless: false });
    const page = await browser.newPage();
    
    // 监听网络请求
    const requests = [];
    page.on('request', request => {
        console.log(`🌐 请求: ${request.method()} ${request.url()}`);
        requests.push({
            method: request.method(),
            url: request.url(),
            headers: request.headers(),
            postData: request.postData()
        });
    });
    
    page.on('response', response => {
        console.log(`📨 响应: ${response.status()} ${response.url()}`);
    });
    
    try {            
        // 访问登录页面
        await page.goto('http://localhost:5173/login');
        await page.waitForTimeout(2000);
        
        // 登录
        console.log('🔑 开始登录...');
        await page.fill('input[placeholder="请输入用户名"]', 'admin');
        await page.fill('input[placeholder="请输入密码"]', '111111');
        await page.click('button[type="submit"]');
        await page.waitForTimeout(3000);
        
        console.log('✅ 登录完成，访问TG账号用途页面...');
        
        // 直接访问TG账号用途页面
        await page.goto('http://localhost:5173/account-manage/usage');
        await page.waitForTimeout(5000);
        
        // 检查页面内容
        const pageContent = await page.textContent('body');
        if (pageContent.includes('暂无数据')) {
            console.log('❌ 页面仍显示"暂无数据"');
        } else {
            console.log('✅ 页面显示了数据');
        }
        
        // 查找与accountUsage相关的请求
        const apiRequests = requests.filter(req => 
            req.url.includes('accountUsage') || req.url.includes('3002')
        );
        
        console.log('\n📊 API请求分析:');
        console.log(`总请求数: ${requests.length}`);
        console.log(`API相关请求: ${apiRequests.length}`);
        
        if (apiRequests.length > 0) {
            console.log('\n🎯 API请求详情:');
            apiRequests.forEach((req, index) => {
                console.log(`${index + 1}. ${req.method} ${req.url}`);
                if (req.postData) {
                    console.log(`   数据: ${req.postData}`);
                }
            });
        } else {
            console.log('⚠️  没有发现对API服务器的请求');
        }
        
        // 截图
        await page.screenshot({ path: '/Users/hahaha/telegram-management-system/usage-page-test.png' });
        console.log('📷 截图已保存: usage-page-test.png');
        
    } catch (error) {
        console.error('❌ 测试过程中出错:', error.message);
    } finally {
        await browser.close();
    }
}

testUsagePage();