#!/usr/bin/env node

/**
 * 完整演示新的统一智能姓名管理系统
 */

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

async function unifiedDemo() {
    console.log('🎯 演示全新的统一智能姓名管理系统...\n');

    let browser;
    let page;

    try {
        browser = await chromium.launch({ 
            headless: false,
            slowMo: 1500,
            devtools: false
        });
        
        const context = await browser.newContext({
            viewport: { width: 1600, height: 1000 }
        });
        
        page = await context.newPage();

        // 监听API调用
        page.on('request', request => {
            const url = request.url();
            if (url.includes('/nameTemplate/')) {
                console.log(`🔗 ${request.method()} ${url}`);
            }
        });

        page.on('response', response => {
            const url = response.url();
            if (url.includes('/nameTemplate/')) {
                console.log(`📡 ${response.status()} ${url}`);
            }
        });

        // ==================== 第1步：登录 ====================
        console.log('🚀 第1步：登录系统...');
        await page.goto('http://localhost:8891');
        await page.waitForLoadState('networkidle');
        
        await page.fill('input[type="text"]', 'admin');
        await page.fill('input[type="password"]', '111111');
        await page.click('button:has-text("登录")');
        await page.waitForLoadState('networkidle');
        
        console.log('✅ 登录成功');
        await page.screenshot({ path: 'unified_01_login.png', fullPage: true });
        
        // ==================== 第2步：访问新的统一姓名管理 ====================
        console.log('\n🎯 第2步：访问新的统一智能姓名管理系统...');
        await page.goto('http://localhost:8891/#/nameManage/unified');
        await page.waitForLoadState('networkidle');
        await page.waitForTimeout(5000);  // 等待系统状态加载
        
        console.log('✅ 进入统一姓名管理系统');
        await page.screenshot({ path: 'unified_02_main_interface.png', fullPage: true });
        
        // ==================== 第3步：检查系统状态面板 ====================
        console.log('\n📊 第3步：检查4层级生成系统状态...');
        
        const systemStatus = await page.evaluate(() => {
            // 检查生成器状态卡片
            const statusCards = document.querySelectorAll('.status-card');
            const generatorItems = document.querySelectorAll('.generator-item');
            const platformTags = document.querySelectorAll('.platform-tags .ivu-tag');
            const cultureTags = document.querySelectorAll('.culture-tags .ivu-tag');
            
            return {
                statusCardsCount: statusCards.length,
                generatorCount: generatorItems.length,
                platformCount: platformTags.length,
                cultureCount: cultureTags.length,
                hasGeneratePanel: !!document.querySelector('.generate-panel')
            };
        });
        
        console.log('✅ 系统状态面板分析：');
        console.log(`   📊 状态卡片: ${systemStatus.statusCardsCount}个`);
        console.log(`   🎯 生成器: ${systemStatus.generatorCount}个`);
        console.log(`   🌐 支持平台: ${systemStatus.platformCount}个`);
        console.log(`   🌍 支持文化: ${systemStatus.cultureCount}个`);
        console.log(`   🎲 智能生成面板: ${systemStatus.hasGeneratePanel ? '存在' : '不存在'}`);
        
        // ==================== 第4步：测试智能生成功能 ====================
        console.log('\n🎲 第4步：测试智能姓名生成功能...');
        
        // 设置生成参数
        const platformSelect = await page.locator('.generate-panel .ivu-select').first();
        if (await platformSelect.isVisible()) {
            await platformSelect.click();
            await page.waitForTimeout(500);
            await page.click('li:has-text("微信")');
            console.log('🔧 选择平台: 微信');
        }
        
        const cultureSelect = await page.locator('.generate-panel .ivu-select').nth(1);
        if (await cultureSelect.isVisible()) {
            await cultureSelect.click();
            await page.waitForTimeout(500);
            await page.click('li:has-text("中文")');
            console.log('🌍 选择文化: 中文');
        }
        
        // 点击生成按钮
        const generateBtn = await page.locator('button:has-text("生成姓名")');
        if (await generateBtn.isVisible()) {
            await generateBtn.click();
            console.log('🎯 触发智能生成...');
            await page.waitForTimeout(3000);
            
            await page.screenshot({ path: 'unified_03_generate_names.png', fullPage: true });
            
            // 检查生成结果
            const generateResults = await page.evaluate(() => {
                const resultItems = document.querySelectorAll('.name-result-item');
                return Array.from(resultItems).map(item => ({
                    displayName: item.querySelector('.name-display strong')?.textContent,
                    nameParts: item.querySelector('.name-parts')?.textContent,
                    tags: Array.from(item.querySelectorAll('.ivu-tag')).map(tag => tag.textContent)
                }));
            });
            
            if (generateResults.length > 0) {
                console.log('✅ 智能生成成功：');
                generateResults.forEach((result, index) => {
                    console.log(`   ${index + 1}. ${result.displayName} ${result.nameParts} [${result.tags.join(', ')}]`);
                });
            } else {
                console.log('⚠️  生成结果为空（可能系统配置未完成）');
            }
        }
        
        // ==================== 第5步：测试添加新模板功能 ====================
        console.log('\n➕ 第5步：测试添加姓名模板功能...');
        
        const addButton = await page.locator('button:has-text("添加姓名模板")');
        if (await addButton.isVisible()) {
            await addButton.click();
            await page.waitForTimeout(2000);
            console.log('🖱️ 打开添加模板弹窗');
            
            await page.screenshot({ path: 'unified_04_add_modal.png', fullPage: true });
            
            // 检查弹窗内容
            const modalInfo = await page.evaluate(() => {
                const modal = document.querySelector('.ivu-modal');
                if (!modal) return { hasModal: false };
                
                const inputs = modal.querySelectorAll('input');
                const selects = modal.querySelectorAll('.ivu-select');
                
                return {
                    hasModal: true,
                    title: modal.querySelector('.ivu-modal-header')?.textContent?.trim(),
                    inputCount: inputs.length,
                    selectCount: selects.length,
                    inputPlaceholders: Array.from(inputs).map(input => input.placeholder).filter(p => p)
                };
            });
            
            if (modalInfo.hasModal) {
                console.log('✅ 高级添加弹窗：');
                console.log(`   📝 标题: ${modalInfo.title}`);
                console.log(`   📝 输入框: ${modalInfo.inputCount}个`);
                console.log(`   📋 下拉选择: ${modalInfo.selectCount}个`);
                console.log(`   📋 字段: ${modalInfo.inputPlaceholders.join(', ')}`);
                
                // 填写一些示例数据
                const lastNameInput = await page.locator('input[placeholder*="姓氏"]');
                if (await lastNameInput.isVisible()) {
                    await lastNameInput.fill('智能');
                    console.log('✏️ 填写姓氏: 智能');
                }
                
                const firstNameInput = await page.locator('input[placeholder*="名字"]');
                if (await firstNameInput.isVisible()) {
                    await firstNameInput.fill('生成');
                    console.log('✏️ 填写名字: 生成');
                }
                
                const displayNameInput = await page.locator('input[placeholder*="显示名称"]');
                if (await displayNameInput.isVisible()) {
                    await displayNameInput.fill('智能生成');
                    console.log('✏️ 填写显示名: 智能生成');
                }
                
                await page.waitForTimeout(1000);
                await page.screenshot({ path: 'unified_05_filled_form.png', fullPage: true });
                
                // 取消而不是提交
                const cancelButton = await page.locator('button:has-text("取消")');
                if (await cancelButton.isVisible()) {
                    await cancelButton.click();
                    console.log('❌ 取消添加（演示完成）');
                }
            }
        }
        
        // ==================== 第6步：测试高级搜索功能 ====================
        console.log('\n🔍 第6步：测试高级搜索和过滤功能...');
        
        // 测试关键词搜索
        const keywordInput = await page.locator('input[placeholder*="搜索姓名"]');
        if (await keywordInput.isVisible()) {
            await keywordInput.fill('李');
            console.log('🔍 输入搜索关键词: 李');
            
            // 测试文化过滤
            const cultureFilter = await page.locator('form .ivu-select').nth(1);
            if (await cultureFilter.isVisible()) {
                await cultureFilter.click();
                await page.waitForTimeout(500);
                const cnOption = await page.locator('li:has-text("中文")');
                if (await cnOption.isVisible()) {
                    await cnOption.click();
                    console.log('🌍 选择文化过滤: 中文');
                }
            }
            
            const searchButton = await page.locator('button:has-text("搜索")');
            if (await searchButton.isVisible()) {
                await searchButton.click();
                await page.waitForTimeout(2000);
                console.log('🔍 执行高级搜索');
                
                await page.screenshot({ path: 'unified_06_advanced_search.png', fullPage: true });
                
                // 重置搜索
                const resetButton = await page.locator('button:has-text("重置")');
                if (await resetButton.isVisible()) {
                    await resetButton.click();
                    await page.waitForTimeout(1000);
                    console.log('🧹 重置搜索条件');
                }
            }
        }
        
        // ==================== 第7步：检查数据表格 ====================
        console.log('\n📋 第7步：检查增强型数据表格...');
        
        const tableInfo = await page.evaluate(() => {
            const table = document.querySelector('table');
            if (!table) return { hasTable: false };
            
            const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent?.trim());
            const rows = table.querySelectorAll('tbody tr');
            
            return {
                hasTable: true,
                headerCount: headers.length,
                headers: headers,
                rowCount: rows.length,
                hasAdvancedColumns: headers.includes('文化') && headers.includes('平台') && headers.includes('质量')
            };
        });
        
        if (tableInfo.hasTable) {
            console.log('✅ 增强型数据表格：');
            console.log(`   📊 列数: ${tableInfo.headerCount}个`);
            console.log(`   📋 列标题: ${tableInfo.headers.join(' | ')}`);
            console.log(`   📊 数据行: ${tableInfo.rowCount}条`);
            console.log(`   🎯 高级列: ${tableInfo.hasAdvancedColumns ? '已包含文化/平台/质量列' : '基础列'}`);
        }
        
        // ==================== 第8步：最终展示 ====================
        console.log('\n🎉 第8步：系统功能总览...');
        
        await page.screenshot({ path: 'unified_07_final_overview.png', fullPage: true });
        
        console.log('\n🏆 统一智能姓名管理系统演示完成！');
        console.log('\n📂 生成的演示截图：');
        console.log('   unified_01_login.png - 系统登录');  
        console.log('   unified_02_main_interface.png - 统一管理界面');
        console.log('   unified_03_generate_names.png - 智能生成功能');
        console.log('   unified_04_add_modal.png - 高级添加弹窗');
        console.log('   unified_05_filled_form.png - 详细表单');
        console.log('   unified_06_advanced_search.png - 高级搜索功能');
        console.log('   unified_07_final_overview.png - 最终系统总览');
        
        console.log('\n✨ 新统一系统特点：');
        console.log('   🎯 统一界面: 替代分离的姓氏/名字页面');
        console.log('   📊 系统状态: 实时显示4层级生成器状态');
        console.log('   🌐 多平台支持: 8个通讯平台适配');
        console.log('   🌍 多文化支持: 14种文化背景');
        console.log('   🎲 智能生成: 实时在线生成高质量姓名');
        console.log('   🔍 高级搜索: 多维度过滤和搜索');
        console.log('   📋 增强表格: 文化/平台/质量/权重等丰富信息');
        console.log('   ➕ 高级添加: 全面的模板配置选项');
        console.log('   🔧 智能路由: 旧页面隐藏，新页面为主入口');
        
        console.log('\n⏰ 浏览器将保持打开20秒供最终观察...');
        await page.waitForTimeout(20000);
        
    } catch (error) {
        console.error('❌ 演示失败:', error.message);
        if (page) {
            await page.screenshot({ path: 'unified_error.png', fullPage: true });
        }
    } finally {
        if (browser) {
            await browser.close();
        }
        console.log('🏁 统一系统演示结束');
    }
}

if (require.main === module) {
    unifiedDemo().catch(console.error);
}

module.exports = unifiedDemo;