import { Facet, RangeSetBuilder } from "@codemirror/state";
import {
  Decoration,
  EditorView,
  ViewPlugin,
  WidgetType
} from "@codemirror/view";
import { scanStepRefs } from "./step-refs.js";
export const stepLookupFacet = Facet.define({
  combine: (values) => values.length > 0 ? values[values.length - 1] : /* @__PURE__ */ new Map()
});
class StepChipWidget extends WidgetType {
  constructor(id, info) {
    super();
    this.id = id;
    this.info = info;
  }
  eq(other) {
    return other.id === this.id && other.info?.label === this.info?.label && other.info?.valid === this.info?.valid;
  }
  toDOM() {
    const chip = document.createElement("span");
    chip.className = "cm-step-chip";
    chip.setAttribute("data-step-id", this.id);
    const tag = document.createElement("span");
    tag.className = "cm-step-chip-tag";
    tag.textContent = "\u6B65\u9AA4";
    chip.appendChild(tag);
    const text = document.createElement("span");
    text.className = "cm-step-chip-label";
    if (this.info === null) {
      chip.classList.add("cm-step-chip-dangling");
      const short = this.id.length > 8 ? `${this.id.slice(0, 8)}\u2026` : this.id;
      text.textContent = short;
      chip.title = `\u672A\u77E5\u6B65\u9AA4 ${this.id}`;
    } else if (!this.info.valid) {
      chip.classList.add("cm-step-chip-invalid");
      text.textContent = this.info.label;
      chip.title = `${this.info.label}\u5728\u672C\u6B65\u9AA4\u4E4B\u540E\u6267\u884C\uFF0C\u4E0D\u53EF\u5F15\u7528\u5176\u8F93\u51FA`;
    } else {
      text.textContent = this.info.label;
      chip.title = `\u524D\u5E8F\u6B65\u9AA4 \xB7 ${this.info.label}`;
    }
    chip.appendChild(text);
    return chip;
  }
  ignoreEvent() {
    return false;
  }
}
function buildChips(view) {
  const lookup = view.state.facet(stepLookupFacet);
  const builder = new RangeSetBuilder();
  for (const ref of scanStepRefs(view.state.doc.toString())) {
    const info = lookup.get(ref.id) ?? null;
    builder.add(
      ref.from,
      ref.to,
      Decoration.replace({ widget: new StepChipWidget(ref.id, info) })
    );
  }
  return builder.finish();
}
const chipPlugin = ViewPlugin.fromClass(
  class {
    decorations;
    constructor(view) {
      this.decorations = buildChips(view);
    }
    update(update) {
      if (update.docChanged || update.viewportChanged || update.startState.facet(stepLookupFacet) !== update.state.facet(stepLookupFacet)) {
        this.decorations = buildChips(update.view);
      }
    }
  },
  {
    decorations: (plugin) => plugin.decorations,
    // Atomic so the caret steps over a chip and Backspace removes the whole
    // `steps["id"]` at once — matching the scope/selection chips' feel.
    provide: (plugin) => EditorView.atomicRanges.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)
  }
);
const chipTheme = EditorView.theme({
  ".cm-step-chip": {
    display: "inline-flex",
    alignItems: "center",
    gap: "0.25rem",
    margin: "0 1px",
    padding: "0.125rem 0.25rem",
    borderRadius: "0.25rem",
    background: "#f0f9ff",
    border: "1px solid #bae6fd",
    color: "#0369a1",
    fontFamily: "ui-sans-serif, system-ui, sans-serif",
    verticalAlign: "baseline",
    cursor: "default",
    whiteSpace: "nowrap"
  },
  ".cm-step-chip-invalid": {
    background: "#fffbeb",
    borderColor: "#fde68a",
    color: "#b45309"
  },
  ".cm-step-chip-dangling": {
    background: "#fef2f2",
    borderColor: "#fecaca",
    color: "#b91c1c"
  },
  ".cm-step-chip-tag": {
    borderRadius: "0.125rem",
    background: "#e0f2fe",
    padding: "0.05rem 0.2rem",
    fontSize: "9px",
    lineHeight: "1",
    color: "#0284c7"
  },
  ".cm-step-chip-invalid .cm-step-chip-tag": {
    background: "#fef3c7",
    color: "#b45309"
  },
  ".cm-step-chip-dangling .cm-step-chip-tag": {
    background: "#fee2e2",
    color: "#b91c1c"
  },
  ".cm-step-chip-label": {
    fontSize: "0.75rem",
    lineHeight: "1.1"
  }
});
export function stepChips() {
  return [chipPlugin, chipTheme];
}
