{% extends "base.html" %}

{% block title %}Statistiken - MYP API Tester{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12 mb-4">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">Systemstatistiken</h4>
            </div>
            <div class="card-body">
                <form class="api-form mb-3" data-url="/api/stats" data-method="GET" data-response="statsResponse">
                    <button type="submit" class="btn btn-primary">Statistiken aktualisieren</button>
                </form>
                
                <div class="row" id="statsContainer">
                    <!-- Wird dynamisch gefüllt -->
                </div>
                
                <div class="mt-4">
                    <h6>API-Antwort:</h6>
                    <pre class="api-response" id="statsResponse"></pre>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Statistiken laden
        document.querySelector('form[data-url="/api/stats"]').dispatchEvent(new Event('submit'));
        
        // Statistiken aktualisieren, wenn API-Antwort geladen wird
        const statsResponse = document.getElementById('statsResponse');
        const observer = new MutationObserver(function(mutations) {
            try {
                const stats = JSON.parse(statsResponse.textContent);
                updateStatsDisplay(stats);
            } catch (e) {
                console.error('Fehler beim Parsen der Statistik-Daten:', e);
            }
        });
        
        observer.observe(statsResponse, { childList: true, characterData: true, subtree: true });
    });
    
    function updateStatsDisplay(stats) {
        const container = document.getElementById('statsContainer');
        container.innerHTML = '';
        
        // Drucker-Statistiken
        const printerStats = document.createElement('div');
        printerStats.className = 'col-md-4 mb-3';
        printerStats.innerHTML = `
            <div class="card h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Drucker</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Gesamt:</span>
                        <span>${stats.printers.total}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Verfügbar:</span>
                        <span>${stats.printers.available}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Auslastung:</span>
                        <span>${Math.round(stats.printers.utilization_rate * 100)}%</span>
                    </div>
                    <div class="progress mt-3">
                        <div class="progress-bar" role="progressbar" 
                            style="width: ${Math.round(stats.printers.utilization_rate * 100)}%">
                            ${Math.round(stats.printers.utilization_rate * 100)}%
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Job-Statistiken
        const jobStats = document.createElement('div');
        jobStats.className = 'col-md-4 mb-3';
        jobStats.innerHTML = `
            <div class="card h-100">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">Druckaufträge</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Gesamt:</span>
                        <span>${stats.jobs.total}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Aktiv:</span>
                        <span>${stats.jobs.active}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Abgeschlossen:</span>
                        <span>${stats.jobs.completed}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Durchschnittliche Dauer:</span>
                        <span>${stats.jobs.avg_duration} Minuten</span>
                    </div>
                </div>
            </div>
        `;
        
        // Benutzer-Statistiken
        const userStats = document.createElement('div');
        userStats.className = 'col-md-4 mb-3';
        userStats.innerHTML = `
            <div class="card h-100">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">Benutzer</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Gesamt:</span>
                        <span>${stats.users.total}</span>
                    </div>
                </div>
            </div>
        `;
        
        container.appendChild(printerStats);
        container.appendChild(jobStats);
        container.appendChild(userStats);
    }
</script>
{% endblock %}