// Detect the active site and add a magnifying lens in the appropriate location
const siteHandlers = {
  'mangadex.org': () => {
    const headers = document.querySelectorAll('div.title p.mb-1'); // Select the text inside p.mb-1 within div.title
    headers.forEach(header => addLens(header));
  },
  'anilist.co': () => {
    const headers = document.querySelectorAll('.header-title');
    headers.forEach(header => addLens(header));
  },
  'kitsu.app': () => {
    const headers = document.querySelectorAll('section.media--title h3'); // Select the text inside h3 within section.media--title
    headers.forEach(header => addLens(header));
  },
  'myanimelist.net': () => {
    const headers = document.querySelectorAll('.title-name');
    headers.forEach(header => addLens(header));
  }
};

function addLens(header) {
  // Check if the lens is already present
  if (header.querySelector('span.lens-icon')) {
    return; // Exit if the lens is already added
  }

  const lens = document.createElement('span');
  lens.textContent = '🔍';
  lens.className = 'lens-icon'; // Add a class to identify the lens
  lens.style.cursor = 'pointer';
  lens.style.marginLeft = '10px';
  lens.title = 'Search for this title?'; // Add a tooltip to the lens
  lens.addEventListener('click', () => {
    const query = header.textContent.trim().replace('🔍', '').trim(); // Remove the lens icon from the query
    console.log(`Searching for title: ${query}`);
    chrome.runtime.sendMessage({ action: 'search', query }, (response) => {
      if (response && response.results) {
        displayResults(response.results);
      }
    });
  });
  header.appendChild(lens);
}

function displayResults(results) {
  const resultWindow = document.createElement('div');
  resultWindow.style.position = 'fixed';
  resultWindow.style.top = '10px';
  resultWindow.style.right = '10px';
  resultWindow.style.backgroundColor = 'white';
  resultWindow.style.border = '1px solid black';
  resultWindow.style.padding = '10px';
  resultWindow.style.zIndex = '10000';
  resultWindow.style.maxHeight = '400px';
  resultWindow.style.overflowY = 'auto'; // Make the result window scrollable

  // Ensure results are displayed as titles
  resultWindow.innerHTML = results.map(r => `<p>${r.title || 'No title available'}</p>`).join('');

  // Remove any existing result window before appending a new one
  const existingWindow = document.querySelector('.result-window');
  if (existingWindow) {
    existingWindow.remove();
  }

  resultWindow.className = 'result-window';
  document.body.appendChild(resultWindow);
}

// Execute the handler for the current site immediately on page load
const hostname = window.location.hostname;
if (siteHandlers[hostname]) {
  siteHandlers[hostname]();
}

// Listen for messages from the background script
chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'addLens') {
    const hostname = message.hostname;
    if (siteHandlers[hostname]) {
      siteHandlers[hostname]();
    }
  }
});