import { app } from "/scripts/app.js";
import { applyAdaptiveCanvasOnly, isVueNodes } from "../shared/nodes2.mjs";

const NODE_NAME = "DumasImageCompare";
const BRAND = "#e66a2c";
const BG = "#1c1d1f";
const PANEL = "#2a2c2e";
const BORDER = "#444";
const TEXT = "#d8d8d8";
const MUTED = "#9a9a9a";
const TITLE = "#f3f3f3";

const MODE_LABELS = ["Show 1", "Show 2", "Left Right", "Up Down", "Overlay", "Difference"];
const INIT_W = 420;
const INIT_H = 474;
const MIN_W = 360;
const MIN_H = 250;
const BUTTON_GAP = 4;
const BUTTON_H = 22;
const BUTTON_TOP = 10;
const INFO_TOP = 38;
const IMAGE_TOP = 64;
const OUTER_PAD = 12;
const TOP_TRIM = 8;

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

function loadCompareImage(node, meta, key) {
  const image = new Image();
  image.crossOrigin = "anonymous";
  image.onload = () => {
    node[key] = image;
    repaintNode(node);
  };
  image.src = `/view?filename=${encodeURIComponent(meta.filename)}&type=${encodeURIComponent(meta.type)}&subfolder=${encodeURIComponent(meta.subfolder || "")}&t=${Date.now()}`;
}

function repaintNode(node) {
  node.setDirtyCanvas?.(true, true);
  node._cmpDomRender?.();
}

function getButtons(node, width) {
  const availableWidth = width - OUTER_PAD * 2 - BUTTON_GAP * (MODE_LABELS.length - 1);
  const buttonWidth = Math.max(44, Math.floor(availableWidth / MODE_LABELS.length));
  return MODE_LABELS.map((label, index) => ({
    label,
    index,
    x: OUTER_PAD + index * (buttonWidth + BUTTON_GAP),
    y: BUTTON_TOP,
    w: buttonWidth,
    h: BUTTON_H,
    active: node._cmpMode === index,
  }));
}

function getInfoRect(width) {
  return {
    x: OUTER_PAD,
    y: INFO_TOP,
    w: width - OUTER_PAD * 2,
    h: BUTTON_H,
  };
}

function getSliderRect(width) {
  const info = getInfoRect(width);
  const trackPad = 88;
  return {
    x: info.x + trackPad,
    y: info.y + 8,
    w: Math.max(40, info.w - trackPad - 8),
    h: 6,
  };
}

function getImageRect(width, height) {
  return {
    x: OUTER_PAD,
    y: IMAGE_TOP,
    w: Math.max(40, width - OUTER_PAD * 2),
    h: Math.max(80, height - IMAGE_TOP - OUTER_PAD),
  };
}

function pointInRect(x, y, rect) {
  return x >= rect.x && x <= rect.x + rect.w && y >= rect.y && y <= rect.y + rect.h;
}

function getAvailableImages(node) {
  const entries = [];
  if (node._cmpImg1) entries.push({ slot: 1, image: node._cmpImg1 });
  if (node._cmpImg2) entries.push({ slot: 2, image: node._cmpImg2 });
  return entries;
}

function getPrimaryImage(node) {
  return node._cmpImg1 || node._cmpImg2 || null;
}

function getSecondaryImage(node) {
  return node._cmpImg2 || node._cmpImg1 || null;
}

function fitImage(rect, image) {
  if (!image) return null;
  const scale = Math.min(rect.w / image.naturalWidth, rect.h / image.naturalHeight);
  const drawWidth = image.naturalWidth * scale;
  const drawHeight = image.naturalHeight * scale;
  return {
    x: rect.x + (rect.w - drawWidth) / 2,
    y: rect.y + (rect.h - drawHeight) / 2,
    w: drawWidth,
    h: drawHeight,
  };
}

function drawButton(ctx, button, hovered) {
  ctx.save();
  ctx.fillStyle = button.active ? BRAND : PANEL;
  ctx.strokeStyle = button.active ? BRAND : hovered ? BRAND : BORDER;
  ctx.lineWidth = 1;
  ctx.beginPath();
  if (ctx.roundRect) ctx.roundRect(button.x, button.y, button.w, button.h, 4);
  else ctx.rect(button.x, button.y, button.w, button.h);
  ctx.fill();
  ctx.stroke();
  ctx.fillStyle = button.active ? "#ffffff" : hovered ? "#ebebeb" : MUTED;
  ctx.font = "10px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(button.label, button.x + button.w / 2, button.y + button.h / 2);
  ctx.restore();
}

function drawInfoBar(ctx, node, width) {
  const info = getInfoRect(width);
  ctx.save();
  ctx.fillStyle = PANEL;
  ctx.strokeStyle = BORDER;
  ctx.lineWidth = 1;
  ctx.beginPath();
  if (ctx.roundRect) ctx.roundRect(info.x, info.y, info.w, info.h, 4);
  else ctx.rect(info.x, info.y, info.w, info.h);
  ctx.fill();
  ctx.stroke();

  const images = getAvailableImages(node);
  if (!images.length) {
    ctx.fillStyle = MUTED;
    ctx.font = "11px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("Connect images and run to compare", info.x + info.w / 2, info.y + info.h / 2);
    ctx.restore();
    return;
  }

  if (node._cmpMode === 4) {
    const slider = getSliderRect(width);
    ctx.fillStyle = TEXT;
    ctx.font = "11px sans-serif";
    ctx.textAlign = "left";
    ctx.textBaseline = "middle";
    ctx.fillText(`Opacity ${Math.round(node._cmpOpacity * 100)}%`, info.x + 10, info.y + info.h / 2);

    ctx.fillStyle = "#161719";
    ctx.beginPath();
    if (ctx.roundRect) ctx.roundRect(slider.x, slider.y, slider.w, slider.h, 3);
    else ctx.rect(slider.x, slider.y, slider.w, slider.h);
    ctx.fill();

    ctx.fillStyle = BRAND;
    ctx.beginPath();
    if (ctx.roundRect) ctx.roundRect(slider.x, slider.y, slider.w * node._cmpOpacity, slider.h, 3);
    else ctx.rect(slider.x, slider.y, slider.w * node._cmpOpacity, slider.h);
    ctx.fill();

    const knobX = slider.x + slider.w * node._cmpOpacity;
    ctx.fillStyle = "#ffffff";
    ctx.beginPath();
    ctx.arc(knobX, slider.y + slider.h / 2, 7, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
    return;
  }

  const parts = images.map(({ slot, image }) => `${slot}: ${image.naturalWidth}x${image.naturalHeight}`);
  ctx.fillStyle = TEXT;
  ctx.font = "11px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(parts.join("   "), info.x + info.w / 2, info.y + info.h / 2);
  ctx.restore();
}

function drawEmptyState(ctx, rect) {
  ctx.save();
  ctx.fillStyle = BG;
  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
  ctx.strokeStyle = BORDER;
  ctx.lineWidth = 1;
  ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
  ctx.fillStyle = MUTED;
  ctx.font = "13px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText("No images loaded yet", rect.x + rect.w / 2, rect.y + rect.h / 2 - 10);
  ctx.font = "11px sans-serif";
  ctx.fillText("Run the workflow after connecting one or two IMAGE inputs", rect.x + rect.w / 2, rect.y + rect.h / 2 + 12);
  ctx.restore();
}

function drawSingleImage(ctx, rect, image) {
  const fitted = fitImage(rect, image);
  if (!fitted) return;
  ctx.drawImage(image, fitted.x, fitted.y, fitted.w, fitted.h);
}

function drawCompare(ctx, node, rect) {
  const image1 = getPrimaryImage(node);
  const image2 = getSecondaryImage(node);

  if (!image1 && !image2) {
    drawEmptyState(ctx, rect);
    return;
  }

  ctx.save();
  ctx.fillStyle = BG;
  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
  ctx.strokeStyle = BORDER;
  ctx.lineWidth = 1;
  ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);

  if (!image1 || !image2 || node._cmpMode === 0 || node._cmpMode === 1) {
    const chosenImage = node._cmpMode === 0 ? node._cmpImg1 || node._cmpImg2 : node._cmpImg2 || node._cmpImg1;
    drawSingleImage(ctx, rect, chosenImage || image1 || image2);
    ctx.restore();
    return;
  }

  const first = fitImage(rect, image1);
  const second = fitImage(rect, image2);
  if (!first || !second) {
    ctx.restore();
    return;
  }

  if (node._cmpMode === 2) {
    ctx.save();
    ctx.beginPath();
    ctx.rect(rect.x, rect.y, rect.w * node._cmpSplitX, rect.h);
    ctx.clip();
    ctx.drawImage(image1, first.x, first.y, first.w, first.h);
    ctx.restore();

    ctx.save();
    ctx.beginPath();
    ctx.rect(rect.x + rect.w * node._cmpSplitX, rect.y, rect.w * (1 - node._cmpSplitX), rect.h);
    ctx.clip();
    ctx.drawImage(image2, second.x, second.y, second.w, second.h);
    ctx.restore();

    const guideX = rect.x + rect.w * node._cmpSplitX;
    ctx.strokeStyle = "rgba(255,255,255,0.5)";
    ctx.beginPath();
    ctx.moveTo(guideX, rect.y);
    ctx.lineTo(guideX, rect.y + rect.h);
    ctx.stroke();
    ctx.restore();
    return;
  }

  if (node._cmpMode === 3) {
    ctx.save();
    ctx.beginPath();
    ctx.rect(rect.x, rect.y, rect.w, rect.h * node._cmpSplitY);
    ctx.clip();
    ctx.drawImage(image1, first.x, first.y, first.w, first.h);
    ctx.restore();

    ctx.save();
    ctx.beginPath();
    ctx.rect(rect.x, rect.y + rect.h * node._cmpSplitY, rect.w, rect.h * (1 - node._cmpSplitY));
    ctx.clip();
    ctx.drawImage(image2, second.x, second.y, second.w, second.h);
    ctx.restore();

    const guideY = rect.y + rect.h * node._cmpSplitY;
    ctx.strokeStyle = "rgba(255,255,255,0.5)";
    ctx.beginPath();
    ctx.moveTo(rect.x, guideY);
    ctx.lineTo(rect.x + rect.w, guideY);
    ctx.stroke();
    ctx.restore();
    return;
  }

  if (node._cmpMode === 4) {
    ctx.drawImage(image1, first.x, first.y, first.w, first.h);
    ctx.globalAlpha = node._cmpOpacity;
    ctx.drawImage(image2, second.x, second.y, second.w, second.h);
    ctx.globalAlpha = 1;
    ctx.restore();
    return;
  }

  ctx.drawImage(image1, first.x, first.y, first.w, first.h);
  ctx.globalCompositeOperation = "difference";
  ctx.drawImage(image2, second.x, second.y, second.w, second.h);
  ctx.globalCompositeOperation = "source-over";
  ctx.restore();
}

function paintNode(ctx, node, width, height, mouse) {
  const buttons = getButtons(node, width);
  for (const button of buttons) {
    drawButton(ctx, button, mouse ? pointInRect(mouse.x, mouse.y, button) : false);
  }
  drawInfoBar(ctx, node, width);
  drawCompare(ctx, node, getImageRect(width, height));
  if (node._cmpMode === 2 || node._cmpMode === 3) {
    ctx.save();
    ctx.fillStyle = MUTED;
    ctx.font = "11px sans-serif";
    ctx.textAlign = "right";
    ctx.textBaseline = "bottom";
    ctx.fillText("Move over the image to slide", width - OUTER_PAD, height - 4);
    ctx.restore();
  }
}

function updateImageInteraction(node, x, y, width, height) {
  const rect = getImageRect(width, height);
  if (!pointInRect(x, y, rect)) return false;
  if (node._cmpMode === 2) {
    node._cmpSplitX = clamp((x - rect.x) / rect.w, 0, 1);
    return true;
  }
  if (node._cmpMode === 3) {
    node._cmpSplitY = clamp((y - rect.y) / rect.h, 0, 1);
    return true;
  }
  return false;
}

function updateOpacityFromX(node, x, width) {
  const slider = getSliderRect(width);
  node._cmpOpacity = clamp((x - slider.x) / slider.w, 0, 1);
}

function pointerDown(node, x, y, width, height) {
  const buttons = getButtons(node, width);
  for (const button of buttons) {
    if (pointInRect(x, y, button)) {
      node._cmpMode = button.index;
      repaintNode(node);
      return true;
    }
  }

  if (node._cmpMode === 4 && pointInRect(x, y, {
    x: getSliderRect(width).x - 10,
    y: getSliderRect(width).y - 10,
    w: getSliderRect(width).w + 20,
    h: getSliderRect(width).h + 20,
  })) {
    node._cmpDraggingOpacity = true;
    updateOpacityFromX(node, x, width);
    repaintNode(node);
    return true;
  }

  if (updateImageInteraction(node, x, y, width, height)) {
    repaintNode(node);
    return true;
  }

  return false;
}

function pointerMove(node, x, y, width, height) {
  let changed = false;
  if (node._cmpDraggingOpacity && node._cmpMode === 4) {
    updateOpacityFromX(node, x, width);
    changed = true;
  } else if (updateImageInteraction(node, x, y, width, height)) {
    changed = true;
  }
  node._cmpMouse = { x, y };
  if (changed) repaintNode(node);
}

function pointerUp(node) {
  node._cmpDraggingOpacity = false;
}

function createDomWidget(node) {
  const root = document.createElement("div");
  root.style.cssText = "position:relative;width:100%;flex:1 1 0;min-height:0;box-sizing:border-box;cursor:default;";
  const canvas = document.createElement("canvas");
  canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block;";
  root.appendChild(canvas);

  const widget = node.addDOMWidget("dumas_compare", "dumas_compare", root, {
    serialize: false,
    hideOnZoom: false,
    getMinHeight: () => MIN_H,
  });
  widget.computeLayoutSize = () => ({ minHeight: MIN_H, minWidth: 1 });
  applyAdaptiveCanvasOnly(widget);

  const render = () => {
    const cssWidth = root.clientWidth;
    const cssHeight = root.clientHeight;
    if (cssWidth <= 0 || cssHeight <= 0) return;

    const scale = (window.devicePixelRatio || 1) * Math.max(1, app.canvas?.ds?.scale || 1);
    const width = Math.round(cssWidth * scale);
    const height = Math.round(cssHeight * scale);
    if (canvas.width !== width) canvas.width = width;
    if (canvas.height !== height) canvas.height = height;

    const ctx = canvas.getContext("2d");
    ctx.setTransform(scale, 0, 0, scale, 0, 0);
    ctx.clearRect(0, 0, cssWidth, cssHeight);
    ctx.translate(0, -TOP_TRIM);
    paintNode(ctx, node, cssWidth, cssHeight + TOP_TRIM, node._cmpMouse || null);
  };

  node._cmpDomRender = render;

  const localPos = (event) => {
    const rect = root.getBoundingClientRect();
    const scaleX = rect.width ? root.clientWidth / rect.width : 1;
    const scaleY = rect.height ? root.clientHeight / rect.height : 1;
    return [
      (event.clientX - rect.left) * scaleX,
      (event.clientY - rect.top) * scaleY + TOP_TRIM,
    ];
  };

  root.addEventListener("pointerdown", (event) => {
    const [x, y] = localPos(event);
    if (pointerDown(node, x, y, root.clientWidth, root.clientHeight + TOP_TRIM)) {
      event.stopPropagation();
      if (node._cmpDraggingOpacity) {
        try {
          root.setPointerCapture(event.pointerId);
        } catch (_error) {
          // Ignore capture failures and keep the node functional.
        }
      }
      render();
    }
  });

  root.addEventListener("pointermove", (event) => {
    const [x, y] = localPos(event);
    pointerMove(node, x, y, root.clientWidth, root.clientHeight + TOP_TRIM);
    render();
  });

  root.addEventListener("pointerup", (event) => {
    pointerUp(node);
    try {
      root.releasePointerCapture(event.pointerId);
    } catch (_error) {
      // Ignore release failures.
    }
    render();
  });

  root.addEventListener("pointerleave", () => {
    pointerUp(node);
    node._cmpMouse = null;
    render();
  });

  const resizeObserver = new ResizeObserver(() => render());
  resizeObserver.observe(root);
  node._cmpDomResizeObserver = resizeObserver;
  requestAnimationFrame(render);
}

app.registerExtension({
  name: "Dumas.Compare",
  async beforeRegisterNodeDef(nodeType, nodeData) {
    if (nodeData.name !== NODE_NAME) return;

    const originalNodeCreated = nodeType.prototype.onNodeCreated;
    nodeType.prototype.onNodeCreated = function () {
      originalNodeCreated?.apply(this, arguments);
      this._cmpMode = 1;
      this._cmpOpacity = 0.5;
      this._cmpSplitX = 0.5;
      this._cmpSplitY = 0.5;
      this._cmpImg1 = null;
      this._cmpImg2 = null;
      this._cmpDraggingOpacity = false;
      this._cmpMouse = null;
      this.hideOutputImages = true;
      this.size[0] = Math.max(this.size[0] || 0, INIT_W);
      this.size[1] = Math.max(this.size[1] || 0, INIT_H);
      if (isVueNodes()) createDomWidget(this);
    };

    nodeType.prototype.onExecuted = function (output) {
      this.imgs = null;
      const images = Array.isArray(output?.images) ? output.images : [];
      let slot1 = null;
      let slot2 = null;
      for (const image of images) {
        if (image?.slot === 1) slot1 = image;
        if (image?.slot === 2) slot2 = image;
      }
      if (!slot1 && !slot2 && images.length) {
        slot1 = images[0] || null;
        slot2 = images[1] || null;
      }
      if (slot1) loadCompareImage(this, slot1, "_cmpImg1");
      else this._cmpImg1 = null;
      if (slot2) loadCompareImage(this, slot2, "_cmpImg2");
      else this._cmpImg2 = null;
      repaintNode(this);
    };

    nodeType.prototype.onDrawBackground = function () {
      if (this.flags?.collapsed) return;
      this.imgs = null;
    };

    const originalDrawForeground = nodeType.prototype.onDrawForeground;
    nodeType.prototype.onDrawForeground = function (ctx) {
      originalDrawForeground?.call(this, ctx);
      if (this.flags?.collapsed || isVueNodes()) return;
      this.size[0] = Math.max(this.size[0], MIN_W);
      this.size[1] = Math.max(this.size[1], MIN_H);
      const graphMouse = app.canvas?.graph_mouse;
      const mouse = graphMouse ? { x: graphMouse[0] - this.pos[0], y: graphMouse[1] - this.pos[1] } : null;
      paintNode(ctx, this, this.size[0], this.size[1], mouse);
    };

    const originalMouseDown = nodeType.prototype.onMouseDown;
    nodeType.prototype.onMouseDown = function (event, pos) {
      if (!isVueNodes() && pointerDown(this, pos[0], pos[1], this.size[0], this.size[1])) {
        repaintNode(this);
        return true;
      }
      return originalMouseDown?.call(this, event, pos);
    };

    const originalMouseMove = nodeType.prototype.onMouseMove;
    nodeType.prototype.onMouseMove = function (event, pos) {
      if (!isVueNodes()) pointerMove(this, pos[0], pos[1], this.size[0], this.size[1]);
      return originalMouseMove?.call(this, event, pos);
    };

    const originalMouseUp = nodeType.prototype.onMouseUp;
    nodeType.prototype.onMouseUp = function (event, pos) {
      if (!isVueNodes()) {
        pointerUp(this);
        repaintNode(this);
      }
      return originalMouseUp?.call(this, event, pos);
    };

    const originalMouseLeave = nodeType.prototype.onMouseLeave;
    nodeType.prototype.onMouseLeave = function (event) {
      if (!isVueNodes()) {
        pointerUp(this);
        this._cmpMouse = null;
        repaintNode(this);
      }
      return originalMouseLeave?.call(this, event);
    };

    const originalRemoved = nodeType.prototype.onRemoved;
    nodeType.prototype.onRemoved = function () {
      try {
        this._cmpDomResizeObserver?.disconnect();
      } catch (_error) {
        // Ignore cleanup failures.
      }
      this._cmpDomResizeObserver = null;
      this._cmpDomRender = null;
      return originalRemoved?.apply(this, arguments);
    };
  },
});