// script.js

let users = [];
let logs = [];

document.getElementById('userForm').addEventListener('submit', function(event) {
    event.preventDefault();
    
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    
    const user = {
        id: Date.now(),
        username: username,
        email: email,
        accessLevel: 'User',  // Default access level
        points: 0,             // Default points
        logins: []             // Array to track login timestamps     
    };
    
    users.push(user);
    logAction(username, 'User added');
    renderUserList();
    this.reset();  // Clear the form
});

function renderUserList() {
    const userList = document.getElementById('userList');
    userList.innerHTML = '';  // Clear the list before rendering
    
    users.forEach((user) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${user.username}</td>
            <td>${user.email}</td>
            <td>
                <select class="access-level" onchange="changeAccessLevel(${user.id}, this.value)">
                    <option value="Admin" ${user.accessLevel === 'Admin' ? 'selected' : ''}>Admin</option>
                    <option value="User" ${user.accessLevel === 'User' ? 'selected' : ''}>User</option>
                    <option value="Guest" ${user.accessLevel === 'Guest' ? 'selected' : ''}>Guest</option>
                </select>
            </td>
            <td>
                <span>${user.points}</span>
                <input type="number" min="0" id="points-${user.id}" style="width:60px" placeholder="Adjust" />
                <button class="adjust-points-button" onclick="adjustPoints(${user.id})">Adjust</button>
            </td>
            <td>
                <button class="action-button" onclick="deleteUser(${user.id})">Delete</button>
            </td>
        `;
        userList.appendChild(row);
    });
}

function deleteUser(userId) {
    const user = users.find(user => user.id === userId);
    if (user) {
        logAction(user.username, 'User deleted');
    }
    users = users.filter(user => user.id !== userId);
    renderUserList();
}

function changeAccessLevel(userId, newLevel) {
    const user = users.find(user => user.id === userId);
    if (user) {
        const oldLevel = user.accessLevel;
        user.accessLevel = newLevel;
        logAction(user.username, `Access level changed from ${oldLevel} to ${newLevel}`);
    }
}

function adjustPoints(userId) {
    const inputField = document.getElementById(`points-${userId}`);
    const pointsToAdd = parseInt(inputField.value) || 0;

    const user = users.find(user => user.id === userId);
    if (user) {
        user.points += pointsToAdd;  // Adjust points based on the input value
        logAction(user.username, `Points adjusted by ${pointsToAdd}`);
        inputField.value = '';  // Clear the input
        renderUserList();  // Re-render the user list
    }
}

function logAction(username, action) {
    const timestamp = new Date().toLocaleString();
    logs.push({username, action, timestamp});
    renderLogList();
}

function renderLogList() {
    const logList = document.getElementById('logList');
    logList.innerHTML = '';  // Clear the list before rendering

    logs.forEach(log => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${log.username}</td>
            <td>${log.action}</td>
            <td>${log.timestamp}</td>
        `;
        logList.appendChild(row);
    });
}