import {
  branchInputName,
  createBranch,
  createStage,
  parsePipelineConfig,
  serializePipelineConfig,
} from "./pipeline_config.mjs";

let editorCounter = 0;
export const PIPELINE_NODE_MIN_WIDTH = 430;
const PIPELINE_WIDGET_START_Y = 4;
const PIPELINE_NODE_BOTTOM_PADDING = 8;

export function calculateStackContentHeight(
  childHeights,
  gap = 0,
  paddingTop = 0,
  paddingBottom = 0,
) {
  const heights = childHeights.filter((height) => Number.isFinite(height) && height > 0);
  return Math.ceil(
    heights.reduce((total, height) => total + height, 0)
      + gap * Math.max(heights.length - 1, 0)
      + paddingTop
      + paddingBottom,
  );
}

export function calculateSlotCanvasY(widgetY, rowOffsetY, widgetMargin = 0) {
  return widgetY + rowOffsetY + widgetMargin;
}

function stackContentHeight(root) {
  const style = getComputedStyle(root);
  const gap = Number.parseFloat(style.rowGap || style.gap) || 0;
  const paddingTop = Number.parseFloat(style.paddingTop) || 0;
  const paddingBottom = Number.parseFloat(style.paddingBottom) || 0;
  return calculateStackContentHeight(
    [...root.children].map((child) => child.offsetHeight),
    gap,
    paddingTop,
    paddingBottom,
  );
}

function element(tag, className, text) {
  const item = document.createElement(tag);
  if (className) item.className = className;
  if (text !== undefined) item.textContent = text;
  return item;
}

function iconButton(symbol, title, onClick) {
  const button = element("button", "fb-icon-button", symbol);
  button.type = "button";
  button.title = title;
  button.setAttribute("aria-label", title);
  button.addEventListener("click", onClick);
  return button;
}

function nodeInput(node, name) {
  return node.inputs?.find((item) => item.name === name);
}

function isConnected(input) {
  return input?.link !== null && input?.link !== undefined;
}

function removeInputByName(node, name) {
  const index = node.inputs?.findIndex((item) => item.name === name) ?? -1;
  if (index >= 0) node.removeInput(index);
}

function stopCanvasGestures(root) {
  for (const eventName of ["pointerdown", "mousedown", "wheel"]) {
    root.addEventListener(eventName, (event) => event.stopPropagation());
  }
}

export function setupPipelineEditor(node, app, onStateChanged) {
  if (node.__flowPipelineEditor) return node.__flowPipelineEditor;
  const configWidget = node.widgets?.find((item) => item.name === "pipeline_config");
  if (!configWidget) return null;

  editorCounter += 1;
  const editorId = `flow-pipeline-${editorCounter}`;
  const root = element("div", "fb-pipeline-editor");
  stopCanvasGestures(root);
  let config = parsePipelineConfig(configWidget.value);
  let rowElements = new Map();
  let destroyed = false;
  let syncingInputs = false;
  let fittingNode = false;

  // Branch sockets are positioned beside DOM rows. A fixed widget origin keeps
  // LiteGraph's slot bounds from pushing the widget down again on every frame.
  node.widgets_start_y = PIPELINE_WIDGET_START_Y;

  function desiredEditorHeight() {
    return Math.max(52, stackContentHeight(root) + 8);
  }

  const domWidget = node.addDOMWidget("flow_pipeline_editor", "flow-pipeline-editor", root, {
    serialize: false,
    getMinHeight() {
      return desiredEditorHeight();
    },
    getMaxHeight() {
      return desiredEditorHeight();
    },
  });
  domWidget.serialize = false;

  function persist() {
    configWidget.value = serializePipelineConfig(config);
  }

  function desiredBranchInputs() {
    return config.stages.flatMap((stage) => stage.branches.map((branch) => ({
      name: branchInputName(branch.id),
      label: branch.name,
    })));
  }

  function syncInputs() {
    syncingInputs = true;
    try {
      const desired = desiredBranchInputs();
      const desiredNames = new Set(desired.map((item) => item.name));
      const obsolete = (node.inputs || [])
        .filter((item) => item.name.startsWith("branch_") && !desiredNames.has(item.name))
        .map((item) => item.name);
      for (const name of obsolete) removeInputByName(node, name);
      for (const item of desired) {
        let input = nodeInput(node, item.name);
        if (!input) input = node.addInput(item.name, "*");
        input.label = " ";
        input.localized_name = " ";
        input.__flowBranchLabel = item.label;
      }
    } finally {
      syncingInputs = false;
    }
  }

  function updateSlotOffsets() {
    if (destroyed || !root.isConnected) return;
    const rootRect = root.getBoundingClientRect();
    const scale = root.offsetHeight > 0 ? rootRect.height / root.offsetHeight : 1;
    for (const [inputName, row] of rowElements) {
      const input = nodeInput(node, inputName);
      if (!input || !row.isConnected) continue;
      const rowRect = row.getBoundingClientRect();
      input.__flowBranchOffsetY = (rowRect.top - rootRect.top + rowRect.height / 2) / (scale || 1);
    }
    updateCanvasPositions();
  }

  function updateCanvasPositions() {
    for (const input of node.inputs || []) {
      if (!input.name.startsWith("branch_") || input.__flowBranchOffsetY === undefined) continue;
      input.pos = [
        0,
        calculateSlotCanvasY(domWidget.y, input.__flowBranchOffsetY, domWidget.margin),
      ];
    }
  }

  function fitNode() {
    if (destroyed || fittingNode) return;
    fittingNode = true;
    try {
      const width = Math.max(PIPELINE_NODE_MIN_WIDTH, node.size?.[0] || 0);
      const height = Math.max(
        150,
        PIPELINE_WIDGET_START_Y + desiredEditorHeight() + PIPELINE_NODE_BOTTOM_PADDING,
      );
      if (Math.abs((node.size?.[1] || 0) - height) > 2 || (node.size?.[0] || 0) < width) {
        node.setSize([width, height]);
      }
      updateSlotOffsets();
      app.graph?.setDirtyCanvas(true, true);
    } finally {
      fittingNode = false;
    }
  }

  function notify({ render = true } = {}) {
    persist();
    syncInputs();
    if (render) renderEditor();
    onStateChanged?.();
    requestAnimationFrame(fitNode);
  }

  function makeStageHeader(stage, stageIndex, previousName) {
    const header = element("div", "fb-stage-header");
    const enabled = element("input", "fb-stage-toggle");
    enabled.type = "checkbox";
    enabled.checked = stage.enabled;
    enabled.title = stage.enabled ? "阶段已启用" : "阶段已旁路";
    enabled.addEventListener("change", () => {
      stage.enabled = enabled.checked;
      notify();
    });

    const names = element("div", "fb-stage-names");
    const source = element("div", "fb-stage-source");
    source.append(
      element("span", "fb-stage-index", `阶段 ${stageIndex + 1}`),
      element("span", "fb-stage-path", `来自 ${previousName || "未命名结果"}`),
    );
    const name = element("input", "fb-name-input");
    name.type = "text";
    name.value = stage.name;
    name.placeholder = "阶段结果名称";
    name.title = "该阶段完成后发布的结果名称";
    name.addEventListener("input", () => {
      stage.name = name.value;
      persist();
      onStateChanged?.();
    });
    name.addEventListener("change", () => notify());
    names.append(source, name);

    const actions = element("div", "fb-stage-actions");
    const moveUp = iconButton("↑", "阶段上移", () => {
      [config.stages[stageIndex - 1], config.stages[stageIndex]] = [
        config.stages[stageIndex], config.stages[stageIndex - 1],
      ];
      notify();
    });
    moveUp.disabled = stageIndex <= 0;
    const moveDown = iconButton("↓", "阶段下移", () => {
      [config.stages[stageIndex + 1], config.stages[stageIndex]] = [
        config.stages[stageIndex], config.stages[stageIndex + 1],
      ];
      notify();
    });
    moveDown.disabled = stageIndex >= config.stages.length - 1;
    const removeStage = iconButton("×", "删除阶段", () => {
      config.stages.splice(stageIndex, 1);
      notify();
    });
    removeStage.classList.add("fb-delete-button");
    actions.append(moveUp, moveDown, removeStage);
    header.append(enabled, names, actions);
    return header;
  }

  function makeBypassRow(stage) {
    const label = element("label", "fb-branch-row fb-bypass-row");
    if (!stage.autoSelect && stage.selected === null) label.classList.add("fb-branch-selected");
    const radio = element("input", "fb-branch-radio");
    radio.type = "radio";
    radio.name = `${editorId}-${stage.id}`;
    radio.checked = stage.selected === null;
    radio.disabled = !stage.enabled || stage.autoSelect;
    radio.addEventListener("change", () => {
      if (!radio.checked) return;
      stage.selected = null;
      notify();
    });
    label.title = "不执行本阶段，直接使用上一阶段结果";
    label.append(radio, element("span", "fb-bypass-label", "跳过本阶段"));
    return label;
  }

  function makeAutoSelectRow(stage) {
    const label = element("label", "fb-auto-row");
    if (stage.autoSelect) label.classList.add("fb-auto-enabled");
    const toggle = element("input", "fb-auto-toggle");
    toggle.type = "checkbox";
    toggle.checked = stage.autoSelect;
    toggle.title = "运行时按从上到下的顺序选择第一个可用方案";
    toggle.addEventListener("change", () => {
      stage.autoSelect = toggle.checked;
      notify();
    });
    label.append(
      toggle,
      element("span", "fb-auto-label", "自动选择可用方案"),
      element("span", "fb-auto-hint", "从上到下"),
    );
    return label;
  }

  function makeBranchRow(stage, branch, branchIndex) {
    const inputName = branchInputName(branch.id);
    const row = element("div", "fb-branch-row");
    row.dataset.inputName = inputName;
    if (!stage.autoSelect && stage.selected === branch.id) row.classList.add("fb-branch-selected");
    if (isConnected(nodeInput(node, inputName))) row.classList.add("fb-branch-connected");

    const radio = element("input", "fb-branch-radio");
    radio.type = "radio";
    radio.name = `${editorId}-${stage.id}`;
    radio.checked = stage.selected === branch.id;
    radio.disabled = !stage.enabled || stage.autoSelect;
    radio.title = "选择这个方案";
    radio.addEventListener("change", () => {
      if (!radio.checked) return;
      stage.selected = branch.id;
      notify();
    });

    const name = element("input", "fb-name-input fb-branch-name");
    name.type = "text";
    name.value = branch.name;
    name.placeholder = `方案 ${branchIndex + 1}`;
    name.title = "方案名称";
    name.addEventListener("input", () => {
      branch.name = name.value;
      const input = nodeInput(node, inputName);
      if (input) input.__flowBranchLabel = branch.name;
      persist();
    });
    name.addEventListener("change", () => notify());

    const connected = isConnected(nodeInput(node, inputName));
    const status = element(
      "span",
      `fb-connection-status ${connected ? "fb-is-connected" : "fb-is-unconnected"}`,
      connected ? "已连接" : "未连接",
    );
    status.title = connected ? "方案结果已连接" : "方案结果未连接，将沿用上一阶段";

    const remove = iconButton("×", "删除方案", () => {
      stage.branches.splice(branchIndex, 1);
      if (stage.selected === branch.id) stage.selected = null;
      notify();
    });
    remove.classList.add("fb-delete-button");
    row.append(radio, name, status, remove);
    rowElements.set(inputName, row);
    return row;
  }

  function makeStage(stage, stageIndex, previousName) {
    const section = element("section", "fb-stage");
    if (!stage.enabled) section.classList.add("fb-stage-disabled");
    if (stage.autoSelect) section.classList.add("fb-stage-auto");
    section.append(
      makeStageHeader(stage, stageIndex, previousName),
      makeAutoSelectRow(stage),
      makeBypassRow(stage),
    );
    for (const [branchIndex, branch] of stage.branches.entries()) {
      section.append(makeBranchRow(stage, branch, branchIndex));
    }
    const addBranch = element("button", "fb-add-button fb-add-branch", "+ 添加方案");
    addBranch.type = "button";
    addBranch.addEventListener("click", () => {
      const branch = createBranch(stage.branches.length + 1);
      stage.branches.push(branch);
      stage.selected = branch.id;
      notify();
    });
    section.append(addBranch);
    return section;
  }

  function renderEditor() {
    rowElements = new Map();
    root.replaceChildren();
    if (config.stages.length === 0) {
      root.append(element("div", "fb-empty-state", "尚未添加处理阶段"));
    }
    let previousName = node.widgets?.find((item) => item.name === "input_channel")?.value || "原始图像";
    for (const [stageIndex, stage] of config.stages.entries()) {
      root.append(makeStage(stage, stageIndex, previousName));
      previousName = stage.name;
    }
    const addStage = element("button", "fb-add-button fb-add-stage", "+ 添加阶段");
    addStage.type = "button";
    addStage.addEventListener("click", () => {
      const stage = createStage(config.stages.length + 1);
      const branch = createBranch(1);
      stage.branches.push(branch);
      stage.selected = branch.id;
      config.stages.push(stage);
      notify();
    });
    root.append(addStage);
    requestAnimationFrame(fitNode);
  }

  const observer = new ResizeObserver(() => requestAnimationFrame(updateSlotOffsets));
  observer.observe(root);

  const editor = {
    get config() {
      return config;
    },
    persist,
    render: renderEditor,
    reload() {
      config = parsePipelineConfig(configWidget.value);
      syncInputs();
      renderEditor();
    },
    refreshConnections() {
      if (syncingInputs) return;
      renderEditor();
    },
    updateCanvasPositions,
    destroy() {
      destroyed = true;
      observer.disconnect();
    },
  };
  node.__flowPipelineEditor = editor;
  syncInputs();
  renderEditor();
  return editor;
}