{% extends "base.html" %}

{% block title %}System Statistics - Server Monitoring{% endblock %}

{% block page_title %}System Statistics{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Device Statistics -->
    <div class="row mb-4">
        <div class="col-12">
            <h4>Device Statistics</h4>
        </div>
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5 class="card-title">Total Devices</h5>
                    <h2>{{ device_stats.get('total', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">Active</h5>
                    <h2>{{ device_stats.get('active', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h5 class="card-title">Inactive</h5>
                    <h2>{{ device_stats.get('inactive', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h5 class="card-title">Maintenance</h5>
                    <h2>{{ device_stats.get('maintenance', 0) }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Log Statistics -->
    <div class="row mb-4">
        <div class="col-12">
            <h4>Log Activity</h4>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Last Hour</h5>
                    <h2 class="text-primary">{{ log_stats.get('last_hour', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Last 24 Hours</h5>
                    <h2 class="text-success">{{ log_stats.get('last_24h', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Last Week</h5>
                    <h2 class="text-info">{{ log_stats.get('last_week', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Last Month</h5>
                    <h2 class="text-warning">{{ log_stats.get('last_month', 0) }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Compression Statistics -->
    <div class="row mb-4">
        <div class="col-12">
            <h4>Message Compression</h4>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Messages Compressed</h5>
                    <h2 class="text-primary">{{ compression_stats.get('total_compressed', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Space Saved</h5>
                    <h2 class="text-success">{{ compression_stats.get('total_saved_bytes', 0) | filesizeformat }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Compression Ratio</h5>
                    <h2 class="text-info">{{ compression_stats.get('average_ratio', 0) | round(1) }}%</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Ansible Execution Statistics -->
    <div class="row mb-4">
        <div class="col-12">
            <h4>Ansible Executions</h4>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Total Executions</h5>
                    <h2 class="text-primary">{{ exec_stats.get('total', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">Successful</h5>
                    <h2>{{ exec_stats.get('successful', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <h5 class="card-title">Failed</h5>
                    <h2>{{ exec_stats.get('failed', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h5 class="card-title">Running</h5>
                    <h2>{{ exec_stats.get('running', 0) }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- System Health Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>System Health Overview</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Device Status Distribution</h6>
                            <div class="progress mb-3">
                                {% set total_devices = device_stats.get('total', 0) %}
                                {% if total_devices > 0 %}
                                    <div class="progress-bar bg-success" style="width: {{ (device_stats.get('active', 0) * 100 / total_devices) }}%">
                                        Active ({{ device_stats.get('active', 0) }})
                                    </div>
                                    <div class="progress-bar bg-warning" style="width: {{ (device_stats.get('inactive', 0) * 100 / total_devices) }}%">
                                        Inactive ({{ device_stats.get('inactive', 0) }})
                                    </div>
                                    <div class="progress-bar bg-info" style="width: {{ (device_stats.get('maintenance', 0) * 100 / total_devices) }}%">
                                        Maintenance ({{ device_stats.get('maintenance', 0) }})
                                    </div>
                                {% else %}
                                    <div class="progress-bar bg-secondary" style="width: 100%">
                                        No devices configured
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6>Ansible Success Rate</h6>
                            <div class="progress mb-3">
                                {% set total_exec = exec_stats.get('total', 0) %}
                                {% if total_exec > 0 %}
                                    <div class="progress-bar bg-success" style="width: {{ (exec_stats.get('successful', 0) * 100 / total_exec) }}%">
                                        Success ({{ exec_stats.get('successful', 0) }})
                                    </div>
                                    <div class="progress-bar bg-danger" style="width: {{ (exec_stats.get('failed', 0) * 100 / total_exec) }}%">
                                        Failed ({{ exec_stats.get('failed', 0) }})
                                    </div>
                                {% else %}
                                    <div class="progress-bar bg-secondary" style="width: 100%">
                                        No executions yet
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}