// users.js
import * as userManager from './managers/userManager.js';
import * as departmentManager from './managers/departmentManager.js'; // Use * as
import { showMessage, showModal, hideModal, showConfirm } from './modal.js';
import { handleError } from './utils/errorHandler.js';
import { toggleButtonLoading, generateAvatarUrl } from './utils/utils.js';
import { populateUserDropdown, populateDepartmentDropdown } from './utils/dropdownHelpers.js'; // Ensure this is imported
import eventBus from './utils/eventBus.js';

// Helper function to display users (triggered by usersDataReady event)
async function displayUsers(users) { // Accepts users data as argument
 console.trace('displayUsers called');
  if (!usersList) {
     console.error('displayUsers: usersList element not found');
     return;
  }


  try {
    // departmentsMap is now passed as an argument
 if (users.length === 0 || !departmentManager.getDepartmentsData()) {
       console.log('displayUsers: No users found');
 usersList.innerHTML = '<li class="py-4 text-center text-gray-500">Chưa có người dùng nào.</li>';
       const totalUsersEl = document.getElementById('totalUsers');
       if (totalUsersEl) totalUsersEl.textContent = 0;
       return;
    }

    // Clear the existing list before appending
  usersList.innerHTML = ''; // Clear after check
    users.forEach(user => {
     const li = document.createElement('li');
      li.className = 'py-4 flex items-center justify-between user-item'; // Added user-item class for potential future use 
      const department = departmentManager.getDepartmentsData().find(d => d.id === user.department);

 li.innerHTML = ` 
        <div><p class="text-sm font-medium text-gray-900">${user.name}</p><p class="text-sm text-gray-500">${user.email}</p></div>
        <div class="text-sm text-gray-900">${department ? department.name : ''}</div>
        <div class="text-sm text-gray-900">${user.role || ''}</div>
        <div class="flex gap-2 admin-only"><button class="edit-user-btn text-blue-600 hover:underline" data-id="${user.id}" data-name="${user.name}" data-email="${user.email}" data-role="${user.role}" data-department="${user.department || ''}">Sửa</button><button class="delete-user-btn text-red-600 hover:underline" data-id="${user.id}" data-name="${user.name}">Xoá</button></div>
      `;
      usersList.appendChild(li);
    });
    console.log('displayUsers: Cleared usersList'); // Add log here
    console.log('displayUsers: Rendered', users.length, 'users'); // Add log here

  } catch (error) {
    console.error('displayUsers error:', error);
    // Error message for display logic itself is shown here
  }
}

// The loadUsers function is now primarily triggered by EventBus events
// It should load data via manager and then call displayUsers
async function loadUsers() {
 console.trace('loadUsers called');
  console.log('users.js: loadUsers called. Getting data from cache.');
 // It should fetch the latest data (already cached in manager) and display it.
 const users = userManager.getAllUsersFromCache(); // Call the getter via the userManager object
 console.log('users.js: loadUsers got data from cache. Calling displayUsers with', users.length, 'users.');
 displayUsers(users); // Call displayUsers with the fetched users data 
}
/**
 * Setup event listeners for user-related events from Event Bus
 */
function setupUserEventListeners() {
 console.log('Setting up user event listeners via EventBus');

    // --- Listeners for User Data Loading/Updates ---
 eventBus.subscribe('usersCacheLoaded', async () => { // This listener should trigger loadUsers which calls displayUsers
 console.log('users.js: Received usersCacheLoaded event.')
 console.log('EventBus: usersCacheLoaded event received in users.js. Loading users.');
 await loadUsers(); // Call loadUsers to fetch cached data and display
 });

    // --- Listeners for User Create/Update/Delete Actions ---
 eventBus.subscribe('userAdded', (newUser) => {
 console.log('EventBus: userAdded event received in users.js', newUser);
 showMessage('Thành công', `Đã thêm người dùng "${newUser.name}".`);
 hideModal('addUserModal'); // Hide the add modal on success
 // The 'usersDataReady' event (triggered by manager after add) will cause the list to reload
 });

 const addUserForm = document.getElementById('addUserForm');
            const saveUserBtn = document.querySelector('#addUserForm button[type="submit"]'); // Assuming the save button is a submit button within the form
            if (saveUserBtn) toggleButtonLoading(saveUserBtn, false);
            if (addUserForm) addUserForm.reset();

 eventBus.subscribe('userAddFailed', (error) => {
 console.error('EventBus: userAddFailed event received in users.js', error);
 handleError(error, error.message || 'Đã xảy ra lỗi khi thêm người dùng.');
 });


 eventBus.subscribe('userUpdated', (updatedUser) => {
 console.log('EventBus: userUpdated event received in users.js', updatedUser);
 showMessage('Thành công', `Đã cập nhật người dùng "${updatedUser.name}".`);
 hideModal('editUserModal'); // Hide the edit modal on success
 // The 'usersDataReady' event (triggered by manager after update) will cause the list to reload
 });

 eventBus.subscribe('userUpdateFailed', (error) => {
 console.error('EventBus: userUpdateFailed event received in users.js', error);
 handleError(error, error.message || 'Đã xảy ra lỗi khi cập nhật người dùng.');
 });
 eventBus.subscribe('userDeleted', (deletedUserId) => {
 console.log('EventBus: userDeleted event received in users.js', deletedUserId);
        showMessage('Thành công', 'Đã xoá người dùng.');
 // showMessage is handled by the confirm dialog's callback in the click listener below
 // The 'usersDataReady' event (triggered by manager after delete) will cause the list to reload
 });

 eventBus.subscribe('userDeleteFailed', (error) => {
 console.error('EventBus: userDeleteFailed event received in users.js', error);
 handleError(error, error.message || 'Đã xảy ra lỗi khi xóa người dùng.');
 });

    // Remove userSaveCompleted listener as it's redundant with userAdded/userUpdated
}

export function editUser(id, name, email, role, department) {
  console.log('editUser function called with ID:', id, 'Name:', name, 'Email:', email, 'Role:', role, 'Department:', department); // Log all received parameters
  const editUserIdEl = document.getElementById('editUserId');
  if (editUserIdEl) editUserIdEl.value = id;

  const editUserNameEl = document.getElementById('editUserName');
  if (editUserNameEl) editUserNameEl.value = name;

  const editUserEmailEl = document.getElementById('editUserEmail');
  if (editUserEmailEl) {
      editUserEmailEl.value = email;
      editUserEmailEl.disabled = true; // Keep email disabled
  }

  const editUserRoleEl = document.getElementById('editUserRole');
  if (editUserRoleEl) editUserRoleEl.value = role;

  // populateDepartmentDropdown vẫn giữ nguyên
  // Populate the user dropdown for the assignedTo field in edit task modal
  populateDepartmentDropdown('editUserDepartment', department);
  // Set the modal to 'edit' mode
 document.getElementById('saveUserBtn').style.display = 'none';
 document.getElementById('updateUserBtn').style.display = 'block';
 document.getElementById('editUserModalLabel').textContent = 'Cập Nhật Người Dùng';
 document.getElementById('editUserEmail').disabled = true; // Ensure email is disabled for edit
  showModal('editUserModal');
}

/**
 * Mở modal thêm người dùng (Simplified UI function)
 */
export function addUser() {
 const form = document.getElementById('addUserForm');
 if (form) form.reset();
 // populateDepartmentDropdown vẫn giữ nguyên vì thuộc về departments.js
 populateDepartmentDropdown('addUserDepartment');
 // Set the modal to 'add' mode
 document.getElementById('saveUserBtn').style.display = 'block';
 document.getElementById('updateUserBtn').style.display = 'none';
 document.getElementById('addUserEmail').disabled = false; // Enable email for add
}


/**
 * Handles the submission of the Add New User form.
 */
async function handleAddNewUser(event) {
  console.log('Handling new user form submission');
  event.preventDefault();
  console.log('addUserForm submitted');

  const form = event.target;
  const saveButton = event.submitter;
  toggleButtonLoading(saveButton, true);

  const name = form.userName.value.trim(); // Đảm bảo tên trường là userName
  const email = form.addUserEmail.value.trim(); // Đảm bảo tên trường là addUserEmail
  const password = form.addUserPassword.value; // Đảm bảo tên trường là addUserPassword
  const department = form.addUserDepartment.value; // Đảm bảo tên trường là addUserDepartment

  // Kiểm tra sự tồn tại của trường role trước khi truy cập value
  const role = form.addUserRole ? form.addUserRole.value : '';

  const userData = { email, password, name, role, department };
  console.log('Form data:', userData);

  await userManager.handleAddUserSubmit(userData); // Call manager function
}

// Call setupUserEventListeners to start listening for events when users.js is imported
setupUserEventListeners();

// Add event listener for the "Thêm người dùng mới" button
document.addEventListener('DOMContentLoaded', () => {
    const openAddUserModalBtn = document.getElementById('openAddUserModal');
    if (openAddUserModalBtn) {
        openAddUserModalBtn.addEventListener('click', (e) => {
            e.preventDefault();
            addUser(); // Call the addUser function to open the modal
            showModal('addUserModal'); // Show the modal
        });
    }
});

// Add event listener for the Add User form submission
document.addEventListener('DOMContentLoaded', () => {
    const addUserForm = document.getElementById('addUserForm');
    if (addUserForm) {
        addUserForm.addEventListener('submit', handleAddNewUser);
    }
});

// Add event listener for the Edit User form submission - Reconstructed to fix syntax
document.addEventListener('DOMContentLoaded', () => {
    const editUserForm = document.getElementById('editUserForm');
    if (editUserForm) {
        editUserForm.addEventListener('submit', async (event) => {
            event.preventDefault();
            console.log('editUserForm submitted');
            const form = event.target;
            const userId = form.editUserId.value;
            const name = form.editUserName.value;
            const email = form.editUserEmail.value;
            const role = form.editUserRole.value;
            const department = form.editUserDepartment.value;
            const updatedUserData = { name, email, role, department };
            console.log(`Attempting to update user ${userId} with data:`, updatedUserData);
            try {
                await userManager.handleEditUserSubmit(userId, updatedUserData);
                // Optional: show success message or hide modal here if needed
                // Example: showMessage('Thành công', 'Đã cập nhật người dùng.');
                // Example: hideModal('editUserModal');
            } catch (error) {
            console.error('Error submitting edit user form:', error);
            handleError(error, 'Đã xảy ra lỗi khi cập nhật người dùng.');
            }
        });
    }

    // Add event listener for the delete buttons using event delegation
    const usersListEl = document.getElementById('usersList');
    if (usersListEl) {
        usersListEl.addEventListener('click', async (event) => {
            const deleteButton = event.target.closest('.delete-user-btn');
            const editButton = event.target.closest('.edit-user-btn');

            if (editButton) {
                event.preventDefault();
                const userId = editButton.dataset.id;
                const name = editButton.dataset.name;
                const email = editButton.dataset.email;
                const role = editButton.dataset.role;
                const department = editButton.dataset.department;
                console.log(`Edit button clicked for user ID: ${userId}`);
                editUser(userId, name, email, role, department); // Call the editUser function
            }

            if (deleteButton) {
                const userId = deleteButton.dataset.id;
                const userName = deleteButton.dataset.name;
                console.log(`Delete button clicked for user ID: ${userId}, Name: ${userName}`);

                // Show confirmation modal (this is UI logic)
                showConfirm('Xác nhận xoá', `Bạn có chắc chắn muốn xoá người dùng "${userName}" này không?`)
                    .then(async (confirmed) => { // Use .then() to handle the promise
                        console.log('users.js: showConfirm resolved with:', confirmed); // Added log here
                        if (confirmed) {
                            console.log('users.js: Inside confirmed block.'); // Added log here
                            console.log(`User confirmed deletion for ID: ${userId}`);
                            console.log('users.js: Calling userManager.handleDeleteUserClick for ID:', userId); // Added log
                            await userManager.handleDeleteUserClick(userId); // Call the manager function after confirmation
                            // Success message is now handled by the userDeleted event listener
                        } else {
                            console.log(`User cancelled deletion for ID: ${userId}`);
                        }
                    }).catch(error => { // Add .catch() to log errors
                        console.error('Error during confirmation:', error);
                    });
            }
        });
    }
});