{extends file="layout.tpl"}

{block name="content"}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">Monitor serwera</h4>
            <p class="text-muted mb-0">Stan systemu i zasobów</p>
        </div>
        <button type="button" class="btn btn-outline-primary" onclick="refreshStats()">
            <i class="bi bi-arrow-clockwise me-1"></i>Odśwież
        </button>
    </div>

    <!-- Główne metryki -->
    <div class="row g-4 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h6 class="text-muted mb-1">CPU</h6>
                            <h3 class="mb-0" id="cpu-percent">{$stats.cpu_percent}%</h3>
                        </div>
                        <div class="bg-primary bg-opacity-10 rounded p-2">
                            <i class="bi bi-cpu text-primary fs-4"></i>
                        </div>
                    </div>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-primary" id="cpu-bar" style="width: {$stats.cpu_percent}%"></div>
                    </div>
                    <small class="text-muted">
                        Load: <span id="cpu-load">{$stats.cpu_load.1min}</span> / {$stats.cpu_cores} rdzeni
                    </small>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h6 class="text-muted mb-1">Pamięć RAM</h6>
                            <h3 class="mb-0" id="mem-percent">{$stats.memory.percent}%</h3>
                        </div>
                        <div class="bg-success bg-opacity-10 rounded p-2">
                            <i class="bi bi-memory text-success fs-4"></i>
                        </div>
                    </div>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-success" id="mem-bar" style="width: {$stats.memory.percent}%"></div>
                    </div>
                    <small class="text-muted">
                        <span id="mem-used">{($stats.memory.used / 1073741824)|number_format:1}</span> / 
                        {($stats.memory.total / 1073741824)|number_format:1} GB
                    </small>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h6 class="text-muted mb-1">Dysk</h6>
                            <h3 class="mb-0" id="disk-percent">{$stats.disk.percent}%</h3>
                        </div>
                        <div class="bg-warning bg-opacity-10 rounded p-2">
                            <i class="bi bi-hdd text-warning fs-4"></i>
                        </div>
                    </div>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-warning" id="disk-bar" style="width: {$stats.disk.percent}%"></div>
                    </div>
                    <small class="text-muted">
                        <span id="disk-used">{($stats.disk.used / 1073741824)|number_format:1}</span> / 
                        {($stats.disk.total / 1073741824)|number_format:1} GB
                    </small>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h6 class="text-muted mb-1">Uptime</h6>
                            <h3 class="mb-0" id="uptime">{$stats.uptime.formatted}</h3>
                        </div>
                        <div class="bg-info bg-opacity-10 rounded p-2">
                            <i class="bi bi-clock-history text-info fs-4"></i>
                        </div>
                    </div>
                    <small class="text-muted">
                        Ostatnia aktualizacja: <span id="last-update">{$stats.timestamp}</span>
                    </small>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Informacje o systemie -->
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="bi bi-info-circle me-2"></i>Informacje o systemie</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm mb-0">
                        <tr>
                            <td class="text-muted">PHP</td>
                            <td><code>{$stats.php_version}</code></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Serwer WWW</td>
                            <td><code>{$stats.server_software}</code></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Rdzenie CPU</td>
                            <td>{$stats.cpu_cores}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Load Average</td>
                            <td>
                                {$stats.cpu_load.1min} (1m) / 
                                {$stats.cpu_load.5min} (5m) / 
                                {$stats.cpu_load.15min} (15m)
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Baza danych</td>
                            <td>{($stats.database.size / 1048576)|number_format:2} MB</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- Statystyki aplikacji -->
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="bi bi-bar-chart me-2"></i>Statystyki aplikacji</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-3">
                            <div class="fs-3 fw-bold text-primary">{$stats.app.users}</div>
                            <small class="text-muted">Użytkownicy</small>
                        </div>
                        <div class="col-3">
                            <div class="fs-3 fw-bold text-success">{$stats.app.devices}</div>
                            <small class="text-muted">Urządzenia</small>
                        </div>
                        <div class="col-3">
                            <div class="fs-3 fw-bold text-warning">{$stats.app.playlists}</div>
                            <small class="text-muted">Playlisty</small>
                        </div>
                        <div class="col-3">
                            <div class="fs-3 fw-bold text-info">{$stats.app.logs}</div>
                            <small class="text-muted">Logi</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="scripts"}
<script>
function refreshStats() {
    fetch('{$baseUrl}/admin/monitor-api')
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const s = data.stats;
                
                document.getElementById('cpu-percent').textContent = s.cpu_percent + '%';
                document.getElementById('cpu-bar').style.width = s.cpu_percent + '%';
                document.getElementById('cpu-load').textContent = s.cpu_load['1min'];
                
                document.getElementById('mem-percent').textContent = s.memory.percent + '%';
                document.getElementById('mem-bar').style.width = s.memory.percent + '%';
                document.getElementById('mem-used').textContent = (s.memory.used / 1073741824).toFixed(1);
                
                document.getElementById('disk-percent').textContent = s.disk.percent + '%';
                document.getElementById('disk-bar').style.width = s.disk.percent + '%';
                document.getElementById('disk-used').textContent = (s.disk.used / 1073741824).toFixed(1);
                
                document.getElementById('uptime').textContent = s.uptime.formatted;
                document.getElementById('last-update').textContent = s.timestamp;
            }
        });
}

// Auto-refresh co 30 sekund
setInterval(refreshStats, 30000);
</script>
{/block}
