{% extends "admin/base.html" %}

{% block title %}Dashboard Administrativo{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Total de Usuários</h5>
                <p class="card-text display-4">{{ total_users }}</p>
                <i class="fas fa-users fa-2x text-primary"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Usuários Ativos</h5>
                <p class="card-text display-4">{{ active_users }}</p>
                <i class="fas fa-user-check fa-2x text-success"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Usuários Inativos</h5>
                <p class="card-text display-4">{{ inactive_users }}</p>
                <i class="fas fa-user-times fa-2x text-danger"></i>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Gerenciamento de Usuários</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table id="users-table" class="table table-striped">
                <thead>
                    <tr>
                        <th>Email</th>
                        <th>Nome</th>
                        <th>Status</th>
                        <th>Último Login</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>{{ user.email }}</td>
                        <td>{{ user.name }}</td>
                        <td>
                            <span class="badge {% if user.is_active %}bg-success{% else %}bg-danger{% endif %}">
                                {{ "Ativo" if user.is_active else "Inativo" }}
                            </span>
                        </td>
                        <td>{{ user.last_login.strftime('%d/%m/%Y %H:%M') if user.last_login else 'Nunca' }}</td>
                        <td>
                            <form action="{{ url_for('admin.reset_user_otp', user_id=user.id) }}" method="post" class="d-inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="btn btn-warning btn-sm" onclick="return confirm('Confirma o reset do OTP deste usuário?')">
                                    <i class="fas fa-key"></i> Reset OTP
                                </button>
                            </form>
                            <form action="{{ url_for('admin.reset_user_password', user_id=user.id) }}" method="post" class="d-inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="btn btn-info btn-sm" onclick="return confirm('Confirma o reset da senha deste usuário?')">
                                    <i class="fas fa-lock"></i> Reset Senha
                                </button>
                            </form>
                            <button onclick="toggleUserStatus({{ user.id }})" class="btn btn-{% if user.is_active %}danger{% else %}success{% endif %} btn-sm">
                                <i class="fas fa-{% if user.is_active %}user-times{% else %}user-check{% endif %}"></i>
                                {{ "Desativar" if user.is_active else "Ativar" }}
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function toggleUserStatus(userId) {
    if (confirm('Deseja alterar o status deste usuário?')) {
        fetch(`/admin/users/${userId}/toggle-status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token() }}'
            }
        }).then(response => {
            if (response.ok) {
                window.location.reload();
            }
        });
    }
}

$(document).ready(function() {
    $('#users-table').DataTable({
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/pt-BR.json'
        },
        order: [[1, 'asc']]
    });
});
</script>
{% endblock %}