{% extends "base.html" %}

{% block title %}Пользователи - LKM37{% endblock %}
{% block nav_users %}active{% endblock %}

{% block content %}
<h2 class="mb-4" style="color: var(--matrix-green);">
    >_ РЕЕСТР_СУБЪЕКТОВ
    {% if current_filter %}
    <span class="badge bg-info ms-2">
        {% if current_filter == 'verified' %}✅ ВЕРИФИЦИРОВАНЫ
        {% elif current_filter == 'unverified' %}⏳ ОЖИДАНИЕ
        {% elif current_filter == 'ig' %}🔵 TEAM
        {% elif current_filter == 'active_unverified' %}🔥 АКТИВНЫ
        {% else %}ВСЕ{% endif %}
    </span>
    <a href="/users" class="btn btn-sm btn-outline-secondary ms-2 text-success border-success">СБРОС</a>
    {% endif %}
</h2>

<!-- Статистика (ПЛОСКИЕ ПЕРЕМЕННЫЕ) -->
<style>
    .filter-card { cursor: pointer; transition: var(--transition-smooth) !important; }
    .filter-card:hover { transform: translateY(-4px) !important; }
    .filter-card.active-filter { box-shadow: 0 0 15px currentColor !important; border-width: 2px !important; }
</style>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-black border-success text-success filter-card {% if not current_filter %}active-filter{% endif %}" onclick="location.href='/users'">
            <div class="card-body text-center">
                <h3>{{ total_count }}</h3>
                <small>⚡️ ВСЕГО</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-black border-success text-success filter-card {% if current_filter == 'verified' %}active-filter{% endif %}" onclick="location.href='/users?filter=verified'">
            <div class="card-body text-center">
                <h3>{{ verified_count }}</h3>
                <small>✅ ВЕРИФИЦИРОВАНЫ</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-black border-info text-info filter-card {% if current_filter == 'ig' %}active-filter{% endif %}" onclick="location.href='/users?filter=ig'">
            <div class="card-body text-center">
                <h3>{{ ig_count }}</h3>
                <small>🔵 ИНИЦИАТИВНАЯ ГРУППА</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-black border-warning text-warning filter-card {% if current_filter == 'active_unverified' %}active-filter{% endif %}" onclick="location.href='/users?filter=active_unverified'">
            <div class="card-body text-center">
                <h3>{{ active_unverified }}</h3>
                <small>🔥 АКТИВНЫЕ ГОСТИ</small>
            </div>
        </div>
    </div>
</div>

<!-- Поиск -->
<div class="card mb-4">
    <div class="card-body bg-black border-success">
        <form method="GET" action="/users" class="row g-3">
            <div class="col-md-10">
                <input type="text" class="form-control bg-dark border-success text-success" name="search" placeholder="Поиск по ID, имени, квартире..." value="{{ search }}">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-matrix w-100">ПОИСК</button>
            </div>
        </form>
    </div>
</div>

<!-- Таблица -->
<div class="card">
    <div class="card-header border-success">СПИСОК_СУБЪЕКТОВ</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-dark table-hover mb-0">
                <thead>
                    <tr class="text-success opacity-50">
                        <th>ID</th>
                        <th>ИМЯ</th>
                        <th>НИК</th>
                        <th>КВАРТИРА</th>
                        <th>СТАТУС</th>
                        <th>ЮРИСТ</th>
                        <th>РЕЙТИНГ</th>
                        <th>ДЕЙСТВИЯ</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td><code>{{ user.user_id }}</code></td>
                        <td>{{ user.first_name }} {{ user.last_name or '' }}</td>
                        <td>@{{ user.username or '—' }}</td>
                        <td>{{ user.apartment or '—' }}</td>
                        <td>
                            {% if user.verified %}<span class="text-success">V</span>{% else %}<span class="text-danger">X</span>{% endif %}
                            {% if user.user_id in ig_user_ids %}<span class="text-info ms-1">IG</span>{% endif %}
                        </td>
                        <td>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" 
                                       {% if user.has_ai_access %}checked{% endif %}
                                       onclick="toggleAI({{ user.user_id }})">
                            </div>
                        </td>
                        <td>{{ user.rating }}</td>
                        <td>
                            <button class="btn btn-sm btn-outline-success" onclick="editUser({{ user.user_id }})"><i class="bi bi-pencil"></i></button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
async function toggleAI(userId) {
    try {
        const response = await fetch(`/api/user/${userId}/toggle_ai`, { method: 'POST' });
        const result = await response.json();
        if (!result.success) alert('Ошибка: ' + result.error);
    } catch (e) {
        alert('Ошибка связи с сервером');
    }
}
</script>
{% endblock %}