{% extends "base.html" %}

{% block content %}
<div class="top-bar">
    <a href="/dashboard" style="color: var(--color-text); text-decoration: none;">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
    </a>
    <h2>Delete users</h2>
    <a href="/dashboard" class="top-bar-logo-wrap">
        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="One Step Greener" class="top-bar-logo top-bar-logo-sm" />
    </a>
</div>

<section class="manage-section">
    <p class="manage-intro">Remove registered users. Deleted users can no longer check in until registered again.</p>
    <div id="manageList" class="manage-list">
        <span class="manage-loading" id="manageLoading">Loading…</span>
        <ul id="manageUl" class="manage-ul" style="display: none;"></ul>
        <p id="manageEmpty" class="manage-empty" style="display: none;">No registered users.</p>
    </div>
</section>

{% endblock %}

{% block scripts %}
<script>
(function() {
    var loading = document.getElementById('manageLoading');
    var ul = document.getElementById('manageUl');
    var empty = document.getElementById('manageEmpty');

    function loadList() {
        loading.style.display = 'block';
        ul.style.display = 'none';
        empty.style.display = 'none';
        fetch('/api/employees')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                loading.style.display = 'none';
                if (data.employees && data.employees.length > 0) {
                    ul.style.display = 'block';
                    ul.innerHTML = '';
                    data.employees.forEach(function(emp) {
                        var li = document.createElement('li');
                        li.className = 'manage-item';
                        li.innerHTML = '<span class="manage-item-name">' + (emp.name || emp.id) + ' <span class="manage-item-id">' + (emp.id || '') + '</span></span><button type="button" class="manage-delete-btn" data-id="' + (emp.id || '') + '">Delete</button>';
                        ul.appendChild(li);
                    });
                    ul.querySelectorAll('.manage-delete-btn').forEach(function(btn) {
                        btn.addEventListener('click', function() {
                            var id = this.getAttribute('data-id');
                            if (!id) return;
                            if (!confirm('Delete this user? They will need to register again to check in.')) return;
                            var row = this.closest('li');
                            fetch('/api/employees/' + encodeURIComponent(id), { method: 'DELETE' })
                                .then(function(r) { return r.json(); })
                                .then(function(data) {
                                    if (data.status === 'ok') {
                                        if (typeof showSnackbar === 'function') showSnackbar('User deleted.', 'success');
                                        row.remove();
                                        if (ul.children.length === 0) {
                                            ul.style.display = 'none';
                                            empty.style.display = 'block';
                                        }
                                    } else {
                                        if (typeof showSnackbar === 'function') showSnackbar(data.message || 'Delete failed', 'error');
                                    }
                                })
                                .catch(function() {
                                    if (typeof showSnackbar === 'function') showSnackbar('Request failed', 'error');
                                });
                        });
                    });
                } else {
                    empty.style.display = 'block';
                }
            })
            .catch(function() {
                loading.textContent = 'Could not load list.';
                loading.style.display = 'block';
            });
    }

    loadList();
})();
</script>
{% endblock %}