{% extends "base.html" %}

{% block title %}Управление пользователями — InfoUser Monitor{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Пользователи</h2>
    <a href="/" class="btn btn-outline-secondary btn-sm">← Назад</a>
</div>

<div class="card shadow-sm mb-4">
    <div class="card-body">
        <h5 class="card-title">Создать пользователя</h5>
        <form id="create-user-form" class="row g-2">
            <div class="col-md-4">
                <input type="text" class="form-control" id="new-username" placeholder="Логин" required>
            </div>
            <div class="col-md-4">
                <input type="password" class="form-control" id="new-password" placeholder="Пароль" required>
            </div>
            <div class="col-md-2">
                <select class="form-select" id="new-role">
                    <option value="viewer">viewer</option>
                    <option value="admin">admin</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">Создать</button>
            </div>
        </form>
        <div id="create-error" class="alert alert-danger mt-3 d-none"></div>
    </div>
</div>

<table class="table table-hover align-middle">
    <thead class="table-dark">
        <tr>
            <th>ID</th>
            <th>Логин</th>
            <th>Роль</th>
            <th>Создан</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for u in users %}
        <tr data-id="{{ u.id }}">
            <td>{{ u.id }}</td>
            <td>{{ u.username }}</td>
            <td>
                <span class="badge {% if u.role == 'admin' %}bg-danger{% else %}bg-secondary{% endif %}">{{ u.role }}</span>
            </td>
            <td>{{ u.created_at | localtime }}</td>
            <td>
                <button class="btn btn-sm btn-outline-primary change-role" data-id="{{ u.id }}" data-username="{{ u.username }}" data-role="{{ u.role }}">Роль</button>
                <button class="btn btn-sm btn-outline-warning reset-password" data-id="{{ u.id }}" data-username="{{ u.username }}">Пароль</button>
                <button class="btn btn-sm btn-outline-danger delete-user" data-id="{{ u.id }}" data-username="{{ u.username }}">Удалить</button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>
document.getElementById('create-user-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const err = document.getElementById('create-error');
    err.classList.add('d-none');
    const res = await fetch('/api/auth/users', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({
            username: document.getElementById('new-username').value,
            password: document.getElementById('new-password').value,
            role: document.getElementById('new-role').value,
        }),
    });
    if (res.ok) {
        location.reload();
    } else {
        const data = await res.json();
        err.textContent = data.detail || 'Ошибка';
        err.classList.remove('d-none');
    }
});

document.querySelectorAll('.change-role').forEach(btn => {
    btn.addEventListener('click', async () => {
        const newRole = btn.dataset.role === 'admin' ? 'viewer' : 'admin';
        if (!confirm(`Сменить роль ${btn.dataset.username} на ${newRole}?`)) return;
        const res = await fetch(`/api/auth/users/${btn.dataset.id}`, {
            method: 'PATCH',
            headers: {'Content-Type': 'application/json'},
            credentials: 'include',
            body: JSON.stringify({role: newRole}),
        });
        if (res.ok) location.reload();
        else alert('Ошибка смены роли');
    });
});

document.querySelectorAll('.reset-password').forEach(btn => {
    btn.addEventListener('click', async () => {
        const password = prompt(`Новый пароль для ${btn.dataset.username}:`);
        if (!password) return;
        const res = await fetch(`/api/auth/users/${btn.dataset.id}`, {
            method: 'PATCH',
            headers: {'Content-Type': 'application/json'},
            credentials: 'include',
            body: JSON.stringify({password}),
        });
        if (res.ok) alert('Пароль изменён');
        else alert('Ошибка смены пароля');
    });
});

document.querySelectorAll('.delete-user').forEach(btn => {
    btn.addEventListener('click', async () => {
        if (!confirm(`Удалить пользователя ${btn.dataset.username}?`)) return;
        const res = await fetch(`/api/auth/users/${btn.dataset.id}`, {method: 'DELETE', credentials: 'include'});
        if (res.ok) location.reload();
        else alert('Ошибка удаления');
    });
});
</script>
{% endblock %}