{% extends "base.html" %}

{% block title %}Gestione Utenti - PyArchInit-Mini{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-users"></i> Gestione Utenti</h2>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal">
            <i class="fas fa-user-plus"></i> Nuovo Utente
        </button>
    </div>

    <div class="card">
        <div class="card-body">
            <table class="table table-hover">
                <thead class="table-header">
                    <tr>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Nome Completo</th>
                        <th>Ruolo</th>
                        <th>Stato</th>
                        <th>Ultimo Accesso</th>
                        <th>Azioni</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>
                            <strong>{{ user.username }}</strong>
                            {% if user.is_superuser %}
                            <span class="badge bg-danger">Superuser</span>
                            {% endif %}
                        </td>
                        <td>{{ user.email }}</td>
                        <td>{{ user.full_name or '-' }}</td>
                        <td>
                            {% if user.role == 'admin' %}
                            <span class="badge bg-danger">Admin</span>
                            {% elif user.role == 'operator' %}
                            <span class="badge bg-warning">Operator</span>
                            {% else %}
                            <span class="badge bg-info">Viewer</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if user.is_active %}
                            <span class="badge bg-success">Attivo</span>
                            {% else %}
                            <span class="badge bg-secondary">Inattivo</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if user.last_login %}
                            {{ user.last_login }}
                            {% else %}
                            <span class="text-muted">Mai</span>
                            {% endif %}
                        </td>
                        <td>
                            <button class="btn btn-sm btn-warning" onclick="editUser({{ user.id }}, '{{ user.username }}', '{{ user.email }}', '{{ user.full_name or '' }}', '{{ user.role }}', {{ user.is_active|lower }})">
                                <i class="fas fa-edit"></i>
                            </button>
                            {% if user.id != current_user.id %}
                            <button class="btn btn-sm btn-danger" onclick="deleteUser({{ user.id }}, '{{ user.username }}')">
                                <i class="fas fa-trash"></i>
                            </button>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Create User Modal -->
<div class="modal fade" id="createUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Crea Nuovo Utente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('auth.create_user') }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="username" class="form-label">Username *</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label">Email *</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label">Password *</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>

                    <div class="mb-3">
                        <label for="full_name" class="form-label">Nome Completo</label>
                        <input type="text" class="form-control" id="full_name" name="full_name">
                    </div>

                    <div class="mb-3">
                        <label for="role" class="form-label">Ruolo *</label>
                        <select class="form-select" id="role" name="role" required>
                            <option value="viewer">Viewer (Solo lettura)</option>
                            <option value="operator">Operator (Lettura/Scrittura)</option>
                            <option value="admin">Admin (Tutti i permessi)</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
                    <button type="submit" class="btn btn-primary">Crea Utente</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modifica Utente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="editUserForm">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <div class="modal-body">
                    <input type="hidden" id="edit_user_id" name="user_id">

                    <div class="mb-3">
                        <label for="edit_username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="edit_username" name="username" readonly>
                    </div>

                    <div class="mb-3">
                        <label for="edit_email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="edit_email" name="email">
                    </div>

                    <div class="mb-3">
                        <label for="edit_full_name" class="form-label">Nome Completo</label>
                        <input type="text" class="form-control" id="edit_full_name" name="full_name">
                    </div>

                    <div class="mb-3">
                        <label for="edit_password" class="form-label">Nuova Password (lascia vuoto per non modificare)</label>
                        <input type="password" class="form-control" id="edit_password" name="password">
                    </div>

                    <div class="mb-3">
                        <label for="edit_role" class="form-label">Ruolo</label>
                        <select class="form-select" id="edit_role" name="role">
                            <option value="viewer">Viewer</option>
                            <option value="operator">Operator</option>
                            <option value="admin">Admin</option>
                        </select>
                    </div>

                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="edit_is_active" name="is_active" value="1">
                        <label class="form-check-label" for="edit_is_active">
                            Utente Attivo
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
                    <button type="submit" class="btn btn-primary">Salva Modifiche</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function editUser(id, username, email, fullName, role, isActive) {
    document.getElementById('edit_user_id').value = id;
    document.getElementById('edit_username').value = username;
    document.getElementById('edit_email').value = email;
    document.getElementById('edit_full_name').value = fullName;
    document.getElementById('edit_role').value = role;
    document.getElementById('edit_is_active').checked = isActive;
    document.getElementById('editUserForm').action = `/auth/users/${id}/edit`;
    new bootstrap.Modal(document.getElementById('editUserModal')).show();
}

function deleteUser(id, username) {
    if (confirm(`Sei sicuro di voler eliminare l'utente "${username}"?`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/auth/users/${id}/delete`;

        // Add CSRF token
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = 'csrf_token';
        csrfInput.value = '{{ csrf_token() }}';
        form.appendChild(csrfInput);

        document.body.appendChild(form);
        form.submit();
    }
}
</script>
{% endblock %}