document.addEventListener('DOMContentLoaded', function () {
    const userModal = new bootstrap.Modal(document.getElementById('user-modal'));
    const userForm = document.getElementById('user-form');
    const userTable = document.getElementById('users-table').getElementsByTagName('tbody')[0];
    const modalLabel = document.getElementById('user-modal-label');
    const passwordField = document.getElementById('password');
    const passwordHelpText = passwordField.nextElementSibling;

    // Function to fetch and display users
    function loadUsers() {
        fetch('api/get_users.php')
            .then(response => response.json())
            .then(data => {
                userTable.innerHTML = '';
                if(data.success) {
                    data.users.forEach(user => {
                        const row = userTable.insertRow();
                        row.innerHTML = `
                            <td>${user.nama_lengkap}</td>
                            <td>${user.email}</td>
                            <td>${user.role.replace('_', ' ')}</td>
                            <td>${user.nama_kantor || 'N/A'}</td>
                            <td>${new Date(user.created_at).toLocaleDateString()}</td>
                            <td>
                                <button class="btn btn-sm btn-outline-secondary edit-btn" data-id="${user.id}"><i data-feather="edit-2" class="feather-sm"></i></button>
                                <button class="btn btn-sm btn-outline-danger delete-btn" data-id="${user.id}"><i data-feather="trash-2" class="feather-sm"></i></button>
                            </td>
                        `;
                    });
                    feather.replace();
                }
            })
            .catch(error => console.error('Error loading users:', error));
    }

    // Show modal for adding a new user
    document.getElementById('btn-add-user').addEventListener('click', function () {
        userForm.reset();
        document.getElementById('user-id').value = '';
        modalLabel.textContent = 'Tambah Pengguna Baru';
        passwordField.setAttribute('required', 'required');
        passwordHelpText.style.display = 'none';
        userModal.show();
    });

    // Handle form submission for both add and edit
    userForm.addEventListener('submit', function (e) {
        e.preventDefault();
        const formData = new FormData(userForm);
        const userId = formData.get('id');
        const url = userId ? 'api/update_user.php' : 'api/add_user.php';

        // If password is empty on update, remove it from form data
        if (userId && !formData.get('password')) {
            formData.delete('password');
        }

        fetch(url, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                userModal.hide();
                loadUsers(); // Refresh the table
                // You can add a toast notification here for better UX
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => console.error('Form submission error:', error));
    });

    // Handle edit and delete button clicks
    userTable.addEventListener('click', function (e) {
        const target = e.target.closest('button');
        if (!target) return;

        const id = target.dataset.id;

        // Edit button
        if (target.classList.contains('edit-btn')) {
            fetch(`api/get_user.php?id=${id}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const user = data.user;
                        document.getElementById('user-id').value = user.id;
                        document.getElementById('nama_lengkap').value = user.nama_lengkap;
                        document.getElementById('email').value = user.email;
                        document.getElementById('role').value = user.role;
                        document.getElementById('id_kantor').value = user.id_kantor || '';
                        
                        modalLabel.textContent = 'Edit Pengguna';
                        passwordField.removeAttribute('required');
                        passwordHelpText.style.display = 'block';
                        userModal.show();
                    } else {
                        alert('Error: ' + data.message);
                    }
                });
        }

        // Delete button
        if (target.classList.contains('delete-btn')) {
            if (confirm('Apakah Anda yakin ingin menghapus pengguna ini?')) {
                fetch('api/delete_user.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: `id=${id}`
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        loadUsers(); // Refresh the table
                    } else {
                        alert('Error: ' + data.message);
                    }
                })
                .catch(error => console.error('Delete error:', error));
            }
        }
    });

    // Initial load of users
    loadUsers();
});