let email_config = {
  agent_email: [],
  external_email: []
};

async function populateEmailDropdown() {

  console.log("populateEmailDropdown function starts");
  try {
    if (typeof alldata === 'undefined') {
      console.error('alldata is not defined. Please initialize it before calling populateEmailDropdown.');
      return;
    }

    console.log("Making API call to fetch agents");
    const statusResp = await makeApiCallAgent(apiKeyInput1.value, domainInput1.value);

    console.log("API response received:", statusResp);

    if (statusResp && statusResp.agents) {
      const agents = statusResp.agents;
      console.log("Agents fetched successfully:", agents);

      const emailContainer = document.querySelector('.email');
      console.log("Email container found:", emailContainer);

      const dropdownWrapper = document.createElement('div');
      dropdownWrapper.classList.add('email-settings');

      // Agent email dropdown
      console.log("Creating agent email dropdown");
      const agentEmailSelect = document.createElement('fw-select');
      agentEmailSelect.setAttribute('label', 'Select Agents');
      agentEmailSelect.setAttribute('placeholder', 'Choose an agent');
      agentEmailSelect.setAttribute('hint-text', 'Select one or more agents');
      agentEmailSelect.setAttribute('multiple', '');
      agentEmailSelect.id = 'agentEmailSelect';

      // Initialize agent_email with existing values
      if (!email_config.agent_email) {
        email_config.agent_email = [];
      }

      if (alldata.email_config && alldata.email_config.agent_email && email_config.agent_email.length === 0) {
        email_config.agent_email = [...alldata.email_config.agent_email];
        console.log("Initialized agent_email from alldata.email_config:", email_config.agent_email);
      }

      agents.forEach((agent) => {
        const option = document.createElement('fw-select-option');
        option.value = agent.email;
        option.textContent = agent.first_name;

        if (alldata.email_config && alldata.email_config.agent_email && alldata.email_config.agent_email.includes(agent.email)) {
          option.setAttribute('selected', 'true');
        }

        agentEmailSelect.appendChild(option);
      });

      console.log("Agent email dropdown populated with options");

      agentEmailSelect.addEventListener('fwChange', (event) => {
        const selectedEmails = event.detail.value;
        email_config.agent_email = [...selectedEmails];
        console.log("Updated agent_email:", email_config.agent_email);
      });

      dropdownWrapper.appendChild(agentEmailSelect);
      emailContainer.appendChild(dropdownWrapper);

      console.log("Agent email dropdown added to the container");

      console.log("Creating external email input");
      const externalEmailWrapper = document.createElement('div');
      externalEmailWrapper.classList.add('email-settings');

      const externalEmailInput = document.createElement('fw-input');
      externalEmailInput.setAttribute('label', 'External Email');
      externalEmailInput.setAttribute('icon-left', 'add-contact');
      externalEmailInput.setAttribute('hint-text', 'Enter external email(s)');
      externalEmailInput.setAttribute('placeholder', 'Enter comma-separated emails');
      externalEmailInput.setAttribute('clear-input', '');
      externalEmailInput.id = 'externalEmailInput';
      
      externalEmailInput.style.marginTop = '20px';
      
      if (!email_config.external_email) {
        email_config.external_email = [];
      }

      if (alldata.email_config && alldata.email_config.external_email && alldata.email_config.external_email.length > 0) {
        externalEmailInput.value = alldata.email_config.external_email.join(', ');
        email_config.external_email = [...alldata.email_config.external_email];
        console.log("Initialized external_email from alldata.email_config:", email_config.external_email);
      }

      externalEmailInput.addEventListener('input', () => {
        const typedEmails = externalEmailInput.value.trim();
        console.log("Input received for external emails:", typedEmails);
        
        const emailArray = typedEmails
          .split(',')
          .map(email => email.trim())
          .filter(email => email !== '' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email));

        email_config.external_email = [...new Set(emailArray)];
        console.log("Updated external_email:", email_config.external_email);
      });

      externalEmailWrapper.appendChild(externalEmailInput);
      emailContainer.appendChild(externalEmailWrapper);

      console.log("External email input added to the container");
    } else {
      console.warn("No agents found in API response.");
    }
  } catch (error) {
    console.error("Error populating email dropdown:", error);
  }
}


add a validation if i havent choosed a agent, throw error. if i havent typed an email, show error 
function validate() {

  const tabs = Array.from(document.querySelectorAll('fw-tab'));
  const allTabsHiddenExceptFirst = tabs.slice(1).every(tab => tab.style.visibility === 'hidden');

  if (allTabsHiddenExceptFirst) {
    showErrorToast("Error! Please Click Validate to Validate the App and then Click Install/Save.");
    return false;
  }

  // Fields Dropdown Validations
  const merchantDropdown = document.querySelector('#merchantFieldDropdown');
  const vendorDropdown = document.querySelector('#vendorFieldDropdown');

  if ((!merchantDropdown || !merchantDropdown.value || merchantDropdown.value === 'default') &&
    (!vendorDropdown || !vendorDropdown.value || vendorDropdown.value === 'default')) {
    showErrorToast("Error! Please choose a Merchant and Vendor Field.");
    return false;
  } else if (!merchantDropdown || !merchantDropdown.value || merchantDropdown.value === 'default') {
    showErrorToast("Error! Please choose a Merchant Field.");
    return false;
  } else if (!vendorDropdown || !vendorDropdown.value || vendorDropdown.value === 'default') {
    showErrorToast("Error! Please choose a Vendor Field.");
    return false;
  }

  // Workspace Dropdown Validations
  const merchantWorkspaceDropdown = document.querySelector('#merchantWorkspaceSelect');
  const vendorWorkspaceDropdown = document.querySelector('#vendorWorkspaceSelect');

  if ((!merchantWorkspaceDropdown || !merchantWorkspaceDropdown.value || merchantWorkspaceDropdown.value === 'default') &&
    (!vendorWorkspaceDropdown || !vendorWorkspaceDropdown.value || vendorWorkspaceDropdown.value === 'default')) {
    showErrorToast("Error! Please choose a Merchant and Vendor Workspace.");
    return false;
  } else if (!merchantWorkspaceDropdown || !merchantWorkspaceDropdown.value || merchantWorkspaceDropdown.value === 'default') {
    showErrorToast("Error! Please choose a Merchant Workspace.");
    return false;
  } else if (!vendorWorkspaceDropdown || !vendorWorkspaceDropdown.value || vendorWorkspaceDropdown.value === 'default') {
    showErrorToast("Error! Please choose a Vendor Workspace.");
    return false;
  }

  const isStatusSyncEnabled = statusToggle.checked;
  const isDepartmentSyncEnabled = departmentToggle.checked;

  if (isStatusSyncEnabled && Object.keys(mappings).length === 0) {
    showErrorToast("Error! Please add at least one Status Mapping.");
    return false;
  }

  if (isDepartmentSyncEnabled && Object.keys(dmappings).length === 0) {
    showErrorToast("Error! Please add at least one Department Mapping.");
    return false;
  }

  if (ticketworkflowconditions.length === 0) {
    showErrorToast("Error! Please Choose an Event.");
    return false;
  }



  // Mandatory Fields Validation
  const mandatoryFields = document.querySelectorAll(
    '#tabs3 .form-group fw-select[required], #tabs4 .form-group fw-select[required], #tabs3 .form-group fw-select[multiple][required], #tabs4 .form-group fw-select[multiple][required]'
  );

  let unfilledFields = [];
  for (let field of mandatoryFields) {
    const selectedOptions = field.value;
    if (!selectedOptions || (field.hasAttribute('multiple') && selectedOptions.length === 0) || selectedOptions === 'default') {
      const fieldLabel = field.closest('.form-group').querySelector('label').textContent.trim();
      unfilledFields.push(fieldLabel.replace(/\s*\*\s*$/, '')); // Remove asterisks
    }
  }

  if (unfilledFields.length > 0) {
    const errorMessage = `Error! Please fill in the following Mandatory Fields: ${unfilledFields.join(', ')}.`;
    showErrorToast(errorMessage);
    return false;
  }















  

  return true;
}

add that validation in this code itself\