{% extends "page.html" %}
{% block page_content %}
<style>
.sort-header { cursor:pointer; user-select:none; }
.sort-header:hover { color:var(--accent,#3498db); }
.sort-header::after { content:' ↕'; opacity:0.3; }
.sort-header.asc::after { content:' ↑'; opacity:1; }
.sort-header.desc::after { content:' ↓'; opacity:1; }
tr.no-consent { background:#fff0f0; }
tr.no-consent:hover { background:#ffe0e0; }
.consent-filter { margin-bottom:12px; }
.consent-filter select { padding:4px 8px; border-radius:6px; border:1px solid #ccc; }
</style>
<div class="card">
    <div class="card-header">
        <h2>Пользователи бота</h2>
        <div class="consent-filter" style="margin-left:auto;">
            <select id="consent-filter" onchange="loadUsers()">
                <option value="">Все пользователи</option>
                <option value="true">Согласие дано</option>
                <option value="false">Согласие не дано</option>
            </select>
        </div>
    </div>
    <div class="table-wrap"><table>
        <thead><tr>
            <th class="sort-header" data-sort="id" onclick="sortBy('id')">ID</th>
            <th class="sort-header" data-sort="max_user_id" onclick="sortBy('max_user_id')">Max User ID</th>
            <th class="sort-header" data-sort="first_name" onclick="sortBy('first_name')">Имя</th>
            <th class="sort-header" data-sort="phone" onclick="sortBy('phone')">Телефон</th>
            <th class="sort-header" data-sort="email" onclick="sortBy('email')">Email</th>
            <th class="sort-header" data-sort="consent_given" onclick="sortBy('consent_given')">Согласие</th>
            <th class="sort-header" data-sort="created_at" onclick="sortBy('created_at')">Дата регистрации</th>
        </tr></thead>
        <tbody id="users-list"></tbody>
    </table></div>
    <div style="margin-top:12px;display:flex;justify-content:space-between;align-items:center;">
        <span id="user-count" style="color:#666;"></span>
        <div>
            <button class="btn btn-secondary" onclick="prevPage()" id="prev-btn" disabled>← Назад</button>
            <span id="page-info" style="margin:0 12px;">Стр. 1</span>
            <button class="btn btn-secondary" onclick="nextPage()" id="next-btn">Вперёд →</button>
        </div>
    </div>
</div>
<script>
var currentPage = 1;
var currentSort = 'created_at';
var currentDir = 'desc';
var totalUsers = 0;
var pageSize = 20;

function loadUsers(){
    var consent = document.getElementById('consent-filter').value;
    var url = '/service/api/bot/users?page=' + currentPage + '&limit=' + pageSize +
              '&sort_by=' + currentSort + '&sort_dir=' + currentDir;
    if(consent) url += '&consent=' + consent;
    fetch(url).then(function(r){ return r.json() }).then(function(d){
        totalUsers = d.total || 0;
        var users = d.users || [];
        var tbody = document.getElementById('users-list');
        tbody.innerHTML = '';
        users.forEach(function(u){
            var tr = document.createElement('tr');
            if(!u.consent_given) tr.className = 'no-consent';
            var name = (u.first_name || '') + ' ' + (u.last_name || '');
            tr.innerHTML = '<td>' + u.id + '</td><td>' + u.max_user_id + '</td><td>' + name.trim() + '</td><td>' + (u.phone || '') + '</td><td>' + (u.email || '') + '</td><td>' + (u.consent_given?'✅':'❌') + '</td><td>' + (u.created_at||'') + '</td>';
            tbody.appendChild(tr);
        });
        document.getElementById('user-count').textContent = 'Всего: ' + totalUsers;
        var totalPages = Math.ceil(totalUsers / pageSize) || 1;
        document.getElementById('page-info').textContent = 'Стр. ' + currentPage + ' из ' + totalPages;
        document.getElementById('prev-btn').disabled = currentPage <= 1;
        document.getElementById('next-btn').disabled = currentPage >= totalPages;
        updateSortHeaders();
    });
}

function sortBy(col){
    if(currentSort === col){
        currentDir = currentDir === 'asc' ? 'desc' : 'asc';
    } else {
        currentSort = col;
        currentDir = 'desc';
    }
    currentPage = 1;
    loadUsers();
}

function updateSortHeaders(){
    document.querySelectorAll('.sort-header').forEach(function(th){
        th.classList.remove('asc','desc');
        if(th.dataset.sort === currentSort){
            th.classList.add(currentDir);
        }
    });
}

function prevPage(){
    if(currentPage > 1){ currentPage--; loadUsers(); }
}

function nextPage(){
    currentPage++; loadUsers();
}

loadUsers();
</script>
{% endblock %}