document.addEventListener('DOMContentLoaded', function() {

    let usersData = []; // To store user data for CSV export

    const userTableContainer = document.getElementById('user-table-container');
    const authLinks = document.getElementById('auth-links');
    const downloadBtn = document.getElementById('download-users-csv');

    // --- Auth Logic (for header consistency) ---
    const updateAuthUI = (user) => {
        if (user) {
            let adminLink = user.role === 'admin' ? '<a href="/admin.php" class="btn btn-outline-warning me-3">Admin</a>' : '';
            authLinks.innerHTML = `
                ${adminLink}
                <span class="navbar-text me-3">Welcome, ${user.username}</span>
                <button id="logout-btn" class="btn btn-outline-light">Logout</button>
            `;
            document.getElementById('logout-btn').addEventListener('click', logout);
        } else {
            authLinks.innerHTML = `
                <a href="/login.php" class="btn btn-outline-light me-2">Login</a>
                <a href="/register.php" class="btn btn-light">Register</a>
            `;
        }
    };

    const logout = () => {
        fetch('/api/logout.php').then(() => window.location.href = '/');
    };

    const checkSession = () => {
        fetch('/api/check_session.php')
            .then(response => response.json())
            .then(data => {
                updateAuthUI(data.loggedIn ? data.user : null);
            });
    };

    // --- User Management Logic ---

    const renderUserTable = (users) => {
        const roles = ['regular', 'sports_analyst', 'sports_bettor', 'admin'];
        let tableHtml = `
            <table class="table table-dark table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Joined</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
        `;

        users.forEach(user => {
            tableHtml += `
                <tr>
                    <td>${user.id}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                    <td>
                        <select class="form-select form-select-sm" data-user-id="${user.id}">
                            ${roles.map(role => `<option value="${role}" ${user.role === role ? 'selected' : ''}>${role}</option>`).join('')}
                        </select>
                    </td>
                    <td>${new Date(user.created_at).toLocaleDateString()}</td>
                    <td><button class="btn btn-sm btn-primary save-role-btn" data-user-id="${user.id}">Save</button></td>
                </tr>
            `;
        });

        tableHtml += '</tbody></table>';
        userTableContainer.innerHTML = tableHtml;

        document.querySelectorAll('.save-role-btn').forEach(button => {
            button.addEventListener('click', function() {
                const userId = this.dataset.userId;
                const roleSelector = document.querySelector(`select[data-user-id="${userId}"]`);
                const newRole = roleSelector.value;
                updateUserRole(userId, newRole);
            });
        });
    };

    const updateUserRole = (userId, role) => {
        fetch('/api/update_user_role.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ user_id: userId, role: role })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert('User role updated!');
            } else {
                alert(`Error: ${data.message}`);
            }
        });
    };

    const loadUsers = () => {
        fetch('/api/get_users.php')
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    usersData = data.users; // Store for CSV export
                    renderUserTable(usersData);
                } else {
                    userTableContainer.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                }
            });
    };

    // --- Event Listeners ---
    if (downloadBtn) {
        downloadBtn.addEventListener('click', () => {
            exportToCsv('stattracker_users.csv', usersData);
        });
    }

    // --- Initial Load ---
    checkSession();
    loadUsers();
});