<div class="admin-container">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <h2>🖥️ 系统配置明细</h2>
        <button class="btn btn-primary" onclick="refreshData()" id="refreshBtn">
            🔄 刷新数据
        </button>
    </div>
    
    <div class="info-grid">
        <!-- 服务器信息 -->
        <div class="info-card">
            <div class="info-card-header">
                <span class="info-icon">🖥️</span>
                <h3>服务器信息</h3>
            </div>
            <div class="info-row">
                <span class="info-label">服务器软件</span>
                <span class="info-value" id="server_software">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">PHP版本</span>
                <span class="info-value" id="php_version">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">操作系统</span>
                <span class="info-value" id="os">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">服务器时间</span>
                <span class="info-value" id="server_time">-</span>
            </div>
        </div>
        
        <!-- 数据库信息 -->
        <div class="info-card">
            <div class="info-card-header">
                <span class="info-icon">🗄️</span>
                <h3>数据库信息</h3>
            </div>
            <div class="info-row">
                <span class="info-label">MySQL版本</span>
                <span class="info-value" id="mysql_version">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">数据库大小</span>
                <span class="info-value" id="db_size">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">运行时间</span>
                <span class="info-value" id="mysql_uptime">-</span>
            </div>
        </div>
        
        <!-- 系统负载 -->
        <div class="info-card">
            <div class="info-card-header">
                <span class="info-icon">📊</span>
                <h3>系统负载</h3>
            </div>
            <div class="info-row">
                <span class="info-label">1分钟负载</span>
                <span class="info-value" id="load_1min">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">5分钟负载</span>
                <span class="info-value" id="load_5min">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">15分钟负载</span>
                <span class="info-value" id="load_15min">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">CPU使用率</span>
                <div class="progress-bar">
                    <div class="progress-fill" id="cpu_progress" style="width: 0%"></div>
                    <span class="progress-text" id="cpu_usage">0%</span>
                </div>
            </div>
        </div>
        
        <!-- 磁盘信息 -->
        <div class="info-card">
            <div class="info-card-header">
                <span class="info-icon">💾</span>
                <h3>磁盘信息</h3>
            </div>
            <div class="info-row">
                <span class="info-label">总容量</span>
                <span class="info-value" id="disk_total">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">已用空间</span>
                <span class="info-value" id="disk_used">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">可用空间</span>
                <span class="info-value" id="disk_free">-</span>
            </div>
            <div class="info-row">
                <span class="info-label">使用率</span>
                <div class="progress-bar">
                    <div class="progress-fill" id="disk_progress" style="width: 0%"></div>
                    <span class="progress-text" id="disk_percent">0%</span>
                </div>
            </div>
            <div class="info-row">
                <span class="info-label">磁盘IO(写)</span>
                <span class="info-value" id="io_speed">-</span>
            </div>
        </div>
    </div>
</div>

<style>
.admin-container {
    max-width: 1400px;
    margin: 0 auto;
}
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}
.info-card {
    background: var(--bg-primary);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.info-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.info-icon {
    font-size: 28px;
}
.info-card-header h3 {
    margin: 0;
    font-size: 18px;
}
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color-light);
}
.info-row:last-child {
    border-bottom: none;
}
.info-label {
    color: var(--text-muted);
    font-size: 14px;
}
.info-value {
    font-weight: 600;
    color: var(--text-primary);
    font-family: monospace;
}
.progress-bar {
    flex: 1;
    max-width: 150px;
    background: var(--bg-secondary);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    height: 24px;
}
.progress-fill {
    background: linear-gradient(135deg, #667eea, #764ba2);
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s;
}
.progress-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: white;
    line-height: 24px;
}
.btn {
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102,126,234,0.4);
}
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
async function refreshData() {
    const btn = document.getElementById('refreshBtn');
    btn.disabled = true;
    btn.innerHTML = '加载中...';
    
    try {
        const response = await fetch('/api/system_info.php');
        const data = await response.json();
        
        if (data.success) {
            // 服务器信息
            document.getElementById('server_software').innerText = data.data.server_software;
            document.getElementById('php_version').innerText = data.data.php_version;
            document.getElementById('os').innerText = data.data.os;
            document.getElementById('server_time').innerText = data.data.server_time;
            
            // 数据库信息
            document.getElementById('mysql_version').innerText = data.data.mysql_version;
            document.getElementById('db_size').innerText = data.data.db_size + ' MB';
            document.getElementById('mysql_uptime').innerText = data.data.mysql_uptime;
            
            // 系统负载
            document.getElementById('load_1min').innerHTML = formatLoad(data.data.load_1min);
            document.getElementById('load_5min').innerHTML = formatLoad(data.data.load_5min);
            document.getElementById('load_15min').innerHTML = formatLoad(data.data.load_15min);
            
            // CPU
            const cpu = data.data.cpu_usage;
            document.getElementById('cpu_usage').innerText = cpu + '%';
            document.getElementById('cpu_progress').style.width = cpu + '%';
            if (cpu > 80) {
                document.getElementById('cpu_progress').style.background = '#ef4444';
            } else if (cpu > 60) {
                document.getElementById('cpu_progress').style.background = '#f59e0b';
            } else {
                document.getElementById('cpu_progress').style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
            }
            
            // 磁盘信息
            document.getElementById('disk_total').innerText = data.data.disk_total + ' GB';
            document.getElementById('disk_used').innerText = data.data.disk_used + ' GB';
            document.getElementById('disk_free').innerText = data.data.disk_free + ' GB';
            const diskPercent = data.data.disk_used_percent;
            document.getElementById('disk_percent').innerText = diskPercent + '%';
            document.getElementById('disk_progress').style.width = diskPercent + '%';
            if (diskPercent > 80) {
                document.getElementById('disk_progress').style.background = '#ef4444';
            } else if (diskPercent > 60) {
                document.getElementById('disk_progress').style.background = '#f59e0b';
            } else {
                document.getElementById('disk_progress').style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
            }
            
            // IO速度
            document.getElementById('io_speed').innerText = data.data.io_write_speed + ' MB/s';
        }
    } catch (error) {
        console.error('加载失败:', error);
        alert('加载系统信息失败');
    } finally {
        btn.disabled = false;
        btn.innerHTML = '🔄 刷新数据';
    }
}

function formatLoad(load) {
    let color = '#10b981';
    if (load > 2) color = '#f59e0b';
    if (load > 4) color = '#ef4444';
    return `<span style="color: ${color};">${load.toFixed(2)}</span>`;
}

// 页面加载时获取数据
refreshData();

// 自动刷新（每30秒）
setInterval(() => {
    refreshData();
}, 1000);
</script>