content.js

// Google Docs Image Expander — content script (ISOLATED world)
// Receives captured image data from inject.js and provides the UI
(function () {
  "use strict";

  const EXPAND_SVG = `<svg viewBox="0 0 24 24">
    <polyline points="15 3 21 3 21 9"/>
    <polyline points="9 21 3 21 3 15"/>
    <line x1="21" y1="3" x2="14" y2="10"/>
    <line x1="3" y1="21" x2="10" y2="14"/>
  </svg>`;

  // --- Captured image URLs from the MAIN world inject.js ---
  const capturedImages = []; // {src, canvasId, x, y, w, h}

  window.addEventListener("message", (e) => {
    if (e.data && e.data.type === "gdie-image-captured") {
      const { src, canvasId, x, y, w, h } = e.data;
      const exists = capturedImages.some(
        (img) =>
          img.src === src &&
          img.canvasId === canvasId &&
          Math.abs(img.x - x) < 5 &&
          Math.abs(img.y - y) < 5
      );
      if (!exists) {
        capturedImages.push({ src, canvasId, x, y, w, h });
      }
    }
  });

  // --- Floating expand button ---
  const expandBtn = document.createElement("button");
  expandBtn.className = "gdie-expand-btn";
  expandBtn.title = "Expand image";
  expandBtn.innerHTML = EXPAND_SVG;
  document.body.appendChild(expandBtn);

  let currentSrc = null;

  function showButton(left, top, src) {
    expandBtn.style.setProperty("top", top + "px", "important");
    expandBtn.style.setProperty("left", left + "px", "important");
    expandBtn.style.setProperty("opacity", "1", "important");
    currentSrc = src;
  }

  function hideButton() {
    expandBtn.style.setProperty("opacity", "0", "important");
    currentSrc = null;
  }

  expandBtn.addEventListener("click", (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (currentSrc) openViewer(currentSrc);
  });

  // --- Detect image selection via Google Docs selection box ---

  function findMatchingSource(selectionRect) {
    let bestSrc = null;
    let bestOverlap = 0;

    for (const img of capturedImages) {
      const canvas = document.querySelector(`[data-gdie-id="${img.canvasId}"]`);
      if (!canvas) continue;

      const cr = canvas.getBoundingClientRect();
      const sx = cr.width / canvas.width;
      const sy = cr.height / canvas.height;

      const imgLeft = cr.left + img.x * sx;
      const imgTop = cr.top + img.y * sy;
      const imgRight = imgLeft + img.w * sx;
      const imgBottom = imgTop + img.h * sy;

      const oLeft = Math.max(selectionRect.left, imgLeft);
      const oTop = Math.max(selectionRect.top, imgTop);
      const oRight = Math.min(selectionRect.right, imgRight);
      const oBottom = Math.min(selectionRect.bottom, imgBottom);

      if (oLeft < oRight && oTop < oBottom) {
        const overlap = (oRight - oLeft) * (oBottom - oTop);
        if (overlap > bestOverlap) {
          bestOverlap = overlap;
          bestSrc = img.src;
        }
      }
    }

    if (!bestSrc && capturedImages.length > 0) {
      bestSrc = capturedImages[0].src;
    }

    return bestSrc;
  }

  function checkSelection() {
    const selectors = [
      ".docs-squarehandleselectionbox-border",
      "[class*='selectionbox-border']",
    ];

    for (const sel of selectors) {
      const els = document.querySelectorAll(sel);
      for (const el of els) {
        const rect = el.getBoundingClientRect();
        if (rect.width > 30 && rect.height > 30) {
          const src = findMatchingSource(rect);
          if (src) {
            showButton(rect.right - 36, rect.top + 4, src);
            return;
          }
        }
      }
    }

    hideButton();
  }

  // Check after clicks (capture phase)
  document.addEventListener("mousedown", () => {
    setTimeout(checkSelection, 100);
    setTimeout(checkSelection, 300);
  }, true);

  // Check after keyboard events (Escape deselects, etc.)
  document.addEventListener("keydown", (e) => {
    // Ctrl+Shift+E: open viewer for first captured image (fallback shortcut)
    if (e.ctrlKey && e.shiftKey && e.key === "E") {
      e.preventDefault();
      if (capturedImages.length > 0) openViewer(capturedImages[0].src);
      return;
    }
    setTimeout(checkSelection, 150);
  }, true);

  // --- High-res URL helper ---
  function getHighResUrl(src) {
    if (src.startsWith("blob:")) return src;
    if (/googleusercontent\.com/.test(src)) {
      return src.replace(/=[whs]\d+(-h\d+)?([^&]*)$/, "=s0");
    }
    return src;
  }

  // --- Lightbox viewer with pan & zoom ---

  function openViewer(src) {
    const highResSrc = getHighResUrl(src);

    let scale = 1;
    let tx = 0;
    let ty = 0;
    let isPanning = false;
    let startX, startY, startTx, startTy;
    let imgW, imgH;

    const overlay = document.createElement("div");
    overlay.className = "gdie-overlay";

    const img = document.createElement("img");
    img.className = "gdie-viewer-img";
    img.src = highResSrc;
    img.onerror = () => {
      if (img.src !== src) img.src = src;
    };
    overlay.appendChild(img);

    const closeBtn = document.createElement("button");
    closeBtn.className = "gdie-close-btn";
    closeBtn.innerHTML = "&#x2715;";
    closeBtn.title = "Close (Esc)";
    overlay.appendChild(closeBtn);

    const hint = document.createElement("div");
    hint.className = "gdie-zoom-hint";
    hint.textContent = "Scroll to zoom \u00b7 Drag to pan \u00b7 Double-click to reset";
    overlay.appendChild(hint);

    document.body.appendChild(overlay);
    hideButton();

    function applyTransform() {
      img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
    }

    function fitToScreen() {
      const vw = window.innerWidth * 0.9;
      const vh = window.innerHeight * 0.9;
      scale = Math.min(vw / imgW, vh / imgH, 1);
      tx = (window.innerWidth - imgW * scale) / 2;
      ty = (window.innerHeight - imgH * scale) / 2;
      img.style.maxWidth = "none";
      img.style.maxHeight = "none";
      img.style.width = imgW + "px";
      img.style.height = imgH + "px";
      applyTransform();
    }

    function initImage() {
      imgW = img.naturalWidth;
      imgH = img.naturalHeight;
      if (imgW && imgH) fitToScreen();
    }

    img.addEventListener("load", initImage);
    if (img.complete && img.naturalWidth) initImage();

    // Zoom with mouse wheel (center-relative, gentle sensitivity)
    overlay.addEventListener(
      "wheel",
      (e) => {
        e.preventDefault();
        const zoomFactor = e.deltaY < 0 ? 1.06 : 1 / 1.06;
        const newScale = Math.min(Math.max(scale * zoomFactor, 0.1), 20);
        const cx = tx + (imgW * scale) / 2;
        const cy = ty + (imgH * scale) / 2;
        tx = cx - (imgW * newScale) / 2;
        ty = cy - (imgH * newScale) / 2;
        scale = newScale;
        applyTransform();
      },
      { passive: false }
    );

    // Pan with mouse drag
    overlay.addEventListener("mousedown", (e) => {
      if (e.target === closeBtn) return;
      isPanning = true;
      startX = e.clientX;
      startY = e.clientY;
      startTx = tx;
      startTy = ty;
      overlay.classList.add("gdie-panning");
      e.preventDefault();
    });

    function onMouseMove(e) {
      if (!isPanning) return;
      tx = startTx + (e.clientX - startX);
      ty = startTy + (e.clientY - startY);
      applyTransform();
    }

    function onMouseUp() {
      isPanning = false;
      overlay.classList.remove("gdie-panning");
    }

    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);

    // Double-click to reset
    overlay.addEventListener("dblclick", (e) => {
      if (e.target === closeBtn) return;
      fitToScreen();
    });

    // Close
    function close() {
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onMouseUp);
      window.removeEventListener("keydown", onKeyDown);
      overlay.remove();
    }

    function onKeyDown(e) {
      if (e.key === "Escape") close();
    }

    closeBtn.addEventListener("click", close);
    overlay.addEventListener("click", (e) => {
      if (e.target === overlay) close();
    });
    window.addEventListener("keydown", onKeyDown);
  }
})();