#!/usr/bin/env node

/**
 * Playwright 姓名管理专项测试 - 重点检查姓名管理功能
 */

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

async function runNameManagementTest() {
    console.log('🎭 启动姓名管理专项测试...\n');

    let browser;
    let page;

    try {
        // 启动浏览器
        browser = await chromium.launch({ 
            headless: false, // 设置为false以便观察
            slowMo: 1000 // 减慢操作速度以便观察
        });
        
        const context = await browser.newContext({
            viewport: { width: 1280, height: 800 }
        });
        
        page = await context.newPage();

        // 设置请求监听，捕获API调用
        page.on('request', request => {
            const url = request.url();
            if (url.includes('/nameTemplate/') || url.includes('/firstname/') || url.includes('/lastname/')) {
                console.log(`📤 姓名API请求: ${request.method()} ${url}`);
            }
        });

        page.on('response', response => {
            const url = response.url();
            if (url.includes('/nameTemplate/') || url.includes('/firstname/') || url.includes('/lastname/')) {
                console.log(`📥 姓名API响应: ${response.status()} ${url}`);
            }
        });

        // 访问前端登录页面
        console.log('🌐 正在访问前端登录页面...');
        await page.goto('http://localhost:8891', { 
            waitUntil: 'networkidle',
            timeout: 15000 
        });
        console.log('✅ 前端页面加载成功');

        // 等待页面稳定
        await page.waitForTimeout(3000);

        // 查找登录表单
        console.log('🔍 查找登录表单...');
        const hasLoginForm = await page.$('form') !== null;
        const hasUsernameInput = await page.$('input[type="text"], input[placeholder*="用户"], input[placeholder*="账号"]') !== null;
        const hasPasswordInput = await page.$('input[type="password"], input[placeholder*="密码"]') !== null;
        
        console.log(`📝 登录表单检查:`);
        console.log(`   - 包含表单: ${hasLoginForm}`);
        console.log(`   - 包含用户名输入: ${hasUsernameInput}`);
        console.log(`   - 包含密码输入: ${hasPasswordInput}`);

        if (hasUsernameInput && hasPasswordInput) {
            try {
                console.log('🔐 尝试登录...');
                
                // 填写登录信息（使用系统默认admin账户）
                const usernameInput = await page.$('input[type="text"], input[placeholder*="用户"], input[placeholder*="账号"]');
                const passwordInput = await page.$('input[type="password"], input[placeholder*="密码"]');
                
                if (usernameInput && passwordInput) {
                    await usernameInput.fill('admin');
                    await passwordInput.fill('111111'); // 根据CLAUDE.md中的系统账号信息
                    
                    // 查找并点击登录按钮
                    const loginButton = await page.$('button[type="submit"], button:has-text("登录"), .login-btn, [class*="login"]');
                    if (loginButton) {
                        await loginButton.click();
                        console.log('✅ 点击登录按钮');
                        
                        // 等待登录完成
                        await page.waitForTimeout(5000);
                        
                        // 检查是否登录成功（通过URL变化或页面内容变化）
                        const currentUrl = page.url();
                        const isLoggedIn = !currentUrl.includes('login') && !currentUrl.includes('Login');
                        
                        if (isLoggedIn) {
                            console.log('✅ 登录成功！');
                            console.log(`📍 当前页面: ${currentUrl}`);
                            
                            // 截取登录后的页面
                            await page.screenshot({ 
                                path: 'after_login.png',
                                fullPage: true 
                            });
                            console.log('📸 登录后页面截图已保存: after_login.png');
                            
                            // 查找姓名管理相关的菜单项
                            console.log('\n🔍 查找姓名管理菜单...');
                            
                            // 等待菜单加载
                            await page.waitForTimeout(3000);
                            
                            // 查找包含"姓名"、"名字"、"firstname"、"lastname"的菜单项
                            const menuSelectors = [
                                'text=姓名管理',
                                'text=名字管理', 
                                'text=姓名',
                                'text=名字',
                                '[href*="firstname"]',
                                '[href*="lastname"]',
                                '[href*="name"]'
                            ];
                            
                            let menuFound = false;
                            
                            for (const selector of menuSelectors) {
                                try {
                                    const menuItem = await page.$(selector);
                                    if (menuItem) {
                                        console.log(`✅ 找到姓名相关菜单: ${selector}`);
                                        
                                        // 点击菜单项
                                        await menuItem.click();
                                        console.log('🖱️ 点击姓名管理菜单');
                                        
                                        // 等待页面加载
                                        await page.waitForTimeout(5000);
                                        
                                        // 检查页面内容
                                        const namePageUrl = page.url();
                                        console.log(`📍 姓名管理页面: ${namePageUrl}`);
                                        
                                        // 截取姓名管理页面
                                        await page.screenshot({ 
                                            path: 'name_management_page.png',
                                            fullPage: true 
                                        });
                                        console.log('📸 姓名管理页面截图已保存: name_management_page.png');
                                        
                                        // 检查页面数据
                                        const hasTable = await page.$('table') !== null;
                                        const hasAddButton = await page.$('button:has-text("添加"), .add-btn, [class*="add"]') !== null;
                                        const hasSearchInput = await page.$('input[type="text"], input[placeholder*="搜索"], input[placeholder*="姓"]') !== null;
                                        
                                        console.log(`📊 姓名管理页面内容:`);
                                        console.log(`   - 包含表格: ${hasTable}`);
                                        console.log(`   - 包含添加按钮: ${hasAddButton}`);
                                        console.log(`   - 包含搜索框: ${hasSearchInput}`);
                                        
                                        // 尝试测试添加功能
                                        if (hasAddButton) {
                                            console.log('\n🧪 测试添加姓名功能...');
                                            const addButton = await page.$('button:has-text("添加"), .add-btn, [class*="add"]');
                                            await addButton.click();
                                            
                                            // 等待弹窗或新页面
                                            await page.waitForTimeout(2000);
                                            
                                            // 检查是否有弹窗或表单
                                            const hasModal = await page.$('.modal, .dialog, .popup') !== null;
                                            const hasForm = await page.$('form') !== null;
                                            
                                            console.log(`   - 弹出添加窗口: ${hasModal || hasForm}`);
                                            
                                            if (hasModal || hasForm) {
                                                // 截取添加窗口
                                                await page.screenshot({ 
                                                    path: 'add_name_modal.png',
                                                    fullPage: true 
                                                });
                                                console.log('📸 添加姓名窗口截图已保存: add_name_modal.png');
                                            }
                                        }
                                        
                                        menuFound = true;
                                        break;
                                    }
                                } catch (error) {
                                    // 继续尝试下一个选择器
                                }
                            }
                            
                            if (!menuFound) {
                                console.log('❌ 未找到姓名管理菜单项');
                                
                                // 尝试查找所有菜单项
                                console.log('🔍 查找所有可用菜单项...');
                                const allMenus = await page.$$eval('a, .menu-item, [class*="menu"], li', elements => {
                                    return elements
                                        .filter(el => el.textContent && el.textContent.trim().length > 0)
                                        .map(el => ({
                                            text: el.textContent?.trim(),
                                            href: el.href || null,
                                            className: el.className
                                        }))
                                        .slice(0, 20); // 限制结果数量
                                });
                                
                                console.log('📋 可用菜单项:');
                                allMenus.forEach((menu, index) => {
                                    console.log(`   ${index + 1}. "${menu.text}" (href: ${menu.href})`);
                                });
                            }
                            
                        } else {
                            console.log('❌ 登录可能失败，检查页面状态...');
                            const pageContent = await page.$eval('body', el => el.textContent?.substring(0, 200));
                            console.log(`📄 页面内容: ${pageContent}...`);
                        }
                    } else {
                        console.log('❌ 未找到登录按钮');
                    }
                } else {
                    console.log('❌ 未找到用户名或密码输入框');
                }
            } catch (loginError) {
                console.log(`❌ 登录过程失败: ${loginError.message}`);
            }
        } else {
            console.log('❌ 未找到完整的登录表单');
        }

        // 等待观察
        await page.waitForTimeout(3000);

    } catch (error) {
        console.error('❌ 测试失败:', error.message);
    } finally {
        if (browser) {
            await browser.close();
        }
        console.log('\n🎭 姓名管理测试完成');
    }
}

// 运行测试
if (require.main === module) {
    runNameManagementTest()
        .catch(error => {
            console.error('❌ 测试运行失败:', error.message);
            process.exit(1);
        });
}

module.exports = runNameManagementTest;