contentScript.js

// Content script for AI Code Explainer - FULLY WORKING VERSION
console.log('🚀 AI Code Explainer loaded and ready!');

let explainButton = null;
let explanationPopup = null;
let selectedCode = '';

// Listen for ANY text selection - super simple and reliable
document.addEventListener('mouseup', (event) => {
  // Small delay to ensure selection is complete
  setTimeout(() => {
    const selection = window.getSelection().toString().trim();
    
    // Remove old button
    removeExplainButton();
    
    // Show button for ANY selection over 3 characters
    // This makes it work EVERYWHERE - not just code blocks
    if (selection && selection.length > 3) {
      selectedCode = selection;
      showExplainButton(event);
      console.log('✅ Button shown for selection:', selection.substring(0, 50) + '...');
    }
  }, 150);
});

function showExplainButton(event) {
  // Create button
  explainButton = document.createElement('button');
  explainButton.innerHTML = '💡 Explain Code';
  explainButton.id = 'ai-explain-btn';
  explainButton.className = 'ai-code-explainer-btn';
  
  // Get cursor position
  const x = event.pageX || event.clientX + window.scrollX;
  const y = event.pageY || event.clientY + window.scrollY;
  
  // Position button near cursor
  explainButton.style.position = 'fixed';
  explainButton.style.top = `${event.clientY + 10}px`;
  explainButton.style.left = `${event.clientX + 10}px`;
  explainButton.style.zIndex = '2147483647'; // Maximum z-index
  
  document.body.appendChild(explainButton);
  console.log('📍 Button positioned at:', event.clientX, event.clientY);
  
  // Click handler - prevent default and stop propagation
  explainButton.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();
    console.log('🔵 Button clicked! Explaining code...');
    explainCode(selectedCode);
  }, { capture: true });
  
  // Remove button when clicking elsewhere (but not the button itself)
  setTimeout(() => {
    document.addEventListener('click', (e) => {
      if (e.target !== explainButton) {
        removeExplainButton();
      }
    }, { once: true, capture: true });
  }, 200);
}

function removeExplainButton() {
  if (explainButton && explainButton.parentNode) {
    explainButton.parentNode.removeChild(explainButton);
    explainButton = null;
  }
}

async function explainCode(code) {
  console.log('🔄 Starting explanation for code:', code.substring(0, 100) + '...');
  
  // Show loading state immediately
  if (explainButton) {
    explainButton.innerHTML = '⏳ Explaining...';
    explainButton.disabled = true;
    explainButton.style.cursor = 'wait';
  }
  
  // Show loading popup immediately
  showLoadingPopup();
  
  try {
    console.log('📡 Sending message to background script...');
    
    // Send message to background script
    const response = await chrome.runtime.sendMessage({
      action: 'explainCode',
      code: code,
      language: detectLanguage(code)
    });
    
    console.log('📥 Received response:', response);
    
    if (response && response.success) {
      console.log('✅ Success! Showing explanation...');
      showExplanationPopup(response.explanation, response.tier, response.remainingCount);
    } else {
      console.log('❌ Error in response:', response?.error);
      showErrorPopup(response?.error || 'Failed to get explanation');
    }
  } catch (error) {
    console.error('❌ Error explaining code:', error);
    showErrorPopup('Failed to explain code. Please check your internet connection and try again.');
  } finally {
    removeExplainButton();
  }
}

function showLoadingPopup() {
  removeExplanationPopup();
  
  explanationPopup = document.createElement('div');
  explanationPopup.id = 'ai-explanation-popup';
  explanationPopup.className = 'ai-code-explainer-popup';
  
  explanationPopup.innerHTML = `
    <div class="popup-header">
      <h3>⏳ Analyzing Code...</h3>
      <button class="close-btn" id="close-loading-popup">✕</button>
    </div>
    <div class="popup-body">
      <div class="loading-spinner"></div>
      <p style="text-align: center; margin-top: 16px;">Getting AI explanation from Pollination AI...</p>
      <p style="text-align: center; margin-top: 8px; font-size: 12px; color: #a0aec0;">Usually takes 2-4 seconds</p>
    </div>
  `;
  
  document.body.appendChild(explanationPopup);
  
  // Add close button handler
  document.getElementById('close-loading-popup')?.addEventListener('click', removeExplanationPopup);
  
  console.log('⏳ Loading popup shown');
}

function showExplanationPopup(explanation, tier, remainingCount) {
  // Remove existing popup
  removeExplanationPopup();
  
  explanationPopup = document.createElement('div');
  explanationPopup.id = 'ai-explanation-popup';
  explanationPopup.className = 'ai-code-explainer-popup';
  
  // Create popup content
  const content = `
    <div class="popup-header">
      <h3>💡 Code Explanation</h3>
      <button class="close-btn" id="close-popup">✕</button>
    </div>
    <div class="popup-body">
      <div class="explanation-content">${formatExplanation(explanation)}</div>
      ${tier === 'free' ? `
        <div class="upgrade-banner">
          <p>🎯 Free tier: ${remainingCount} explanations remaining today</p>
          <button class="upgrade-btn" id="upgrade-btn">Upgrade to Pro</button>
        </div>
      ` : ''}
    </div>
  `;
  
  explanationPopup.innerHTML = content;
  document.body.appendChild(explanationPopup);
  
  // Add event listeners
  document.getElementById('close-popup').addEventListener('click', removeExplanationPopup);
  const upgradeBtn = document.getElementById('upgrade-btn');
  if (upgradeBtn) {
    upgradeBtn.addEventListener('click', () => {
      chrome.runtime.sendMessage({ action: 'openUpgrade' });
    });
  }
  
  // Auto-close after 30 seconds
  setTimeout(removeExplanationPopup, 30000);
}

function showErrorPopup(errorMessage) {
  removeExplanationPopup();
  
  explanationPopup = document.createElement('div');
  explanationPopup.id = 'ai-explanation-popup';
  explanationPopup.className = 'ai-code-explainer-popup error';
  
  explanationPopup.innerHTML = `
    <div class="popup-header">
      <h3>⚠️ Error</h3>
      <button class="close-btn" id="close-popup">✕</button>
    </div>
    <div class="popup-body">
      <p>${errorMessage}</p>
      ${errorMessage.includes('Upgrade') ? `
        <button class="upgrade-btn" id="upgrade-btn">Upgrade to Pro</button>
      ` : ''}
    </div>
  `;
  
  document.body.appendChild(explanationPopup);
  
  document.getElementById('close-popup').addEventListener('click', removeExplanationPopup);
  const upgradeBtn = document.getElementById('upgrade-btn');
  if (upgradeBtn) {
    upgradeBtn.addEventListener('click', () => {
      chrome.runtime.sendMessage({ action: 'openUpgrade' });
    });
  }
  
  setTimeout(removeExplanationPopup, 10000);
}

function removeExplanationPopup() {
  if (explanationPopup && explanationPopup.parentNode) {
    explanationPopup.parentNode.removeChild(explanationPopup);
    explanationPopup = null;
  }
}

function formatExplanation(text) {
  // Convert markdown-style formatting to HTML
  let formatted = text
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/`(.*?)`/g, '<code>$1</code>')
    .replace(/\n\n/g, '</p><p>')
    .replace(/\n/g, '<br>');
  
  return `<p>${formatted}</p>`;
}

function detectLanguage(code) {
  if (code.includes('def ') || code.includes('import ')) return 'Python';
  if (code.includes('function ') || code.includes('const ') || code.includes('let ')) return 'JavaScript';
  if (code.includes('public class ') || code.includes('private ')) return 'Java';
  if (code.includes('#include') || code.includes('std::')) return 'C++';
  if (code.includes('func ') || code.includes('package main')) return 'Go';
  return 'auto';
}