popup.js

// Popup JavaScript for the Chrome extension
document.addEventListener('DOMContentLoaded', async () => {
  console.log('Popup loaded');

  // Get DOM elements
  const checkBlockingBtn = document.getElementById('check-blocking-btn');
  const getPageInfoBtn = document.getElementById('get-page-info-btn');
  const applyBlockingBtn = document.getElementById('apply-blocking-btn');
  const disableBlockingBtn = document.getElementById('disable-blocking-btn');
  const clearRuleBtn = document.getElementById('clear-rule-btn');

  const blockingStatusSpan = document.getElementById('blocking-status');
  const statusText = document.getElementById('status-text');
  
  // Page info elements
  const pageInfoDiv = document.getElementById('page-info');
  const pageUrlSpan = document.getElementById('page-url');
  const pageTitleSpan = document.getElementById('page-title');
  const pageLinksSpan = document.getElementById('page-links');
  const pageImagesSpan = document.getElementById('page-images');

  // Load stored data
  const data = await chrome.storage.sync.get(['clickCount', 'extensionEnabled']);
  let extensionEnabled = data.extensionEnabled !== undefined ? data.extensionEnabled : true;

  
  // Update blocking status on popup load
  updateBlockingStatus();

  checkBlockingBtn.addEventListener('click', async () => {
    updateBlockingStatus();
  });

  applyBlockingBtn.addEventListener('click', async () => {
     const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
    const currentTab = tabs[0];

    if (!currentTab) {
      statusText.textContent = 'No active tab found';
      return;
    }

    // Send message to background to apply blocking
    chrome.runtime.sendMessage({
      action: 'applyBlocking',
      domain: `${new URL(currentTab.url).hostname}`
    });

    statusText.textContent = `Applying JavaScript blocking for ${new URL(currentTab.url).hostname}...`;

    // Update blocking status after a short delay
    setTimeout(async () => {
      await updateBlockingStatus();
      statusText.textContent = extensionEnabled ? 'Extension is ready!' : 'Extension is disabled';
    }, 1000);
  });

  clearRuleBtn.addEventListener('click', async () => {
    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
    const currentTab = tabs[0];

    if (!currentTab) {
      statusText.textContent = 'No active tab found';
      return;
    }

    // Send message to background to clear rule
    chrome.runtime.sendMessage({
      action: 'clearRule',
      domain: new URL(currentTab.url).hostname
    });

    statusText.textContent = `Clearing JavaScript rule for ${new URL(currentTab.url).hostname}...`;

    // Update blocking status after a short delay
    setTimeout(async () => {
      await updateBlockingStatus();
      statusText.textContent = extensionEnabled ? 'Extension is ready!' : 'Extension is disabled';
    }, 1000);
  });

  disableBlockingBtn.addEventListener('click', async () => {
    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
    const currentTab = tabs[0];

    if (!currentTab) {
      statusText.textContent = 'No active tab found';
      return;
    }
    console.log(`hostname: ${new URL(currentTab.url).hostname}`);
    // Send message to background to disable blocking
    chrome.runtime.sendMessage({
      action: 'disableBlocking',
      domain: new URL(currentTab.url).hostname
    });

    statusText.textContent = `Removing JavaScript blocking for ${new URL(currentTab.url).hostname}...`;

    // Update blocking status after a short delay
    setTimeout(async () => {
      await updateBlockingStatus();
      statusText.textContent = extensionEnabled ? 'Extension is ready!' : 'Extension is disabled';
    }, 1000);
  });

  getPageInfoBtn.addEventListener('click', async () => {
    try {
      // Get current active tab
      const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
      const currentTab = tabs[0];
      
      if (!currentTab) {
        statusText.textContent = 'No active tab found';
        return;
      }
      
      // Send message to content script to get page info
      const response = await chrome.tabs.sendMessage(currentTab.id, {
        action: 'getPageInfo'
      });
      
      // Update UI with page info
      pageUrlSpan.textContent = response.url;
      pageTitleSpan.textContent = response.title;
      pageLinksSpan.textContent = response.links;
      pageImagesSpan.textContent = response.images;
      
      // Show the page info section
      pageInfoDiv.style.display = 'block';
      
      // Show feedback
      statusText.textContent = 'Page info retrieved successfully!';
      setTimeout(() => {
        statusText.textContent = extensionEnabled ? 'Extension is ready!' : 'Extension is disabled';
      }, 3000);
      
    } catch (error) {
      console.error('Error getting page info:', error);
      statusText.textContent = 'Error: Could not get page info';
      setTimeout(() => {
        statusText.textContent = extensionEnabled ? 'Extension is ready!' : 'Extension is disabled';
      }, 3000);
    }
  });


  // Function to update blocking status display
  async function updateBlockingStatus() {
    try {
     const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
    const currentTab = tabs[0];

    if (!currentTab) {
      blockingStatusSpan.textContent = 'No active tab found';
      return;
    }

      const response = await chrome.runtime.sendMessage({
        action: 'checkBlocking',
        url: currentTab.url
      });
      
      if (response.blocked) {
        blockingStatusSpan.textContent = `🚫 Blocked`;
        blockingStatusSpan.style.color = '#dc2626';
        applyBlockingBtn.textContent = 'Already Blocked';
        applyBlockingBtn.disabled = true;
        disableBlockingBtn.disabled = false;
      } else {
        blockingStatusSpan.textContent = `✅ Allowed`;
        blockingStatusSpan.style.color = '#16a34a';
        applyBlockingBtn.textContent = `Block`;
        applyBlockingBtn.disabled = false;
        disableBlockingBtn.disabled = true;
      }
    } catch (error) {
      console.error('Error checking blocking status:', error);
      blockingStatusSpan.textContent = 'Error';
      blockingStatusSpan.style.color = '#dc2626';
    }
  }

  // Test communication with background script
  try {
    const response = await chrome.runtime.sendMessage({ action: 'getStatus' });
    console.log('Background script response:', response);
  } catch (error) {
    console.error('Error communicating with background script:', error);
  }
});

// Handle any errors
window.addEventListener('error', (e) => {
  console.error('Popup error:', e.error);
});