document.addEventListener('DOMContentLoaded', async () => {
    const roleSelect = document.getElementById('roleSelect');
    const permissionsContainer = document.getElementById('permissionsContainer');
  let roles;
  let permissions;
    // Fetch all roles
    const fetchRoles = async () => {
      try {
        const response = await fetch('/api/role'); // API endpoint for fetching roles
        if (!response.ok) {
          throw new Error('Failed to fetch roles');
        }
        return await response.json();
      } catch (error) {
        console.error('Error fetching roles:', error);
        alert('Could not load roles. Please try again later.');
        return [];
      }
    };
  
    // Fetch all permissions
    const fetchPermissions = async () => {
      try {
        const response = await fetch('/api/role/permission'); // API endpoint for fetching permissions
        if (!response.ok) {
          throw new Error('Failed to fetch permissions');
        }
        return await response.json();
      } catch (error) {
        console.error('Error fetching permissions:', error);
        alert('Could not load permissions. Please try again later.');
        return [];
      }
    };
  
    // Render roles in the dropdown
    const renderRoles = (roles) => {
      roleSelect.innerHTML = '<option value="" disabled selected>Select a Role</option>';
      roles.forEach((role) => {
        const option = document.createElement('option');
        option.value = role._id;
        option.textContent = role.name;
        roleSelect.appendChild(option);
      });
    };
  
    // Render permissions with checkboxes
    const renderPermissions = (permissions, selectedPermissions = []) => {
   
        permissionsContainer.innerHTML = ''; // Clear previous permissions
      permissions.forEach((permission) => {
        const permissionDiv = document.createElement('div');
        permissionDiv.classList.add('permission-item');
  
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.id = `perm-${permission.name}`;
        checkbox.value = permission.name;
        checkbox.checked = selectedPermissions.includes(permission.name);
  
        const label = document.createElement('label');
        label.htmlFor = `perm-${permission.name}`;
        label.textContent = permission.description || permission.name;
  
        permissionDiv.appendChild(checkbox);
        permissionDiv.appendChild(label);
        permissionsContainer.appendChild(permissionDiv);
      });
    };
  
    // Load roles and permissions on page load
     roles = await fetchRoles();
    renderRoles(roles);
  
     permissions = await fetchPermissions();
  
    // Load selected role permissions when a role is selected
    roleSelect.addEventListener('change', () => {
      const selectedRoleId = roleSelect.value;
      const selectedRole = roles.find((role) => role._id === selectedRoleId);
      const selectedPermissionNames = selectedRole.permission.map((p) => p.name);
      renderPermissions(permissions, selectedPermissionNames);
    });
  
    // Handle form submission
    const editRoleForm = document.getElementById('editRoleForm');
    editRoleForm.addEventListener('submit', async (e) => {
      e.preventDefault(); // Prevent default form submission
  
      // Get selected role and permissions
      const selectedRoleId = roleSelect.value;
      const selectedPermissions = Array.from(
        document.querySelectorAll('#permissionsContainer input[type="checkbox"]:checked')
      ).map((checkbox) => checkbox.value);
  
      if (!selectedRoleId || !selectedPermissions.length) {
        alert('Please select a role and at least one permission.');
        return;
      }
  
      // Prepare payload
      const payload = {
        roleId: selectedRoleId,
        permissionNames: selectedPermissions,
      };
  
      try {
        // Send PUT request to update role
        const response = await fetch(`/api/role/${selectedRoleId}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(payload),
        });
  
        if (!response.ok) {
          throw new Error('Failed to update role');
        }
  
        const result = await response.json();
       
        roles = await fetchRoles();
        renderRoles(roles);
       
        alert(`Role updated successfully: ${result.role.name}`);
      } catch (error) {
        console.error('Error updating role:', error);
        alert('Could not update role. Please try again later.');
      }
    });
  });
  