@Component
public class CpuSampler {

    private final ScheduledExecutorService executor =
            Executors.newSingleThreadScheduledExecutor();

    private final Map<String, AtomicInteger> stackCount = new ConcurrentHashMap<>();

    @PostConstruct
    public void start() {
        executor.scheduleAtFixedRate(this::sample, 0, 50, TimeUnit.MILLISECONDS);
    }

    private void sample() {
        ThreadMXBean threadMXBean = ManagementFactory.getThreadMXBean();
        for (long tid : threadMXBean.getAllThreadIds()) {
            ThreadInfo info = threadMXBean.getThreadInfo(tid, Integer.MAX_VALUE);
            if (info == null) continue;

            StringBuilder sb = new StringBuilder();
            for (StackTraceElement frame : info.getStackTrace()) {
                sb.append(frame.getClassName())
                  .append(".")
                  .append(frame.getMethodName())
                  .append(";");
            }
            String stackLine = sb.toString();
            stackCount.computeIfAbsent(stackLine, k -> new AtomicInteger(0)).incrementAndGet();
        }
    }

    public Map<String, AtomicInteger> getStackCount() {
        return stackCount;
    }
}

@RestController
public class FlameGraphController {

    @Autowired
    private CpuSampler sampler;

    @GetMapping("/flamegraph")
    public String getFlameGraphData() {
        StringBuilder sb = new StringBuilder();
        sampler.getStackCount().forEach((stack, count) -> {
            // flamegraph 的輸入格式： method1;method2;method3 count
            sb.append(stack).append(" ").append(count.get()).append("\n");
        });
        return sb.toString();
    }
}

<script>
    let flameChart = null;
    let flameGraphFactory = null; // 添加全局變量
    let samplingEnabled = false;

    // 初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 等待一段時(shí)間確保庫(kù)完全加載
        setTimeout(function() {
            console.log('檢查庫(kù)加載狀態(tài)...');
            console.log('d3:', typeof d3);
            console.log('flamegraph:', typeof flamegraph);
            console.log('d3.flamegraph:', typeof (d3 && d3.flamegraph));
            console.log('window對(duì)象上的flame相關(guān)屬性:', Object.keys(window).filter(key => key.toLowerCase().includes('flame')));
            console.log('d3對(duì)象的屬性:', d3 ? Object.keys(d3).filter(key => key.toLowerCase().includes('flame')) : 'd3未定義');
            
            if (typeof d3 === 'undefined') {
                showError('D3.js庫(kù)未加載成功');
                return;
            }
            
            // 嘗試不同的API訪問(wèn)方式
            if (typeof flamegraph !== 'undefined') {
                console.log('使用全局flamegraph函數(shù)');
                flameGraphFactory = flamegraph;
            } else if (d3 && typeof d3.flamegraph !== 'undefined') {
                console.log('使用d3.flamegraph函數(shù)');
                flameGraphFactory = d3.flamegraph;
            } else if (d3 && typeof d3.flameGraph !== 'undefined') {
                console.log('使用d3.flameGraph函數(shù)');
                flameGraphFactory = d3.flameGraph;
            } else if (typeof window.flamegraph !== 'undefined') {
                console.log('使用window.flamegraph函數(shù)');
                flameGraphFactory = window.flamegraph;
            } else if (window.flamegraph && window.flamegraph.flamegraph) {
                console.log('使用window.flamegraph.flamegraph函數(shù)');
                flameGraphFactory = window.flamegraph.flamegraph;
            } else {
                console.error('未找到flamegraph函數(shù)，可用的全局變量:', Object.keys(window).filter(k => k.includes('flame')));
                showError('d3-flame-graph庫(kù)加載成功但API不匹配');
                return;
            }
            
            if (flameGraphFactory) {
                try {
                    initFlameGraph(flameGraphFactory);
                } catch (e) {
                    console.error('初始化火焰圖失敗:', e);
                    showError('火焰圖初始化失敗: ' + e.message);
                }
            }
            
            updateStatus();
            
            // 綁定事件
            document.getElementById('refreshBtn').onclick = refreshFlameGraph;
            document.getElementById('enableBtn').onclick = enableSampling;
            document.getElementById('disableBtn').onclick = disableSampling;
            document.getElementById('clearBtn').onclick = clearData;
            document.getElementById('debugBtn').onclick = showDebugInfo;
            document.getElementById('rawDataBtn').onclick = showRawData;
            
            // 自動(dòng)刷新?tīng)顟B(tài)
            setInterval(updateStatus, 5000);
        }, 1000);
    });

    function initFlameGraph(flameGraphFactory) {
        console.log('開(kāi)始初始化火焰圖，工廠函數(shù):', flameGraphFactory);
        
        try {
            // 使用d3-flame-graph v4的正確API
            flameChart = flameGraphFactory()
                .width(Math.max(960, window.innerWidth - 80))
                .cellHeight(18)
                .transitionDuration(750)
                .minFrameSize(1)
                .sort(true);
                
            console.log('火焰圖初始化成功，實(shí)例:', flameChart);
        } catch (e) {
            console.error('火焰圖初始化過(guò)程中出錯(cuò):', e);
            throw e;
        }
    }

    async function updateStatus() {
        try {
            const response = await fetch('/api/sampling/status');
            const data = await response.json();
            
            samplingEnabled = data.enabled;
            const statusElement = document.getElementById('status');
            const dataCountElement = document.getElementById('dataCount');
            
            if (samplingEnabled) {
                statusElement.textContent = '采樣運(yùn)行中';
                statusElement.className = 'status enabled';
            } else {
                statusElement.textContent = '采樣已停止';
                statusElement.className = 'status disabled';
            }
            
            dataCountElement.textContent = `數(shù)據(jù)量: ${data.stackCountSize}`;
        } catch (error) {
            console.error('Error updating status:', error);
        }
    }

    async function refreshFlameGraph() {
        const loadingElement = document.getElementById('loading');
        const noDataElement = document.getElementById('noData');
        const chartElement = document.getElementById('chart');
        
        loadingElement.style.display = 'block';
        noDataElement.style.display = 'none';
        chartElement.innerHTML = '';
        
        try {
            const response = await fetch('/api/flamegraph');
            const data = await response.text();
            
            loadingElement.style.display = 'none';
            
            if (!data.trim() || data.trim().startsWith('#')) {
                noDataElement.style.display = 'block';
                return;
            }
            
            // 檢查火焰圖是否已經(jīng)初始化
            if (!flameChart) {
                showError('火焰圖未初始化，請(qǐng)刷新頁(yè)面重試');
                return;
            }
            
            try {
                console.log('原始數(shù)據(jù)長(zhǎng)度:', data.length);
                console.log('原始數(shù)據(jù)前500字符:', data.substring(0, 500));
                console.log('flameGraphFactory:', flameGraphFactory);
                
                // 手動(dòng)解析collapsed格式數(shù)據(jù)
                const lines = data.trim().split('\n').filter(line => line.trim() && !line.startsWith('#'));
                if (lines.length === 0) {
                    noDataElement.style.display = 'block';
                    showError('沒(méi)有有效的采樣數(shù)據(jù)');
                    return;
                }
                
                console.log('有效數(shù)據(jù)行數(shù):', lines.length);
                console.log('前5行數(shù)據(jù):', lines.slice(0, 5));
                
                // 構(gòu)建火焰圖數(shù)據(jù)結(jié)構(gòu) - 簡(jiǎn)化格式
                const root = {
                    name: "all",
                    children: [],
                    value: 0
                };
                
                const pathMap = new Map();
                pathMap.set("", root);
                
                lines.forEach(line => {
                    const parts = line.trim().split(' ');
                    if (parts.length < 2) return;
                    
                    const count = parseInt(parts[parts.length - 1]);
                    if (isNaN(count) || count <= 0) return;
                    
                    const stackTrace = parts.slice(0, -1).join(' ');
                    const methods = stackTrace.split(';').filter(m => m.trim());
                    
                    if (methods.length === 0) return;
                    
                    let currentPath = "";
                    let currentNode = root;
                    
                    methods.forEach((method) => {
                        const newPath = currentPath + (currentPath ? ";" : "") + method;
                        
                        if (!pathMap.has(newPath)) {
                            const newNode = {
                                name: method,
                                children: [],
                                value: count
                            };
                            pathMap.set(newPath, newNode);
                            currentNode.children.push(newNode);
                        } else {
                            pathMap.get(newPath).value += count;
                        }
                        
                        currentNode = pathMap.get(newPath);
                        currentPath = newPath;
                    });
                });
                
                // 計(jì)算總值
                function calculateTotals(node) {
                    let total = node.value || 0;
                    if (node.children) {
                        for (const child of node.children) {
                            total += calculateTotals(child);
                        }
                    }
                    node.value = total;
                    return total;
                }
                calculateTotals(root);
                
                console.log('構(gòu)建的火焰圖數(shù)據(jù):', root);
                console.log('根節(jié)點(diǎn)children數(shù)量:', root.children.length);
                console.log('根節(jié)點(diǎn)value:', root.value);
                console.log('子節(jié)點(diǎn)詳情:', root.children.map(c => ({name: c.name, value: c.value, childrenCount: c.children.length})));
                
                if (root.children.length === 0) {
                    noDataElement.style.display = 'block';
                    showError('沒(méi)有找到有效的調(diào)用棧數(shù)據(jù)');
                    return;
                }
                
                // 清空并準(zhǔn)備chart容器
                const chartElement = document.getElementById('chart');
                chartElement.innerHTML = '';
                console.log('Chart容器已清空');
                
                try {
                    // 直接渲染火焰圖，不使用復(fù)雜的檢查
                    console.log('開(kāi)始渲染火焰圖...');
                    
                    d3.select("#chart")
                        .datum(root)
                        .call(flameChart);
                        
                    console.log('火焰圖渲染調(diào)用完成');
                    
                } catch (renderError) {
                    console.error('火焰圖渲染時(shí)出錯(cuò):', renderError);
                    showError('火焰圖渲染失敗: ' + renderError.message);
                    showTreeView(root);
                }
                    
                console.log('火焰圖渲染完成');
                    
            } catch (parseError) {
                console.error('Error parsing flame graph data:', parseError);
                showError('解析火焰圖數(shù)據(jù)時(shí)出錯(cuò): ' + parseError.message);
            }
            
        } catch (error) {
            loadingElement.style.display = 'none';
            showError('獲取火焰圖數(shù)據(jù)失敗: ' + error.message);
            console.error('Error refreshing flame graph:', error);
        }
    }

    function showDataAsTable(data) {
        const lines = data.trim().split('\n').filter(line => line.trim() && !line.startsWith('#'));
        
        let tableHtml = `
            <div style="max-height: 400px; overflow-y: auto;">
                <h4>?? CPU采樣數(shù)據(jù) (表格形式)</h4>
                <table style="width: 100%; border-collapse: collapse; font-size: 12px;">
                    <thead>
                        <tr style="background: #f0f0f0;">
                            <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">調(diào)用棧</th>
                            <th style="border: 1px solid #ddd; padding: 8px; text-align: right;">采樣次數(shù)</th>
                        </tr>
                    </thead>
                    <tbody>
        `;
        
        lines.slice(0, 50).forEach(line => {
            const parts = line.trim().split(' ');
            if (parts.length < 2) return;
            
            const count = parts[parts.length - 1];
            const stack = parts.slice(0, -1).join(' ');
            
            tableHtml += `
                <tr>
                    <td style="border: 1px solid #ddd; padding: 4px; font-family: monospace;">${stack}</td>
                    <td style="border: 1px solid #ddd; padding: 4px; text-align: right;">${count}</td>
                </tr>
            `;
        });
        
        if (lines.length > 50) {
            tableHtml += `<tr><td colspan="2" style="text-align: center; padding: 8px;">... 還有 ${lines.length - 50} 條數(shù)據(jù)</td></tr>`;
        }
        
        tableHtml += `
                    </tbody>
                </table>
            </div>
        `;
        
        document.getElementById('chart').innerHTML = tableHtml;
    }

    function showTreeView(root) {
        console.log('顯示樹(shù)狀視圖');
        
        function renderNode(node, depth = 0) {
            const indent = '  '.repeat(depth);
            const percentage = root.value > 0 ? ((node.value / root.value) * 100).toFixed(1) : '0.0';
            let html = `<div style="margin-left: ${depth * 20}px; padding: 2px 0; font-family: monospace; font-size: 12px;">`;
            html += `<span style="color: #666;">${percentage}%</span> `;
            html += `<span style="color: #333;">${node.name}</span> `;
            html += `<span style="color: #999;">(${node.value})</span>`;
            html += `</div>`;
            
            if (node.children && node.children.length > 0) {
                // 按value排序，顯示最重要的調(diào)用
                const sortedChildren = [...node.children].sort((a, b) => b.value - a.value);
                for (const child of sortedChildren.slice(0, 10)) { // 只顯示前10個(gè)
                    html += renderNode(child, depth + 1);
                }
                if (sortedChildren.length > 10) {
                    html += `<div style="margin-left: ${(depth + 1) * 20}px; padding: 2px 0; color: #999; font-size: 11px;">... ${sortedChildren.length - 10} more</div>`;
                }
            }
            
            return html;
        }
        
        let treeHtml = `
            <div style="max-height: 600px; overflow-y: auto; border: 1px solid #ddd; padding: 15px; background: #f9f9f9;">
                <h4 style="margin: 0 0 15px 0;">?? CPU調(diào)用棧樹(shù)狀視圖</h4>
                <div style="font-size: 11px; color: #666; margin-bottom: 10px;">
                    格式: 百分比 方法名 (采樣次數(shù)) | 按CPU占用排序
                </div>
        `;
        
        if (root.children && root.children.length > 0) {
            const sortedChildren = [...root.children].sort((a, b) => b.value - a.value);
            for (const child of sortedChildren) {
                treeHtml += renderNode(child);
            }
        }
        
        treeHtml += `</div>`;
        
        document.getElementById('chart').innerHTML = treeHtml;
    }

    async function enableSampling() {
        try {
            const response = await fetch('/api/sampling/enable', { method: 'POST' });
            const data = await response.json();
            showSuccess(data.message);
            await updateStatus();
        } catch (error) {
            showError('啟用采樣失敗: ' + error.message);
        }
    }

    async function disableSampling() {
        try {
            const response = await fetch('/api/sampling/disable', { method: 'POST' });
            const data = await response.json();
            showSuccess(data.message);
            await updateStatus();
        } catch (error) {
            showError('停止采樣失敗: ' + error.message);
        }
    }

    async function clearData() {
        if (!confirm('確定要清空所有采樣數(shù)據(jù)嗎？')) {
            return;
        }
        
        try {
            const response = await fetch('/api/sampling/clear', { method: 'POST' });
            const data = await response.json();
            showSuccess(data.message);
            await updateStatus();
            document.getElementById('chart').innerHTML = '';
            document.getElementById('noData').style.display = 'block';
        } catch (error) {
            showError('清空數(shù)據(jù)失敗: ' + error.message);
        }
    }

    async function showDebugInfo() {
        try {
            const response = await fetch('/api/sampling/debug');
            const data = await response.json();
            
            let debugHtml = `
                <div class="info">
                    <strong>?? 調(diào)試信息</strong>

                    采樣狀態(tài): ${data.enabled ? '啟用' : '禁用'}

                    數(shù)據(jù)條目數(shù): ${data.stackCountSize}

                    <strong>示例數(shù)據(jù):</strong>

            `;
            
            if (data.sampleData && Object.keys(data.sampleData).length > 0) {
                for (const [stack, count] of Object.entries(data.sampleData)) {
                    debugHtml += `<small>${stack} (${count})</small>
`;
                }
            } else {
                debugHtml += '<small>暫無(wú)采樣數(shù)據(jù)</small>
';
            }
            
            debugHtml += '</div>';
            
            const testResult = document.getElementById('testResult');
            testResult.innerHTML = debugHtml;
            
            setTimeout(() => {
                testResult.innerHTML = '';
            }, 15000);
            
        } catch (error) {
            showError('獲取調(diào)試信息失敗: ' + error.message);
        }
    }

    async function showRawData() {
        try {
            const response = await fetch('/api/flamegraph');
            const data = await response.text();
            
            let rawHtml = `
                <div class="info">
                    <strong>?? 原始火焰圖數(shù)據(jù)</strong>

                    <small>格式: 調(diào)用棧 采樣次數(shù)</small>


                    <pre style="font-size: 11px; max-height: 300px; overflow-y: auto; background: #f8f9fa; padding: 10px; border-radius: 4px;">`;
            
            if (data && data.trim() && !data.startsWith('#')) {
                const lines = data.trim().split('\n');
                const displayLines = lines.slice(0, 50); // 只顯示前50行
                rawHtml += displayLines.join('\n');
                if (lines.length > 50) {
                    rawHtml += '\n... (' + (lines.length - 50) + ' more lines)';
                }
            } else {
                rawHtml += '暫無(wú)原始數(shù)據(jù)\n\n建議:\n1. 確保采樣已啟用\n2. 運(yùn)行一些測(cè)試任務(wù)\n3. 等待幾秒鐘收集數(shù)據(jù)';
            }
            
            rawHtml += '</pre></div>';
            
            const testResult = document.getElementById('testResult');
            testResult.innerHTML = rawHtml;
            
            setTimeout(() => {
                testResult.innerHTML = '';
            }, 20000);
            
        } catch (error) {
            showError('獲取原始數(shù)據(jù)失敗: ' + error.message);
        }
    }

    // 測(cè)試函數(shù)
    async function testCpuIntensive() {
        showTestLoading('正在執(zhí)行CPU密集型任務(wù)...');
        
        // 執(zhí)行前檢查采樣數(shù)據(jù)
        console.log('=== 執(zhí)行CPU密集型任務(wù)前的采樣數(shù)據(jù) ===');
        await checkSamplingData();
        
        try {
            const response = await fetch('/test/cpu-intensive?iterations=2000');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            const data = await response.json();
            console.log('CPU intensive test response:', data);
            showTestResult('CPU密集型任務(wù)完成', data);
            
            // 執(zhí)行后等待一段時(shí)間讓采樣器收集數(shù)據(jù)
            setTimeout(async () => {
                console.log('=== 執(zhí)行CPU密集型任務(wù)后的采樣數(shù)據(jù) ===');
                await checkSamplingData();
            }, 2000);
            
        } catch (error) {
            console.error('CPU intensive test error:', error);
            showTestError('CPU密集型任務(wù)失敗: ' + error.message);
        }
    }

    async function testNestedCalls() {
        showTestLoading('正在執(zhí)行嵌套調(diào)用測(cè)試...');
        
        console.log('=== 執(zhí)行嵌套調(diào)用測(cè)試前的采樣數(shù)據(jù) ===');
        await checkSamplingData();
        
        try {
            const response = await fetch('/test/nested-calls?depth=15');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            const data = await response.json();
            console.log('Nested calls test response:', data);
            showTestResult('嵌套調(diào)用測(cè)試完成', data);
            
            setTimeout(async () => {
                console.log('=== 執(zhí)行嵌套調(diào)用測(cè)試后的采樣數(shù)據(jù) ===');
                await checkSamplingData();
            }, 2000);
            
        } catch (error) {
            console.error('Nested calls test error:', error);
            showTestError('嵌套調(diào)用測(cè)試失敗: ' + error.message);
        }
    }

    async function testMixedWorkload() {
        showTestLoading('正在執(zhí)行混合工作負(fù)載...');
        
        console.log('=== 執(zhí)行混合工作負(fù)載前的采樣數(shù)據(jù) ===');
        await checkSamplingData();
        
        try {
            const response = await fetch('/test/mixed-workload');
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            const data = await response.json();
            console.log('Mixed workload test response:', data);
            showTestResult('混合工作負(fù)載完成', data);
            
            setTimeout(async () => {
                console.log('=== 執(zhí)行混合工作負(fù)載后的采樣數(shù)據(jù) ===');
                await checkSamplingData();
            }, 2000);
            
        } catch (error) {
            console.error('Mixed workload test error:', error);
            showTestError('混合工作負(fù)載失敗: ' + error.message);
        }
    }

    async function checkSamplingData() {
        try {
            const response = await fetch('/api/flamegraph');
            const data = await response.text();
            console.log('當(dāng)前采樣數(shù)據(jù)長(zhǎng)度:', data.length);
            console.log('當(dāng)前采樣數(shù)據(jù)前300字符:', data.substring(0, 300));
            
            const lines = data.trim().split('\n').filter(line => line.trim() && !line.startsWith('#'));
            console.log('有效數(shù)據(jù)行數(shù):', lines.length);
            
            const businessLines = lines.filter(line => line.includes('com.example'));
            console.log('包含業(yè)務(wù)代碼的行數(shù):', businessLines.length);
            
            if (businessLines.length > 0) {
                console.log('業(yè)務(wù)代碼示例:', businessLines.slice(0, 3));
            }
        } catch (error) {
            console.error('檢查采樣數(shù)據(jù)失敗:', error);
        }
    }

    function showSuccess(message) {
        showNotification(message, 'success');
    }

    function showError(message) {
        showNotification(message, 'error');
    }

    function showNotification(message, type) {
        const notification = document.createElement('div');
        notification.className = type === 'success' ? 'info' : 'error';
        notification.textContent = message;
        
        const controls = document.querySelector('.controls');
        controls.parentNode.insertBefore(notification, controls.nextSibling);
        
        setTimeout(() => {
            notification.remove();
        }, 5000);
    }

    function showTestLoading(message) {
        const testResult = document.getElementById('testResult');
        testResult.innerHTML = `<div class="info">${message}</div>`;
    }

    function showTestResult(title, data) {
        console.log('Test result data:', data); // 調(diào)試信息
        const testResult = document.getElementById('testResult');
        
        const executionTime = data.executionTimeMs || data.executionTime || 0;
        const resultValue = data.result ? data.result.toFixed(2) : 'N/A';
        
        testResult.innerHTML = `
            <div class="info">
                <strong>${title}</strong>

                執(zhí)行時(shí)間: ${executionTime}ms

                ${data.result ? '結(jié)果: ' + resultValue : ''}
                ${data.iterations ? '
迭代次數(shù): ' + data.iterations : ''}
                ${data.depth ? '
遞歸深度: ' + data.depth : ''}
                ${data.cpuResult ? '
CPU結(jié)果: ' + data.cpuResult.toFixed(2) : ''}
                ${data.ioResult ? '
IO結(jié)果: ' + data.ioResult.toFixed(2) : ''}
                ${data.finalResult ? '
最終結(jié)果: ' + data.finalResult.toFixed(2) : ''}
            </div>
        `;
        
        setTimeout(() => {
            testResult.innerHTML = '';
        }, 10000);
    }

    function showTestError(message) {
        const testResult = document.getElementById('testResult');
        testResult.innerHTML = `<div class="error">${message}</div>`;
        
        setTimeout(() => {
            testResult.innerHTML = '';
        }, 10000);
    }

    // 窗口大小改變時(shí)重新調(diào)整火焰圖
    window.addEventListener('resize', function() {
        if (flameChart && document.getElementById('chart').hasChildNodes()) {
            initFlameGraph();
            refreshFlameGraph();
        }
    });
</script>