content.js

// Content script for PerfectParallel extension
let comparisonOverlay = null;
let isComparing = false;

// Listen for messages from popup
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  try {
    if (request.action === "startComparison") {
      startComparison(request.uploadedImage, request.sensitivity)
        .then((result) => {
          sendResponse(result);
        })
        .catch((error) => {
          console.error("startComparison error:", error);

          let errorMessage;
          if (error === null) {
            errorMessage = "Comparison failed: null error";
          } else if (error === undefined) {
            errorMessage = "Comparison failed: undefined error";
          } else if (typeof error === "string") {
            errorMessage = error;
          } else if (error?.message) {
            errorMessage = error.message;
          } else if (error?.toString && typeof error.toString === "function") {
            errorMessage = error.toString();
          } else {
            errorMessage = "Unknown comparison error";
          }

          sendResponse({
            success: false,
            error: errorMessage,
          });
        });
      return true; // Keep message channel open for async response
    } else if (request.action === "clearComparison") {
      clearComparison();
      sendResponse({ success: true });
    } else if (request.action === "hideHighlights") {
      const highlights = document.querySelectorAll(".pp-page-highlight");
      highlights.forEach((highlight) => (highlight.style.display = "none"));
      sendResponse({ success: true });
    } else if (request.action === "showHighlights") {
      const highlights = document.querySelectorAll(".pp-page-highlight");
      highlights.forEach((highlight) => (highlight.style.display = "block"));
      sendResponse({ success: true });
    } else if (request.action === "ping") {
      sendResponse({ success: true });
    } else {
      sendResponse({
        success: false,
        error: "Unknown action: " + request.action,
      });
    }
  } catch (error) {
    console.error("Message handler error:", error);
    sendResponse({
      success: false,
      error: error?.message || "Message handler failed",
    });
  }
});

async function startComparison(uploadedImageData, sensitivity) {
  try {
    if (isComparing)
      return { success: false, error: "Comparison already in progress" };

    isComparing = true;

    // Capture full page instead of just viewport
    const currentPageData = await captureFullPage();

    // Create overlay for comparison
    createComparisonOverlay();

    // Compare images
    const comparisonResult = await compareImages(
      uploadedImageData,
      currentPageData,
      sensitivity
    );

    // Check if comparison was successful
    if (comparisonResult.success === false) {
      isComparing = false;
      return comparisonResult; // Return the error from compareImages
    }

    // Show results in overlay
    showComparisonResults(comparisonResult);

    isComparing = false;

    return {
      success: true,
      similarity: comparisonResult.similarity,
      differences: comparisonResult.differences,
      totalPixels: comparisonResult.totalPixels,
    };
  } catch (error) {
    console.error("Error in startComparison:", error);
    isComparing = false;
    return {
      success: false,
      error: error?.message || error?.toString() || "Unknown comparison error",
    };
  }
}

// Function to capture the full page using native browser APIs
async function captureFullPage() {
  return new Promise(async (resolve, reject) => {
    try {
      // Get the full page dimensions
      const scrollHeight = Math.max(
        document.body.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight,
        document.documentElement.offsetHeight
      );

      const scrollWidth = Math.max(
        document.body.scrollWidth,
        document.body.offsetWidth,
        document.documentElement.clientWidth,
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth
      );

      // For now, use a simple approach: create a canvas and draw the page
      // This is a simplified version - for better results, consider using html2canvas library
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      // Set canvas size to full page
      canvas.width = scrollWidth;
      canvas.height = scrollHeight;

      // Create an image from the page content using dom-to-image approach
      const svgString = createSVGFromPage(scrollWidth, scrollHeight);
      const img = new Image();

      img.onload = function () {
        ctx.drawImage(img, 0, 0);
        const dataURL = canvas.toDataURL("image/png");
        resolve(dataURL);
      };

      img.onerror = function (event) {
        // Fallback to viewport capture
        chrome.runtime.sendMessage({ action: "captureTab" }, (response) => {
          if (chrome.runtime.lastError) {
            reject(
              new Error(
                `Chrome runtime error: ${chrome.runtime.lastError.message}`
              )
            );
          } else if (response && response.error) {
            reject(new Error(response.error));
          } else if (response && response.screenshot) {
            resolve(response.screenshot);
          } else {
            reject(new Error("Failed to capture screenshot"));
          }
        });
      };

      img.src =
        "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgString);
    } catch (error) {
      // Fallback to viewport capture
      chrome.runtime.sendMessage({ action: "captureTab" }, (response) => {
        if (chrome.runtime.lastError) {
          reject(
            new Error(
              `Chrome runtime error: ${chrome.runtime.lastError.message}`
            )
          );
        } else if (response && response.error) {
          reject(new Error(response.error));
        } else if (response && response.screenshot) {
          resolve(response.screenshot);
        } else {
          reject(new Error("Failed to capture screenshot"));
        }
      });
    }
  });
}

// Helper function to create SVG from page content
function createSVGFromPage(width, height) {
  try {
    // Get all stylesheets
    let styles = "";
    for (let i = 0; i < document.styleSheets.length; i++) {
      try {
        const styleSheet = document.styleSheets[i];
        if (styleSheet.cssRules) {
          for (let j = 0; j < styleSheet.cssRules.length; j++) {
            styles += styleSheet.cssRules[j].cssText + "\n";
          }
        }
      } catch (e) {
        // Skip cross-origin stylesheets
      }
    }

    // Clone the document body
    const clonedBody = document.body
      ? document.body.cloneNode(true)
      : document.createElement("div");

    // Remove any existing highlights
    const existingHighlights =
      clonedBody.querySelectorAll(".pp-page-highlight");
    existingHighlights.forEach((highlight) => highlight.remove());

    // Remove the comparison overlay
    const overlay = clonedBody.querySelector("#perfectparallel-overlay");
    if (overlay) overlay.remove();

    const svgString = `
    <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
      <defs>
        <style type="text/css">
          <![CDATA[
            ${styles}
          ]]>
        </style>
      </defs>
      <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
          ${clonedBody.outerHTML}
        </div>
      </foreignObject>
    </svg>
  `;

    return svgString;
  } catch (error) {
    throw new Error("Failed to create SVG representation of page");
  }
}

function createComparisonOverlay() {
  if (comparisonOverlay) {
    comparisonOverlay.remove();
  }

  comparisonOverlay = document.createElement("div");
  comparisonOverlay.id = "perfectparallel-overlay";
  comparisonOverlay.innerHTML = `
    <div class="pp-overlay-header">
      <h3>PerfectParallel Comparison</h3>
      <button class="pp-close-btn" onclick="this.closest('#perfectparallel-overlay').remove()">×</button>
    </div>
    <div class="pp-overlay-content">
      <div class="pp-images-container">
        <div class="pp-image-section">
          <h4>Uploaded Screenshot</h4>
          <canvas id="pp-uploaded-canvas"></canvas>
        </div>
        <div class="pp-image-section">
          <h4>Current Page</h4>
          <canvas id="pp-current-canvas"></canvas>
        </div>
        <div class="pp-image-section">
          <h4>Differences</h4>
          <canvas id="pp-diff-canvas"></canvas>
        </div>
      </div>
      <div class="pp-stats">
        <div class="pp-similarity">Similarity: <span id="pp-similarity-value">Calculating...</span></div>
        <div class="pp-differences">Differences found: <span id="pp-diff-count">Calculating...</span></div>
      </div>
    </div>
  `;

  document.body.appendChild(comparisonOverlay);
}

async function compareImages(uploadedImageData, currentPageData, sensitivity) {
  return new Promise((resolve) => {
    const uploadedImg = new Image();
    const currentImg = new Image();

    let imagesLoaded = 0;
    const onImageLoad = () => {
      imagesLoaded++;
      if (imagesLoaded === 2) {
        // Use setTimeout to prevent blocking the UI
        setTimeout(performComparison, 100);
      }
    };

    uploadedImg.onload = onImageLoad;
    currentImg.onload = onImageLoad;

    uploadedImg.src = uploadedImageData;
    currentImg.src = currentPageData;

    function performComparison() {
      try {
        const uploadedCanvas = document.getElementById("pp-uploaded-canvas");
        const currentCanvas = document.getElementById("pp-current-canvas");
        const diffCanvas = document.getElementById("pp-diff-canvas");

        if (!uploadedCanvas || !currentCanvas || !diffCanvas) {
          resolve({ success: false, error: "Canvas elements not found" });
          return;
        }

        // Calculate display dimensions for each image separately to maintain aspect ratios
        const maxDisplayWidth = 300;
        const maxDisplayHeight = 200;

        // Calculate uploaded image display size
        const uploadedAspect = uploadedImg.width / uploadedImg.height;
        let uploadedDisplayWidth, uploadedDisplayHeight;
        if (uploadedAspect > maxDisplayWidth / maxDisplayHeight) {
          uploadedDisplayWidth = maxDisplayWidth;
          uploadedDisplayHeight = maxDisplayWidth / uploadedAspect;
        } else {
          uploadedDisplayHeight = maxDisplayHeight;
          uploadedDisplayWidth = maxDisplayHeight * uploadedAspect;
        }

        // Calculate current image display size
        const currentAspect = currentImg.width / currentImg.height;
        let currentDisplayWidth, currentDisplayHeight;
        if (currentAspect > maxDisplayWidth / maxDisplayHeight) {
          currentDisplayWidth = maxDisplayWidth;
          currentDisplayHeight = maxDisplayWidth / currentAspect;
        } else {
          currentDisplayHeight = maxDisplayHeight;
          currentDisplayWidth = maxDisplayHeight * currentAspect;
        }

        // Use the larger display dimensions for diff canvas to show both properly
        const diffDisplayWidth = Math.max(
          uploadedDisplayWidth,
          currentDisplayWidth
        );
        const diffDisplayHeight = Math.max(
          uploadedDisplayHeight,
          currentDisplayHeight
        );

        // Set canvas dimensions individually to maintain proper aspect ratios
        uploadedCanvas.width = uploadedDisplayWidth;
        uploadedCanvas.height = uploadedDisplayHeight;
        currentCanvas.width = currentDisplayWidth;
        currentCanvas.height = currentDisplayHeight;
        diffCanvas.width = diffDisplayWidth;
        diffCanvas.height = diffDisplayHeight;

        const uploadedCtx = uploadedCanvas.getContext("2d");
        const currentCtx = currentCanvas.getContext("2d");
        const diffCtx = diffCanvas.getContext("2d");

        // Draw images maintaining their individual aspect ratios for display
        uploadedCtx.drawImage(
          uploadedImg,
          0,
          0,
          uploadedDisplayWidth,
          uploadedDisplayHeight
        );
        currentCtx.drawImage(
          currentImg,
          0,
          0,
          currentDisplayWidth,
          currentDisplayHeight
        );

        // For comparison, we need to normalize to the same dimensions
        // Use the smaller image dimensions to avoid stretching, but scale appropriately
        const maxComparisonSize = 800;
        let comparisonWidth = Math.min(uploadedImg.width, currentImg.width);
        let comparisonHeight = Math.min(uploadedImg.height, currentImg.height);

        // Scale down if too large
        if (
          comparisonWidth > maxComparisonSize ||
          comparisonHeight > maxComparisonSize
        ) {
          const scale = Math.min(
            maxComparisonSize / comparisonWidth,
            maxComparisonSize / comparisonHeight
          );
          comparisonWidth = Math.floor(comparisonWidth * scale);
          comparisonHeight = Math.floor(comparisonHeight * scale);
        }

        // Create comparison canvases at normalized size
        const comparisonCanvas1 = document.createElement("canvas");
        const comparisonCanvas2 = document.createElement("canvas");
        comparisonCanvas1.width = comparisonCanvas2.width = comparisonWidth;
        comparisonCanvas1.height = comparisonCanvas2.height = comparisonHeight;

        const ctx1 = comparisonCanvas1.getContext("2d");
        const ctx2 = comparisonCanvas2.getContext("2d");

        // Draw images at normalized comparison size (this may involve some stretching for accurate comparison)
        ctx1.drawImage(uploadedImg, 0, 0, comparisonWidth, comparisonHeight);
        ctx2.drawImage(currentImg, 0, 0, comparisonWidth, comparisonHeight);

        // Get image data for comparison at normalized size
        const uploadedData = ctx1.getImageData(
          0,
          0,
          comparisonWidth,
          comparisonHeight
        );
        const currentData = ctx2.getImageData(
          0,
          0,
          comparisonWidth,
          comparisonHeight
        );
        const diffData = diffCtx.createImageData(
          diffDisplayWidth,
          diffDisplayHeight
        );

        // Perform optimized pixel-by-pixel comparison
        let totalPixels = comparisonWidth * comparisonHeight;
        let differentPixels = 0;
        let differenceRegions = [];
        const threshold = (11 - sensitivity) * 10;

        // Sample pixels instead of checking every single one for performance
        const sampleRate = Math.max(
          1,
          Math.floor(Math.sqrt(totalPixels) / 100)
        ); // Dynamic sampling

        for (let y = 0; y < comparisonHeight; y += sampleRate) {
          for (let x = 0; x < comparisonWidth; x += sampleRate) {
            const i = (y * comparisonWidth + x) * 4;

            const r1 = uploadedData.data[i];
            const g1 = uploadedData.data[i + 1];
            const b1 = uploadedData.data[i + 2];

            const r2 = currentData.data[i];
            const g2 = currentData.data[i + 1];
            const b2 = currentData.data[i + 2];

            const rDiff = Math.abs(r1 - r2);
            const gDiff = Math.abs(g1 - g2);
            const bDiff = Math.abs(b1 - b2);
            const totalDiff = rDiff + gDiff + bDiff;

            if (totalDiff > threshold) {
              differentPixels++;

              // Only create regions for significant differences, not every pixel
              if (differenceRegions.length < 1000) {
                // Limit regions for performance
                differenceRegions.push({
                  x: x,
                  y: y,
                  width: sampleRate,
                  height: sampleRate,
                });
              }

              // Draw difference on display canvas
              const displayX = Math.floor(
                (x / comparisonWidth) * diffDisplayWidth
              );
              const displayY = Math.floor(
                (y / comparisonHeight) * diffDisplayHeight
              );
              const displayI = (displayY * diffDisplayWidth + displayX) * 4;

              if (displayI < diffData.data.length) {
                diffData.data[displayI] = 255; // R
                diffData.data[displayI + 1] = 0; // G
                diffData.data[displayI + 2] = 0; // B
                diffData.data[displayI + 3] = 180; // A
              }
            }
          }
        }

        diffCtx.putImageData(diffData, 0, 0);

        // Adjust similarity calculation for sampling
        const sampledTotalPixels =
          Math.ceil(comparisonWidth / sampleRate) *
          Math.ceil(comparisonHeight / sampleRate);
        const similarity =
          ((sampledTotalPixels - differentPixels) / sampledTotalPixels) * 100;

        // Create page highlights (limit for performance)
        const limitedRegions = differenceRegions.slice(0, 200); // Limit to 200 highlights
        createPageHighlights(limitedRegions, comparisonWidth, comparisonHeight);

        resolve({
          similarity,
          differences: differentPixels,
          totalPixels: sampledTotalPixels,
          differenceRegions: limitedRegions,
        });
      } catch (error) {
        console.error("Comparison error:", error);
        const errorMessage =
          error?.message || error?.toString() || "Unknown comparison error";
        resolve({
          success: false,
          error: errorMessage,
        });
      }
    }
  });
}

function createPageHighlights(
  differenceRegions,
  originalWidth,
  originalHeight
) {
  // Clear existing highlights
  clearPageHighlights();

  if (differenceRegions.length === 0) return;

  // Get full page dimensions
  const fullPageWidth = Math.max(
    document.body.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.clientWidth,
    document.documentElement.scrollWidth,
    document.documentElement.offsetWidth
  );

  const fullPageHeight = Math.max(
    document.body.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.clientHeight,
    document.documentElement.scrollHeight,
    document.documentElement.offsetHeight
  );

  // Scale factors to map from comparison coordinates to actual page coordinates
  const scaleX = fullPageWidth / originalWidth;
  const scaleY = fullPageHeight / originalHeight;

  // Group nearby difference pixels into regions to reduce highlight count
  const groupedRegions = groupDifferenceRegions(differenceRegions, 10); // 10px grouping threshold

  groupedRegions.forEach((region) => {
    const highlight = document.createElement("div");
    highlight.className = "pp-page-highlight";

    // Scale the region to actual page coordinates
    const left = region.x * scaleX;
    const top = region.y * scaleY;
    const width = Math.max(region.width * scaleX, 4);
    const height = Math.max(region.height * scaleY, 4);

    // Use absolute positioning relative to the page, not viewport
    // Set z-index lower than overlay so highlights appear on page behind the overlay
    highlight.style.cssText = `
      position: absolute !important;
      left: ${left}px !important;
      top: ${top}px !important;
      width: ${width}px !important;
      height: ${height}px !important;
      background: rgba(255, 68, 68, 0.5) !important;
      border: 3px solid #ff0000 !important;
      pointer-events: none !important;
      z-index: 999990 !important;
      border-radius: 4px !important;
      box-shadow: 0 0 12px rgba(255, 68, 68, 0.8) !important;
      animation: pp-highlight-pulse 2s ease-in-out infinite !important;
    `;

    // Try different parent elements to ensure visibility
    // First try to append to a container that's not affected by the overlay
    const targetParent =
      document.querySelector("main") ||
      document.querySelector('[role="main"]') ||
      document.querySelector(".main") ||
      document.body;

    targetParent.appendChild(highlight);
  });

  // Add a simple test highlight to verify highlighting works
  setTimeout(() => {
    const testHighlight = document.createElement("div");
    testHighlight.className = "pp-page-highlight pp-test-highlight";
    testHighlight.style.cssText = `
      position: fixed !important;
      left: 100px !important;
      top: 100px !important;
      width: 50px !important;
      height: 50px !important;
      background: rgba(0, 255, 0, 0.7) !important;
      border: 3px solid #00ff00 !important;
      pointer-events: none !important;
      z-index: 999995 !important;
      border-radius: 50% !important;
    `;
    document.body.appendChild(testHighlight);

    // Remove test highlight after 3 seconds
    setTimeout(() => {
      testHighlight.remove();
    }, 3000);
  }, 500);
}

function groupDifferenceRegions(regions, threshold) {
  if (regions.length === 0) return [];

  const grouped = [];
  const used = new Set();

  for (let i = 0; i < regions.length; i++) {
    if (used.has(i)) continue;

    const group = [regions[i]];
    used.add(i);

    // Find nearby regions to group together
    for (let j = i + 1; j < regions.length; j++) {
      if (used.has(j)) continue;

      const distance = Math.sqrt(
        Math.pow(regions[i].x - regions[j].x, 2) +
          Math.pow(regions[i].y - regions[j].y, 2)
      );

      if (distance <= threshold) {
        group.push(regions[j]);
        used.add(j);
      }
    }

    // Create bounding box for the group
    let minX = Math.min(...group.map((r) => r.x));
    let minY = Math.min(...group.map((r) => r.y));
    let maxX = Math.max(...group.map((r) => r.x + r.width));
    let maxY = Math.max(...group.map((r) => r.y + r.height));

    grouped.push({
      x: minX,
      y: minY,
      width: maxX - minX,
      height: maxY - minY,
    });
  }

  return grouped;
}

function clearPageHighlights() {
  const highlights = document.querySelectorAll(".pp-page-highlight");
  highlights.forEach((highlight) => highlight.remove());
}

function showComparisonResults(result) {
  const similarityElement = document.getElementById("pp-similarity-value");
  const diffCountElement = document.getElementById("pp-diff-count");

  if (similarityElement) {
    similarityElement.textContent = `${Math.round(result.similarity)}%`;
  }

  if (diffCountElement) {
    diffCountElement.textContent = `${result.differences} pixels`;
  }
}

function clearComparison() {
  if (comparisonOverlay) {
    comparisonOverlay.remove();
    comparisonOverlay = null;
  }
  clearPageHighlights();
  isComparing = false;
}