{% extends "base.html" %}

{% block title %}System Status{% endblock %}

{% block extra_css %}
<style>
    .service-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 15px;
        border-left: 5px solid #dee2e6;
        transition: all 0.3s;
    }
    
    .service-card.healthy {
        border-left-color: #28a745;
    }
    
    .service-card.unhealthy {
        border-left-color: #ffc107;
    }
    
    .service-card.down {
        border-left-color: #dc3545;
    }
    
    .status-badge {
        font-size: 0.875rem;
        padding: 5px 15px;
        border-radius: 20px;
        font-weight: 500;
    }
    
    .status-healthy {
        background-color: #d4edda;
        color: #155724;
    }
    
    .status-unhealthy {
        background-color: #fff3cd;
        color: #856404;
    }
    
    .status-down {
        background-color: #f8d7da;
        color: #721c24;
    }
    
    .response-time {
        font-size: 0.875rem;
        color: #6c757d;
    }
    
    .service-icon {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    
    .grafana-embed {
        width: 100%;
        height: 400px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
    }
    
    .metric-card {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        text-align: center;
    }
    
    .metric-value {
        font-size: 1.5rem;
        font-weight: bold;
        color: #495057;
    }
    
    .metric-label {
        font-size: 0.875rem;
        color: #6c757d;
        text-transform: uppercase;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h2><i class="bi bi-pc-display"></i> System Status</h2>
        <p class="text-muted">Übersicht über die Gesundheit aller Services</p>
    </div>
    <div class="col-auto">
        <button class="btn btn-outline-primary" onclick="location.reload()">
            <i class="bi bi-arrow-clockwise"></i> Aktualisieren
        </button>
    </div>
</div>

<!-- Service Status Grid -->
<div class="row">
    {% for service in services %}
    <div class="col-md-6 col-lg-4">
        <div class="service-card {{ service.status }}">
            <div class="text-center">
                {% if service.name == 'License Server' %}
                    <i class="bi bi-shield-check service-icon text-primary"></i>
                {% elif service.name == 'PostgreSQL' %}
                    <i class="bi bi-database service-icon text-info"></i>
                {% elif service.name == 'Redis' %}
                    <i class="bi bi-memory service-icon text-danger"></i>
                {% elif service.name == 'Auth Service' %}
                    <i class="bi bi-key service-icon text-warning"></i>
                {% elif service.name == 'Analytics Service' %}
                    <i class="bi bi-graph-up service-icon text-success"></i>
                {% else %}
                    <i class="bi bi-server service-icon text-secondary"></i>
                {% endif %}
                
                <h5>{{ service.name }}</h5>
                
                <div class="mb-3">
                    {% if service.status == 'healthy' %}
                        <span class="status-badge status-healthy">
                            <i class="bi bi-check-circle"></i> Healthy
                        </span>
                    {% elif service.status == 'unhealthy' %}
                        <span class="status-badge status-unhealthy">
                            <i class="bi bi-exclamation-circle"></i> Unhealthy
                        </span>
                    {% else %}
                        <span class="status-badge status-down">
                            <i class="bi bi-x-circle"></i> Down
                        </span>
                    {% endif %}
                </div>
                
                {% if service.response_time %}
                <div class="response-time">
                    <i class="bi bi-speedometer2"></i> {{ "%.1f"|format(service.response_time) }}ms
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- System Metrics -->
<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-cpu"></i> System Metriken</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="metric-card">
                    <div class="metric-value" id="cpu-usage">-</div>
                    <div class="metric-label">CPU Auslastung</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="metric-card">
                    <div class="metric-value" id="memory-usage">-</div>
                    <div class="metric-label">RAM Auslastung</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="metric-card">
                    <div class="metric-value" id="disk-usage">-</div>
                    <div class="metric-label">Festplatte</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="metric-card">
                    <div class="metric-value" id="uptime">-</div>
                    <div class="metric-label">Uptime</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Grafana Dashboard Embed (if available) -->
{% if prometheus_data %}
<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-graph-up"></i> Performance Dashboard</h5>
    </div>
    <div class="card-body">
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> 
            Für detaillierte Metriken besuchen Sie das 
            <a href="http://localhost:3000" target="_blank" class="alert-link">Grafana Dashboard</a>
        </div>
        <!-- Optionally embed Grafana dashboard here -->
        <!-- <iframe src="http://localhost:3000/d/license-server-overview?orgId=1&theme=light" class="grafana-embed"></iframe> -->
    </div>
</div>
{% endif %}

<!-- Quick Actions -->
<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-lightning"></i> Quick Actions</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <button class="btn btn-outline-primary w-100 mb-2" onclick="restartService('license-server')">
                    <i class="bi bi-arrow-clockwise"></i> License Server neustarten
                </button>
            </div>
            <div class="col-md-6">
                <button class="btn btn-outline-warning w-100 mb-2" onclick="clearCache()">
                    <i class="bi bi-trash"></i> Cache leeren
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Mock functions for demonstration
    function restartService(service) {
        if (confirm(`Möchten Sie ${service} wirklich neustarten?`)) {
            alert('Service-Neustart wurde initiiert. Dies kann einige Minuten dauern.');
        }
    }
    
    function clearCache() {
        if (confirm('Möchten Sie den Cache wirklich leeren?')) {
            alert('Cache wurde geleert.');
        }
    }
    
    // Fetch system metrics (mock data for now)
    function updateSystemMetrics() {
        // In production, these would come from actual monitoring endpoints
        document.getElementById('cpu-usage').textContent = Math.floor(Math.random() * 40 + 20) + '%';
        document.getElementById('memory-usage').textContent = Math.floor(Math.random() * 30 + 40) + '%';
        document.getElementById('disk-usage').textContent = Math.floor(Math.random() * 20 + 60) + '%';
        document.getElementById('uptime').textContent = '14 Tage';
    }
    
    // Update metrics on page load
    document.addEventListener('DOMContentLoaded', function() {
        updateSystemMetrics();
        
        // Auto-refresh every 30 seconds
        setInterval(updateSystemMetrics, 30000);
    });
</script>
{% endblock %}