popup.js

// Mendix Role Inspector Popup Script

document.addEventListener('DOMContentLoaded', async function() {
  // Preload messages for better performance
  await I18n.preloadMessages();
  
  // Initialize internationalization
  initializeI18n();
  
  const loadingDiv = document.getElementById('loading');
  const errorDiv = document.getElementById('error');
  const errorMessage = document.getElementById('error-message');
  const mendixInfoDiv = document.getElementById('mendix-info');
  const rolesContainer = document.getElementById('roles-container');
  const refreshBtn = document.getElementById('refresh-btn');
  const roleSearch = document.getElementById('role-search');

  let allRoles = [];
  let filteredRoles = [];

  // Initialize internationalization
  function initializeI18n() {
    // Set document language
    document.documentElement.lang = I18n.getCurrentLanguage();
    
    // Set RTL direction if needed
    if (I18n.isRTL()) {
      document.documentElement.dir = 'rtl';
    }
    
    // Localize all elements with data-i18n attribute
    document.querySelectorAll('[data-i18n]').forEach(element => {
      const key = element.getAttribute('data-i18n');
      element.textContent = __(key);
    });
    
    // Localize placeholder attributes
    document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
      const key = element.getAttribute('data-i18n-placeholder');
      element.placeholder = __(key);
    });
    
    // Localize title attributes
    document.querySelectorAll('[data-i18n-title]').forEach(element => {
      const key = element.getAttribute('data-i18n-title');
      element.title = __(key);
    });

    // Initialize language selector
    initializeLanguageSelector();
  }

  async function initializeLanguageSelector() {
    const languageSelect = document.getElementById('language-select');
    
    // Wait for language manager to be available
    let attempts = 0;
    while (!window.languageManager && attempts < 10) {
      await new Promise(resolve => setTimeout(resolve, 10));
      attempts++;
    }
    
    if (!window.languageManager) {
      console.error('Language manager not available after waiting');
      return;
    }
    
    // Load stored language preference
    await window.languageManager.loadStoredLanguage();
    
    // Set current language in selector
    languageSelect.value = window.languageManager.currentLanguage;
    
    // Add event listener for language changes
    languageSelect.addEventListener('change', handleLanguageChange);
  }

  async function handleLanguageChange(event) {
    const newLanguage = event.target.value;
    
    if (!window.languageManager) {
      console.error('Language manager not available');
      return;
    }
    
    if (window.languageManager.setLanguage(newLanguage)) {
      // Preload messages for new language
      await I18n.preloadMessages();
      
      // Re-initialize internationalization with new language
      initializeI18n();
      
      // Reload role info to update any displayed messages
      if (allRoles.length > 0) {
        displayFilteredRoles();
      }
    }
  }

  refreshBtn.addEventListener('click', function() {
    loadRoleInfo();
  });

  roleSearch.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase().trim();
    filterRoles(searchTerm);
  });

  function filterRoles(searchTerm) {
    if (searchTerm === '') {
      filteredRoles = [...allRoles];
    } else {
      filteredRoles = allRoles.filter(role => 
        role.toLowerCase().includes(searchTerm)
      );
    }
    
    displayFilteredRoles();
    updateSearchStats();
  }

  function updateSearchStats() {
    const existingStats = document.querySelector('.search-stats');
    if (existingStats) {
      existingStats.remove();
    }

    if (roleSearch.value.trim() !== '') {
      const statsDiv = document.createElement('div');
      statsDiv.className = 'search-stats';
      statsDiv.textContent = __('searchStats', filteredRoles.length.toString(), allRoles.length.toString());
      rolesContainer.parentNode.insertBefore(statsDiv, rolesContainer);
    }
  }

  function loadRoleInfo() {
    showLoading();
    
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      if (tabs[0]) {
        chrome.tabs.sendMessage(tabs[0].id, {type: 'GET_ROLE_INFO'}, function(response) {
          if (chrome.runtime.lastError) {
            showError(__('communicationError'));
            return;
          }
          
          if (response) {
            displayRoleInfo(response);
          } else {
            showError(__('roleInfoNotReceived'));
          }
        });
      } else {
        showError(__('activeTabNotFound'));
      }
    });
  }

  function showLoading() {
    loadingDiv.classList.remove('hidden');
    errorDiv.classList.add('hidden');
    mendixInfoDiv.classList.add('hidden');
    
    roleSearch.value = '';
    allRoles = [];
    filteredRoles = [];
  }

  function showError(message) {
    loadingDiv.classList.add('hidden');
    mendixInfoDiv.classList.add('hidden');
    errorDiv.classList.remove('hidden');
    errorMessage.textContent = message;
  }

  function displayRoleInfo(info) {
    loadingDiv.classList.add('hidden');
    errorDiv.classList.add('hidden');

    if (info.error) {
      showError(info.error);
      return;
    }

    allRoles = info.roles || [];
    filteredRoles = [...allRoles];
    displayFilteredRoles();

    mendixInfoDiv.classList.remove('hidden');
    
    if (allRoles.length > 0) {
      setTimeout(() => roleSearch.focus(), 100);
    }
  }

  function displayFilteredRoles() {
    rolesContainer.innerHTML = '';

    const existingStats = document.querySelector('.search-stats');
    if (existingStats) {
      existingStats.remove();
    }

    if (!allRoles || allRoles.length === 0) {
      const noRolesDiv = document.createElement('div');
      noRolesDiv.className = 'no-roles';
      noRolesDiv.textContent = __('noRolesFound');
      rolesContainer.appendChild(noRolesDiv);
      return;
    }

    if (filteredRoles.length === 0) {
      const noResultsDiv = document.createElement('div');
      noResultsDiv.className = 'no-search-results';
      noResultsDiv.textContent = __('noSearchResults', roleSearch.value);
      rolesContainer.appendChild(noResultsDiv);
      updateSearchStats();
      return;
    }

    const lockIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="icon-small"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>';

    filteredRoles.forEach(role => {
      const roleTag = document.createElement('div');
      roleTag.className = 'role-tag';
      roleTag.title = __('role') + `: ${role}`;
      
      let displayText = role.toUpperCase();
      if (roleSearch.value.trim() !== '') {
        displayText = getHighlightedText(displayText, roleSearch.value.trim().toUpperCase());
      }
      
      roleTag.innerHTML = lockIcon + '<span>' + displayText + '</span>';
      rolesContainer.appendChild(roleTag);
    });

    updateSearchStats();
  }

  function getHighlightedText(text, searchTerm) {
    if (!searchTerm) return text;
    const parts = text.split(searchTerm);
    return parts.join(`<mark style="background-color: yellow; color: black;">${searchTerm}</mark>`);
  }

  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type === 'ROLE_INFO') {
      displayRoleInfo(request.data);
    }
  });

  loadRoleInfo();
});