{% extends "base.html" %}
{% from "_macros_ui.html" import loading %}
{% block title %}Аналитика — TG Agent{% endblock %}
{% block content %}
{% set _qs = "date_from=" ~ date_from|urlencode ~ "&date_to=" ~ date_to|urlencode ~ "&limit=" ~ limit %}
<h1 class="h3">Аналитика сообщений</h1>
<div class="btn-group btn-group-sm mb-3" role="group">
  <a href="/analytics" class="btn btn-outline-secondary active">Сообщения</a>
  <a href="/analytics/channels" class="btn btn-outline-secondary">Каналы</a>
  <a href="/analytics/trends" class="btn btn-outline-secondary">Тренды</a>
  <a href="/analytics/content" class="btn btn-outline-secondary">Контент</a>
</div>

<form method="get" action="/analytics" class="mb-4" data-busy>
    <div class="row g-3 align-items-end">
        <div class="col-6 col-md-3">
            <label for="date-from" class="form-label">Дата от</label>
            <input type="date" class="form-control" name="date_from" id="date-from" value="{{ date_from }}">
        </div>
        <div class="col-6 col-md-3">
            <label for="date-to" class="form-label">Дата до</label>
            <input type="date" class="form-control" name="date_to" id="date-to" value="{{ date_to }}">
        </div>
        <div class="col-6 col-md-2">
            <label for="limit-select" class="form-label">Топ</label>
            <select name="limit" id="limit-select" class="form-select">
                {% for n in [20, 50, 100] %}
                <option value="{{ n }}" {{ 'selected' if limit == n else '' }}>{{ n }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-6 col-md-2">
            <button type="submit" class="btn btn-primary w-100">Обновить</button>
        </div>
    </div>
</form>

<div class="card mb-4">
    <div class="card-header fw-semibold">Топ сообщений по реакциям</div>
    <div hx-get="/analytics/fragments/top-messages?{{ _qs }}" hx-trigger="load" hx-swap="innerHTML">
        {{ loading(class="card-body") }}
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-12 col-md-6">
        <div class="card h-100">
            <div class="card-header fw-semibold">Вовлечённость по типу контента</div>
            <div hx-get="/analytics/fragments/engagement?{{ _qs }}" hx-trigger="load" hx-swap="innerHTML">
                {{ loading(class="card-body") }}
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="card h-100">
            <div class="card-header fw-semibold">Активность по часам (UTC)</div>
            <div hx-get="/analytics/fragments/hourly?{{ _qs }}" hx-trigger="load" hx-swap="innerHTML">
                {{ loading(class="card-body") }}
            </div>
        </div>
    </div>
</div>
{% endblock %}