// User Management functionality

// Function to load users from the backend
async function loadUsers() {
  try {
    const response = await fetch('/users/', {
      credentials: 'include'
    });
    
    if (!response.ok) {
      throw new Error(`Failed to load users: ${response.statusText}`);
    }
    
    const users = await response.json();
    console.log('Loaded users:', users);
    
    const tableBody = document.getElementById('users-table-body');
    if (!tableBody) {
      console.error('users-table-body element not found');
      return;
    }
    
    if (users.length === 0) {
      tableBody.innerHTML = '<tr><td colspan="5" class="text-center">No users found</td></tr>';
      return;
    }
    
    tableBody.innerHTML = users.map(user => `
      <tr data-username="${user.username}">
        <td>${user.username}</td>
        <td>${user.email || 'N/A'}</td>
        <td>${user.role || 'User'}</td>
        <td>${user.last_login ? formatDateInUserTimezone(user.last_login) : 'Never'}</td>
        <td>
          <button class="btn btn-sm btn-primary edit-user-btn" data-username="${user.username}">
            <i class="fas fa-edit"></i> Edit
          </button>
          <button class="btn btn-sm btn-danger delete-user-btn" data-username="${user.username}">
            <i class="fas fa-trash"></i> Delete
          </button>
        </td>
      </tr>
    `).join('');
    
    // Add event listeners to edit buttons
    document.querySelectorAll('.edit-user-btn').forEach(button => {
      button.addEventListener('click', function() {
        const username = this.getAttribute('data-username');
        editUser(username);
      });
    });
    
    // Add event listeners to delete buttons
    document.querySelectorAll('.delete-user-btn').forEach(button => {
      button.addEventListener('click', function() {
        const username = this.getAttribute('data-username');
        deleteUser(username);
      });
    });
    
  } catch (error) {
    console.error('Error loading users:', error);
    const tableBody = document.getElementById('users-table-body');
    if (tableBody) {
      tableBody.innerHTML = `<tr><td colspan="5" class="text-center text-danger">Error loading users: ${error.message}</td></tr>`;
    }
  }
}

// Function to edit a user
async function editUser(username) {
  try {
    // Fetch user details
    const response = await fetch(`/users/${username}`, {
      credentials: 'include'
    });
    
    if (!response.ok) {
      throw new Error(`Failed to load user details: ${response.statusText}`);
    }
    
    const user = await response.json();
    console.log('User details:', user);
    
    // Create a modal for editing the user
    const modalHtml = `
      <div class="modal fade" id="edit-user-modal" tabindex="-1" role="dialog" aria-labelledby="edit-user-modal-label" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="edit-user-modal-label">Edit User: ${username}</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="edit-user-form">
                <div class="form-group">
                  <label for="edit-email">Email</label>
                  <input type="email" class="form-control" id="edit-email" value="${user.email || ''}" required>
                </div>
                <div class="form-group">
                  <label for="edit-role">Role</label>
                  <select class="form-control" id="edit-role">
                    <option value="User" ${user.role === 'User' ? 'selected' : ''}>User</option>
                    <option value="Administrator" ${user.role === 'Administrator' ? 'selected' : ''}>Administrator</option>
                  </select>
                </div>
                <div class="form-group">
                  <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="edit-reset-password">
                    <label class="custom-control-label" for="edit-reset-password">Reset Password</label>
                  </div>
                </div>
                <div id="new-password-container" style="display: none;">
                  <div class="form-group">
                    <label for="edit-new-password">New Password</label>
                    <input type="password" class="form-control" id="edit-new-password" placeholder="Enter new password">
                    <small class="form-text text-muted">Password must be at least 10 characters long with at least one number and one capital letter.</small>
                  </div>
                  <div class="form-group">
                    <label for="edit-confirm-password">Confirm New Password</label>
                    <input type="password" class="form-control" id="edit-confirm-password" placeholder="Confirm new password">
                    <div id="edit-password-match-feedback"></div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="edit-force-password-change" ${user.force_password_change ? 'checked' : ''}>
                    <label class="custom-control-label" for="edit-force-password-change">Force Password Change on Next Login</label>
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-primary" id="save-user-btn">Save Changes</button>
            </div>
          </div>
        </div>
      </div>
    `;
    
    // Add the modal to the DOM
    const modalContainer = document.createElement('div');
    modalContainer.innerHTML = modalHtml;
    document.body.appendChild(modalContainer);
    
    // Show the modal
    $('#edit-user-modal').modal('show');
    
    // Toggle new password field visibility
    document.getElementById('edit-reset-password').addEventListener('change', function() {
      document.getElementById('new-password-container').style.display = this.checked ? 'block' : 'none';
    });
    
    // Add password matching validation for edit form
    const editNewPassword = document.getElementById('edit-new-password');
    const editConfirmPassword = document.getElementById('edit-confirm-password');
    const editPasswordMatchFeedback = document.getElementById('edit-password-match-feedback');
    
    function validateEditPasswordMatch() {
      if (editConfirmPassword.value === '') {
        editPasswordMatchFeedback.innerHTML = '';
        return false;
      } else if (editNewPassword.value === editConfirmPassword.value) {
        editPasswordMatchFeedback.innerHTML = '<div class="text-success mt-1"><i class="fas fa-check-circle"></i> Passwords match</div>';
        return true;
      } else {
        editPasswordMatchFeedback.innerHTML = '<div class="text-danger mt-1"><i class="fas fa-times-circle"></i> Passwords do not match</div>';
        return false;
      }
    }
    
    editNewPassword.addEventListener('input', validateEditPasswordMatch);
    editConfirmPassword.addEventListener('input', validateEditPasswordMatch);
    
    // Handle save button click
    document.getElementById('save-user-btn').addEventListener('click', async function() {
      const email = document.getElementById('edit-email').value;
      const role = document.getElementById('edit-role').value;
      const resetPassword = document.getElementById('edit-reset-password').checked;
      const newPassword = document.getElementById('edit-new-password').value;
      const forcePasswordChange = document.getElementById('edit-force-password-change').checked;
      
      // Validate form
      if (!email) {
        alert('Email is required');
        return;
      }
      
      if (resetPassword) {
        const confirmPassword = document.getElementById('edit-confirm-password').value;
        
        if (!newPassword) {
          alert('New password is required when resetting password');
          return;
        }
        
        if (!confirmPassword) {
          alert('Password confirmation is required');
          return;
        }
        
        if (newPassword !== confirmPassword) {
          alert('Passwords do not match');
          return;
        }
      }
      
      // Prepare data for API
      const userData = {
        email: email,
        role: role,
        reset_password: resetPassword,
        force_password_change: forcePasswordChange
      };
      
      if (resetPassword) {
        userData.new_password = newPassword;
      }
      
      try {
        // Update user via API
        const response = await fetch(`/users/${username}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          credentials: 'include',
          body: JSON.stringify(userData)
        });
        
        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(errorData.detail || `Failed to update user: ${response.statusText}`);
        }
        
        // Close modal and reload users
        $('#edit-user-modal').modal('hide');
        document.body.removeChild(modalContainer);
        
        // Show success message
        alert(`User ${username} updated successfully`);
        
        // Reload users list
        loadUsers();
        
      } catch (error) {
        console.error('Error updating user:', error);
        alert(`Error updating user: ${error.message}`);
      }
    });
    
    // Clean up when modal is closed
    $('#edit-user-modal').on('hidden.bs.modal', function() {
      document.body.removeChild(modalContainer);
    });
    
  } catch (error) {
    console.error('Error editing user:', error);
    alert(`Error editing user: ${error.message}`);
  }
}

// Function to delete a user
async function deleteUser(username) {
  // Confirm deletion
  const confirmDelete = confirm(`Are you sure you want to delete user ${username}?`);
  if (!confirmDelete) return;
  
  try {
    // Delete user via API
    const response = await fetch(`/users/${username}`, {
      method: 'DELETE',
      credentials: 'include'
    });
    
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.detail || `Failed to delete user: ${response.statusText}`);
    }
    
    // Show success message
    alert(`User ${username} deleted successfully`);
    
    // Reload users list
    loadUsers();
    
  } catch (error) {
    console.error('Error deleting user:', error);
    alert(`Error deleting user: ${error.message}`);
  }
}

// Function to add a new user
function setupAddUserModal() {
  // Create a modal for adding a new user
  const modalHtml = `
    <div class="modal fade" id="add-user-modal" tabindex="-1" role="dialog" aria-labelledby="add-user-modal-label" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="add-user-modal-label">Add New User</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form id="add-user-form">
              <div class="form-group">
                <label for="add-username">Username</label>
                <input type="text" class="form-control" id="add-username" required>
              </div>
              <div class="form-group">
                <label for="add-email">Email</label>
                <input type="email" class="form-control" id="add-email" required>
              </div>
              <div class="form-group">
                <label for="add-password">Password</label>
                <input type="password" class="form-control" id="add-password" required>
                <small class="form-text text-muted">Password must be at least 10 characters long with at least one number and one capital letter.</small>
              </div>
              <div class="form-group">
                <label for="add-confirm-password">Confirm Password</label>
                <input type="password" class="form-control" id="add-confirm-password" required>
                <div id="password-match-feedback"></div>
              </div>
              <div class="form-group">
                <label for="add-role">Role</label>
                <select class="form-control" id="add-role">
                  <option value="User">User</option>
                  <option value="Administrator">Administrator</option>
                </select>
              </div>
              <div class="form-group">
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" id="add-force-password-change">
                  <label class="custom-control-label" for="add-force-password-change">Force Password Change on First Login</label>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary" id="create-user-btn">Create User</button>
          </div>
        </div>
      </div>
    </div>
  `;
  
  // Add the modal to the DOM
  const modalContainer = document.createElement('div');
  modalContainer.innerHTML = modalHtml;
  document.body.appendChild(modalContainer);
  
  // Add password matching validation
  const addPassword = document.getElementById('add-password');
  const addConfirmPassword = document.getElementById('add-confirm-password');
  const passwordMatchFeedback = document.getElementById('password-match-feedback');
  
  function validatePasswordMatch() {
    if (addConfirmPassword.value === '') {
      passwordMatchFeedback.innerHTML = '';
      return false;
    } else if (addPassword.value === addConfirmPassword.value) {
      passwordMatchFeedback.innerHTML = '<div class="text-success mt-1"><i class="fas fa-check-circle"></i> Passwords match</div>';
      return true;
    } else {
      passwordMatchFeedback.innerHTML = '<div class="text-danger mt-1"><i class="fas fa-times-circle"></i> Passwords do not match</div>';
      return false;
    }
  }
  
  addPassword.addEventListener('input', validatePasswordMatch);
  addConfirmPassword.addEventListener('input', validatePasswordMatch);
  
  // Handle create button click
  document.getElementById('create-user-btn').addEventListener('click', async function() {
    const username = document.getElementById('add-username').value;
    const email = document.getElementById('add-email').value;
    const password = document.getElementById('add-password').value;
    const confirmPassword = document.getElementById('add-confirm-password').value;
    const role = document.getElementById('add-role').value;
    const forcePasswordChange = document.getElementById('add-force-password-change').checked;
    
    // Validate form
    if (!username || !email || !password || !confirmPassword) {
      alert('All fields are required');
      return;
    }
    
    // Check if passwords match
    if (password !== confirmPassword) {
      alert('Passwords do not match');
      return;
    }
    
    // Prepare data for API
    const userData = {
      username: username,
      email: email,
      password: password,
      role: role,
      force_password_change: forcePasswordChange
    };
    
    try {
      // Create user via API
      const response = await fetch('/users/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify(userData)
      });
      
      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.detail || `Failed to create user: ${response.statusText}`);
      }
      
      // Close modal and reload users
      $('#add-user-modal').modal('hide');
      
      // Show success message
      alert(`User ${username} created successfully`);
      
      // Reload users list
      loadUsers();
      
    } catch (error) {
      console.error('Error creating user:', error);
      alert(`Error creating user: ${error.message}`);
    }
  });
}

// Initialize user management when the DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
  console.log('Initializing user management from user-management.js');
  
  // Override the initializeUserManagement function
  window.initializeUserManagement = function() {
    console.log('Initializing user management...');
    
    // Load users when the page loads
    loadUsers();
    
    // Add event listener to the "Add User" button
    const addUserBtn = document.querySelector('[data-target="#add-user-modal"]');
    if (addUserBtn) {
      addUserBtn.addEventListener('click', function() {
        setupAddUserModal();
        $('#add-user-modal').modal('show');
      });
    }
  };
  
  // If we're already on the users page, initialize it
  if (window.location.hash === '#users') {
    window.initializeUserManagement();
  }
});

// Helper function to format dates
function formatDateInUserTimezone(dateString) {
  if (!dateString) return "";
  const date = new Date(dateString);
  const options = {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    timeZoneName: "short",
  };
  return date.toLocaleDateString("en-US", options);
}