document.addEventListener('DOMContentLoaded', function() {
    const usersList = document.getElementById('users-list');
    const modal = document.getElementById('user-modal');
    const deleteModal = document.getElementById('delete-user-modal');
    const form = document.getElementById('user-form');
    let deleteTargetId = null;

    async function loadUsers() {
        try {
            const users = await LinkSync.getUsers();
            renderUsers(Array.isArray(users) ? users : []);
        } catch (err) {
            usersList.innerHTML = `<div class="empty-state"><p>Failed to load users: ${err.message}</p></div>`;
        }
    }

    function renderUsers(users) {
        if (!users || users.length === 0) {
            usersList.innerHTML = '<div class="empty-state"><p>No users found.</p></div>';
            return;
        }

        usersList.innerHTML = `
            <div class="data-table">
                <table>
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${users.map(user => `
                            <tr>
                                <td>${escapeHtml(user.username)}</td>
                                <td>${escapeHtml(user.email)}</td>
                                <td><span class="role-badge role-${user.role}">${user.role}</span></td>
                                <td>${user.is_active ? 'Active' : 'Inactive'}</td>
                                <td>${formatDate(user.created_at)}</td>
                                <td class="actions">
                                    <button class="btn-icon" data-action="edit" data-id="${user.id}" title="Edit">&#9998;</button>
                                    <button class="btn-icon" data-action="delete" data-id="${user.id}" title="Delete">&#128465;</button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        `;

        usersList.querySelectorAll('[data-action="edit"]').forEach(btn => {
            btn.addEventListener('click', () => editUser(btn.dataset.id));
        });
        usersList.querySelectorAll('[data-action="delete"]').forEach(btn => {
            btn.addEventListener('click', () => confirmDelete(btn.dataset.id));
        });
    }

    function openUserModal(user = null) {
        document.getElementById('user-modal-title').textContent = user ? 'Edit User' : 'Create User';
        document.getElementById('user-id').value = (user && user.id) ? user.id : '';
        document.getElementById('user-username').value = user ? user.username : '';
        document.getElementById('user-username').disabled = !!user;
        document.getElementById('user-email').value = user ? user.email : '';
        document.getElementById('user-password').value = '';
        document.getElementById('user-password').required = !user;
        document.getElementById('user-password').placeholder = user ? 'Leave blank to keep current' : '';
        document.getElementById('user-role').value = user ? user.role : 'user';
        document.getElementById('user-active').checked = user ? user.is_active : true;
        modal.style.display = 'flex';
    }

    async function editUser(id) {
        try {
            const users = await LinkSync.getUsers();
            const user = (Array.isArray(users) ? users : []).find(u => u.id === id);
            if (user) openUserModal(user);
        } catch (err) {
            alert('Failed to load user details');
        }
    }

    function confirmDelete(id) {
        deleteTargetId = id;
        deleteModal.style.display = 'flex';
    }

    function closeModal() {
        modal.style.display = 'none';
        form.reset();
        document.getElementById('user-username').disabled = false;
    }

    function closeDeleteModal() {
        deleteModal.style.display = 'none';
        deleteTargetId = null;
    }

    document.getElementById('new-user-btn').addEventListener('click', () => openUserModal());
    document.getElementById('user-modal-close').addEventListener('click', closeModal);
    document.getElementById('user-cancel-btn').addEventListener('click', closeModal);
    document.getElementById('delete-user-cancel-btn').addEventListener('click', closeDeleteModal);

    modal.querySelector('.modal-overlay').addEventListener('click', closeModal);
    deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);

    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        const saveBtn = document.getElementById('user-save-btn');
        saveBtn.disabled = true;
        saveBtn.textContent = 'Saving...';

        const id = document.getElementById('user-id').value;
        const isEdit = id && id !== '' && id !== 'undefined';
        const data = {
            username: document.getElementById('user-username').value,
            email: document.getElementById('user-email').value,
            role: document.getElementById('user-role').value,
            is_active: document.getElementById('user-active').checked,
        };

        const password = document.getElementById('user-password').value;
        if (password) data.password = password;

        try {
            if (isEdit) {
                await LinkSync.updateUser(id, data);
            } else {
                if (!password) {
                    alert('Password is required for new users');
                    saveBtn.disabled = false;
                    saveBtn.textContent = 'Save';
                    return;
                }
                await LinkSync.createUser(data);
            }
            closeModal();
            loadUsers();
        } catch (err) {
            alert('Failed to save user: ' + err.message);
        } finally {
            saveBtn.disabled = false;
            saveBtn.textContent = 'Save';
        }
    });

    document.getElementById('confirm-delete-user-btn').addEventListener('click', async function() {
        if (!deleteTargetId) return;
        try {
            await LinkSync.deleteUser(deleteTargetId);
            closeDeleteModal();
            loadUsers();
        } catch (err) {
            alert('Failed to delete user: ' + err.message);
        }
    });

    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('action') === 'new-user') {
        openUserModal();
    }

    loadUsers();

    function escapeHtml(str) {
        if (!str) return '';
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    }

    function formatDate(dateStr) {
        if (!dateStr) return '-';
        const d = new Date(dateStr);
        return d.toLocaleDateString();
    }
});