document.addEventListener('DOMContentLoaded', function() {
    // Initialize UI elements
    const stepValueElement = document.querySelector('.step-value');
    let currentStep = 0;

    // Step control functions
    function updateStep(increment = 1) {
        currentStep += increment;
        stepValueElement.textContent = `0x${currentStep.toString(16).toUpperCase()}`;
        // Update other UI elements as needed
    }

    // Setup control button event listeners
    document.querySelectorAll('.control-button').forEach(button => {
        if (button.querySelector('[data-feather="play"]')) {
            button.addEventListener('click', () => {
                // Run logic
            });
        }
        if (button.querySelector('[data-feather="pause"]')) {
            button.addEventListener('click', () => {
                // Pause logic
            });
        }
        if (button.querySelector('[data-feather="skip-back"]')) {
            button.addEventListener('click', () => updateStep(-1));
        }
        if (button.querySelector('[data-feather="skip-forward"]')) {
            button.addEventListener('click', () => updateStep(1));
        }
    });

    // Initialize charts
const gpuOptions = {
        series: [{
            name: 'Utilization',
            data: [30, 40, 35, 50, 49, 60, 70, 91]
        }],
        chart: {
            type: 'area',
            height: '100%',
            sparkline: {
                enabled: true
            },
            toolbar: {
                show: false
            }
        },
        colors: ['#6366f1'],
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.3,
            }
        },
        stroke: {
            curve: 'smooth',
            width: 2
        },
        tooltip: {
            enabled: false
        }
    };

    const timeOptions = {
        series: [{
            name: 'Time',
            data: [12, 14, 10, 8, 6, 5, 4]
        }],
        chart: {
            type: 'line',
            height: '100%',
            sparkline: {
                enabled: true
            },
            toolbar: {
                show: false
            }
        },
        colors: ['#8b5cf6'],
        stroke: {
            curve: 'smooth',
            width: 2
        },
        tooltip: {
            enabled: false
        }
    };

    const memoryOptions = {
        series: [75],
        chart: {
            type: 'radialBar',
            height: '100%',
            sparkline: {
                enabled: true
            }
        },
        plotOptions: {
            radialBar: {
                startAngle: -90,
                endAngle: 90,
                track: {
                    background: "#374151",
                    strokeWidth: '97%',
                    margin: 5,
                },
                dataLabels: {
                    name: {
                        show: false
                    },
                    value: {
                        offsetY: -2,
                        fontSize: '16px',
                        color: '#f3f4f6'
                    }
                }
            }
        },
        colors: ['#ec4899'],
    };

    const gpuChart = new ApexCharts(document.querySelector("#gpuChart"), gpuOptions);
    const timeChart = new ApexCharts(document.querySelector("#timeChart"), timeOptions);
    const memoryChart = new ApexCharts(document.querySelector("#memoryChart"), memoryOptions);
    
    gpuChart.render();
    timeChart.render();
    memoryChart.render();
    // Generate thread visualization
    const threadGrid = document.getElementById('threadGrid');
    for (let i = 0; i < 64; i++) {
        const thread = document.createElement('div');
        thread.className = 'bg-gray-700 rounded p-2 text-center text-xs flex flex-col items-center justify-center hover:bg-gray-600 transition cursor-pointer';
        thread.innerHTML = `
            <div class="w-4 h-4 rounded-full mb-1 ${i % 8 === 0 ? 'bg-red-500' : i % 3 === 0 ? 'bg-primary-500' : 'bg-secondary-500'} ${i % 5 === 0 ? 'thread-active' : ''}"></div>
            <div>${i}</div>
        `;
        thread.addEventListener('click', () => showThreadDetails(i));
        threadGrid.appendChild(thread);
    }

    // Generate register table
    const registerTable = document.getElementById('registerTable');
    const registerTypes = ['%r', '%f', '%p', '%rd'];
    const registerNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
    const valueTypes = ['u32', 'f32', 'pred', 'u64'];

    function generateRandomValue(type) {
        switch(type) {
            case 'u32': return `0x${Math.floor(Math.random() * 0xFFFFFFFF).toString(16).padStart(8, '0')}`;
            case 'f32': return (Math.random() * 100).toFixed(4);
            case 'pred': return Math.random() > 0.5 ? 'true' : 'false';
            case 'u64': return `0x${Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16).padStart(16, '0')}`;
        }
    }

    function populateRegisterTable(threadId = 0) {
        registerTable.innerHTML = '';
        for (let i = 0; i < 15; i++) {
            const typeIndex = i % registerTypes.length;
            const regType = registerTypes[typeIndex];
            const valueType = valueTypes[typeIndex];
            const row = document.createElement('tr');
            row.className = 'border-b border-gray-700 hover:bg-gray-800 transition';
            row.innerHTML = `
                <td class="py-2 px-4 text-purple-400">${regType}${registerNames[i % registerNames.length]}</td>
                <td class="py-2 px-4 text-gray-400">${valueType}</td>
                <td class="py-2 px-4 font-mono">${generateRandomValue(valueType)}</td>
                <td class="py-2 px-4">${threadId}</td>
            `;
            registerTable.appendChild(row);
        }
    }

    function showThreadDetails(threadId) {
        populateRegisterTable(threadId);
        // Highlight the selected thread
        document.querySelectorAll('#threadGrid div').forEach((el, idx) => {
            el.classList.toggle('ring-2', idx === threadId);
            el.classList.toggle('ring-primary-500', idx === threadId);
        });
    }

    // Initial population
    populateRegisterTable();
// Simulate data updates
    setInterval(() => {
        const randomData = Array.from({length: 8}, () => Math.floor(Math.random() * 30) + 70);
        gpuChart.updateSeries([{data: randomData}]);
        
        const randomTime = Array.from({length: 7}, () => Math.floor(Math.random() * 10) + 2);
        timeChart.updateSeries([{data: randomTime}]);
        
        const randomMemory = Math.floor(Math.random() * 20) + 70;
        memoryChart.updateSeries([randomMemory]);
        
        // Randomly activate some threads
        document.querySelectorAll('#threadGrid div div:first-child').forEach((el, idx) => {
            if (Math.random() > 0.7) {
                el.classList.add('thread-active');
            } else {
                el.classList.remove('thread-active');
            }
        });
    }, 2000);
});