#!/usr/bin/env node

/**
 * Dayjs 错误检测工具
 * 专门用于捕获和显示 'date4.locale is not a function' 错误
 */

console.log('=============================================');
console.log('          Dayjs 错误检测工具');
console.log('=============================================\n');

const { spawn } = require('child_process');
const fs = require('fs');

// 检查浏览器控制台错误
function checkBrowserConsole() {
    console.log('[检测] 检查浏览器控制台错误...');
    console.log('请打开浏览器并访问: http://127.0.0.1:3002/date-picker-test');
    console.log('然后按 F12 打开开发者工具，查看控制台是否有错误信息');
    console.log('特别注意: TypeError: date4.locale is not a function');
}

// 检查构建日志中的错误
function checkBuildLogs() {
    console.log('\n[检测] 检查构建日志...');
    
    // 尝试读取可能的错误日志文件
    const logFiles = [
        'node_modules/.vite/deps/ant-design-vue.js',
        'node_modules/.vite/deps/chunk-*.js'
    ];
    
    logFiles.forEach(file => {
        if (fs.existsSync(file)) {
            console.log(`检查文件: ${file}`);
            try {
                const content = fs.readFileSync(file, 'utf8');
                if (content.includes('date4.locale') || content.includes('locale is not a function')) {
                    console.log(`⚠️  在 ${file} 中找到相关代码`);
                    
                    // 查找错误相关的代码行
                    const lines = content.split('\n');
                    lines.forEach((line, index) => {
                        if (line.includes('date4.locale') || line.includes('locale is not a function')) {
                            console.log(`  第 ${index + 1} 行: ${line.trim()}`);
                        }
                    });
                }
            } catch (error) {
                // 忽略读取错误
            }
        }
    });
}

// 创建实时错误监控页面
function createErrorMonitorPage() {
    const htmlContent = `<!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: #fff; }
        .container { max-width: 1000px; margin: 0 auto; }
        h1 { color: #ff4d4f; text-align: center; }
        .panel { background: #fff7e6; border: 2px solid #ffd591; border-radius: 8px; padding: 20px; margin: 20px 0; }
        .error { color: #ff4d4f; font-weight: bold; }
        .success { color: #52c41a; }
        .step { margin: 15px 0; padding: 10px; background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 4px; }
        code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', monospace; }
        .console { background: #000; color: #00ff00; padding: 15px; border-radius: 4px; font-family: 'Courier New', monospace; height: 300px; overflow-y: auto; margin: 20px 0; }
        .btn { background: #1890ff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin: 5px; }
        .btn:hover { background: #40a9ff; }
        .btn-error { background: #ff4d4f; }
        .btn-error:hover { background: #ff7875; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 Dayjs 错误实时监控</h1>
        
        <div class="panel">
            <h2>当前错误状态: <span id="error-status" class="error">检测中...</span></h2>
            <p>这个页面帮助您实时监控 'date4.locale is not a function' 错误</p>
        </div>
        
        <div class="step">
            <h3>1. 手动触发错误检测</h3>
            <button class="btn" onclick="testDatePicker()">测试日期选择器</button>
            <button class="btn btn-error" onclick="forceError()">强制触发错误</button>
        </div>
        
        <div class="step">
            <h3>2. 浏览器控制台输出</h3>
            <div class="console" id="console-output">
                > 等待控制台输出...
                > 请按 F12 打开开发者工具查看详细错误
            </div>
        </div>
        
        <div class="step">
            <h3>3. 错误信息</h3>
            <div id="error-info">
                <p>尚未检测到错误</p>
            </div>
        </div>
        
        <div class="step">
            <h3>4. 修复建议</h3>
            <div id="fix-suggestions">
                <p>如果检测到错误，修复建议将显示在这里</p>
                <ul>
                    <li>检查 main.js 中的 dayjs 配置</li>
                    <li>确认使用了 <code>dayjs.locale('zh-cn')</code></li>
                    <li>验证 ConfigProvider 配置正确</li>
                </ul>
            </div>
        </div>
    </div>
    
    <script>
        // 监听控制台错误
        const originalError = console.error;
        const originalLog = console.log;
        const consoleOutput = document.getElementById('console-output');
        const errorInfo = document.getElementById('error-info');
        const errorStatus = document.getElementById('error-status');
        const fixSuggestions = document.getElementById('fix-suggestions');
        
        // 重写 console 方法以捕获输出
        console.error = function(...args) {
            originalError.apply(console, args);
            addToConsole('ERROR', args);
            checkForDate4LocaleError(args);
        };
        
        console.log = function(...args) {
            originalLog.apply(console, args);
            addToConsole('LOG', args);
        };
        
        function addToConsole(type, args) {
            const message = args.map(arg => 
                typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
            ).join(' ');
            
            consoleOutput.innerHTML += `\n${type}: ${message}`;
            consoleOutput.scrollTop = consoleOutput.scrollHeight;
        }
        
        function checkForDate4LocaleError(args) {
            const errorMessage = args.join(' ');
            if (errorMessage.includes('date4.locale') || errorMessage.includes('locale is not a function')) {
                errorStatus.textContent = '❌ 检测到错误!';
                errorStatus.className = 'error';
                
                errorInfo.innerHTML = `
                    <p class="error">⚠️ 检测到目标错误!</p>
                    <p><strong>错误信息:</strong> ${errorMessage}</p>
                    <p><strong>错误类型:</strong> TypeError</p>
                    <p><strong>发生时间:</strong> ${new Date().toLocaleString()}</p>
                `;
                
                fixSuggestions.innerHTML = `
                    <p class="error">🚨 需要立即修复!</p>
                    <ol>
                        <li>检查 main.js 中的 dayjs 配置是否正确</li>
                        <li>确认使用了 <code>dayjs.locale('zh-cn')</code> 而不是 <code>dayjs.locale(zhCN)</code></li>
                        <li>验证 ConfigProvider 中的 dateFormatter 设置为 'dayjs'</li>
                        <li>确保 getDayjsInstance 返回正确的 dayjs 实例</li>
                        <li>重启前端服务: <code>npm run dev</code></li>
                    </ol>
                `;
            }
        }
        
        function testDatePicker() {
            console.log('开始测试日期选择器...');
            
            // 尝试访问日期选择器组件
            try {
                // 这里模拟访问日期选择器的操作
                console.log('正在加载日期选择器组件...');
                
                // 延迟执行以模拟用户操作
                setTimeout(() => {
                    console.log('日期选择器组件加载完成');
                    console.log('尝试使用日期选择器功能...');
                }, 1000);
                
            } catch (error) {
                console.error('测试日期选择器时发生错误:', error);
            }
        }
        
        function forceError() {
            console.log('尝试强制触发错误...');
            
            // 尝试访问可能不存在的属性来触发错误
            try {
                // 模拟 Ant Design Vue 内部可能出现的错误
                const fakeDate4 = { locale: undefined };
                if (typeof fakeDate4.locale !== 'function') {
                    throw new TypeError('date4.locale is not a function');
                }
            } catch (error) {
                console.error('强制触发的错误:', error);
            }
        }
        
        // 页面加载时自动开始监控
        console.log('Dayjs 错误监控已启动');
        console.log('请访问日期选择器测试页面: http://127.0.0.1:3002/date-picker-test');
        console.log('然后操作日期选择器组件来检测错误');
    </script>
</body>
</html>`;
    
    fs.writeFileSync('./public/error_monitor.html', htmlContent);
    console.log('\n[监控页面] 已创建错误监控页面: public/error_monitor.html');
    console.log('[监控页面] 请访问: http://127.0.0.1:3002/error_monitor.html');
}

// 运行检测
console.log('开始检测 Dayjs 错误...\n');
checkBrowserConsole();
checkBuildLogs();
createErrorMonitorPage();

console.log('\n=============================================');
console.log('🎯 下一步操作:');
console.log('1. 访问 http://127.0.0.1:3002/error_monitor.html');
console.log('2. 打开浏览器开发者工具 (F12)');
console.log('3. 访问 http://127.0.0.1:3002/date-picker-test');
console.log('4. 操作日期选择器组件');
console.log('5. 查看控制台是否有错误信息');
console.log('=============================================');