@extends('layouts.super-admin')

@section('title', 'System Metrics')
@section('page-title', 'System Performance Metrics')
@section('page-description', 'Monitoring performa server dan sistem')

@section('content')
<div class="metrics-container">
    <!-- System Health Cards -->
    <div class="health-grid">
        <div class="health-card">
            <div class="health-icon cpu">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="4" y="4" width="16" height="16" rx="2"/>
                    <rect x="9" y="9" width="6" height="6"/>
                    <line x1="9" y1="1" x2="9" y2="4"/>
                    <line x1="15" y1="1" x2="15" y2="4"/>
                    <line x1="9" y1="20" x2="9" y2="23"/>
                    <line x1="15" y1="20" x2="15" y2="23"/>
                    <line x1="20" y1="9" x2="23" y2="9"/>
                    <line x1="20" y1="15" x2="23" y2="15"/>
                    <line x1="1" y1="9" x2="4" y2="9"/>
                    <line x1="1" y1="15" x2="4" y2="15"/>
                </svg>
            </div>
            <div class="health-info">
                <div class="health-label">CPU Usage</div>
                <div class="health-value" id="cpuUsage">0%</div>
                <div class="health-bar">
                    <div class="health-fill" id="cpuFill" style="width: 0%"></div>
                </div>
            </div>
        </div>
        <div class="health-card">
            <div class="health-icon memory">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="2" y="2" width="20" height="20" rx="2"/>
                    <line x1="8" y1="2" x2="8" y2="22"/>
                    <line x1="16" y1="2" x2="16" y2="22"/>
                </svg>
            </div>
            <div class="health-info">
                <div class="health-label">Memory Usage</div>
                <div class="health-value" id="memoryUsage">0%</div>
                <div class="health-bar">
                    <div class="health-fill" id="memoryFill" style="width: 0%"></div>
                </div>
            </div>
        </div>
        <div class="health-card">
            <div class="health-icon disk">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M22 12H2M12 2v20"/>
                    <circle cx="12" cy="12" r="10"/>
                </svg>
            </div>
            <div class="health-info">
                <div class="health-label">Disk Usage</div>
                <div class="health-value" id="diskUsage">0%</div>
                <div class="health-bar">
                    <div class="health-fill" id="diskFill" style="width: 0%"></div>
                </div>
            </div>
        </div>
        <div class="health-card">
            <div class="health-icon network">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M8 12h8M12 8v8"/>
                    <circle cx="12" cy="12" r="10"/>
                </svg>
            </div>
            <div class="health-info">
                <div class="health-label">Network Speed</div>
                <div class="health-value" id="networkSpeed">0 Mbps</div>
                <div class="health-sub">Upload: <span id="uploadSpeed">0</span> Mbps | Download: <span id="downloadSpeed">0</span> Mbps</div>
            </div>
        </div>
    </div>

    <!-- Performance Charts -->
    <div class="charts-row">
        <div class="chart-card">
            <div class="chart-header">
                <h3>CPU & Memory Usage (24 Hours)</h3>
                <div class="chart-legend">
                    <span><span class="legend-color cpu"></span>CPU</span>
                    <span><span class="legend-color memory"></span>Memory</span>
                </div>
            </div>
            <canvas id="performanceChart" height="250"></canvas>
        </div>
        <div class="chart-card">
            <div class="chart-header">
                <h3>Network Traffic (24 Hours)</h3>
            </div>
            <canvas id="networkChart" height="250"></canvas>
        </div>
    </div>

    <!-- Request Statistics -->
    <div class="stats-row">
        <div class="stats-card">
            <h3>API Request Statistics</h3>
            <div class="stats-list">
                <div class="stats-item">
                    <span class="stats-label">Total Requests (24h)</span>
                    <span class="stats-value" id="totalRequests">0</span>
                </div>
                <div class="stats-item">
                    <span class="stats-label">Successful Requests</span>
                    <span class="stats-value success" id="successRequests">0</span>
                </div>
                <div class="stats-item">
                    <span class="stats-label">Failed Requests</span>
                    <span class="stats-value danger" id="failedRequests">0</span>
                </div>
                <div class="stats-item">
                    <span class="stats-label">Average Response Time</span>
                    <span class="stats-value" id="avgResponseTime">0 ms</span>
                </div>
            </div>
        </div>
        <div class="stats-card">
            <h3>System Information</h3>
            <div class="stats-list">
                <div class="stats-item">
                    <span class="stats-label">PHP Version</span>
                    <span class="stats-value" id="phpVersion">-</span>
                </div>
                <div class="stats-item">
                    <span class="stats-label">Laravel Version</span>
                    <span class="stats-value" id="laravelVersion">-</span>
                </div>
                <div class="stats-item">
                    <span class="stats-label">Server Uptime</span>
                    <span class="stats-value" id="serverUptime">-</span>
                </div>
                <div class="stats-item">
                    <span class="stats-label">Queue Workers</span>
                    <span class="stats-value" id="queueWorkers">0</span>
                </div>
            </div>
        </div>
        <div class="stats-card">
            <h3>Database Metrics</h3>
            <div class="stats-list">
                <div class="stats-item">
                    <span class="stats-label">Total Tables</span>
                    <span class="stats-value" id="totalTables">0</span>
                </div>
                <div class="stats-item">
                    <span class="stats-label">Total Records</span>
                    <span class="stats-value" id="totalRecords">0</span>
                </div>
                <div class="stats-item">
                    <span class="stats-label">Database Size</span>
                    <span class="stats-value" id="dbSize">0 MB</span>
                </div>
                <div class="stats-item">
                    <span class="stats-label">Query Avg Time</span>
                    <span class="stats-value" id="queryTime">0 ms</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Real-time Logs -->
    <div class="logs-card">
        <div class="card-header">
            <h3>Real-time Activity Logs</h3>
            <button onclick="refreshLogs()" class="btn-refresh">⟳ Refresh</button>
        </div>
        <div class="logs-container" id="logsContainer">
            <div class="log-entry">Loading logs...</div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let performanceChart, networkChart;

async function loadMetrics() {
    try {
        const response = await fetch('/super-admin/api/metrics');
        const data = await response.json();
        
        if (data.success) {
            updateHealthCards(data.health);
            updateCharts(data.charts);
            updateStats(data.stats);
            updateLogs(data.logs);
        }
    } catch (error) {
        console.error('Error loading metrics:', error);
        loadMockData();
    }
}

function updateHealthCards(health) {
    // CPU
    const cpu = health.cpu || 0;
    document.getElementById('cpuUsage').innerText = cpu + '%';
    document.getElementById('cpuFill').style.width = cpu + '%';
    document.getElementById('cpuFill').style.background = cpu > 80 ? '#ef4444' : (cpu > 60 ? '#f59e0b' : '#10b981');
    
    // Memory
    const memory = health.memory || 0;
    document.getElementById('memoryUsage').innerText = memory + '%';
    document.getElementById('memoryFill').style.width = memory + '%';
    document.getElementById('memoryFill').style.background = memory > 80 ? '#ef4444' : (memory > 60 ? '#f59e0b' : '#10b981');
    
    // Disk
    const disk = health.disk || 0;
    document.getElementById('diskUsage').innerText = disk + '%';
    document.getElementById('diskFill').style.width = disk + '%';
    document.getElementById('diskFill').style.background = disk > 85 ? '#ef4444' : (disk > 70 ? '#f59e0b' : '#10b981');
    
    // Network
    document.getElementById('networkSpeed').innerText = (health.network_speed || 0) + ' Mbps';
    document.getElementById('uploadSpeed').innerText = health.upload_speed || 0;
    document.getElementById('downloadSpeed').innerText = health.download_speed || 0;
}

function updateCharts(charts) {
    // Performance Chart
    if (performanceChart) performanceChart.destroy();
    performanceChart = new Chart(document.getElementById('performanceChart'), {
        type: 'line',
        data: {
            labels: charts.labels || [],
            datasets: [
                {
                    label: 'CPU Usage (%)',
                    data: charts.cpu || [],
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239,68,68,0.1)',
                    tension: 0.3,
                    fill: true
                },
                {
                    label: 'Memory Usage (%)',
                    data: charts.memory || [],
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59,130,246,0.1)',
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: { responsive: true, maintainAspectRatio: true }
    });

    // Network Chart
    if (networkChart) networkChart.destroy();
    networkChart = new Chart(document.getElementById('networkChart'), {
        type: 'line',
        data: {
            labels: charts.labels || [],
            datasets: [{
                label: 'Network Usage (Mbps)',
                data: charts.network || [],
                borderColor: '#8b5cf6',
                backgroundColor: 'rgba(139,92,246,0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: { responsive: true, maintainAspectRatio: true }
    });
}

function updateStats(stats) {
    document.getElementById('totalRequests').innerText = stats.total_requests || 0;
    document.getElementById('successRequests').innerText = stats.success_requests || 0;
    document.getElementById('failedRequests').innerText = stats.failed_requests || 0;
    document.getElementById('avgResponseTime').innerText = (stats.avg_response_time || 0) + ' ms';
    document.getElementById('phpVersion').innerText = stats.php_version || '-';
    document.getElementById('laravelVersion').innerText = stats.laravel_version || '-';
    document.getElementById('serverUptime').innerText = stats.server_uptime || '-';
    document.getElementById('queueWorkers').innerText = stats.queue_workers || 0;
    document.getElementById('totalTables').innerText = stats.total_tables || 0;
    document.getElementById('totalRecords').innerText = stats.total_records || 0;
    document.getElementById('dbSize').innerText = (stats.db_size || 0) + ' MB';
    document.getElementById('queryTime').innerText = (stats.query_time || 0) + ' ms';
}

function updateLogs(logs) {
    const container = document.getElementById('logsContainer');
    if (!logs || logs.length === 0) {
        container.innerHTML = '<div class="log-entry">No recent activity</div>';
        return;
    }
    
    container.innerHTML = logs.map(log => `
        <div class="log-entry ${log.type}">
            <span class="log-time">${log.time}</span>
            <span class="log-message">${escapeHtml(log.message)}</span>
        </div>
    `).join('');
}

function refreshLogs() {
    loadMetrics();
}

function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/[&<>]/g, function(m) {
        if (m === '&') return '&amp;';
        if (m === '<') return '&lt;';
        if (m === '>') return '&gt;';
        return m;
    });
}

function loadMockData() {
    updateHealthCards({ cpu: 45, memory: 62, disk: 58, network_speed: 85, upload_speed: 32, download_speed: 85 });
    
    const labels = Array.from({length: 24}, (_, i) => i + ':00');
    updateCharts({ 
        labels: labels, 
        cpu: labels.map(() => Math.floor(Math.random() * 60) + 20),
        memory: labels.map(() => Math.floor(Math.random() * 40) + 50),
        network: labels.map(() => Math.floor(Math.random() * 50) + 30)
    });
    
    updateStats({
        total_requests: 15234, success_requests: 14985, failed_requests: 249,
        avg_response_time: 145, php_version: '8.4.16', laravel_version: '13.8.0',
        server_uptime: '5 days, 12 hours', queue_workers: 2,
        total_tables: 25, total_records: 12345, db_size: 12.5, query_time: 8
    });
    
    updateLogs([
        { type: 'info', time: new Date().toLocaleTimeString(), message: 'System metrics collected' },
        { type: 'warning', time: new Date(Date.now() - 120000).toLocaleTimeString(), message: 'High CPU usage detected (78%)' },
        { type: 'info', time: new Date(Date.now() - 300000).toLocaleTimeString(), message: 'New device registered: Sensor Bali' },
    ]);
}

// Auto-refresh every 30 seconds
setInterval(loadMetrics, 30000);
document.addEventListener('DOMContentLoaded', loadMetrics);
</script>

<style>
.metrics-container { max-width: 1400px; margin: 0 auto; }
.health-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.health-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.health-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.health-icon.cpu { background: #fef2f2; color: #dc2626; }
.health-icon.memory { background: #eff6ff; color: #3b82f6; }
.health-icon.disk { background: #f0fdf4; color: #10b981; }
.health-icon.network { background: #faf5ff; color: #a855f7; }
.health-info { flex: 1; }
.health-label { font-size: 0.7rem; color: #6b7280; text-transform: uppercase; }
.health-value { font-size: 1.25rem; font-weight: 700; }
.health-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.25rem;
}
.health-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.health-sub { font-size: 0.65rem; color: #9ca3af; margin-top: 0.25rem; }

.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.chart-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.chart-header h3 { font-size: 0.875rem; font-weight: 600; }
.chart-legend { display: flex; gap: 1rem; font-size: 0.7rem; }
.legend-color { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 0.25rem; }
.legend-color.cpu { background: #ef4444; }
.legend-color.memory { background: #3b82f6; }

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stats-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.stats-card h3 { font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; }
.stats-list { display: flex; flex-direction: column; gap: 0.5rem; }
.stats-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.stats-label { color: #6b7280; }
.stats-value { font-weight: 500; }
.stats-value.success { color: #10b981; }
.stats-value.danger { color: #dc2626; }

.logs-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-refresh {
    padding: 0.25rem 0.75rem;
    background: #f3f4f6;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.7rem;
}
.logs-container {
    max-height: 300px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.75rem;
}
.log-entry {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    gap: 1rem;
}
.log-entry.info { background: white; }
.log-entry.warning { background: #fffbeb; color: #92400e; }
.log-entry.error { background: #fef2f2; color: #dc2626; }
.log-time { font-family: monospace; color: #9ca3af; width: 90px; }

@media (max-width: 1024px) {
    .health-grid, .stats-row { grid-template-columns: repeat(2, 1fr); }
    .charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .health-grid, .stats-row { grid-template-columns: 1fr; }
}
</style>
@endsection