function createEnhancedTopPerformersSection(topData) {
    try {
        const section = document.createElement('div');
        section.className = 'bg-white rounded-lg shadow p-6 dark:bg-gray-800';
        
        const title = document.createElement('h3');
        title.className = 'text-lg font-medium mb-4 dark:text-gray-200';
        title.textContent = 'Top Performers';
        section.appendChild(title);
        
        const tabsContainer = document.createElement('div');
        tabsContainer.className = 'border-b border-gray-200 dark:border-gray-700';
        
        const tabList = document.createElement('nav');
        tabList.className = '-mb-px flex space-x-8';
        tabList.setAttribute('aria-label', 'Tabs');
        
        // Create tabs for each entity type
        const entityTypes = ['tools', 'resources', 'prompts', 'gateways', 'servers'];
        entityTypes.forEach((type, index) => {
            if (topData[type] && Array.isArray(topData[type])) {
                const tab = createTab(type, index === 0);
                tabList.appendChild(tab);
            }
        });
        
        tabsContainer.appendChild(tabList);
        section.appendChild(tabsContainer);
        
        // Create content panels
        const contentContainer = document.createElement('div');
        contentContainer.className = 'mt-4';
        
        entityTypes.forEach((type, index) => {
            if (topData[type] && Array.isArray(topData[type])) {
                const panel = createTopPerformersTable(type, topData[type], index === 0);
                contentContainer.appendChild(panel);
            }
        });
        
        section.appendChild(contentContainer);
        return section;
    } catch (error) {
        console.error('Error creating enhanced top performers section:', error);
        return document.createElement('div');
    }
}

function createTopPerformersTable(entityType, data, isActive) {
    const panel = document.createElement('div');
    panel.id = `top-${entityType}-panel`;
    panel.className = `${isActive ? '' : 'hidden'}`;
    
    if (data.length === 0) {
        const emptyState = document.createElement('p');
        emptyState.className = 'text-gray-500 dark:text-gray-400 text-center py-4';
        emptyState.textContent = `No ${entityType} data available`;
        panel.appendChild(emptyState);
        return panel;
    }
    
    // Create responsive table wrapper
    const tableWrapper = document.createElement('div');
    tableWrapper.className = 'overflow-x-auto';
    
    const table = document.createElement('table');
    table.className = 'min-w-full divide-y divide-gray-200 dark:divide-gray-700';
    
    // Table header
    const thead = document.createElement('thead');
    thead.className = 'bg-gray-50 dark:bg-gray-700';
    
    const headerRow = document.createElement('tr');
    const headers = ['Rank', 'Name', 'Executions', 'Avg Response Time', 'Success Rate', 'Last Used'];
    
    headers.forEach(headerText => {
        const th = document.createElement('th');
        th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider';
        th.textContent = headerText;
        headerRow.appendChild(th);
    });
    
    thead.appendChild(headerRow);
    table.appendChild(thead);
    
    // Table body
    const tbody = document.createElement('tbody');
    tbody.className = 'bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700';
    
    data.forEach((item, index) => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50 dark:hover:bg-gray-700';
        
        // Rank
        const rankCell = document.createElement('td');
        rankCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100';
        
        const rankBadge = document.createElement('span');
        rankBadge.className = `inline-flex items-center justify-center w-6 h-6 rounded-full ${
            index === 0 ? 'bg-yellow-400 text-yellow-900' :
            index === 1 ? 'bg-gray-300 text-gray-900' :
            index === 2 ? 'bg-orange-400 text-orange-900' :
            'bg-gray-100 text-gray-600'
        }`;
        rankBadge.textContent = index + 1;
        rankCell.appendChild(rankBadge);
        row.appendChild(rankCell);
        
        // Name
        const nameCell = document.createElement('td');
        nameCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100';
        nameCell.textContent = item.name || 'Unknown';
        row.appendChild(nameCell);
        
        // Executions
        const execCell = document.createElement('td');
        execCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300';
        execCell.textContent = formatNumber(item.execution_count || item.executions || 0);
        row.appendChild(execCell);
        
        // Avg Response Time
        const avgTimeCell = document.createElement('td');
        avgTimeCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300';
        const avgTime = item.avg_response_time || item.avgResponseTime;
        avgTimeCell.textContent = avgTime ? `${Math.round(avgTime)}ms` : 'N/A';
        row.appendChild(avgTimeCell);
        
        // Success Rate
        const successCell = document.createElement('td');
        successCell.className = 'px-6 py-4 whitespace-nowrap text-sm';
        const successRate = calculateSuccessRate(item);
        const successBadge = document.createElement('span');
        successBadge.className = `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
            successRate >= 95 ? 'bg-green-100 text-green-800' :
            successRate >= 80 ? 'bg-yellow-100 text-yellow-800' :
            'bg-red-100 text-red-800'
        }`;
        successBadge.textContent = `${successRate}%`;
        successCell.appendChild(successBadge);
        row.appendChild(successCell);
        
        // Last Used
        const lastUsedCell = document.createElement('td');
        lastUsedCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300';
        lastUsedCell.textContent = formatLastUsed(item.last_execution || item.lastExecution);
        row.appendChild(lastUsedCell);
        
        tbody.appendChild(row);
    });
    
    table.appendChild(tbody);
    tableWrapper.appendChild(table);
    panel.appendChild(tableWrapper);
    
    return panel;
}

// Helper functions
function createTab(type, isActive) {
    const tab = document.createElement('a');
    tab.href = '#';
    tab.className = `${
        isActive 
            ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' 
            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
    } whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm capitalize`;
    tab.textContent = type;
    tab.onclick = (e) => {
        e.preventDefault();
        showTopPerformerTab(type);
    };
    return tab;
}

function showTopPerformerTab(activeType) {
    const entityTypes = ['tools', 'resources', 'prompts', 'gateways', 'servers'];
    entityTypes.forEach(type => {
        const panel = document.getElementById(`top-${type}-panel`);
        const tab = document.querySelector(`a[onclick*="showTopPerformerTab('${type}')"]`);
        if (panel) {
            panel.classList.toggle('hidden', type !== activeType);
        }
        if (tab) {
            if (type === activeType) {
                tab.classList.add('border-indigo-500', 'text-indigo-600', 'dark:text-indigo-400');
                tab.classList.remove('border-transparent', 'text-gray-500');
            } else {
                tab.classList.remove('border-indigo-500', 'text-indigo-600', 'dark:text-indigo-400');
                tab.classList.add('border-transparent', 'text-gray-500');
            }
        }
    });
}

function calculateSuccessRate(item) {
    const total = item.execution_count || item.executions || 0;
    const successful = item.successful_count || item.successfulExecutions || 0;
    return total > 0 ? Math.round((successful / total) * 100) : 0;
}

function formatNumber(num) {
    return new Intl.NumberFormat().format(num);
}

function formatLastUsed(timestamp) {
    if (!timestamp) return 'Never';
    
    const date = new Date(timestamp);
    const now = new Date();
    const diffMs = now - date;
    const diffMins = Math.floor(diffMs / 60000);
    
    if (diffMins < 1) return 'Just now';
    if (diffMins < 60) return `${diffMins} min ago`;
    if (diffMins < 1440) return `${Math.floor(diffMins / 60)} hours ago`;
    if (diffMins < 10080) return `${Math.floor(diffMins / 1440)} days ago`;
    
    return date.toLocaleDateString();
}

// In displayMetrics function, ensure servers are included
if (data.servers) {
    const serversCard = createMetricsCard('Virtual Servers', data.servers);
    metricsContainer.appendChild(serversCard);
}