popup.js

// Popup script for Link Fetch extension
document.addEventListener('DOMContentLoaded', function() {
  // Get UI elements
  const fetchButton = document.getElementById('fetchLinks');
  const copyButton = document.getElementById('copyLinks');
  const clearButton = document.getElementById('clearLinks');
  const filterInput = document.getElementById('filterInput');
  const sortOption = document.getElementById('sortOption');
  const linksList = document.getElementById('linksList');
  const statusElement = document.getElementById('status');
  const statsBar = document.getElementById('statsBar');
  const linkCountElement = document.getElementById('linkCount');
  const domainCountElement = document.getElementById('domainCount');
  const themeToggle = document.getElementById('themeToggle');
  const linksContainer = document.querySelector('.links-container');
  const emptyState = document.getElementById('emptyState');

  // Store links
  let links = [];
  let linkTimestamps = {};

  function setEmptyState(isEmpty) {
    if (!linksContainer || !emptyState) {
      return;
    }

    linksContainer.classList.toggle('is-collapsed', isEmpty);
    linksContainer.classList.toggle('has-content', !isEmpty);
    emptyState.hidden = !isEmpty;
  }

  function toError(err) {
    if (!err) {
      return new Error('Unknown error');
    }
    if (err instanceof Error) {
      return err;
    }
    if (typeof err === 'string') {
      return new Error(err);
    }
    return new Error(err.message || 'Unknown error');
  }

  function injectContentScript(tabId, callback) {
    chrome.scripting.executeScript({
      target: { tabId },
      files: ['content.js']
    }, () => {
      if (chrome.runtime.lastError) {
        callback(toError(chrome.runtime.lastError));
      } else {
        callback();
      }
    });
  }

  function requestLinksFromTab(tabId, callback) {
    if (typeof tabId !== 'number') {
      callback(new Error('No active tab available'));
      return;
    }

    const message = { action: 'getLinks' };

    chrome.tabs.sendMessage(tabId, message, (response) => {
      const firstError = chrome.runtime.lastError;
      if (firstError && firstError.message && firstError.message.includes('Receiving end does not exist')) {
        injectContentScript(tabId, (injectError) => {
          if (injectError) {
            callback(injectError);
            return;
          }
          chrome.tabs.sendMessage(tabId, message, (retryResponse) => {
            if (chrome.runtime.lastError) {
              callback(toError(chrome.runtime.lastError));
            } else {
              callback(null, retryResponse);
            }
          });
        });
      } else if (firstError) {
        callback(toError(firstError));
      } else {
        callback(null, response);
      }
    });
  }
  
  // Check if dark mode is enabled
  function initTheme() {
    chrome.storage.local.get(['darkMode'], function(result) {
      if (result.darkMode) {
        document.body.classList.add('dark-theme');
        themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        themeToggle.title = 'Switch to light mode';
      } else {
        document.body.classList.remove('dark-theme');
        themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
        themeToggle.title = 'Switch to dark mode';
      }
    });
  }
  
  // Initialize theme
  initTheme();
  
  // Toggle dark mode
  themeToggle.addEventListener('click', function() {
    const isDarkMode = document.body.classList.contains('dark-theme');
    
    if (isDarkMode) {
      document.body.classList.remove('dark-theme');
      themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
      themeToggle.title = 'Switch to dark mode';
      chrome.storage.local.set({ 'darkMode': false });
    } else {
      document.body.classList.add('dark-theme');
      themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
      themeToggle.title = 'Switch to light mode';
      chrome.storage.local.set({ 'darkMode': true });
    }
    
    // Add animation to theme toggle button
    themeToggle.classList.add('pulse-animation');
    setTimeout(() => {
      themeToggle.classList.remove('pulse-animation');
    }, 300);
  });
  
  // Load saved links
  chrome.storage.local.get(['links', 'linkTimestamps'], function(result) {
    if (result.links && result.links.length > 0) {
      links = result.links;
      linkTimestamps = result.linkTimestamps || {};
      setEmptyState(false);
      displayLinks(links);
      updateStats(links);
    } else {
      showEmptyMessage();
    }
  });

  // Add check links button to verify if links are still working
  const checkLinksButton = document.createElement('button');
  checkLinksButton.innerHTML = '<i class="fas fa-check-circle"></i> Check Links';
  checkLinksButton.title = 'Check for broken links';
  checkLinksButton.id = 'checkLinks';
  checkLinksButton.style.marginTop = '12px';
  checkLinksButton.style.width = '100%';
  checkLinksButton.style.background = 'var(--success-color)';
  checkLinksButton.className = 'success-button';
  
  // Add the button after the stats bar
  statsBar.parentNode.insertBefore(checkLinksButton, statsBar.nextSibling);
  
  // Check links functionality
  checkLinksButton.addEventListener('click', function() {
    if (links.length === 0) {
      showStatus('No links to check', 'error');
      return;
    }
    
    // Show loading state with animation
    checkLinksButton.disabled = true;
    checkLinksButton.innerHTML = '<span class="loading-spinner"></span> Checking...';
    checkLinksButton.classList.add('pulse-animation');
    
    // We'll send the links to the background script to check them
    chrome.runtime.sendMessage({
      action: "checkLinks",
      links: links
    }, function(response) {
      // Reset button state
      checkLinksButton.disabled = false;
      checkLinksButton.innerHTML = '<i class="fas fa-check-circle"></i> Check Links';
      checkLinksButton.classList.remove('pulse-animation');
      
      if (response && response.results) {
        // Update the UI to reflect broken links
        markBrokenLinks(response.results);
        
        const brokenCount = Object.values(response.results).filter(status => !status).length;
        if (brokenCount > 0) {
          showStatus(`Found ${brokenCount} broken link${brokenCount !== 1 ? 's' : ''}`, 'warning');
          
          // Highlight the broken links with a pulse animation
          const brokenLinks = document.querySelectorAll('.broken-link');
          brokenLinks.forEach(link => {
            link.classList.add('pulse-animation');
            setTimeout(() => link.classList.remove('pulse-animation'), 1000);
          });
        } else {
          showStatus('All links are working!');
        }
      } else {
        showStatus('Failed to check links', 'error');
      }
    });
  });

  // Function to mark broken links in the UI
  function markBrokenLinks(results) {
    // Find all link items in the list
    const linkItems = document.querySelectorAll('#linksList li');
    
    linkItems.forEach(item => {
      // Get the URL from the link item's text content
      const linkText = item.querySelector('.link-item').textContent;
      
      // If we have a result for this link and it's broken
      if (results[linkText] === false) {
        // Add a broken link indicator
        item.classList.add('broken-link');
        
        // Add a warning icon
        const warningIcon = document.createElement('span');
        warningIcon.className = 'broken-link-icon';
        warningIcon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
        warningIcon.title = 'This link appears to be broken';
        
        // Add it after the favicon
        const linkItem = item.querySelector('.link-item');
        if (linkItem.querySelector('.favicon')) {
          linkItem.insertBefore(warningIcon, linkItem.querySelector('.favicon').nextSibling);
        } else {
          linkItem.insertBefore(warningIcon, linkItem.firstChild);
        }
      }
    });
  }

  // Fetch links from current tab
  fetchButton.addEventListener('click', function() {
    // Show loading state
    fetchButton.disabled = true;
    fetchButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Fetching...';
    
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      const activeTab = tabs && tabs[0];
      requestLinksFromTab(activeTab ? activeTab.id : undefined, (error, response) => {
        // Reset button state
        fetchButton.disabled = false;
        fetchButton.innerHTML = '<i class="fas fa-download"></i> Fetch Links';

        if (error) {
          showStatus('Error: ' + error.message, 'error');
          return;
        }

        const newLinks = (response && response.links) ? response.links : [];

        // Replace stored links with the current tab's results, keeping unique order
        const uniqueLinks = [];
        const seen = new Set();
        newLinks.forEach(link => {
          if (!seen.has(link)) {
            seen.add(link);
            uniqueLinks.push(link);
          }
        });

        links = uniqueLinks;

        // Build timestamps for date sorting while preserving order
        const timestampBase = Date.now();
        const newTimestamps = {};
        uniqueLinks.forEach((link, index) => {
          newTimestamps[link] = timestampBase + index;
        });

        // Save links and timestamps
        linkTimestamps = newTimestamps;
        chrome.storage.local.set({
          'links': links,
          'linkTimestamps': linkTimestamps
        });

        // Display links
        displayLinks(links);
        updateStats(links);

        // Update badge
        chrome.runtime.sendMessage({ action: "updateBadge" });

        // Show success message with count
        const newCount = uniqueLinks.length;
        if (newCount > 0) {
          showStatus(`Found ${newCount} link${newCount !== 1 ? 's' : ''}`);
        } else {
          showStatus('No new links found');
        }
      });
    });
  });

  // Copy all links
  copyButton.addEventListener('click', function() {
    if (links.length === 0) {
      showStatus('No links to copy', 'error');
      return;
    }
    
    // Get filtered links if filter is active
    const filterText = filterInput.value.toLowerCase();
    const linksToCopy = filterText ? 
      links.filter(link => link.toLowerCase().includes(filterText)) : 
      links;
    
    const textToCopy = linksToCopy.join('\n');
    navigator.clipboard.writeText(textToCopy)
      .then(() => {
        // Visual feedback
        copyButton.innerHTML = '<i class="fas fa-check"></i> Copied!';
        setTimeout(() => {
          copyButton.innerHTML = '<i class="fas fa-copy"></i> Copy All';
        }, 1500);
        
        showStatus(`Copied ${linksToCopy.length} links to clipboard`);
      })
      .catch(err => {
        showStatus('Failed to copy: ' + err, 'error');
      });
  });

  // Clear all links
  clearButton.addEventListener('click', function() {
    if (links.length === 0) {
      showStatus('No links to clear', 'error');
      return;
    }
    
    // Add confirmation
    if (confirm(`Are you sure you want to clear all ${links.length} links?`)) {
      links = [];
      chrome.storage.local.set({ 'links': links, 'linkTimestamps': {} });
      showEmptyMessage();
      statsBar.style.display = 'none';
      showStatus('All links cleared');
      
      // Update badge
      chrome.runtime.sendMessage({ action: "updateBadge" });
    }
  });

  // Filter links
  filterInput.addEventListener('input', function() {
    const filterText = this.value.toLowerCase();
    const filteredLinks = links.filter(link => 
      link.toLowerCase().includes(filterText)
    );
    displayLinks(filteredLinks);

    // Update the link count in stats bar to show filtered count
    if (filterText) {
      linkCountElement.textContent = `${filteredLinks.length} of ${links.length} links`;
    } else {
      updateStats(links);
    }
  });

  // Sort links
  sortOption.addEventListener('change', function() {
    displayLinks(links);
  });
  
  // Keyboard shortcuts
  window.addEventListener('keydown', function(event) {
    // Ctrl+F or Cmd+F to focus the filter input
    if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
      event.preventDefault(); // Prevent browser's find function
      filterInput.focus();
    }
    
    // Escape to clear filter
    if (event.key === 'Escape' && document.activeElement === filterInput) {
      filterInput.value = '';
      displayLinks(links);
      updateStats(links);
    }
  });

  // Function to update stats bar
  function updateStats(linksArr) {
    if (linksArr.length === 0) {
      statsBar.style.display = 'none';
      return;
    }
    
    // Count unique domains
    const domains = new Set();
    linksArr.forEach(link => {
      try {
        const url = new URL(link);
        domains.add(url.hostname);
      } catch (e) {
        // Skip invalid URLs
      }
    });
    
    // Update stats display
    linkCountElement.textContent = `${linksArr.length} link${linksArr.length !== 1 ? 's' : ''}`;
    domainCountElement.textContent = `${domains.size} domain${domains.size !== 1 ? 's' : ''}`;
    statsBar.style.display = 'flex';
  }

  // Function to display links
  function displayLinks(linksToDisplay) {
    linksList.innerHTML = '';

    if (linksToDisplay.length === 0) {
      if (links.length === 0) {
        showEmptyMessage();
      } else {
        setEmptyState(false);
        const emptyFilter = document.createElement('li');
        emptyFilter.className = 'empty-filter';
        emptyFilter.textContent = 'No links match your current filters.';
        linksList.appendChild(emptyFilter);
      }
      return;
    }

    setEmptyState(false);

    const sortType = sortOption.value;
    let sortedLinks = [...linksToDisplay];

    // Sort according to selection
    if (sortType === 'alphabetical') {
      sortedLinks.sort();
    } else if (sortType === 'domain') {
      // Group by domain
      const linksByDomain = {};
      
      sortedLinks.forEach(link => {
        try {
          const url = new URL(link);
          const domain = url.hostname;
          
          if (!linksByDomain[domain]) {
            linksByDomain[domain] = [];
          }
          
          linksByDomain[domain].push(link);
        } catch (e) {
          // Skip invalid URLs
        }
      });
      
      // Display domain groups
      const frag = document.createDocumentFragment();
      Object.keys(linksByDomain).sort().forEach(domain => {
        const domainLinks = linksByDomain[domain];

        // Create domain header
        const domainGroup = document.createElement('div');
        domainGroup.className = 'domain-group';
        domainGroup.setAttribute('aria-label', `Domain group: ${domain} with ${domainLinks.length} links`);

        // Add favicon
        const favicon = document.createElement('img');
        favicon.src = `https://www.google.com/s2/favicons?domain=${domain}&sz=16`;
        favicon.className = 'favicon';
        favicon.alt = '';
        domainGroup.appendChild(favicon);

        // Add domain text
        domainGroup.appendChild(document.createTextNode(' ' + domain + ' '));

        // Add count badge
        const badge = document.createElement('span');
        badge.className = 'badge';
        badge.textContent = domainLinks.length;
        domainGroup.appendChild(badge);

        frag.appendChild(domainGroup);

        // Add links for this domain
        domainLinks.forEach(link => {
          frag.appendChild(addLinkItem(link));
        });
      });
      linksList.appendChild(frag);
      
      return; // We've handled the display
    } else if (sortType === 'date') {
      // If we have stored timestamps, sort by those (newest first)
      const timestamps = linkTimestamps;

      sortedLinks.sort((a, b) => {
        const timeA = timestamps[a] || 0;
        const timeB = timestamps[b] || 0;
        return timeB - timeA; // Descending order (newest first)
      });

      const frag = document.createDocumentFragment();
      sortedLinks.forEach(link => {
        frag.appendChild(addLinkItem(link));
      });
      linksList.appendChild(frag);
      return;
    }
    
    // Default display (for default or alphabetical sort)
    const frag = document.createDocumentFragment();
    sortedLinks.forEach(link => {
      frag.appendChild(addLinkItem(link));
    });
    linksList.appendChild(frag);
  }

  // Function to add a single link item to the list
  function addLinkItem(link) {
    // Create list item
    const li = document.createElement('li');
    li.tabIndex = 0; // Make focusable for keyboard navigation
    
    // Create link display area
    const linkItem = document.createElement('div');
    linkItem.className = 'link-item';
    
    // Try to extract domain for favicon
    let domain = '';
    try {
      const url = new URL(link);
      domain = url.hostname;
    } catch (e) {
      // If not a valid URL, skip favicon
    }
    
    // Add favicon if we have a domain
    if (domain) {
      const favicon = document.createElement('img');
      favicon.src = `https://www.google.com/s2/favicons?domain=${domain}&sz=16`;
      favicon.className = 'favicon';
      favicon.alt = '';
      linkItem.appendChild(favicon);
    }
    
    // Add text content (the URL)
    linkItem.appendChild(document.createTextNode(link));
    
    // Add click handler to copy link
    linkItem.addEventListener('click', function() {
      navigator.clipboard.writeText(link).then(() => {
        showStatus(`Copied: ${link}`);
      });
    });
    
    li.appendChild(linkItem);
    
    // Create action buttons container
    const actions = document.createElement('div');
    actions.className = 'link-actions';
    
    // Copy button
    const copyBtn = document.createElement('button');
    copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
    copyBtn.title = 'Copy link';
    copyBtn.setAttribute('aria-label', 'Copy link');
    copyBtn.addEventListener('click', function(e) {
      e.stopPropagation(); // Prevent triggering the li click
      navigator.clipboard.writeText(link).then(() => {
        showStatus(`Copied: ${link}`);
      });
    });
    actions.appendChild(copyBtn);
    
    // Open button
    const openBtn = document.createElement('button');
    openBtn.innerHTML = '<i class="fas fa-external-link-alt"></i>';
    openBtn.title = 'Open link in new tab';
    openBtn.setAttribute('aria-label', 'Open link in new tab');
    openBtn.addEventListener('click', function(e) {
      e.stopPropagation(); // Prevent triggering the li click
      chrome.tabs.create({ url: link });
    });
    actions.appendChild(openBtn);
    
    // Delete button
    const deleteBtn = document.createElement('button');
    deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
    deleteBtn.title = 'Remove link';
    deleteBtn.setAttribute('aria-label', 'Remove link');
    deleteBtn.addEventListener('click', function(e) {
      e.stopPropagation(); // Prevent triggering the li click
      
      // Remove from array
      const index = links.indexOf(link);
      if (index > -1) {
        const [removed] = links.splice(index, 1);
        if (removed) {
          delete linkTimestamps[removed];
        }
        
        // Update storage
        chrome.storage.local.set({ 'links': links, 'linkTimestamps': linkTimestamps }, function() {
          // Update UI
          li.classList.add('removing');
          
          // Animate removal
          setTimeout(() => {
            li.remove();
            
            // Update stats
            updateStats(links);
            
            if (links.length === 0) {
              showEmptyMessage();
            }
          }, 300);
          
          showStatus('Link removed');
          
          // Update badge
          chrome.runtime.sendMessage({ action: "updateBadge" });
        });
      }
    });
    actions.appendChild(deleteBtn);
    
    li.appendChild(actions);
    return li;
  }

  // Show empty message
  function showEmptyMessage() {
    setEmptyState(true);
    if (linksList) {
      linksList.innerHTML = '';
    }
  }
  
  // Show status message
  function showStatus(message, type = 'success') {
    statusElement.textContent = message;
    statusElement.className = 'status ' + type;
    
    // Show the message
    statusElement.style.opacity = '1';
    
    // Hide after delay
    setTimeout(() => {
      statusElement.style.opacity = '0';
    }, 3000);
  }
  

});