{% extends "base.html" %}


{% block title %}Users - Job Scheduler{% endblock %}

{% block content %}
<div class="page-header">
    <h2>Users</h2>
    <button onclick="showCreateUser()" class="btn">+ New User</button>
</div>

<div class="section">
    <div class="table-container">
        <table id="users-table">
            <thead>
                <tr>
                    <th>UserID</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="users-body">
                <tr>
                    <td colspan="5" class="loading">Loading...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div id="create-modal" class="modal" style="display:none">
    <div class="modal-content">
        <h3>Create New User</h3>
        <form id="create-user-form">
            <div class="form-group">
                <label>Username</label>
                <input type="text" id="new-username" required>
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" id="new-email" required>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" id="new-password" required>
            </div>
            <div class="form-group">
                <label>Confirm Password</label>
                <input type="password" id="new-password-confirm" required>
            </div>
            <div class="btn-group">
                <button type="submit" class="btn">Create</button>
                <button type="button" onclick="hideModal()" class="btn btn-secondary">Cancel</button>
            </div>
        </form>
    </div>
</div>

<div id="change-password-modal" class="modal" style="display:none">
    <div class="modal-content">
        <h3>Change Password</h3>
        <form id="change-password-form">
            <input type="hidden" id="change-user-id">
            <div class="form-group">
                <label>New Password</label>
                <input type="password" id="change-password" required>
            </div>
            <div class="form-group">
                <label>Confirm Password</label>
                <input type="password" id="change-password-confirm" required>
            </div>
            <div class="btn-group">
                <button type="submit" class="btn">Update</button>
                <button type="button" onclick="hidePasswordModal()" class="btn btn-secondary">Cancel</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const users = {{ usersJson }};
    const userIds = {{ userIdsJson }};

    async function loadUsers() {
        const tbody = document.getElementById('users-body');
        if (users.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="no-data">No users found</td></tr>';
            return;
        }

        tbody.innerHTML = users.map((user, index) => `
        <tr>
            <td>${userIds[index]}</td>
            <td>${user.username}</td>
            <td>${user.email || '-'}</td>
            <td>${formatTime(user.createdAt)}</td>
            <td>
                <button onclick="showChangePassword(${userIds[index]})" class="btn btn-sm">Change Password</button>
                <button onclick="deleteUser(${userIds[index]})" class="btn btn-sm btn-danger">Delete</button>
            </td>
        </tr>
    `).join('');
    }

    function showCreateUser() {
        document.getElementById('create-modal').style.display = 'flex';
    }

    function hideModal() {
        document.getElementById('create-modal').style.display = 'none';
    }

    function showChangePassword(userId) {
        document.getElementById('change-user-id').value = userId;
        document.getElementById('change-password-modal').style.display = 'flex';
    }

    function hidePasswordModal() {
        document.getElementById('change-password-modal').style.display = 'none';
    }

    document.getElementById('create-user-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const password = document.getElementById('new-password').value;
        const confirm = document.getElementById('new-password-confirm').value;

        if (password !== confirm) {
            alert('Passwords do not match');
            return;
        }

        try {
            const response = await fetch('/api/create_user', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    username: document.getElementById('new-username').value,
                    email: document.getElementById('new-email').value,
                    password: password
                })
            });

            if (response.ok) {
                hideModal();
                loadUsers();
            } else {
                alert('Failed to create user');
            }
        } catch (error) {
            alert('Error: ' + error);
        }
    });

    document.getElementById('change-password-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const password = document.getElementById('change-password').value;
        const confirm = document.getElementById('change-password-confirm').value;

        if (password !== confirm) {
            alert('Passwords do not match');
            return;
        }

        const userId = document.getElementById('change-user-id').value;
        try {
            const response = await fetch(`/api/update_user_password`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ password: password, userId: userId })
            });

            if (response.ok) {
                hidePasswordModal();
                alert('Password updated successfully');
            } else {
                alert('Failed to update password');
            }
        } catch (error) {
            alert('Error: ' + error);
        }
    });

    async function deleteUser(userId) {
        showConfirmModal('Delete User', 'Delete this user?', async () => {
            console.log('Deleting user:', userId);
            try {
                const response = await fetch(`/api/delete_user`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ userId: userId })
                });
                if (response.ok) {
                    loadUsers();
                } else {
                    alert('Failed to delete user');
                }
            } catch (error) {
                alert('Error: ' + error);
            }
        });
    }

    loadUsers();
</script>

<style>
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal-content {
        background: var(--bg-card);
        padding: 2rem;
        border-radius: 8px;
        max-width: 500px;
        width: 90%;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--text);
    }

    .form-group input {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid var(--input-border);
        border-radius: 4px;
        background: var(--input-bg);
        color: var(--text);
    }

    .btn-danger {
        background: var(--danger);
    }

    .btn-danger:hover {
        background: #dc2626;
    }
</style>
{% endblock %}