// ComfyUI extension registration and node lifecycle wiring.
import { app } from "../../../../scripts/app.js";
import {
  CANVAS_SIZE_PROPERTY,
  CONTROL_TAB_PROPERTY,
  LAYER_LOCK_PROPERTY,
  OUTPUT_SETTINGS_PROPERTY,
  UI_INSTANCE_PROPERTY,
  UPLOAD_MODE_PROPERTY,
} from "./constants.js";
import {
  applyBackendTimelineSettings,
  installBackendTimelineSettingsListener,
  isTargetNode,
  normalizeTimelineSettings,
  payloadsMatchNode,
  setTimelineStatus,
  uiPayloadValue,
} from "./runtime.js";
import {
  activeLayer,
  controlsTab,
  deleteActiveLayer,
  ensureSelectedKeyframe,
  layerEditingLocked,
  normalizeKeyframes,
  normalizePan,
  preloadImage,
  preserveExecutedFilterFields,
  refreshTimeline,
  rejectLayerEditIfLocked,
  selectedKeyframe,
  selectedKeyframeIndex,
  serializableTimelinePayload,
  setActiveLayerId,
  setControlsTab,
  setSelectedKeyframe,
  syncTimelineWidget,
  timelineReloadSource,
  toggleLayerEditingLock,
  toggleUploadMode,
  updateActiveLayer,
  uploadMode,
} from "./model.js";
import {
  fixPromptWidgetHeights,
  migrateDisableRelayWidgetOrder,
  syncChainInheritedWidgets,
  syncKeyframePromptEditor,
  syncTextLayerEditor,
} from "./editors.js";
import {
  configuredCanvasSize,
  rememberTimelineCanvasSize,
  scheduleTimelineCanvasSizeRestore,
  setupNode,
} from "./node_setup.js";
import {
  addKeyframeAt,
  bounds,
  deleteKeyframeAtIndex,
  duplicateKeyframeAtIndex,
  findKeyframeAt,
  previewImageBox,
  slotConflict,
  slotToSeconds,
  updateTimelineSliderDrag,
  widgetOutputSettings,
  xToSlot,
} from "./timeline_ops.js";
import {
  controlTabAt,
  layerChipAt,
  previewPlacement,
  previewSourceForLayer,
  refreshButtonBounds,
} from "./rendering.js";
import {
  addTextLayer,
  deleteLayerButtonBounds,
  imageButtonBounds,
  installKeyboardShortcuts,
  installPointerRelease,
  installWheelCapture,
  keyframeStrengthSliderAt,
  layerFilterSliderAt,
  lockLayerButtonBounds,
  modeButtonBounds,
  releaseDrag,
  textLayerButtonBounds,
  uploadModeButtonBounds,
  zoomPreviewAt,
} from "./interaction.js";
import { installClipboardPasteCapture, installFileDropCapture } from "./media.js";
export function selectedKeyframeIndexForMenu(node) {
  setupNode(node);
  return selectedKeyframeIndex(node, normalizeKeyframes(node.properties.etk_ltxv_timeline_keyframes, node));
}

export function timelineNodeMenuItems(node) {
  if (!isTargetNode(node)) return [];
  return [
    null,
    {
      content: "ETK Timeline: Refresh previews",
      callback: () => {
        setupNode(node);
        refreshTimeline(node);
      },
    },
    {
      content: `ETK Timeline: Upload mode: ${uploadMode(node) === "layer" ? "add layer" : "replace"}`,
      callback: () => {
        setupNode(node);
        toggleUploadMode(node);
      },
    },
    {
      content: "ETK Timeline: Upload image to selected keyframe...",
      callback: () => {
        setupNode(node);
        const keyframe = ensureSelectedKeyframe(node);
        if (!keyframe) return;
        if (node.etkTimelineFileInput) node.etkTimelineFileInput.click();
      },
    },
    {
      content: "ETK Timeline: Duplicate selected keyframe",
      callback: () => {
        const index = selectedKeyframeIndexForMenu(node);
        if (index < 0 || !duplicateKeyframeAtIndex(node, index)) {
          setTimelineStatus(node, "Select a keyframe to duplicate.", "error");
        }
      },
    },
    {
      content: "ETK Timeline: Delete selected keyframe",
      callback: () => {
        const index = selectedKeyframeIndexForMenu(node);
        if (index < 0 || !deleteKeyframeAtIndex(node, index)) {
          setTimelineStatus(node, "Select a keyframe to delete.", "error");
        }
      },
    },
  ];
}

app.registerExtension({
  name: "ETK.LTXVTimelineImageEditor",
  getNodeMenuItems(node) {
    return timelineNodeMenuItems(node);
  },
  beforeRegisterNodeDef(nodeType, nodeData) {
    if (!isTargetNode(nodeData.name)) return;
    if (nodeType.prototype.etkTimelinePatched) return;
    nodeType.prototype.etkTimelinePatched = true;
    installBackendTimelineSettingsListener();
    installWheelCapture();
    installPointerRelease();
    installKeyboardShortcuts();
    installFileDropCapture();
    installClipboardPasteCapture();

    const originalGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
    nodeType.prototype.getExtraMenuOptions = function (canvas, options) {
      const extra = originalGetExtraMenuOptions ? originalGetExtraMenuOptions.apply(this, arguments) : undefined;
      const timelineItems = timelineNodeMenuItems(this);
      if (Array.isArray(extra)) return extra.concat(timelineItems);
      if (Array.isArray(options)) options.push(...timelineItems);
      return extra;
    };

    const originalOnNodeCreated = nodeType.prototype.onNodeCreated;
    nodeType.prototype.onNodeCreated = function () {
      if (originalOnNodeCreated) originalOnNodeCreated.apply(this, arguments);
      setupNode(this);
      scheduleTimelineCanvasSizeRestore(this);
    };

    const originalOnConfigure = nodeType.prototype.onConfigure;
    nodeType.prototype.onConfigure = function (config) {
      if (originalOnConfigure) originalOnConfigure.apply(this, arguments);
      if (!this.properties) this.properties = {};
      const migratedWidgetOrder = migrateDisableRelayWidgetOrder(this);
      this.properties.etk_ltxv_timeline_keyframes = normalizeKeyframes(timelineReloadSource(this, migratedWidgetOrder), this);
      setupNode(this);
      scheduleTimelineCanvasSizeRestore(this, configuredCanvasSize(config));
      selectedKeyframeIndex(this, this.properties.etk_ltxv_timeline_keyframes);
    };

    const originalOnSerialize = nodeType.prototype.onSerialize;
    nodeType.prototype.onSerialize = function (serialized) {
      if (originalOnSerialize) originalOnSerialize.apply(this, arguments);
      if (!serialized) return;
      setupNode(this);
      const keyframes = normalizeKeyframes(this.properties.etk_ltxv_timeline_keyframes, this);
      this.properties.etk_ltxv_timeline_keyframes = keyframes;
      syncTimelineWidget(this);
      if (!serialized.properties) serialized.properties = {};
      serialized.properties.etk_ltxv_timeline_keyframes = serializableTimelinePayload(this, keyframes);
      serialized.properties.etk_ltxv_selected_keyframe = this.properties.etk_ltxv_selected_keyframe;
      serialized.properties.etk_ltxv_selected_keyframe_id = this.properties.etk_ltxv_selected_keyframe_id;
      serialized.properties[UPLOAD_MODE_PROPERTY] = uploadMode(this);
      serialized.properties[LAYER_LOCK_PROPERTY] = layerEditingLocked(this);
      serialized.properties[CONTROL_TAB_PROPERTY] = controlsTab(this);
      const outputSettings =
        normalizeTimelineSettings(this.etkTimelineBackendSettings || this.properties[OUTPUT_SETTINGS_PROPERTY]) ||
        widgetOutputSettings(this);
      if (outputSettings) {
        serialized.properties[OUTPUT_SETTINGS_PROPERTY] = outputSettings;
      }
      const canvasSize = rememberTimelineCanvasSize(this);
      if (canvasSize) {
        serialized.size = [...canvasSize];
        serialized.properties[CANVAS_SIZE_PROPERTY] = [...canvasSize];
      }
      delete serialized.properties[UI_INSTANCE_PROPERTY];
    };

    const originalOnExecuted = nodeType.prototype.onExecuted;
    nodeType.prototype.onExecuted = function (message) {
      if (originalOnExecuted) originalOnExecuted.apply(this, arguments);
      const payload = uiPayloadValue(message, "etk_ltxv_timeline_keyframes");
      const settingsPayload = uiPayloadValue(message, "etk_ltxv_timeline_settings");
      if (!payload && !settingsPayload) return;
      if (!payloadsMatchNode(this, [payload, settingsPayload])) return;
      setupNode(this);
      applyBackendTimelineSettings(this, settingsPayload);
      if (payload) {
        const keyframes = preserveExecutedFilterFields(this, payload);
        this.properties.etk_ltxv_timeline_keyframes = keyframes;
        const selectedIndex = selectedKeyframeIndex(this, keyframes);
        if (selectedIndex < 0 && keyframes.length) {
          setSelectedKeyframe(this, 0, keyframes);
        } else {
          syncKeyframePromptEditor(this, selectedIndex >= 0 ? keyframes[selectedIndex] : null);
          syncTextLayerEditor(this);
        }
        for (const keyframe of keyframes) preloadImage(this, keyframe);
      }
      syncTimelineWidget(this);
      this.setDirtyCanvas(true, true);
      if (this.graph && typeof this.graph.setDirtyCanvas === "function") {
        this.graph.setDirtyCanvas(true, true);
      }
    };

    const originalOnRemoved = nodeType.prototype.onRemoved;
    nodeType.prototype.onRemoved = function () {
      releaseDrag(this);
      if (this.etkTimelineFileInput) {
        this.etkTimelineFileInput.remove();
        this.etkTimelineFileInput = null;
      }
      if (originalOnRemoved) originalOnRemoved.apply(this, arguments);
    };

    const originalComputeSize = nodeType.prototype.computeSize;
    nodeType.prototype.computeSize = function () {
      fixPromptWidgetHeights(this);
      const size = originalComputeSize ? originalComputeSize.apply(this, arguments) : [360, 260];
      size[0] = Math.max(size[0], 460);
      return size;
    };

    const originalOnResize = nodeType.prototype.onResize;
    nodeType.prototype.onResize = function (size) {
      fixPromptWidgetHeights(this);
      syncChainInheritedWidgets(this);
      if (originalOnResize) originalOnResize.apply(this, arguments);
      if (!size) return;
      size[0] = Math.max(size[0], 460);
      rememberTimelineCanvasSize(this, size);
      if (this.setDirtyCanvas) this.setDirtyCanvas(true, true);
    };

    const originalOnConnectionsChange = nodeType.prototype.onConnectionsChange;
    nodeType.prototype.onConnectionsChange = function () {
      if (originalOnConnectionsChange) originalOnConnectionsChange.apply(this, arguments);
      setupNode(this);
      syncChainInheritedWidgets(this);
      if (this.setDirtyCanvas) this.setDirtyCanvas(true, true);
    };

    const handleTimelineDoubleClick = function () {
      const pos = Array.from(arguments).find((arg) => Array.isArray(arg) && arg.length >= 2);
      if (!pos) return false;
      setupNode(this);
      const { padX, width, timelineY, timelineH } = bounds(this);
      const [x, y] = pos;
      if (x < padX || x > padX + width || y < timelineY || y > timelineY + timelineH) return false;
      if (findKeyframeAt(this, pos) >= 0) return false;
      addKeyframeAt(this, x);
      return true;
    };

    const originalMouseDblClick = nodeType.prototype.onMouseDblClick;
    nodeType.prototype.onMouseDblClick = function (_event, pos) {
      if (handleTimelineDoubleClick.apply(this, arguments)) return true;
      return originalMouseDblClick ? originalMouseDblClick.apply(this, arguments) : false;
    };

    const originalDblClick = nodeType.prototype.onDblClick;
    nodeType.prototype.onDblClick = function () {
      if (handleTimelineDoubleClick.apply(this, arguments)) return true;
      return originalDblClick ? originalDblClick.apply(this, arguments) : false;
    };

    const originalMouseDown = nodeType.prototype.onMouseDown;
    nodeType.prototype.onMouseDown = function (event, pos) {
      if (event && event.button != null && event.button !== 0) {
        return originalMouseDown ? originalMouseDown.apply(this, arguments) : false;
      }
      setupNode(this);
      const keyframes = normalizeKeyframes(this.properties.etk_ltxv_timeline_keyframes, this);
      const hitIndex = findKeyframeAt(this, pos);
      const { padX, width, timelineY, timelineH, controlsY, controlsH, previewY, previewH } = bounds(this);
      const [x, y] = pos;
      const inControls = x >= padX && x <= padX + width && y >= controlsY && y <= controlsY + controlsH;
      const inPreview = x >= padX && x <= padX + width && y >= previewY && y <= previewY + previewH;
      const refreshButton = refreshButtonBounds(this);

      if (
        x >= refreshButton.x &&
        x <= refreshButton.x + refreshButton.w &&
        y >= refreshButton.y &&
        y <= refreshButton.y + refreshButton.h
      ) {
        refreshTimeline(this);
        return true;
      }

      if (hitIndex >= 0) {
        setSelectedKeyframe(this, hitIndex, keyframes);
        this.etkTimelineDragging = true;
        this.etkTimelineDraggingId = keyframes[hitIndex].id;
        window.etkTimelineActiveDragNode = this;
        this.setDirtyCanvas(true, true);
        return true;
      }

      if (x >= padX && x <= padX + width && y >= timelineY && y <= timelineY + timelineH) {
        const now = performance.now();
        const isDoubleClick =
          (event && event.detail && event.detail >= 2) ||
          (this.etkTimelineLastClick && now - this.etkTimelineLastClick < 350);
        if (isDoubleClick) {
          addKeyframeAt(this, x);
          this.etkTimelineLastClick = 0;
        } else {
          this.etkTimelineLastClick = now;
          this.setDirtyCanvas(true, true);
        }
        return true;
      }

      if (inControls || inPreview) {
        if (inControls) {
          const tab = controlTabAt(this, x, y);
          if (tab) {
            setControlsTab(this, tab);
            return true;
          }
        }
        const selected = selectedKeyframe(this);
        if (selected) {
          const activeControlTab = controlsTab(this);
          if (inControls && activeControlTab === "layers") {
            const button = modeButtonBounds(this);
            const imageButton = imageButtonBounds(this);
            const textButton = textLayerButtonBounds(this);
            const uploadButton = uploadModeButtonBounds(this);
            const lockLayerButton = lockLayerButtonBounds(this);
            const deleteLayerButton = deleteLayerButtonBounds(this);
            if (x >= lockLayerButton.x && x <= lockLayerButton.x + lockLayerButton.w && y >= lockLayerButton.y && y <= lockLayerButton.y + lockLayerButton.h) {
              toggleLayerEditingLock(this);
              return true;
            }
            if (x >= button.x && x <= button.x + button.w && y >= button.y && y <= button.y + button.h) {
              if (rejectLayerEditIfLocked(this, "Fit mode change")) return true;
              const layer = activeLayer(selected);
              if (layer) {
                updateActiveLayer(this, selected.id, (current) => ({
                  ...current,
                  fitMode: current.fitMode === "crop" ? "pad" : "crop",
                }));
              } else {
                selected.fitMode = selected.fitMode === "crop" ? "pad" : "crop";
                const selectedIndex = selectedKeyframeIndex(this, keyframes);
                if (selectedIndex < 0) return true;
                keyframes[selectedIndex] = selected;
                this.properties.etk_ltxv_timeline_keyframes = keyframes;
                syncTimelineWidget(this);
                this.setDirtyCanvas(true, true);
              }
              return true;
            }
            if (x >= imageButton.x && x <= imageButton.x + imageButton.w && y >= imageButton.y && y <= imageButton.y + imageButton.h) {
              if (rejectLayerEditIfLocked(this, "Image upload")) return true;
              this.etkTimelineFileInput.click();
              return true;
            }
            if (x >= textButton.x && x <= textButton.x + textButton.w && y >= textButton.y && y <= textButton.y + textButton.h) {
              addTextLayer(this, selected.id);
              return true;
            }
            if (x >= uploadButton.x && x <= uploadButton.x + uploadButton.w && y >= uploadButton.y && y <= uploadButton.y + uploadButton.h) {
              if (rejectLayerEditIfLocked(this, "Upload mode change")) return true;
              toggleUploadMode(this);
              return true;
            }
            if (
              x >= deleteLayerButton.x &&
              x <= deleteLayerButton.x + deleteLayerButton.w &&
              y >= deleteLayerButton.y &&
              y <= deleteLayerButton.y + deleteLayerButton.h
            ) {
              deleteActiveLayer(this, selected.id);
              return true;
            }
            const chip = layerChipAt(this, selected, x, y);
            if (chip) {
              setActiveLayerId(this, selected.id, chip.layerId);
              return true;
            }
          } else if (inControls && activeControlTab === "filters") {
            const layer = activeLayer(selected);
            const filterSlider = layer ? layerFilterSliderAt(this, x, y) : null;
            if (layer && filterSlider) {
              this.etkSliderDragging = { family: "filter", keyframeId: selected.id, layerId: layer.id, kind: filterSlider.kind };
              window.etkTimelineActiveDragNode = this;
              updateTimelineSliderDrag(this, pos);
              return true;
            }
          } else if (inControls && activeControlTab === "strength") {
            const strengthSlider = keyframeStrengthSliderAt(this, x, y);
            if (strengthSlider) {
              this.etkSliderDragging = { family: "strength", keyframeId: selected.id, kind: strengthSlider.kind };
              window.etkTimelineActiveDragNode = this;
              updateTimelineSliderDrag(this, pos);
              return true;
            }
          }
          const layer = activeLayer(selected);
          if (layer && inPreview) {
            if (layerEditingLocked(this)) {
              rejectLayerEditIfLocked(this, "Layer pan");
              return true;
            }
            const { boxX, boxY, boxW, boxH } = previewImageBox(this);
            if (x >= boxX && x <= boxX + boxW && y >= boxY && y <= boxY + boxH) {
              this.etkPreviewPanning = {
                keyframeId: selected.id,
                layerId: layer.id,
                startX: x,
                startY: y,
                startPanX: normalizePan(layer.panX),
                startPanY: normalizePan(layer.panY),
              };
              window.etkTimelineActiveDragNode = this;
              return true;
            }
          } else if (!layer && inPreview) {
            if (rejectLayerEditIfLocked(this, "Image upload")) return true;
            this.etkTimelineFileInput.click();
          }
          return true;
        }
      }

      return originalMouseDown ? originalMouseDown.apply(this, arguments) : false;
    };

    const originalMouseMove = nodeType.prototype.onMouseMove;
    nodeType.prototype.onMouseMove = function (event, pos) {
      if (this.etkSliderDragging) {
        if (event && event.buttons === 0) {
          releaseDrag(this);
          return true;
        }
        updateTimelineSliderDrag(this, pos);
        return true;
      }
      if (this.etkPreviewPanning) {
        if (event && event.buttons === 0) {
          releaseDrag(this);
          return true;
        }
        const keyframes = normalizeKeyframes(this.properties.etk_ltxv_timeline_keyframes, this);
        const keyframe = keyframes.find((candidate) => candidate.id === this.etkPreviewPanning.keyframeId);
        const layer = keyframe && (keyframe.layers || []).find((candidate) => candidate.id === this.etkPreviewPanning.layerId);
        const image = layer ? previewSourceForLayer(this, layer) : null;
        if (keyframe && layer && image && image.complete && image.naturalWidth > 0 && image.naturalHeight > 0) {
          const { boxW, boxH } = previewImageBox(this);
          const placement = previewPlacement(
            image,
            boxW,
            boxH,
            layer.fitMode,
            layer.panX,
            layer.panY,
            layer.zoom
          );
          const dx = pos[0] - this.etkPreviewPanning.startX;
          const dy = pos[1] - this.etkPreviewPanning.startY;
          const nextPanX =
            placement.panRangeX > 0
              ? this.etkPreviewPanning.startPanX + dx / (placement.panRangeX / 2)
              : 0;
          const nextPanY =
            placement.panRangeY > 0
              ? this.etkPreviewPanning.startPanY + dy / (placement.panRangeY / 2)
              : 0;
          updateActiveLayer(this, keyframe.id, (current) => ({
            ...current,
            panX: normalizePan(nextPanX),
            panY: normalizePan(nextPanY),
          }));
        }
        return true;
      }
      if (this.etkTimelineDragging) {
        if (event && event.buttons === 0) {
          releaseDrag(this);
          return true;
        }
        const keyframes = normalizeKeyframes(this.properties.etk_ltxv_timeline_keyframes, this);
        const draggingId = this.etkTimelineDraggingId || this.properties.etk_ltxv_selected_keyframe_id;
        const index = draggingId
          ? keyframes.findIndex((keyframe) => keyframe.id === draggingId)
          : selectedKeyframeIndex(this, keyframes);
        if (index >= 0 && index < keyframes.length) {
          const slot = xToSlot(this, pos[0]);
          if (slotConflict(this, slot, index) < 0) {
            const selected = keyframes[index];
            selected.slot = slot;
            selected.time = slotToSeconds(this, slot);
            keyframes.sort((a, b) => a.time - b.time || a.slot - b.slot);
            this.properties.etk_ltxv_timeline_keyframes = keyframes;
            setSelectedKeyframe(this, keyframes.findIndex((keyframe) => keyframe.id === selected.id), keyframes);
            syncTimelineWidget(this);
          }
          this.setDirtyCanvas(true, true);
        }
        return true;
      }
      return originalMouseMove ? originalMouseMove.apply(this, arguments) : false;
    };

    const originalMouseWheel = nodeType.prototype.onMouseWheel;
    nodeType.prototype.onMouseWheel = function () {
      const pos = Array.from(arguments).find((arg) => Array.isArray(arg) && arg.length >= 2);
      const event = Array.from(arguments).find((arg) => arg && typeof arg === "object" && !Array.isArray(arg));
      if (zoomPreviewAt(this, event, pos)) {
        if (event && event.preventDefault) event.preventDefault();
        if (event && event.stopPropagation) event.stopPropagation();
        return true;
      }
      return originalMouseWheel ? originalMouseWheel.apply(this, arguments) : false;
    };

    const originalMouseUp = nodeType.prototype.onMouseUp;
    nodeType.prototype.onMouseUp = function () {
      if (releaseDrag(this)) return true;
      return originalMouseUp ? originalMouseUp.apply(this, arguments) : false;
    };
  },
});