popup.js

document.addEventListener('DOMContentLoaded', () => {
  const extName = document.getElementById('ext-name');
  const toggleLabel = document.getElementById('toggle-label');
  const whitelistLabel = document.getElementById('whitelist-label');
  const addBtn = document.getElementById('add-btn');
  const emptyMsg = document.getElementById('empty-msg');
  const newUsernameInput = document.getElementById('new-username');
  const toggleActive = document.getElementById('toggle-active');
  const whitelistContainer = document.getElementById('whitelist');
  const langSelect = document.getElementById('lang-select');

  let currentWhitelist = [];
  let customMessages = null;

  // Initialize from storage
  chrome.storage.sync.get({ isActive: true, whitelist: [], lang: 'auto' }, async (data) => {
    toggleActive.checked = data.isActive;
    currentWhitelist = data.whitelist;
    langSelect.value = data.lang;
    
    await applyLanguage(data.lang);
    renderWhitelist();
  });

  async function applyLanguage(langCode) {
    if (langCode === 'auto') {
      customMessages = null;
    } else {
      try {
        const response = await fetch(chrome.runtime.getURL(`_locales/${langCode}/messages.json`));
        if (response.ok) {
          customMessages = await response.json();
        } else {
          customMessages = null;
        }
      } catch (e) {
        console.error("Failed to load custom language", e);
        customMessages = null;
      }
    }
    updateUIStrings();
  }

  function getMessage(key) {
    if (customMessages && customMessages[key]) {
      return customMessages[key].message;
    }
    return chrome.i18n.getMessage(key);
  }

  function updateUIStrings() {
    extName.textContent = getMessage('extName') || 'AntiFarm X';
    toggleLabel.textContent = getMessage('toggleActive') || 'Extension Active';
    whitelistLabel.textContent = getMessage('whitelistLabel') || 'Excluded Usernames';
    addBtn.textContent = getMessage('addBtn') || 'Add';
    emptyMsg.textContent = getMessage('whitelistEmpty') || 'Whitelist is empty.';
    renderWhitelist(); 
  }

  langSelect.addEventListener('change', async () => {
    const newLang = langSelect.value;
    chrome.storage.sync.set({ lang: newLang });
    await applyLanguage(newLang);
  });

  toggleActive.addEventListener('change', () => {
    chrome.storage.sync.set({ isActive: toggleActive.checked });
  });

  addBtn.addEventListener('click', () => {
    const username = newUsernameInput.value.trim().toLowerCase().replace(/^@/, '');
    if (username && !currentWhitelist.includes(username)) {
      currentWhitelist.push(username);
      chrome.storage.sync.set({ whitelist: currentWhitelist }, () => {
        newUsernameInput.value = '';
        renderWhitelist();
      });
    }
  });

  newUsernameInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      addBtn.click();
    }
  });

  function renderWhitelist() {
    whitelistContainer.innerHTML = '';
    if (currentWhitelist.length === 0) {
      emptyMsg.style.display = 'block';
    } else {
      emptyMsg.style.display = 'none';
      currentWhitelist.forEach((username, index) => {
        const li = document.createElement('li');
        
        const nameSpan = document.createElement('span');
        nameSpan.textContent = '@' + username;
        
        const removeBtn = document.createElement('button');
        removeBtn.className = 'remove-btn';
        removeBtn.textContent = getMessage('removeBtn') || 'Remove';
        removeBtn.addEventListener('click', () => {
          currentWhitelist.splice(index, 1);
          chrome.storage.sync.set({ whitelist: currentWhitelist }, () => {
            renderWhitelist();
          });
        });
        
        li.appendChild(nameSpan);
        li.appendChild(removeBtn);
        whitelistContainer.appendChild(li);
      });
    }
  }
});