{% extends "base.html" %}

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

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4"><i class="fas fa-users-cog"></i> Administração de Usuários</h2>
    <div class="card">
        <div class="card-header bg-dark text-white">
            <h3 class="mb-0"><i class="fas fa-users-cog"></i> Administração de Usuários</h3>
        </div>
        <div class="card-body">
            <div class="alert alert-info" role="alert">
                <i class="fas fa-info-circle"></i> Aqui você pode gerenciar todos os usuários do sistema. Use os controles abaixo para ativar/desativar contas ou alterar níveis de acesso.
            </div>
            
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="thead-light">
                        <tr>
                            <th>Usuário</th>
                            <th>Email</th>
                            <th>Nome</th>
                            <th>Último Acesso</th>
                            <th>Status</th>
                            <th>Nível</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for usuario in usuarios %}
                        <tr>
                            <td>{{ usuario.username }}</td>
                            <td>{{ usuario.email }}</td>
                            <td>{{ usuario.nome }}</td>
                            <td>{{ usuario.last_login }}</td>
                            <td>
                                <span class="badge {% if usuario.ativo %}bg-success{% else %}bg-danger{% endif %}">
                                <span class="badge {% if usuario.ativo %}badge-success{% else %}badge-danger{% endif %}">
                                    {{ "Ativo" if usuario.ativo else "Inativo" }}
                                </span>
                            </td>
                            <td>
                                {% if usuario.is_admin %}
                                    Administrador
                                {% else %}
                                    {{ usuario.nivel }}
                                {% endif %}
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <button class="btn btn-sm btn-outline-primary" 
                                            onclick="toggleStatus('{{ usuario.id }}')"
                                            data-toggle="tooltip"
                                            title="{{ 'Desativar' if usuario.ativo else 'Ativar' }} usuário">
                                        <i class="fas {% if usuario.ativo %}fa-user-times{% else %}fa-user-check{% endif %}"></i>
                                    </button>
                                    
                                    <button class="btn btn-sm btn-outline-warning"
                                            onclick="resetarSenha('{{ usuario.id }}')"
                                            data-toggle="tooltip"
                                            title="Resetar senha">
                                        <i class="fas fa-key"></i>
                                    </button>
                                    
                                    {% if not usuario.is_admin %}
                                    <button class="btn btn-sm btn-outline-info"
                                            onclick="alterarNivel('{{ usuario.id }}')"
                                            data-toggle="tooltip"
                                            title="Alterar nível">
                                        <i class="fas fa-level-up-alt"></i>
                                    </button>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Feedback -->
<div class="modal fade" id="feedbackModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Aviso</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="feedbackMessage"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
function showFeedback(message, type = 'info') {
    const modal = document.getElementById('feedbackModal');
    const messageElement = document.getElementById('feedbackMessage');
    messageElement.textContent = message;
    messageElement.className = `alert alert-${type}`;
    $(modal).modal('show');
}

function handleResponse(response) {
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
}

function toggleStatus(userId) {
    if (!confirm('Tem certeza que deseja alterar o status deste usuário?')) {
        return;
    }

    fetch(`/usuarios/${userId}/toggle_status`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(handleResponse)
    .then(data => {
        showFeedback(data.message || 'Status alterado com sucesso!', data.success ? 'success' : 'danger');
        if (data.success) {
            setTimeout(() => location.reload(), 1500);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showFeedback('Erro ao alterar status do usuário. Por favor, tente novamente.', 'danger');
    });
}

function resetarSenha(userId) {
    if (!confirm('Tem certeza que deseja resetar a senha deste usuário?')) {
        return;
    }

    fetch(`/reset_password/${userId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(handleResponse)
    .then(data => {
        showFeedback(data.message || 'Senha resetada com sucesso!', data.success ? 'success' : 'danger');
    })
    .catch(error => {
        console.error('Error:', error);
        showFeedback('Erro ao resetar senha. Por favor, tente novamente.', 'danger');
    });
}

function alterarNivel(userId) {
    const novoNivel = prompt('Digite o novo nível do usuário (1-5):');
    if (!novoNivel) return;

    if (!/^[1-5]$/.test(novoNivel)) {
        showFeedback('Por favor, insira um nível válido entre 1 e 5.', 'warning');
        return;
    }

    fetch(`/usuarios/${userId}/alterar_nivel`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ nivel: parseInt(novoNivel) })
    })
    .then(handleResponse)
    .then(data => {
        showFeedback(data.message || 'Nível alterado com sucesso!', data.success ? 'success' : 'danger');
        if (data.success) {
            setTimeout(() => location.reload(), 1500);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showFeedback('Erro ao alterar nível. Por favor, tente novamente.', 'danger');
    });
}

// Inicializa os tooltips do Bootstrap
$(function () {
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
{% endblock %}