{% from "_macros.html" import icon %}
{% from "_macros_ui.html" import empty_state %}
{% macro msg_text(text, max_len=100) %}{{ (text or '')[:max_len] }}{{ '…' if text and text|length > max_len else '' }}{% endmacro %}
{% if top_messages %}
<!-- Desktop -->
<div class="table-responsive d-none d-md-block">
<table class="tga-table-striped-hover mb-0">
    <thead>
        <tr>
            <th>#</th>
            <th>Дата</th>
            <th>Канал</th>
            <th>Тип</th>
            <th>Текст</th>
            <th>Реакции</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for msg in top_messages %}
        <tr>
            <td class="text-muted">{{ loop.index }}</td>
            <td class="text-nowrap">{{ msg.date|local_dt }}</td>
            <td>{{ msg.channel_title or msg.channel_username or msg.channel_id }}</td>
            <td><span class="badge text-bg-secondary">{{ msg.media_type or 'text' }}</span></td>
            <td>{{ msg_text(msg.text) }}</td>
            <td><strong>{{ msg.total_reactions }}</strong></td>
            <td>
                {% if msg.channel_username %}
                <a href="https://t.me/{{ msg.channel_username }}/{{ msg.message_id }}" target="_blank" rel="noopener">{{ icon("link") }}</a>
                {% else %}
                <a href="https://t.me/c/{{ msg.channel_id | tme_channel_id }}/{{ msg.message_id }}" target="_blank" rel="noopener">{{ icon("link") }}</a>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
<!-- Mobile -->
<div class="d-md-none mobile-cards p-2">
    {% for msg in top_messages %}
    <div class="card mb-2">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-1">
                <strong class="text-truncate me-2">{{ msg.channel_title or msg.channel_username or msg.channel_id }}</strong>
                <span class="badge text-bg-primary">{{ msg.total_reactions }} 👍</span>
            </div>
            <small class="text-muted">{{ msg.date|local_dt }} &middot; {{ msg.media_type or 'text' }}</small>
            <p class="mb-1 mt-1" style="font-size:0.85rem">{{ msg_text(msg.text) }}</p>
            {% if msg.channel_username %}
            <a href="https://t.me/{{ msg.channel_username }}/{{ msg.message_id }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary">Открыть {{ icon("link") }}</a>
            {% else %}
            <a href="https://t.me/c/{{ msg.channel_id | tme_channel_id }}/{{ msg.message_id }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary">Открыть {{ icon("link") }}</a>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
{{ empty_state("Нет данных. Реакции собираются при сборе сообщений.", class="card-body mb-0") }}
{% endif %}