{% extends "admin/admin_base.html" %}

{% block admin_content %}
<div class="admin-toolbar">
    <div class="admin-toolbar__main">
        <h1 class="admin-toolbar__title"><i class="bi bi-speedometer2" aria-hidden="true"></i> Метрики и мониторинг</h1>
        <p class="admin-toolbar__meta muted">Сводные показатели производительности системы</p>
    </div>
    <div class="admin-toolbar__actions">
        <button type="button" class="btn primary btn-sm" onclick="refreshMetrics()">
            <i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Обновить
        </button>
    </div>
</div>

<div class="stats-grid mb-4">
    <article class="card stat-card">
        <h3>Всего запросов</h3>
        <strong class="text-primary" id="totalRequests">—</strong>
    </article>
    <article class="card stat-card">
        <h3>Ошибки</h3>
        <strong class="text-danger" id="totalErrors">—</strong>
    </article>
    <article class="card stat-card">
        <h3>RPS</h3>
        <strong class="text-success" id="throughput">—</strong>
    </article>
    <article class="card stat-card">
        <h3>Активные запросы</h3>
        <strong class="text-info" id="activeRequests">—</strong>
    </article>
</div>

<div class="grid-two mb-4">
    <article class="admin-card card">
        <h3>Использование CPU</h3>
        <div class="progress mt-3" style="height: 30px;">
            <div class="progress-bar" role="progressbar" id="cpuProgress" style="width: 0%">0%</div>
        </div>
    </article>
    <article class="admin-card card">
        <h3>Использование памяти</h3>
        <div class="progress mt-3" style="height: 30px;">
            <div class="progress-bar bg-warning" role="progressbar" id="memoryProgress" style="width: 0%">0%</div>
        </div>
    </article>
</div>

<article class="admin-card card mb-4">
    <div class="toolbar">
        <h3 class="mb-0">Метрики по сервисам</h3>
        <div class="toolbar-controls">
            <button type="button" class="btn primary btn-sm" onclick="refreshMetrics()">
                <i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Обновить
            </button>
        </div>
    </div>
    <div class="card-body">
        <div id="servicesMetricsContainer">
            <div class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Загрузка…</span>
                </div>
            </div>
        </div>
    </div>
</article>

<article class="admin-card card mb-4">
    <h3>Экспорт метрик</h3>
    <div class="quick-actions mt-3">
        <a href="/api/v1/admin/metrics/export?format=json" target="_blank" class="btn secondary">
            <i class="bi bi-download" aria-hidden="true"></i> JSON
        </a>
        <a href="/api/v1/admin/metrics/export?format=csv" target="_blank" class="btn secondary">
            <i class="bi bi-download" aria-hidden="true"></i> CSV
        </a>
        <a href="/metrics" target="_blank" class="btn ghost">
            <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i> Prometheus
        </a>
        <a href="/admin/monitoring" class="btn ghost">
            <i class="bi bi-graph-up" aria-hidden="true"></i> Дашборды
        </a>
        <a href="{{ url_for('admin.alerts') }}" class="btn ghost">
            <i class="bi bi-bell" aria-hidden="true"></i> Алерты
        </a>
    </div>
</article>
{% endblock %}

{% block admin_scripts %}
<script src="{{ url_for('static', filename='js/metrics.js') }}"></script>
{% endblock %}