#!/usr/bin/env node

/**
 * ES模块版本的Dayjs Locale测试工具
 * 专为type: module的项目环境设计
 */

console.log('=============================================');
console.log('          ES模块版本 Dayjs Locale 测试工具');
console.log('=============================================\n');

// 使用异步函数来处理ES模块的动态导入
async function runTests() {
    try {
        // 检查项目配置
        await checkProjectConfig();
        
        // 直接在浏览器环境中测试的说明
        console.log('\n[浏览器测试指南]');
        console.log('由于这是ES模块项目，无法在Node.js中直接测试浏览器端的dayjs集成');
        console.log('请在浏览器中打开以下链接进行直接测试:');
        console.log('1. http://127.0.0.1:3002/dayjs_test.html - 综合测试页面');
        console.log('2. http://127.0.0.1:3002/date-picker-test - 日期选择器测试页面');
        
        // 创建快速测试命令
        createQuickTestScript();
        
        // 最终建议
        console.log('\n=============================================');
        console.log('🎯 快速修复建议');
        console.log('=============================================');
        console.log('1. 请确保main.js中的配置完全正确:');
        console.log('   - import dayjs from \'dayjs\'');
        console.log('   - import \'dayjs/locale/zh-cn\'');
        console.log('   - dayjs.locale(\'zh-cn\')  // 注意使用字符串\'zh-cn\'');
        console.log('   - ConfigProvider中设置dateFormatter: \'dayjs\'');
        console.log('   - ConfigProvider中配置getDayjsInstance返回已配置的dayjs');
        console.log('2. 重新安装依赖: npm install');
        console.log('3. 重启前端服务: npm run dev');
        console.log('4. 在浏览器中验证测试页面');
        console.log('=============================================');
        
        process.exit(0);
    } catch (error) {
        console.error('\n❌ 测试过程中发生错误:', error.message);
        process.exit(1);
    }
}

// 检查项目配置
async function checkProjectConfig() {
    try {
        // 使用fs/promises
        const fs = (await import('fs/promises')).default;
        
        // 读取package.json
        const packageJsonContent = await fs.readFile('./package.json', 'utf8');
        const packageJson = JSON.parse(packageJsonContent);
        
        console.log('[项目配置检查]');
        console.log(`- 项目类型: ${packageJson.type || 'commonjs'}`);
        console.log(`- dayjs版本: ${packageJson.dependencies.dayjs || '未安装'}`);
        console.log(`- antd版本: ${packageJson.dependencies['ant-design-vue'] || '未安装'}`);
        
        // 读取main.js检查配置
        const mainJsContent = await fs.readFile('./src/main.js', 'utf8');
        
        console.log('\n[main.js配置检查]');
        
        // 检查dayjs导入
        const hasDayjsImport = mainJsContent.includes('import dayjs from');
        const hasZhCnImport = mainJsContent.includes('zh-cn');
        const hasLocaleConfig = mainJsContent.includes("dayjs.locale('zh-cn')") || 
                             mainJsContent.includes('dayjs.locale(zhCN)');
        const hasConfigProvider = mainJsContent.includes('getDayjsInstance');
        
        console.log(`- dayjs导入: ${hasDayjsImport ? '✅ 存在' : '❌ 缺失'}`);
        console.log(`- 中文语言包导入: ${hasZhCnImport ? '✅ 存在' : '❌ 缺失'}`);
        console.log(`- locale配置: ${hasLocaleConfig ? '✅ 存在' : '❌ 缺失'}`);
        console.log(`- ConfigProvider配置: ${hasConfigProvider ? '✅ 存在' : '❌ 缺失'}`);
        
        // 检查是否使用了正确的locale配置格式
        const hasCorrectLocaleFormat = mainJsContent.includes("dayjs.locale('zh-cn')");
        if (hasLocaleConfig && !hasCorrectLocaleFormat) {
            console.log('⚠️ 警告: dayjs.locale可能使用了不正确的格式，应该是dayjs.locale(\'zh-cn\')');
        }
        
        // 检查getDayjsInstance配置
        const hasGetDayjsInstance = mainJsContent.includes('getDayjsInstance');
        if (hasGetDayjsInstance) {
            console.log('- getDayjsInstance配置: ✅ 存在');
        } else {
            console.log('- getDayjsInstance配置: ❌ 缺失，这是修复错误的关键配置');
        }
        
    } catch (error) {
        console.log(`[配置检查] 警告: 无法完全检查配置: ${error.message}`);
    }
}

// 创建快速测试脚本
async function createQuickTestScript() {
    try {
        const fs = (await import('fs/promises')).default;
        
        const quickTestContent = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dayjs 错误修复验证</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
        .container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        h1 { color: #1890ff; }
        .step { margin-bottom: 20px; padding: 15px; border-left: 4px solid #1890ff; background-color: #f0f7ff; }
        .success { color: #52c41a; }
        .error { color: #ff4d4f; }
        .warning { color: #faad14; }
        code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; font-family: monospace; }
        .btn { background: #1890ff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; }
        .btn:hover { background: #40a9ff; }
        .result { margin-top: 20px; padding: 20px; background: #f9f9f9; border-radius: 4px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Dayjs 错误修复验证</h1>
        <p>这个工具将帮助您验证 'date4.locale is not a function' 错误是否已修复</p>
        
        <div class="step">
            <h3>1. 验证前端服务状态</h3>
            <p>确保前端服务已在 <code>http://127.0.0.1:3002/</code> 启动</p>
        </div>
        
        <div class="step">
            <h3>2. 运行修复检查</h3>
            <button class="btn" onclick="checkFix()">运行修复检查</button>
        </div>
        
        <div id="result" class="result">
            <h3>检查结果将显示在这里</h3>
        </div>
        
        <div class="step">
            <h3>3. 最终验证</h3>
            <p>请点击以下链接进行最终验证:</p>
            <ul>
                <li><a href="/date-picker-test" target="_blank">日期选择器测试页面</a></li>
                <li><a href="/dayjs_test.html" target="_blank">Dayjs 综合测试页面</a></li>
            </ul>
        </div>
    </div>
    
    <script>
        function checkFix() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '<h3>正在检查修复情况...</h3>';
            
            // 检查浏览器控制台是否有错误
            console.log('开始检查 date4.locale is not a function 错误修复情况');
            
            // 创建临时iframe加载应用
            const iframe = document.createElement('iframe');
            iframe.src = '/';
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            
            iframe.onload = function() {
                setTimeout(() => {
                    try {
                        // 尝试从iframe中获取dayjs实例
                        const iframeWindow = iframe.contentWindow;
                        
                        // 构建结果HTML
                        let resultHTML = `
                            <h3>修复检查结果</h3>
                            <p><strong>✅ 前端服务已成功启动</strong></p>
                            <p>请手动访问以下链接验证日期选择器功能:</p>
                            <ul>
                                <li><a href="/date-picker-test" target="_blank">/date-picker-test</a> - 直接测试日期选择器组件</li>
                                <li><a href="/dayjs_test.html" target="_blank">/dayjs_test.html</a> - 详细测试dayjs功能</li>
                            </ul>
                            <p class="warning">注意: 如果日期选择器仍然报错，请检查main.js中的配置是否完全正确</p>
                        `;
                        
                        resultDiv.innerHTML = resultHTML;
                    } catch (error) {
                        resultDiv.innerHTML = `
                            <h3 class="error">检查失败</h3>
                            <p>错误: ${error.message}</p>
                            <p>请确保前端服务已正确启动</p>
                        `;
                    } finally {
                        document.body.removeChild(iframe);
                    }
                }, 2000);
            };
        }
    </script>
</body>
</html>`;
        
        await fs.writeFile('./public/quick_fix_check.html', quickTestContent);
        console.log('\n[测试工具创建]');
        console.log('已创建快速修复检查页面: public/quick_fix_check.html');
        console.log('请访问: http://127.0.0.1:3002/quick_fix_check.html');
    } catch (error) {
        console.log(`[测试工具创建] 无法创建快速测试页面: ${error.message}`);
    }
}

// 运行测试
runTests().catch(error => {
    console.error('测试运行失败:', error);
    process.exit(1);
});