crop.js

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const elements = {
  sourceTitle: document.getElementById("sourceTitle"),
  sendToAi: document.getElementById("sendToAi"),
  resetCrop: document.getElementById("resetCrop"),
  status: document.getElementById("status"),
  answer: document.getElementById("answer"),
  copyAnswer: document.getElementById("copyAnswer")
};

const image = new Image();
let screenshotUrl = "";
let scale = 1;
let selection = null;
let dragStart = null;

init();

async function init() {
  const session = await chrome.storage.session.get([
    "latestScreenshot",
    "latestSourceTitle",
    "latestSourceUrl"
  ]);

  if (!session.latestScreenshot) {
    setStatus("No screenshot found. Start again from the extension popup.", true);
    return;
  }

  screenshotUrl = session.latestScreenshot;
  elements.sourceTitle.textContent = session.latestSourceTitle || "Captured page";

  image.onload = () => {
    fitCanvas();
    draw();
    setStatus("Drag on the screenshot to crop. No crop means full screenshot.");
  };
  image.onerror = () => setStatus("Could not load screenshot.", true);
  image.src = screenshotUrl;

  window.addEventListener("resize", () => {
    fitCanvas();
    draw();
  });

  canvas.addEventListener("mousedown", startCrop);
  canvas.addEventListener("mousemove", updateCrop);
  canvas.addEventListener("mouseup", endCrop);
  canvas.addEventListener("mouseleave", endCrop);
  elements.resetCrop.addEventListener("click", resetCrop);
  elements.sendToAi.addEventListener("click", sendToAi);
  elements.copyAnswer.addEventListener("click", copyAnswer);
}

function fitCanvas() {
  const maxWidth = Math.max(320, window.innerWidth - 46);
  const maxHeight = Math.max(260, window.innerHeight - 332);

  scale = Math.min(maxWidth / image.naturalWidth, maxHeight / image.naturalHeight, 1);
  canvas.width = Math.round(image.naturalWidth * scale);
  canvas.height = Math.round(image.naturalHeight * scale);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  if (!selection || selection.w < 2 || selection.h < 2) {
    return;
  }

  ctx.save();
  ctx.fillStyle = "rgba(15, 23, 42, 0.48)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.clearRect(selection.x, selection.y, selection.w, selection.h);
  ctx.drawImage(
    image,
    selection.x / scale,
    selection.y / scale,
    selection.w / scale,
    selection.h / scale,
    selection.x,
    selection.y,
    selection.w,
    selection.h
  );
  ctx.strokeStyle = "#1d4ed8";
  ctx.lineWidth = 2;
  ctx.strokeRect(selection.x + 1, selection.y + 1, selection.w - 2, selection.h - 2);
  ctx.restore();
}

function startCrop(event) {
  const point = canvasPoint(event);
  dragStart = point;
  selection = { x: point.x, y: point.y, w: 0, h: 0 };
  draw();
}

function updateCrop(event) {
  if (!dragStart) {
    return;
  }

  const point = canvasPoint(event);
  const x = clamp(Math.min(dragStart.x, point.x), 0, canvas.width);
  const y = clamp(Math.min(dragStart.y, point.y), 0, canvas.height);
  const endX = clamp(Math.max(dragStart.x, point.x), 0, canvas.width);
  const endY = clamp(Math.max(dragStart.y, point.y), 0, canvas.height);

  selection = {
    x,
    y,
    w: endX - x,
    h: endY - y
  };
  draw();
}

function endCrop() {
  dragStart = null;
}

function resetCrop() {
  selection = null;
  draw();
  setStatus("Crop cleared. Full screenshot will be sent.");
}

async function sendToAi() {
  elements.sendToAi.disabled = true;
  setStatus("Preparing cropped image...");
  elements.answer.textContent = "Loading...";

  try {
    const settings = await chrome.storage.local.get([
      "geminiApiKey",
      "geminiModel",
      "answerPrompt"
    ]);

    if (!settings.geminiApiKey) {
      throw new Error("Set your Gemini API key in the extension popup first.");
    }

    const imageDataUrl = buildCroppedImage();
    setStatus("Sending crop to Gemini...");

    const response = await chrome.runtime.sendMessage({
      type: "analyze-image",
      payload: {
        imageDataUrl,
        apiKey: settings.geminiApiKey,
        model: settings.geminiModel,
        prompt: settings.answerPrompt
      }
    });

    if (!response.ok) {
      throw new Error(response.error);
    }

    elements.answer.textContent = response.data.answer;
    setStatus("Done.");
  } catch (error) {
    elements.answer.textContent = "Belum ada output.";
    setStatus(error.message || String(error), true);
  } finally {
    elements.sendToAi.disabled = false;
  }
}

function buildCroppedImage() {
  const crop = normalizedCrop();
  const output = document.createElement("canvas");
  output.width = crop.w;
  output.height = crop.h;

  const outputCtx = output.getContext("2d");
  outputCtx.drawImage(
    image,
    crop.x,
    crop.y,
    crop.w,
    crop.h,
    0,
    0,
    crop.w,
    crop.h
  );

  return output.toDataURL("image/png");
}

function normalizedCrop() {
  if (!selection || selection.w < 8 || selection.h < 8) {
    return {
      x: 0,
      y: 0,
      w: image.naturalWidth,
      h: image.naturalHeight
    };
  }

  return {
    x: Math.round(selection.x / scale),
    y: Math.round(selection.y / scale),
    w: Math.round(selection.w / scale),
    h: Math.round(selection.h / scale)
  };
}

async function copyAnswer() {
  const text = elements.answer.textContent.trim();
  if (!text || text === "Belum ada output." || text === "Loading...") {
    setStatus("No output to copy.", true);
    return;
  }

  await navigator.clipboard.writeText(text);
  setStatus("Output copied.");
}

function canvasPoint(event) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: clamp(event.clientX - rect.left, 0, canvas.width),
    y: clamp(event.clientY - rect.top, 0, canvas.height)
  };
}

function clamp(value, min, max) {
  return Math.max(min, Math.min(max, value));
}

function setStatus(message, isError = false) {
  elements.status.textContent = message;
  elements.status.classList.toggle("error", isError);
}