{% extends "base.html" %}

{% block title %}Панель управления{% endblock %}
{% block title_header %}Панель управления{% endblock %}

{% block content %}
<style>
  .mtproto-kpi {
    position: relative;
    overflow: hidden;
    min-height: 174px;
    border-radius: 14px;
    border: 1px solid rgba(95, 108, 148, .28);
    background: radial-gradient(620px 170px at 0% 0%, rgba(91, 106, 234, .12), transparent 36%), #0f172a;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .mtproto-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0,0,0,.30);
    border-color: rgba(124, 111, 247, .50);
  }
  .mtproto-kpi .kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .28rem;
  }
  .mtproto-kpi .kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(9,14,28,.7);
  }
  .mtproto-kpi .kpi-label {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    margin-top: .12rem;
  }
  .mtproto-kpi .kpi-value {
    font-size: 1.56rem;
    font-weight: 700;
    line-height: 1.08;
    color: #f3f4f6;
  }
  .mtproto-kpi .kpi-sub {
    color: #9ca3af;
    font-size: 12px;
  }
  .mtproto-kpi .kpi-bar {
    margin-top: .5rem;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
  }
  .mtproto-kpi .kpi-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
  }
  .main-kpi {
    position: relative;
    overflow: hidden;
    min-height: 174px;
    border-radius: 14px;
    border: 1px solid rgba(109, 124, 184, .28);
    background: radial-gradient(620px 170px at 0% 0%, rgba(96,113,255,.12), transparent 36%), #101827;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .main-kpi:hover {
    transform: translateY(-1px);
    border-color: rgba(124,111,247,.52);
    box-shadow: 0 12px 24px rgba(0,0,0,.30);
  }
  .main-kpi .kpi-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:.28rem; }
  .main-kpi .kpi-ico {
    width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
    font-size:14px;border:1px solid rgba(255,255,255,.12);background:rgba(9,14,28,.68);
  }
  .main-kpi .kpi-title { font-size:11px;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;font-weight:700; }
  .main-kpi .kpi-val { font-size:1.56rem;font-weight:700;line-height:1.08;color:#f3f4f6; }
  .main-kpi .kpi-sub { color:#9ca3af;font-size:12px; }
  .main-kpi .kpi-bar { margin-top:.5rem;height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden; }
  .main-kpi .kpi-bar > span { display:block;height:100%;border-radius:inherit; }
  .kpi-card-pad { padding: 12px 14px !important; }
  @media (min-width: 768px) {
    .main-grid-tight { gap: 12px !important; }
  }
  .server-stat-card {
    min-height: 154px;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(95, 108, 148, .28);
    background: radial-gradient(620px 170px at 0% 0%, rgba(96,113,255,.10), transparent 36%), #0f172a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .24);
  }
  .server-stat-value {
    font-size: 2.15rem;
    line-height: 1.02;
    font-weight: 700;
    color: #f3f4f6;
  }
  .server-stat-name {
    color: #d1d5db;
    font-size: 14px;
    font-weight: 600;
  }
  .server-stat-track {
    margin-top: .55rem;
    height: 11px;
    border-radius: 4px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
  }
  .server-stat-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #ecfeff;
    border-radius: 3px;
  }
</style>
{% set m = mtproto_stats if mtproto_stats is defined else {} %}
{% set h = server_stats if server_stats is defined else {"host_name":"localhost","cpu":0,"ram":0,"disk":0} %}
<div class="mb-3 text-lg font-semibold text-white">Основная статистика</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 main-grid-tight">
    <div class="rounded-lg shadow-lg p-4 main-kpi kpi-card-pad">
        <div class="kpi-row"><div class="kpi-ico text-blue-300"><i class="bi bi-people-fill"></i></div><span class="text-[10px] text-gray-500">Users</span></div>
        <div class="kpi-title">Пользователи</div>
        <div class="kpi-val">{{ total_users or 0 }}</div>
        <div class="kpi-sub">+{{ new_users_week or 0 }} за 7 дней</div>
        <div class="kpi-bar"><span style="width:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);"></span></div>
    </div>
    <div class="rounded-lg shadow-lg p-4 main-kpi kpi-card-pad">
        <div class="kpi-row"><div class="kpi-ico text-emerald-300"><i class="bi bi-person-plus-fill"></i></div><span class="text-[10px] text-gray-500">Today</span></div>
        <div class="kpi-title">Новые за сегодня</div>
        <div class="kpi-val">{{ new_users_today or 0 }}</div>
        <div class="kpi-sub">регистраций</div>
        <div class="kpi-bar"><span style="width:100%;background:linear-gradient(90deg,#10b981,#34d399);"></span></div>
    </div>
    <div class="rounded-lg shadow-lg p-4 main-kpi kpi-card-pad">
        <div class="kpi-row"><div class="kpi-ico text-violet-300"><i class="bi bi-patch-check-fill"></i></div><span class="text-[10px] text-gray-500">Subs</span></div>
        <div class="kpi-title">Подписки</div>
        <div class="kpi-val">{{ active_subscriptions or 0 }}</div>
        <div class="kpi-sub">онлайн в 3X-UI (серверов: {{ xui_servers_ok or 0 }}/{{ xui_servers_total or 0 }})</div>
        <div class="kpi-bar"><span style="width:100%;background:linear-gradient(90deg,#8b5cf6,#a78bfa);"></span></div>
    </div>
    <div class="rounded-lg shadow-lg p-4 main-kpi kpi-card-pad">
        <div class="kpi-row"><div class="kpi-ico text-rose-300"><i class="bi bi-person-x-fill"></i></div><span class="text-[10px] text-gray-500">Blocked</span></div>
        <div class="kpi-title">Заблокированные</div>
        <div class="kpi-val text-rose-300">{{ blocked_users or 0 }}</div>
        <div class="kpi-sub">пользователей</div>
        <div class="kpi-bar"><span style="width:100%;background:linear-gradient(90deg,#ef4444,#fb7185);"></span></div>
    </div>
    <div class="rounded-lg shadow-lg p-4 main-kpi kpi-card-pad">
        <div class="kpi-row"><div class="kpi-ico text-cyan-300"><i class="bi bi-receipt"></i></div><span class="text-[10px] text-gray-500">Payments</span></div>
        <div class="kpi-title">Платежи за сегодня</div>
        <div class="kpi-val">{{ payments_today_count or 0 }}</div>
        <div class="kpi-sub">успешных оплат</div>
        <div class="kpi-bar"><span style="width:100%;background:linear-gradient(90deg,#06b6d4,#67e8f9);"></span></div>
    </div>
    <div class="rounded-lg shadow-lg p-4 main-kpi kpi-card-pad">
        <div class="kpi-row"><div class="kpi-ico text-amber-300"><i class="bi bi-currency-dollar"></i></div><span class="text-[10px] text-gray-500">Revenue</span></div>
        <div class="kpi-title">Доход сегодня</div>
        <div class="kpi-val text-amber-200">{{ "%.2f"|format(payments_today_sum or 0) }} ₽</div>
        <div class="kpi-sub">за текущие сутки</div>
        <div class="kpi-bar"><span style="width:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24);"></span></div>
    </div>
</div>

<div class="mb-3 text-lg font-semibold text-white">Статистика сервера</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 main-grid-tight">
    <div class="server-stat-card">
        <div class="flex items-center justify-between mb-2">
            <div class="kpi-ico text-rose-300"><i class="bi bi-cpu-fill"></i></div>
            <span class="text-[10px] text-gray-500">{{ h.host_name or "localhost" }}</span>
        </div>
        <div class="text-center">
            <div class="server-stat-value">{{ "%.1f"|format(h.cpu or 0) }}%</div>
            <div class="server-stat-name">CPU</div>
        </div>
        <div class="server-stat-track">
            <div class="server-stat-fill" style="width:{{ [((h.cpu or 0)|int), 100]|min }}%;background:linear-gradient(90deg,#ef4444,#f87171);">
                {{ "%.1f"|format(h.cpu or 0) }}%
            </div>
        </div>
    </div>
    <div class="server-stat-card">
        <div class="flex items-center justify-between mb-2">
            <div class="kpi-ico text-emerald-300"><i class="bi bi-memory"></i></div>
            <span class="text-[10px] text-gray-500">RAM</span>
        </div>
        <div class="text-center">
            <div class="server-stat-value">{{ "%.1f"|format(h.ram or 0) }}%</div>
            <div class="server-stat-name">ОЗУ</div>
        </div>
        <div class="server-stat-track">
            <div class="server-stat-fill" style="width:{{ [((h.ram or 0)|int), 100]|min }}%;background:linear-gradient(90deg,#16a34a,#22c55e);">
                {{ "%.1f"|format(h.ram or 0) }}%
            </div>
        </div>
    </div>
    <div class="server-stat-card">
        <div class="flex items-center justify-between mb-2">
            <div class="kpi-ico text-green-300"><i class="bi bi-device-ssd-fill"></i></div>
            <span class="text-[10px] text-gray-500">DISK</span>
        </div>
        <div class="text-center">
            <div class="server-stat-value">{{ "%.1f"|format(h.disk or 0) }}%</div>
            <div class="server-stat-name">Диск</div>
        </div>
        <div class="server-stat-track">
            <div class="server-stat-fill" style="width:{{ [((h.disk or 0)|int), 100]|min }}%;background:linear-gradient(90deg,#16a34a,#22c55e);">
                {{ "%.1f"|format(h.disk or 0) }}%
            </div>
        </div>
    </div>
</div>

<div class="mb-3 text-lg font-semibold text-white">Статистика MTProto</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6 main-grid-tight">
    <div class="bg-gray-800 rounded-lg shadow-lg p-4 border border-indigo-900/40 mtproto-kpi kpi-card-pad">
        <div class="kpi-top">
            <div class="kpi-icon text-indigo-300"><i class="bi bi-hdd-network"></i></div>
            <span class="text-[10px] text-gray-500">MTProto</span>
        </div>
        <div class="kpi-label">Ноды</div>
        <div class="kpi-value">{{ m.nodes_total or 0 }}</div>
        <div class="kpi-sub">всего</div>
        <div class="kpi-bar"><span style="width:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);"></span></div>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-4 border border-emerald-900/40 mtproto-kpi kpi-card-pad">
        <div class="kpi-top">
            <div class="kpi-icon text-emerald-300"><i class="bi bi-wifi"></i></div>
            <span class="text-[10px] text-gray-500">Agent</span>
        </div>
        <div class="kpi-label">Онлайн</div>
        <div class="kpi-value text-emerald-300">{{ m.nodes_online or 0 }}</div>
        <div class="kpi-sub">нод доступно</div>
        <div class="kpi-bar"><span style="width:{{ (100 if (m.nodes_total or 0)==0 else (((m.nodes_online or 0) * 100 // (m.nodes_total or 1)))) }}%;background:linear-gradient(90deg,#10b981,#34d399);"></span></div>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-4 border border-sky-900/40 mtproto-kpi kpi-card-pad">
        <div class="kpi-top">
            <div class="kpi-icon text-sky-300"><i class="bi bi-people-fill"></i></div>
            <span class="text-[10px] text-gray-500">Users</span>
        </div>
        <div class="kpi-label">Клиенты</div>
        <div class="kpi-value">{{ m.clients_total or 0 }}</div>
        <div class="kpi-sub">всего клиентов</div>
        <div class="kpi-bar"><span style="width:100%;background:linear-gradient(90deg,#0ea5e9,#38bdf8);"></span></div>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-4 border border-rose-900/40 mtproto-kpi kpi-card-pad">
        <div class="kpi-top">
            <div class="kpi-icon text-rose-300"><i class="bi bi-pause-circle"></i></div>
            <span class="text-[10px] text-gray-500">State</span>
        </div>
        <div class="kpi-label">Остановлены</div>
        <div class="kpi-value text-rose-300">{{ m.clients_stopped or 0 }}</div>
        <div class="kpi-sub">неактивные</div>
        <div class="kpi-bar"><span style="width:{{ (0 if (m.clients_total or 0)==0 else (((m.clients_stopped or 0) * 100 // (m.clients_total or 1)))) }}%;background:linear-gradient(90deg,#ef4444,#fb7185);"></span></div>
    </div>
</div>
{% if m.error %}
<div class="mb-6 text-xs text-amber-300 bg-amber-900/20 border border-amber-800 rounded-lg px-3 py-2">
    MTProto статистика недоступна: {{ m.error }}
</div>
{% endif %}

<div class="mb-6">
    <h6 class="mb-4 text-lg font-semibold">Последние платежи</h6>
    <div class="dataTables_wrapper">
        <table class="table table-hover align-middle dataTable">
            <thead>
                <tr>
                    <th style="width: 120px;">ID транзакции</th>
                    <th style="width: 200px;">Пользователь</th>
                    <th style="width: 200px;">Тариф</th>
                    <th style="width: 120px;">Сумма</th>
                    <th style="width: 150px;">Дата</th>
                </tr>
            </thead>
            <tbody>
                {% for payment in recent_payments %}
                <tr>
                    <td>#{{ payment.id }}</td>
                    <td>{{ payment.username }}</td>
                    <td>{{ payment.tariff_name }}</td>
                    <td>{{ "%.2f"|format(payment.price) }} ₽</td>
                    <td>{{ payment.date }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}