import {
  createContext,
  memo,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
  type CSSProperties,
} from "react";
import { useSearchParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  ReactFlow,
  Background,
  BackgroundVariant,
  Controls,
  ControlButton,
  MiniMap,
  addEdge,
  useEdgesState,
  useNodesState,
  Handle,
  Position,
  ConnectionMode,
  SelectionMode,
  type Connection,
  type Edge,
  type Node,
  type NodeProps,
  type ReactFlowInstance,
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import {
  addTopologyViewNodes,
  createFabricManualEdge,
  createTopologyFolder,
  createTopologyView,
  deleteTopologyFolder,
  deleteTopologyMap,
  fetchLldpDiscoverJob,
  fetchManagedNe,
  fetchManagedNeById,
  fetchTopologyGraph,
  fetchTopologyTree,
  fetchUmeNe,
  patchTopologyEdgeStyle,
  patchTopologyPositions,
  projectTopologyNeighbors,
  removeTopologyViewNodes,
  searchFabricNodes,
  startLldpDiscover,
  updateTopologyFolder,
  updateTopologyMap,
} from "../services/api";
import { queryKeys } from "../constants/queryKeys";
import { HelpHint } from "../components/HelpHint";
import { useI18n } from "../i18n";
import { useToast } from "../hooks/useToast";
import { openOrFocusModule } from "../utils/moduleWindows";
import type {
  FabricNodeSearchHit,
  TopologyDiscoverJob,
  TopologyDiscoverNeResult,
  TopologyDiscoverOut,
  TopologyEdgeItem,
  TopologyNodeItem,
  TopologyTreeFolderItem,
  TopologyTreeViewItem,
  TopologyViewEdgeItem,
  TopologyViewGraph,
  TopologyViewNodeItem,
  TopologyViewKind,
  TopologyViewRole,
} from "../types";
import { alignNodes, layoutGraph, type LayoutKind } from "./topology/layoutGraph";
import { ParallelEdge } from "./topology/ParallelEdge";
import {
  buildLinkDisplayEdges,
  formatPortPairLabel,
  isAggregateEdgeId,
  physicalIdsForDisplayEdge,
  type LinkEdgeData,
  type LinkMember,
} from "./topology/linkDisplay";
import { behaviorForMode, toolModeFromKey, type ToolMode } from "./topology/toolMode";

const LAST_LEAF_KEY = "netx.topology.lastLeafViewId";
const TREE_EXPAND_KEY = "netx.topology.treeExpanded";

function findViewInRegion(
  regions: TopologyTreeFolderItem[],
  viewId: string,
): { region: TopologyTreeFolderItem; view: TopologyTreeViewItem } | null {
  for (const region of regions) {
    const view = (region.views || []).find((v) => v.id === viewId);
    if (view) return { region, view };
  }
  return null;
}

function regionDisplayName(region: TopologyTreeFolderItem | null | undefined): string {
  if (!region) return "";
  return region.name || "";
}

function formatUpdatedAt(value?: string | null): string {
  if (!value) return "";
  try {
    return new Date(value).toLocaleString();
  } catch {
    return String(value);
  }
}

const SNAP_GRID: [number, number] = [16, 16];

/**
 * onlyRenderVisibleElements leaves off-screen nodes unmeasured; default fitView
 * skips those. includeHiddenNodes uses declared width/height so fit still works.
 */
const FIT_VIEW_OPTS = { padding: 0.2, includeHiddenNodes: true } as const;
const FIT_VIEW_OPTS_FS = { padding: 0.15, includeHiddenNodes: true } as const;
const UNDO_MAX = 40;
const PALETTE_DND = "application/x-netx-topo-palette";

function FullscreenIcon({ exit }: { exit?: boolean }) {
  if (exit) {
    return (
      <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
        <path
          fill="currentColor"
          d="M7 14H5v5h5v-2H7v-3zm12 0h-2v3h-3v2h5v-5zM7 5h3V3H5v5h2V5zm10 0v3h2V3h-5v2h3z"
        />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
      <path
        fill="currentColor"
        d="M7 14H5v5h5v-2H7v-3zm0-9h3V3H5v5h2V5zm12 9h-2v3h-3v2h5v-5zm-2-9V3h-3v2h3v3h2V5h-2z"
      />
    </svg>
  );
}

/** ASCII-safe separators ? avoid Unicode middots that corrupt on some editors. */
const SEP = " / ";

/** Left-panel collapse / expand control (simple chevron). */
function SidebarFoldIcon({ expand }: { expand?: boolean }) {
  return (
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" className="topo-svg-icon">
      <path
        d={expand ? "M9 6l6 6-6 6" : "M15 6l-6 6 6 6"}
        fill="none"
        stroke="currentColor"
        strokeWidth="2.2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function PencilIcon() {
  return (
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" className="topo-svg-icon">
      <path
        fill="currentColor"
        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
      />
    </svg>
  );
}

function PlusIcon() {
  return (
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" className="topo-svg-icon">
      <path
        fill="none"
        stroke="currentColor"
        strokeWidth="2.2"
        strokeLinecap="round"
        d="M12 5v14M5 12h14"
      />
    </svg>
  );
}

function CloseIcon() {
  return (
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" className="topo-svg-icon">
      <path
        fill="none"
        stroke="currentColor"
        strokeWidth="2.2"
        strokeLinecap="round"
        d="M6 6l12 12M18 6L6 18"
      />
    </svg>
  );
}

function RegionGlyph({ size = 16 }: { size?: number }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" className="topo-tree__glyph-svg">
      <path
        d="M4 8.5L12 4l8 4.5v7L12 20l-8-4.5v-7z"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinejoin="round"
      />
      <path d="M12 4v16M4 8.5l8 4.5 8-4.5" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.7" />
    </svg>
  );
}

function LayerGlyph({ role, size = 16 }: { role?: string; size?: number }) {
  const r = String(role || "core").toLowerCase();
  if (r === "aggregation") {
    return (
      <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" className="topo-tree__glyph-svg">
        <rect x="4" y="5" width="16" height="4" rx="1.5" fill="currentColor" opacity="0.9" />
        <rect x="6" y="11" width="12" height="3.5" rx="1.2" fill="currentColor" opacity="0.65" />
        <rect x="8" y="16.5" width="8" height="3" rx="1" fill="currentColor" opacity="0.45" />
      </svg>
    );
  }
  if (r === "access") {
    return (
      <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" className="topo-tree__glyph-svg">
        <circle cx="7" cy="12" r="2.4" fill="currentColor" />
        <circle cx="17" cy="7" r="2.2" fill="currentColor" opacity="0.8" />
        <circle cx="17" cy="17" r="2.2" fill="currentColor" opacity="0.8" />
        <path d="M9.4 12H14.5M14.5 12L16 8.4M14.5 12L16 15.6" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" className="topo-tree__glyph-svg">
      <rect x="7" y="3.5" width="10" height="17" rx="2" fill="none" stroke="currentColor" strokeWidth="1.8" />
      <circle cx="12" cy="8" r="2.2" fill="currentColor" />
      <path d="M9 13.5h6M9 16.5h6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

type NeNodeData = {
  label: string;
  managed_ne_id: string;
  ume_ne_id: string;
  ne_ip: string;
  vendor: string;
  connect_status: string;
  /** Canvas navigation node (not a fabric NE). */
  kind?: "ne" | "region" | "layer";
  folder_id?: string;
  view_id?: string;
  role?: TopologyViewRole | string;
  subtitle?: string;
  node_count?: number;
};

type HistorySnap = { nodes: Node<NeNodeData>[]; edges: Edge[] };

type PaletteSource = "managed" | "ume";

type PaletteItem = {
  key: string;
  source: PaletteSource;
  managed_ne_id: string;
  ume_ne_id: string;
  name: string;
  ip: string;
  vendor: string;
  meta: string;
  connect_status: string;
};

type TopoDisplayOpts = {
  hideIp: boolean;
  hideVendor: boolean;
  hidePorts: boolean;
  connectMode: boolean;
};

type CtxMenu =
  | { kind: "node"; id: string; x: number; y: number }
  | { kind: "edge"; id: string; x: number; y: number }
  | { kind: "selection"; x: number; y: number };

const TopoDisplayContext = createContext<TopoDisplayOpts>({
  hideIp: true,
  hideVendor: true,
  hidePorts: true,
  connectMode: false,
});

function newId(): string {
  if (typeof crypto !== "undefined" && crypto.randomUUID) {
    return crypto.randomUUID().replace(/-/g, "");
  }
  return `${Date.now().toString(16)}${Math.random().toString(16).slice(2, 10)}`;
}

/**
 * Icon tone for /topo/ne-router.png (base = blue).
 * Unmanaged (no managed/ume) and unknown vendors → gray.
 * UME-linked NEs default to ZTE when vendor is empty/unknown.
 */
function nodeIconTone(vendor: string, managedNeId: string, umeNeId = ""): string {
  const hasManaged = Boolean(String(managedNeId || "").trim());
  const hasUme = Boolean(String(umeNeId || "").trim());
  if (!hasManaged && !hasUme) return "gray";
  const v = String(vendor || "").trim().toLowerCase();
  if (!v || v === "other" || v === "unknown" || v === "generic") {
    return hasUme ? "zte" : "gray";
  }
  if (v.includes("cisco")) return "cisco";
  if (v.includes("huawei")) return "huawei";
  if (v.includes("zte")) return "zte";
  if (v.includes("juniper")) return "juniper";
  if (v.includes("nokia") || v.includes("alcatel")) return "nokia";
  if (v.includes("ericsson")) return "ericsson";
  if (v.includes("h3c") || v.includes("comware")) return "h3c";
  if (v.includes("ruijie") || v.includes("锐捷")) return "ruijie";
  if (v.includes("mikrotik")) return "mikrotik";
  return hasUme ? "zte" : "gray";
}

function discoverResultKind(r: TopologyDiscoverNeResult): "ok" | "warn" | "fail" {
  if (!r.ok) return "fail";
  const unmatchedCount = r.unmatched_count ?? (r.unmatched?.length || 0);
  if (r.parser_stub || unmatchedCount > 0) return "warn";
  return "ok";
}

function normalizeSearchText(s: string): string {
  return String(s || "")
    .toLowerCase()
    .replace(/[\s_\-./]+/g, "");
}

/** Case-insensitive substring + loose subsequence (e.g. r1 ? router-1). */
function fuzzyIncludes(haystack: string, needle: string): boolean {
  const h = normalizeSearchText(haystack);
  const n = normalizeSearchText(needle);
  if (!n) return true;
  if (!h) return false;
  if (h.includes(n)) return true;
  let i = 0;
  for (const ch of h) {
    if (ch === n[i]) i += 1;
    if (i >= n.length) return true;
  }
  return false;
}

function nodeMatchesQuery(n: Node<NeNodeData>, query: string): boolean {
  const tokens = String(query || "")
    .trim()
    .toLowerCase()
    .split(/\s+/)
    .filter(Boolean);
  if (!tokens.length) return false;
  const bits = [n.data.label, n.data.ne_ip, n.data.vendor, n.data.managed_ne_id, n.data.ume_ne_id];
  return tokens.every((tok) => bits.some((b) => fuzzyIncludes(String(b || ""), tok)));
}

/**
 * Keep the PNG’s white texture/highlights; tint brand color via mix-blend-mode.
 * Color comes from --topo-icon-color (vendor palette in Display settings).
 */
function RouterIcon() {
  return (
    <span className="topo-node__icon" aria-hidden="true">
      <img className="topo-node__icon-art" src="/topo/ne-router.png" alt="" draggable={false} />
      <span className="topo-node__icon-tint" />
    </span>
  );
}

/** Fixed box for onlyRenderVisibleElements (xyflow skips off-screen mount when sized + handles set). */
const TOPO_NODE_W = 160;
const TOPO_NODE_H = 88;
/** Must match `.topo-node__glyph` (56×56, top-centered) + `--center` handles. */
const TOPO_ICON = 56;
const TOPO_HANDLE_X = TOPO_NODE_W / 2;
const TOPO_HANDLE_Y = TOPO_ICON / 2;

const NeNode = memo(function NeNode({ data, selected }: NodeProps<Node<NeNodeData>>) {
  const { hideIp, hideVendor, connectMode } = useContext(TopoDisplayContext);
  const tone = nodeIconTone(data.vendor, data.managed_ne_id, data.ume_ne_id);
  const name = data.label || (!hideIp ? data.ne_ip : "") || "NE";
  const secondary = [
    hideIp || !data.ne_ip || data.ne_ip === name ? "" : data.ne_ip,
    hideVendor || !data.vendor ? "" : data.vendor,
  ].filter(Boolean);
  return (
    <div
      className={`topo-node topo-node--${tone}${selected ? " is-selected" : ""}${
        connectMode ? " is-connect-mode" : ""
      }`}
    >
      <div className="topo-node__glyph">
        <Handle
          type="target"
          position={Position.Left}
          className="topo-node__handle topo-node__handle--center"
          isConnectable={connectMode}
        />
        <Handle
          type="source"
          position={Position.Right}
          className="topo-node__handle topo-node__handle--center"
          isConnectable={connectMode}
        />
        <RouterIcon />
      </div>
      <div className="topo-node__caption">
        <span className="topo-node__caption-name">{name}</span>
        {secondary.length ? (
          <span className="topo-node__caption-meta">{secondary.join(SEP)}</span>
        ) : null}
      </div>
    </div>
  );
});

const nodeTypes = { neNode: NeNode };
const edgeTypes = { topoParallel: ParallelEdge };

type EdgeStyleData = LinkEdgeData;

type EdgeLineStyle = "solid" | "dashed" | "dotted";
type EdgeSourceKind = "manual" | "discovered" | "stale";

type EdgeDefaultStyle = {
  stroke_color: string;
  stroke_width: number;
  line_style: EdgeLineStyle;
};

type EdgeDefaults = Record<EdgeSourceKind, EdgeDefaultStyle>;

const EDGE_DEFAULTS_KEY = "netx.topology.edgeDefaults";
const AUTO_LAYOUT_DISCOVER_KEY = "netx.topology.autoLayoutAfterDiscover";
const DISCOVER_AUTO_ADD_KEY = "netx.topology.discoverAutoAddUnmatched";
const DISCOVER_PROJECT_NEIGHBORS_KEY = "netx.topology.discoverProjectNeighbors";
const SCALE_BUNDLE_WIDTH_KEY = "netx.topology.scaleBundleWidth";
const CANVAS_BG_KEY = "netx.topology.canvasBg";
const DEFAULT_CANVAS_BG = "#0f172a";
/** Previous light default — migrate so existing sessions pick up dark canvas. */
const LEGACY_CANVAS_BG = "#dbeafe";
const LABEL_COLORS_KEY = "netx.topology.labelColors";
const VENDOR_COLORS_KEY = "netx.topology.vendorColors";

const VENDOR_TONE_KEYS = [
  "cisco",
  "huawei",
  "zte",
  "juniper",
  "nokia",
  "ericsson",
  "h3c",
  "ruijie",
  "mikrotik",
  "gray",
] as const;
type VendorToneKey = (typeof VENDOR_TONE_KEYS)[number];
type VendorColors = Record<VendorToneKey, string>;
type LabelColors = { name: string; edgeLabel: string };

const DEFAULT_LABEL_COLORS: LabelColors = {
  name: "#f1f5f9",
  edgeLabel: "#e2e8f0",
};

const DEFAULT_VENDOR_COLORS: VendorColors = {
  cisco: "#049fd9",
  huawei: "#cf0a2c",
  zte: "#0091da",
  juniper: "#84b135",
  nokia: "#124191",
  ericsson: "#1e3a5f",
  h3c: "#7ac143",
  ruijie: "#7c3aed",
  mikrotik: "#ea580c",
  gray: "#94a3b8",
};

function isHexColor(value: string): boolean {
  return /^#[0-9a-fA-F]{6}$/.test(value);
}

function loadCanvasBg(): string {
  try {
    const raw = String(localStorage.getItem(CANVAS_BG_KEY) || "").trim().toLowerCase();
    if (raw === LEGACY_CANVAS_BG) {
      persistCanvasBg(DEFAULT_CANVAS_BG);
      return DEFAULT_CANVAS_BG;
    }
    if (isHexColor(raw)) return raw;
  } catch {
    /* ignore */
  }
  return DEFAULT_CANVAS_BG;
}

function persistCanvasBg(value: string) {
  try {
    localStorage.setItem(CANVAS_BG_KEY, value);
  } catch {
    /* ignore */
  }
}

function loadLabelColors(): LabelColors {
  try {
    const raw = localStorage.getItem(LABEL_COLORS_KEY);
    if (!raw) return { ...DEFAULT_LABEL_COLORS };
    const parsed = JSON.parse(raw) as Partial<LabelColors>;
    return {
      name: isHexColor(String(parsed.name || "")) ? String(parsed.name).toLowerCase() : DEFAULT_LABEL_COLORS.name,
      edgeLabel: isHexColor(String(parsed.edgeLabel || ""))
        ? String(parsed.edgeLabel).toLowerCase()
        : DEFAULT_LABEL_COLORS.edgeLabel,
    };
  } catch {
    return { ...DEFAULT_LABEL_COLORS };
  }
}

function persistLabelColors(value: LabelColors) {
  try {
    localStorage.setItem(LABEL_COLORS_KEY, JSON.stringify(value));
  } catch {
    /* ignore */
  }
}

function loadVendorColors(): VendorColors {
  try {
    const raw = localStorage.getItem(VENDOR_COLORS_KEY);
    if (!raw) return { ...DEFAULT_VENDOR_COLORS };
    const parsed = JSON.parse(raw) as Partial<VendorColors>;
    const out = { ...DEFAULT_VENDOR_COLORS };
    for (const key of VENDOR_TONE_KEYS) {
      const c = String(parsed?.[key] || "").trim().toLowerCase();
      if (isHexColor(c)) out[key] = c;
    }
    return out;
  } catch {
    return { ...DEFAULT_VENDOR_COLORS };
  }
}

function persistVendorColors(value: VendorColors) {
  try {
    localStorage.setItem(VENDOR_COLORS_KEY, JSON.stringify(value));
  } catch {
    /* ignore */
  }
}

function canvasDotColor(bg: string): string {
  const hex = String(bg || "").replace("#", "");
  if (hex.length !== 6) return "#93c5fd";
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);
  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return lum > 0.55 ? "#93c5fd" : "#64748b";
}

function loadBoolFlag(key: string, defaultValue: boolean): boolean {
  try {
    const raw = localStorage.getItem(key);
    if (raw === null) return defaultValue;
    return raw === "1" || raw === "true";
  } catch {
    return defaultValue;
  }
}

function persistBoolFlag(key: string, value: boolean) {
  try {
    localStorage.setItem(key, value ? "1" : "0");
  } catch {
    /* ignore */
  }
}

function loadAutoLayoutAfterDiscover(): boolean {
  return loadBoolFlag(AUTO_LAYOUT_DISCOVER_KEY, false);
}

function persistAutoLayoutAfterDiscover(value: boolean) {
  persistBoolFlag(AUTO_LAYOUT_DISCOVER_KEY, value);
}

const BUILTIN_EDGE_DEFAULTS: EdgeDefaults = {
  manual: { stroke_color: "#64748b", stroke_width: 2, line_style: "solid" },
  discovered: { stroke_color: "#0ea5e9", stroke_width: 2, line_style: "dashed" },
  stale: { stroke_color: "#dc2626", stroke_width: 2, line_style: "dashed" },
};

function sourceKind(source: string): EdgeSourceKind {
  const src = (source || "manual").toLowerCase();
  if (src === "stale" || src === "missing") return "stale";
  if (src === "lldp" || src === "cdp") return "discovered";
  return "manual";
}

function loadEdgeDefaults(): EdgeDefaults {
  try {
    const raw = localStorage.getItem(EDGE_DEFAULTS_KEY);
    if (!raw) return { ...BUILTIN_EDGE_DEFAULTS, manual: { ...BUILTIN_EDGE_DEFAULTS.manual }, discovered: { ...BUILTIN_EDGE_DEFAULTS.discovered }, stale: { ...BUILTIN_EDGE_DEFAULTS.stale } };
    const parsed = JSON.parse(raw) as Partial<EdgeDefaults>;
    const pick = (kind: EdgeSourceKind): EdgeDefaultStyle => {
      const base = BUILTIN_EDGE_DEFAULTS[kind];
      const cur = parsed?.[kind];
      const color = String(cur?.stroke_color || base.stroke_color).trim() || base.stroke_color;
      const width = Math.max(1, Math.min(12, Number(cur?.stroke_width || base.stroke_width) || base.stroke_width));
      const line = String(cur?.line_style || base.line_style).toLowerCase();
      const line_style: EdgeLineStyle =
        line === "dashed" || line === "dotted" || line === "solid" ? line : base.line_style;
      return { stroke_color: color, stroke_width: width, line_style };
    };
    return { manual: pick("manual"), discovered: pick("discovered"), stale: pick("stale") };
  } catch {
    return {
      manual: { ...BUILTIN_EDGE_DEFAULTS.manual },
      discovered: { ...BUILTIN_EDGE_DEFAULTS.discovered },
      stale: { ...BUILTIN_EDGE_DEFAULTS.stale },
    };
  }
}

function persistEdgeDefaults(next: EdgeDefaults) {
  try {
    localStorage.setItem(EDGE_DEFAULTS_KEY, JSON.stringify(next));
  } catch {
    /* ignore quota */
  }
}

function dashForLineStyle(lineStyle: string): string | undefined {
  const s = (lineStyle || "").trim().toLowerCase();
  if (s === "dashed") return "6 4";
  if (s === "dotted") return "2 2";
  return undefined;
}

function edgeStyleBySource(
  source: string,
  defaults: EdgeDefaults,
): { stroke: string; strokeDasharray?: string; strokeWidth: number } {
  const d = defaults[sourceKind(source)];
  return {
    stroke: d.stroke_color,
    strokeWidth: d.stroke_width,
    strokeDasharray: dashForLineStyle(d.line_style),
  };
}

function resolveEdgeStyle(
  data: EdgeStyleData | undefined,
  defaults: EdgeDefaults,
): { stroke: string; strokeDasharray?: string; strokeWidth: number } {
  const base = edgeStyleBySource(data?.source || "manual", defaults);
  const color = String(data?.stroke_color || "").trim();
  const width = Number(data?.stroke_width || 0);
  const line = String(data?.line_style || "").trim().toLowerCase();
  return {
    stroke: color || base.stroke,
    strokeWidth: width > 0 ? width : base.strokeWidth,
    strokeDasharray: line ? dashForLineStyle(line) : base.strokeDasharray,
  };
}

function withEdgeVisual(edge: Edge, defaults: EdgeDefaults): Edge {
  const data = (edge.data || {}) as EdgeStyleData;
  const style = resolveEdgeStyle(data, defaults);
  // RF EdgeText defaults labelShowBg=true with a white rect — keep digits only.
  return { ...edge, style, markerEnd: undefined, labelShowBg: false };
}

function graphToFlow(
  nodes: TopologyViewNodeItem[],
  edges: TopologyViewEdgeItem[],
  defaults: EdgeDefaults,
) {
  const rfNodes: Node<NeNodeData>[] = nodes.map((n) => ({
    id: n.fabric_node_id,
    type: "neNode",
    position: { x: n.x || 0, y: n.y || 0 },
    width: TOPO_NODE_W,
    height: TOPO_NODE_H,
    // Predetermined handles must match DOM anchors (icon center), not the 160px box edges —
    // otherwise edges float in the gap and never touch the router glyph.
    handles: [
      { type: "target", position: Position.Left, x: TOPO_HANDLE_X, y: TOPO_HANDLE_Y },
      { type: "source", position: Position.Right, x: TOPO_HANDLE_X, y: TOPO_HANDLE_Y },
    ],
    data: {
      label: n.label || n.name || n.ip || n.fabric_node_id,
      managed_ne_id: n.managed_ne_id || "",
      ume_ne_id: n.ume_ne_id || "",
      ne_ip: n.ip || "",
      vendor: n.vendor || "",
      connect_status: n.connect_status || "",
    },
  }));
  const rfEdges: Edge[] = edges.map((e) => {
    const src =
      e.status === "stale" || e.status === "missing" ? "stale" : e.source || "manual";
    const label = formatPortPairLabel(e.a_port || "", e.b_port || "");
    const data: EdgeStyleData = {
      source: src,
      source_port: e.a_port || "",
      target_port: e.b_port || "",
      stroke_color: e.stroke_color || "",
      stroke_width: Number(e.stroke_width || 0),
      line_style: e.line_style || "",
      discovered_at: e.discovered_at ?? null,
    };
    return withEdgeVisual(
      {
        id: e.id,
        source: e.a_node_id,
        target: e.b_node_id,
        type: "straight",
        label: label || undefined,
        animated: false,
        data,
      },
      defaults,
    );
  });
  return { rfNodes, rfEdges };
}

function flowToPositions(nodes: Node<NeNodeData>[]) {
  return nodes.map((n) => ({
    fabric_node_id: n.id,
    x: n.position.x,
    y: n.position.y,
    label: n.data.label || "",
  }));
}

/** Stable signature so live poll only re-applies when the server graph actually changed. */
function graphFingerprint(graph: TopologyViewGraph): string {
  const nodes = [...graph.nodes]
    .map(
      (n) =>
        `${n.fabric_node_id}:${Math.round(Number(n.x) || 0)}:${Math.round(Number(n.y) || 0)}:${n.label || n.name || ""}`,
    )
    .sort()
    .join("|");
  const edges = [...graph.edges]
    .map((e) => `${e.id}:${e.a_node_id}:${e.b_node_id}:${e.a_port || ""}:${e.b_port || ""}:${e.status || ""}`)
    .sort()
    .join("|");
  return `${nodes}#${edges}#${graph.outside_peers?.length || 0}`;
}

function applyViewGraph(
  graph: TopologyViewGraph,
  defaults: EdgeDefaults,
  setNodes: (ns: Node<NeNodeData>[]) => void,
  setEdges: (es: Edge[]) => void,
  localPositions?: Map<string, { x: number; y: number }>,
) {
  const { rfNodes, rfEdges } = graphToFlow(graph.nodes, graph.edges, defaults);
  const merged = localPositions?.size
    ? rfNodes.map((n) => {
        const p = localPositions.get(n.id);
        return p ? { ...n, position: { ...p } } : n;
      })
    : rfNodes;
  setNodes(merged);
  setEdges(rfEdges);
  return { rfNodes: merged, rfEdges };
}

export function TopologyPage() {
  const { t } = useI18n();
  const { showOk, showError } = useToast();
  const queryClient = useQueryClient();
  const [searchParams, setSearchParams] = useSearchParams();
  // mapId set → fabric canvas; otherwise browse directory (region or view folder).
  const [mapId, setMapId] = useState<string>("");
  const [selectedFolderId, setSelectedFolderId] = useState<string>("");
  /** Hover sync key between left tree and right hex browser: `region:<id>` | `view:<id>`. */
  const [hotBrowseKey, setHotBrowseKey] = useState("");
  const [pendingHighlightNe, setPendingHighlightNe] = useState("");
  const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>(() => {
    try {
      const raw = localStorage.getItem(TREE_EXPAND_KEY);
      return raw ? (JSON.parse(raw) as Record<string, boolean>) : {};
    } catch {
      return {};
    }
  });
  const [keyword, setKeyword] = useState("");
  const [debouncedKeyword, setDebouncedKeyword] = useState("");
  const [treeNeQuery, setTreeNeQuery] = useState("");
  const [debouncedTreeNeQuery, setDebouncedTreeNeQuery] = useState("");
  const [treeSearchOpen, setTreeSearchOpen] = useState(false);
  const treeSearchRef = useRef<HTMLDivElement | null>(null);
  const [dirty, setDirty] = useState(false);
  const [historyTick, setHistoryTick] = useState(0);
  const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
  const [ctxMenu, setCtxMenu] = useState<CtxMenu | null>(null);
  const [hideIp, setHideIp] = useState(true);
  const [hideVendor, setHideVendor] = useState(true);
  const [hidePorts, setHidePorts] = useState(true);
  /** Default: logical aggregate of parallel links; expand to see each physical edge. */
  const [expandPhysicalLinks, setExpandPhysicalLinks] = useState(false);
  /** When aggregating, optionally thicken the line by member count (off = single-line width). */
  const [scaleBundleWidth, setScaleBundleWidth] = useState(() =>
    loadBoolFlag(SCALE_BUNDLE_WIDTH_KEY, false),
  );
  const [edgeFlow, setEdgeFlow] = useState(false);
  const [edgeDefaults, setEdgeDefaults] = useState<EdgeDefaults>(() => loadEdgeDefaults());
  const [canvasBg, setCanvasBg] = useState(loadCanvasBg);
  const [labelColors, setLabelColors] = useState<LabelColors>(() => loadLabelColors());
  const [vendorColors, setVendorColors] = useState<VendorColors>(() => loadVendorColors());
  const [toolMode, setToolMode] = useState<ToolMode>("select");
  const [snapToGrid, setSnapToGrid] = useState(true);
  const [autoLayoutAfterDiscover, setAutoLayoutAfterDiscover] = useState(loadAutoLayoutAfterDiscover);
  const [discoverAutoAddUnmatched, setDiscoverAutoAddUnmatched] = useState(() =>
    loadBoolFlag(DISCOVER_AUTO_ADD_KEY, false),
  );
  const [discoverProjectNeighbors, setDiscoverProjectNeighbors] = useState(() =>
    loadBoolFlag(DISCOVER_PROJECT_NEIGHBORS_KEY, false),
  );
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [addNeOpen, setAddNeOpen] = useState(false);
  const [paletteSource, setPaletteSource] = useState<PaletteSource>("managed");
  const [paletteSelectedKeys, setPaletteSelectedKeys] = useState<string[]>([]);
  const [paletteAdding, setPaletteAdding] = useState(false);
  const [discoverOpen, setDiscoverOpen] = useState(false);
  const [discovering, setDiscovering] = useState(false);
  const [discoverReport, setDiscoverReport] = useState<TopologyDiscoverOut | null>(null);
  const [discoverLiveResults, setDiscoverLiveResults] = useState<TopologyDiscoverNeResult[]>([]);
  const [discoverProgress, setDiscoverProgress] = useState({
    index: 0,
    total: 0,
    neName: "",
    neIp: "",
    edgesAdded: 0,
    edgesUpdated: 0,
  });
  const [discoverError, setDiscoverError] = useState("");
  const [fullscreen, setFullscreen] = useState(false);
  /** Opt-in poll so MCP / other clients painting the open map can be watched. Off by default. */
  const [liveSync, setLiveSync] = useState(false);
  const [canvasQuery, setCanvasQuery] = useState("");
  const [searchHitIds, setSearchHitIds] = useState<string[]>([]);
  const [findOpen, setFindOpen] = useState(false);
  const [findActiveIdx, setFindActiveIdx] = useState(0);
  const searchHitTimerRef = useRef<number | null>(null);
  const findBoxRef = useRef<HTMLDivElement | null>(null);
  const displayMenuRef = useRef<HTMLDetailsElement | null>(null);
  const findJustLocatedRef = useRef(false);
  const [nodes, setNodes, onNodesChange] = useNodesState<Node<NeNodeData>>([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
  const rfRef = useRef<ReactFlowInstance<Node<NeNodeData>, Edge> | null>(null);
  const canvasRef = useRef<HTMLDivElement | null>(null);
  const dirtyRef = useRef(false);
  const appliedMapIdRef = useRef("");
  const appliedGraphFpRef = useRef("");
  const nodesRef = useRef<Node<NeNodeData>[]>([]);
  const historyRef = useRef<HistorySnap[]>([]);
  const redoRef = useRef<HistorySnap[]>([]);
  const historyLockRef = useRef(false);
  const connectClickRef = useRef<string | null>(null);
  const canUndo = historyTick >= 0 && historyRef.current.length > 0;
  const canRedo = historyTick >= 0 && redoRef.current.length > 0;

  nodesRef.current = nodes;

  const markDirty = useCallback(() => {
    dirtyRef.current = true;
    setDirty(true);
  }, []);

  const clearDirty = useCallback(() => {
    dirtyRef.current = false;
    setDirty(false);
  }, []);

  const bumpHistory = useCallback(() => {
    setHistoryTick((n) => n + 1);
  }, []);

  const confirmDiscardIfDirty = useCallback(() => {
    if (!dirtyRef.current) return true;
    return window.confirm(t("topology.unsavedConfirm"));
  }, [t]);

  const selectMap = useCallback(
    (id: string) => {
      if (id === mapId) return;
      if (!confirmDiscardIfDirty()) return;
      setMapId(id);
    },
    [mapId, confirmDiscardIfDirty],
  );

  useEffect(() => {
    const timer = window.setTimeout(() => setDebouncedKeyword(keyword.trim()), 150);
    return () => window.clearTimeout(timer);
  }, [keyword]);

  useEffect(() => {
    const onBeforeUnload = (e: BeforeUnloadEvent) => {
      if (!dirtyRef.current) return;
      e.preventDefault();
      e.returnValue = "";
    };
    window.addEventListener("beforeunload", onBeforeUnload);
    return () => window.removeEventListener("beforeunload", onBeforeUnload);
  }, []);

  const toolBehavior = useMemo(() => behaviorForMode(toolMode), [toolMode]);
  const displayOpts = useMemo(
    () => ({ hideIp, hideVendor, hidePorts, connectMode: toolMode === "connect" }),
    [hideIp, hideVendor, hidePorts, toolMode],
  );
  const displayEdges = useMemo(() => {
    const built = buildLinkDisplayEdges(edges, expandPhysicalLinks, hidePorts, scaleBundleWidth).map((e) =>
      withEdgeVisual(e, edgeDefaults),
    );
    return built.map((e) => {
      const d = (e.data || {}) as EdgeStyleData;
      const selected =
        e.id === selectedEdgeId ||
        Boolean(d.members?.some((m: LinkMember) => m.id === selectedEdgeId));
      return {
        ...e,
        selected,
        // Empty string clears RF's previous edge-text; undefined can leave a stale label.
        label: e.label ? String(e.label) : "",
        animated: edgeFlow,
      };
    });
  }, [edges, expandPhysicalLinks, hidePorts, scaleBundleWidth, edgeFlow, edgeDefaults, selectedEdgeId]);

  const treeQuery = useQuery({
    queryKey: queryKeys.topologyTree,
    queryFn: fetchTopologyTree,
    refetchInterval: liveSync ? 5000 : false,
    refetchIntervalInBackground: false,
  });

  useEffect(() => {
    const timer = window.setTimeout(() => setDebouncedTreeNeQuery(treeNeQuery.trim()), 200);
    return () => window.clearTimeout(timer);
  }, [treeNeQuery]);

  const treeNeSearchQuery = useQuery({
    queryKey: queryKeys.fabricNodeSearch(debouncedTreeNeQuery, 1),
    queryFn: () => searchFabricNodes({ q: debouncedTreeNeQuery, page: 1, pageSize: 30 }),
    enabled: debouncedTreeNeQuery.length >= 1,
  });

  const graphQuery = useQuery({
    queryKey: queryKeys.topologyGraph(mapId),
    queryFn: () => fetchTopologyGraph(mapId),
    enabled: Boolean(mapId),
    refetchInterval: liveSync && mapId ? 3000 : false,
    refetchIntervalInBackground: false,
  });

  useEffect(() => {
    try {
      localStorage.setItem(TREE_EXPAND_KEY, JSON.stringify(expandedIds));
    } catch {
      /* ignore */
    }
  }, [expandedIds]);

  useEffect(() => {
    try {
      if (mapId) localStorage.setItem(LAST_LEAF_KEY, mapId);
      else localStorage.removeItem(LAST_LEAF_KEY);
    } catch {
      /* ignore */
    }
  }, [mapId]);

  const neQuery = useQuery({
    queryKey: [...queryKeys.managedNeAll, "topology-add-ne", debouncedKeyword],
    queryFn: () =>
      fetchManagedNe({
        keyword: debouncedKeyword,
        vendor: "",
        connectStatus: "",
        page: 1,
        pageSize: 100,
      }),
    enabled: addNeOpen && paletteSource === "managed",
  });

  const umeQuery = useQuery({
    queryKey: ["umeInventoryNe", "topology-add-ne", debouncedKeyword],
    queryFn: () =>
      fetchUmeNe({
        keyword: debouncedKeyword,
        page: 1,
        pageSize: 100,
      }),
    enabled: addNeOpen && paletteSource === "ume",
  });

  const treeRoot = treeQuery.data?.root || null;
  const regions = useMemo(() => treeRoot?.children || [], [treeRoot]);

  useEffect(() => {
    if (!treeRoot || !regions.length) return;
    if (mapId) {
      const hit = findViewInRegion(regions, mapId);
      if (hit && selectedFolderId !== hit.region.id) {
        setSelectedFolderId(hit.region.id);
        setExpandedIds((prev) => ({ ...prev, [hit.region.id]: true }));
      }
      return;
    }
    // Keep root (all regions) as the default landing view — do not auto-pick regions[0].
    if (selectedFolderId && !regions.some((r) => r.id === selectedFolderId)) {
      setSelectedFolderId("");
    }
  }, [mapId, selectedFolderId, treeRoot, regions]);

  const canvasMode = Boolean(mapId);
  const activeRegion = useMemo(() => {
    if (!selectedFolderId) return null;
    return regions.find((c) => c.id === selectedFolderId) || null;
  }, [regions, selectedFolderId]);

  const activeView = useMemo(() => {
    if (!mapId) return null;
    return findViewInRegion(regions, mapId)?.view || null;
  }, [mapId, regions]);

  const browseEntries = useMemo(
    (): TopologyTreeViewItem[] => activeRegion?.views || [],
    [activeRegion],
  );

  const goRegion = useCallback(
    (folderId: string) => {
      if (!confirmDiscardIfDirty()) return;
      setMapId("");
      setSelectedFolderId(folderId);
      setExpandedIds((p) => ({ ...p, [folderId]: true }));
      clearDirty();
      setNodes([]);
      setEdges([]);
    },
    [confirmDiscardIfDirty, clearDirty, setNodes, setEdges],
  );

  const goRoot = useCallback(() => {
    if (!confirmDiscardIfDirty()) return;
    setMapId("");
    setSelectedFolderId("");
    clearDirty();
    setNodes([]);
    setEdges([]);
  }, [confirmDiscardIfDirty, clearDirty, setNodes, setEdges]);

  const goCanvas = useCallback(
    (viewId: string, folderId?: string) => {
      if (!confirmDiscardIfDirty()) return;
      const hit = findViewInRegion(regions, viewId);
      const regionId = folderId || hit?.region.id || selectedFolderId;
      if (regionId) {
        setSelectedFolderId(regionId);
        setExpandedIds((p) => ({ ...p, [regionId]: true }));
      }
      setMapId(viewId);
    },
    [confirmDiscardIfDirty, regions, selectedFolderId],
  );

  const goBackBrowse = useCallback(() => {
    if (!confirmDiscardIfDirty()) return;
    setMapId("");
    clearDirty();
    setNodes([]);
    setEdges([]);
  }, [confirmDiscardIfDirty, clearDirty, setNodes, setEdges]);

  // Deep link from classify search: /topology?view=&ne=
  useEffect(() => {
    const viewId = String(searchParams.get("view") || "").trim();
    const neId = String(searchParams.get("ne") || "").trim();
    if (!viewId || !regions.length) return;
    const hit = findViewInRegion(regions, viewId);
    if (!hit) return;
    setSelectedFolderId(hit.region.id);
    setExpandedIds((p) => ({ ...p, [hit.region.id]: true }));
    setMapId(viewId);
    if (neId) setPendingHighlightNe(neId);
    setSearchParams({}, { replace: true });
  }, [regions, searchParams, setSearchParams]);

  useEffect(() => {
    appliedMapIdRef.current = "";
    appliedGraphFpRef.current = "";
  }, [mapId]);

  useEffect(() => {
    if (!canvasMode) return;
    if (!mapId || !graphQuery.data) return;
    const entering = appliedMapIdRef.current !== mapId;
    // Live poll while on the same map: apply server graph only if no unsaved local edits.
    if (!entering && dirtyRef.current) return;

    const fp = graphFingerprint(graphQuery.data);
    if (!entering && fp === appliedGraphFpRef.current) return;

    const selectedIds = entering
      ? new Set<string>()
      : new Set(nodesRef.current.filter((n) => n.selected).map((n) => n.id));
    const { rfNodes, rfEdges } = graphToFlow(graphQuery.data.nodes, graphQuery.data.edges, edgeDefaults);
    const nextNodes =
      selectedIds.size > 0
        ? rfNodes.map((n) => (selectedIds.has(n.id) ? { ...n, selected: true } : n))
        : rfNodes;

    historyLockRef.current = true;
    setNodes(nextNodes);
    setEdges(rfEdges);
    appliedGraphFpRef.current = fp;
    if (entering) {
      appliedMapIdRef.current = mapId;
      historyRef.current = [];
      redoRef.current = [];
      clearDirty();
      bumpHistory();
      window.setTimeout(() => rfRef.current?.fitView({ ...FIT_VIEW_OPTS }), 50);
    }
    historyLockRef.current = false;
  }, [canvasMode, mapId, graphQuery.data, edgeDefaults, setNodes, setEdges, clearDirty, bumpHistory]);

  useEffect(() => {
    setEdges((eds) => eds.map((e) => withEdgeVisual(e, edgeDefaults)));
  }, [edgeDefaults, setEdges]);

  const updateEdgeDefault = useCallback((kind: EdgeSourceKind, patch: Partial<EdgeDefaultStyle>) => {
    setEdgeDefaults((prev) => {
      const next: EdgeDefaults = {
        ...prev,
        [kind]: { ...prev[kind], ...patch },
      };
      persistEdgeDefaults(next);
      return next;
    });
  }, []);

  const resetEdgeDefaults = useCallback(() => {
    const next: EdgeDefaults = {
      manual: { ...BUILTIN_EDGE_DEFAULTS.manual },
      discovered: { ...BUILTIN_EDGE_DEFAULTS.discovered },
      stale: { ...BUILTIN_EDGE_DEFAULTS.stale },
    };
    persistEdgeDefaults(next);
    setEdgeDefaults(next);
  }, []);

  const pushHistory = useCallback(() => {
    if (historyLockRef.current) return;
    historyRef.current = [
      ...historyRef.current.slice(-(UNDO_MAX - 1)),
      {
        nodes: nodes.map((n) => ({ ...n, position: { ...n.position }, data: { ...n.data } })),
        edges: edges.map((e) => ({ ...e })),
      },
    ];
    redoRef.current = [];
    bumpHistory();
  }, [nodes, edges, bumpHistory]);

  const undo = useCallback(() => {
    const prev = historyRef.current.pop();
    if (!prev) return;
    redoRef.current.push({
      nodes: nodes.map((n) => ({ ...n, position: { ...n.position }, data: { ...n.data } })),
      edges: edges.map((e) => ({ ...e })),
    });
    historyLockRef.current = true;
    setNodes(prev.nodes);
    setEdges(prev.edges);
    markDirty();
    bumpHistory();
    historyLockRef.current = false;
  }, [nodes, edges, setNodes, setEdges, markDirty, bumpHistory]);

  const redo = useCallback(() => {
    const next = redoRef.current.pop();
    if (!next) return;
    historyRef.current.push({
      nodes: nodes.map((n) => ({ ...n, position: { ...n.position }, data: { ...n.data } })),
      edges: edges.map((e) => ({ ...e })),
    });
    historyLockRef.current = true;
    setNodes(next.nodes);
    setEdges(next.edges);
    markDirty();
    bumpHistory();
    historyLockRef.current = false;
  }, [nodes, edges, setNodes, setEdges, markDirty, bumpHistory]);

  const applyLayout = useCallback(
    async (kind: LayoutKind, opts?: { onlySelected?: boolean; persist?: boolean }) => {
      const onlyIds =
        opts?.onlySelected
          ? new Set(nodes.filter((n) => n.selected).map((n) => n.id))
          : undefined;
      if (onlyIds && onlyIds.size === 0) {
        showError(t("topology.layoutNeedSelection"));
        return;
      }
      pushHistory();
      const next = layoutGraph(nodes, edges, kind, { onlyIds });
      setNodes(next);
      markDirty();
      window.setTimeout(() => rfRef.current?.fitView({ ...FIT_VIEW_OPTS }), 40);
      if (opts?.persist && mapId) {
        try {
          const graph = await patchTopologyPositions(mapId, flowToPositions(next));
          clearDirty();
          queryClient.setQueryData(queryKeys.topologyGraph(mapId), graph);
        } catch (err) {
          showError(String(err));
        }
      }
    },
    [nodes, edges, setNodes, pushHistory, mapId, queryClient, showError, t, markDirty, clearDirty],
  );

  const applyAlign = useCallback(
    (kind: Parameters<typeof alignNodes>[2]) => {
      const ids = nodes.filter((n) => n.selected).map((n) => n.id);
      if (ids.length < 2) {
        showError(t("topology.alignNeedSelection"));
        return;
      }
      pushHistory();
      setNodes(alignNodes(nodes, ids, kind));
      markDirty();
    },
    [nodes, setNodes, pushHistory, showError, t, markDirty],
  );
  const renameMapMut = useMutation({
    mutationFn: ({ id, name }: { id: string; name: string }) =>
      updateTopologyMap(id, { name }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
      await queryClient.invalidateQueries({ queryKey: queryKeys.topologyMaps });
      showOk(t("topology.renamed"));
    },
    onError: (err) => showError(String(err)),
  });

  const promptRenameMap = useCallback(
    (id: string, currentName: string) => {
      const next = window.prompt(t("topology.renamePrompt"), currentName);
      if (next == null) return;
      const name = next.trim();
      if (!name || name === currentName) return;
      renameMapMut.mutate({ id, name });
    },
    [renameMapMut, t],
  );

  const createRegionMut = useMutation({
    mutationFn: (name: string) =>
      createTopologyFolder({
        name,
        kind: "region",
        parent_id: treeQuery.data?.root?.id,
      }),
    onSuccess: async (folder) => {
      await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
      setSelectedFolderId(folder.id);
      setMapId("");
      setExpandedIds((prev) => ({ ...prev, [folder.id]: true }));
      showOk(t("topology.regionCreated"));
    },
    onError: (err) => showError(String(err)),
  });

  const renameRegionMut = useMutation({
    mutationFn: ({ id, name }: { id: string; name: string }) =>
      updateTopologyFolder(id, { name }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
      showOk(t("topology.regionRenamed"));
    },
    onError: (err) => showError(String(err)),
  });

  const promptRenameRegion = useCallback(
    (id: string, currentName: string) => {
      const next = window.prompt(t("topology.renameRegionPrompt"), currentName);
      if (next == null) return;
      const name = next.trim();
      if (!name || name === currentName) return;
      renameRegionMut.mutate({ id, name });
    },
    [renameRegionMut, t],
  );

  const createMapMut = useMutation({
    mutationFn: (input: { folder_id: string; kind: TopologyViewKind; name: string }) =>
      createTopologyView(input),
    onSuccess: async (row) => {
      await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
      await queryClient.invalidateQueries({ queryKey: queryKeys.topologyMaps });
      clearDirty();
      if (row.folder_id) setSelectedFolderId(row.folder_id);
      setMapId(row.id);
      showOk(t("topology.newMap"));
      window.setTimeout(() => promptRenameMap(row.id, row.name), 0);
    },
    onError: (err) => showError(String(err)),
  });

  const deleteMapMut = useMutation({
    mutationFn: (id: string) => deleteTopologyMap(id),
    onSuccess: async (_out, id) => {
      await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
      await queryClient.invalidateQueries({ queryKey: queryKeys.topologyMaps });
      if (mapId === id) {
        clearDirty();
        setMapId("");
        setNodes([]);
        setEdges([]);
      }
    },
    onError: (err) => showError(String(err)),
  });

  const deleteFolderMut = useMutation({
    mutationFn: (id: string) => deleteTopologyFolder(id, false),
    onSuccess: async (_out, id) => {
      await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
      if (selectedFolderId === id) {
        setSelectedFolderId("");
        setMapId("");
      }
      showOk(t("topology.regionDeleted"));
    },
    onError: (err) => showError(String(err)),
  });

  const promptNewRegion = useCallback(() => {
    const name = window.prompt(t("topology.newRegionPrompt"), t("topology.newRegionName"));
    if (!name?.trim()) return;
    createRegionMut.mutate(name.trim());
  }, [createRegionMut, t]);

  const promptNewCustom = useCallback(
    (folderId: string) => {
      const name = window.prompt(t("topology.newCustomPrompt"), t("topology.newCustomName"));
      if (!name?.trim()) return;
      createMapMut.mutate({
        folder_id: folderId,
        kind: "custom",
        name: name.trim(),
      });
    },
    [createMapMut, t],
  );

  const saveMut = useMutation({
    mutationFn: async () => {
      if (!mapId) throw new Error(t("topology.selectMap"));
      // Positions patch only updates listed nodes; sync canvas removals first.
      const serverIds = (graphQuery.data?.nodes || [])
        .map((n) => n.fabric_node_id)
        .filter(Boolean);
      const localIds = new Set(nodes.map((n) => n.id));
      const toRemove = serverIds.filter((id) => !localIds.has(id));
      if (toRemove.length) {
        await removeTopologyViewNodes(mapId, toRemove);
      }
      return patchTopologyPositions(mapId, flowToPositions(nodes));
    },
    onSuccess: async (graph) => {
      clearDirty();
      queryClient.setQueryData(queryKeys.topologyGraph(mapId), graph);
      await queryClient.invalidateQueries({ queryKey: queryKeys.topologyMaps });
      showOk(t("topology.saved"));
    },
    onError: (err) => showError(String(err)),
  });

  const runDiscover = useCallback(
    async (neIds?: string[]) => {
      if (!mapId || discovering) return;
      // Topology canvas: single-NE (or explicit id list) only — bulk collect lives under Network → LLDP.
      const filterIds = (neIds || []).map((x) => String(x || "").trim()).filter(Boolean);
      if (!filterIds.length) {
        showError(t("topology.discoverOneNeedNe"));
        return;
      }
      setDiscoverOpen(true);
      setDiscovering(true);
      setDiscoverReport(null);
      setDiscoverLiveResults([]);
      setDiscoverError("");
      const scannable = nodes.filter((n) => Boolean(n.data.managed_ne_id || n.data.ume_ne_id));
      const scoped = scannable.filter(
        (n) =>
          filterIds.includes(String(n.data.managed_ne_id || "")) ||
          filterIds.includes(String(n.data.ume_ne_id || "")),
      );
      setDiscoverProgress({
        index: 0,
        total: scoped.length,
        neName: "",
        neIp: "",
        edgesAdded: 0,
        edgesUpdated: 0,
      });
      try {
        if (dirtyRef.current) {
          await patchTopologyPositions(mapId, flowToPositions(nodes));
          clearDirty();
        }
        const ne_ids = filterIds;
        if (!scoped.length) {
          throw new Error(t("topology.discoverOneNeedNe"));
        }
        const jobStart = await startLldpDiscover({
          scope: "ne_ids",
          ne_ids,
          concurrency: 4,
          auto_add_unmatched: discoverAutoAddUnmatched,
          trigger_mode: "topology",
        });
        let job: TopologyDiscoverJob = jobStart;
        for (let i = 0; i < 600; i++) {
          await new Promise((r) => window.setTimeout(r, 500));
          job = await fetchLldpDiscoverJob(jobStart.id);
          setDiscoverProgress((p) => ({
            ...p,
            index: job.done,
            total: job.total || p.total,
            edgesAdded: job.edges_added,
            edgesUpdated: job.edges_updated,
            neName: job.items?.[job.items.length - 1]?.ne_name || p.neName,
            neIp: job.items?.[job.items.length - 1]?.ne_ip || p.neIp,
          }));
          setDiscoverLiveResults((job.items || []) as TopologyDiscoverNeResult[]);
          if (job.status === "done" || job.status === "failed") break;
        }
        if (job.status === "failed") {
          throw new Error(job.error || "discover_failed");
        }
        const projected = discoverProjectNeighbors
          ? await projectTopologyNeighbors(mapId)
          : await fetchTopologyGraph(mapId);
        queryClient.setQueryData(queryKeys.topologyGraph(mapId), projected);
        appliedMapIdRef.current = mapId;
        let { rfNodes, rfEdges } = graphToFlow(projected.nodes, projected.edges, edgeDefaults);
        // Keep existing node positions when we did not auto-layout.
        const localPos = new Map(nodes.map((n) => [n.id, n.position]));
        rfNodes = rfNodes.map((n) => {
          const p = localPos.get(n.id);
          return p ? { ...n, position: { ...p } } : n;
        });
        let didAutoLayout = false;
        if (autoLayoutAfterDiscover && rfNodes.length > 1) {
          rfNodes = layoutGraph(rfNodes, rfEdges, "hierarchical-tb");
          didAutoLayout = true;
          try {
            const graph = await patchTopologyPositions(mapId, flowToPositions(rfNodes));
            queryClient.setQueryData(queryKeys.topologyGraph(mapId), graph);
            clearDirty();
          } catch {
            markDirty();
          }
        } else {
          clearDirty();
        }
        historyLockRef.current = true;
        setNodes(rfNodes);
        setEdges(rfEdges);
        historyLockRef.current = false;
        if (didAutoLayout) {
          window.setTimeout(() => rfRef.current?.fitView({ ...FIT_VIEW_OPTS }), 50);
        }
        const out: TopologyDiscoverOut = {
          map_id: mapId,
          protocol: "lldp",
          scanned: job.done,
          edges_added: job.edges_added,
          edges_updated: job.edges_updated,
          edges_stale: job.edges_missing ?? job.edges_stale,
          results: (job.items || []) as TopologyDiscoverNeResult[],
          graph: projected,
        };
        setDiscoverReport(out);
        await queryClient.invalidateQueries({ queryKey: queryKeys.topologyMaps });
        await queryClient.invalidateQueries({ queryKey: queryKeys.fabricSummary });
        showOk(
          t("topology.discovered")
            .replace("{{added}}", String(out.edges_added))
            .replace("{{updated}}", String(out.edges_updated))
            .replace("{{stale}}", String(out.edges_stale || 0)),
        );
      } catch (err) {
        setDiscoverError(String(err));
        showError(t("topology.discoverFail").replace("{{detail}}", String(err)));
      } finally {
        setDiscovering(false);
      }
    },
    [mapId, discovering, nodes, queryClient, setNodes, setEdges, showOk, showError, t, autoLayoutAfterDiscover, discoverAutoAddUnmatched, discoverProjectNeighbors, edgeDefaults, clearDirty, markDirty],
  );

  const discoverResults = discoverReport?.results?.length
    ? discoverReport.results
    : discoverLiveResults;
  const discoverCounts = useMemo(() => {
    let ok = 0;
    let warn = 0;
    let fail = 0;
    for (const r of discoverResults) {
      const k = discoverResultKind(r);
      if (k === "fail") fail += 1;
      else if (k === "warn") warn += 1;
      else ok += 1;
    }
    return { ok, warn, fail, issues: warn + fail };
  }, [discoverResults]);
  const discoverSummary = discoverReport
    ? {
        scanned: discoverReport.scanned,
        added: discoverReport.edges_added,
        updated: discoverReport.edges_updated,
        missing: discoverReport.edges_stale || 0,
        failed: discoverCounts.fail,
      }
    : {
        scanned: discoverLiveResults.length,
        added: discoverProgress.edgesAdded,
        updated: discoverProgress.edgesUpdated,
        missing: 0,
        failed: discoverCounts.fail,
      };
  const discoverPct =
    discovering && discoverProgress.total > 0
      ? Math.min(100, Math.round((discoverProgress.index / discoverProgress.total) * 100))
      : discoverReport
        ? 100
        : 0;

  const isValidConnection = useCallback(
    (connection: Connection | Edge) => {
      const source = String(connection.source || "");
      const target = String(connection.target || "");
      if (!source || !target || source === target) return false;
      return !edges.some((e) => e.source === source && e.target === target);
    },
    [edges],
  );

  const onConnect = useCallback(
    (connection: Connection) => {
      if (!mapId || !isValidConnection(connection)) return;
      pushHistory();
      connectClickRef.current = null;
      void (async () => {
        try {
          await createFabricManualEdge({
            a_node_id: String(connection.source || ""),
            b_node_id: String(connection.target || ""),
            a_port: "",
            b_port: "",
          });
          const graph = await fetchTopologyGraph(mapId);
          queryClient.setQueryData(queryKeys.topologyGraph(mapId), graph);
          historyLockRef.current = true;
          applyViewGraph(graph, edgeDefaults, setNodes, setEdges);
          historyLockRef.current = false;
          clearDirty();
        } catch (err) {
          showError(String(err));
        }
      })();
    },
    [setEdges, setNodes, pushHistory, edgeDefaults, isValidConnection, mapId, queryClient, clearDirty, showError],
  );

  const addPaletteItems = useCallback(
    async (items: PaletteItem[], origin?: { x: number; y: number }): Promise<boolean> => {
      if (!mapId) {
        showError(t("topology.selectMap"));
        return false;
      }
      if (items.length === 0 || paletteAdding) return false;

      const onCanvasManaged = new Set(nodes.map((n) => n.data.managed_ne_id).filter(Boolean));
      const onCanvasUme = new Set(nodes.map((n) => n.data.ume_ne_id).filter(Boolean));
      const managedIds = [
        ...new Set(
          items
            .filter((item) => item.source === "managed")
            .map((item) => item.managed_ne_id)
            .filter((id) => id && !onCanvasManaged.has(id)),
        ),
      ];
      const umeIds = [
        ...new Set(
          items
            .filter((item) => item.source === "ume")
            .map((item) => item.ume_ne_id)
            .filter((id) => id && !onCanvasUme.has(id)),
        ),
      ];
      if (managedIds.length === 0 && umeIds.length === 0) return false;

      setPaletteAdding(true);
      try {
        const graph = await addTopologyViewNodes(mapId, {
          managed_ne_ids: managedIds,
          ume_ne_ids: umeIds,
          layout: "grid",
        });
        const managedSet = new Set(managedIds);
        const umeSet = new Set(umeIds);
        const added = graph.nodes.filter(
          (n) =>
            (n.managed_ne_id && managedSet.has(n.managed_ne_id)) ||
            (n.ume_ne_id && umeSet.has(n.ume_ne_id)),
        );
        if (added.length > 0) {
          const start = origin || { x: 80 + nodes.length * 24, y: 80 + nodes.length * 24 };
          const cols = Math.max(1, Math.ceil(Math.sqrt(added.length)));
          await patchTopologyPositions(
            mapId,
            added.map((n, i) => ({
              fabric_node_id: n.fabric_node_id,
              x: start.x + (i % cols) * 180,
              y: start.y + Math.floor(i / cols) * 120,
              label: n.label || n.name || "",
            })),
          );
        }
        const refreshed = await fetchTopologyGraph(mapId);
        queryClient.setQueryData(queryKeys.topologyGraph(mapId), refreshed);
        historyLockRef.current = true;
        applyViewGraph(refreshed, edgeDefaults, setNodes, setEdges);
        historyLockRef.current = false;
        clearDirty();
        const count = added.length || managedIds.length + umeIds.length;
        showOk(t("topology.addSelectedDone").replace("{{count}}", String(count)));
        return count > 0;
      } catch (err) {
        showError(String(err));
        return false;
      } finally {
        setPaletteAdding(false);
      }
    },
    [
      mapId,
      nodes,
      paletteAdding,
      setNodes,
      setEdges,
      showError,
      showOk,
      t,
      queryClient,
      edgeDefaults,
      clearDirty,
    ],
  );

  const addNodeAt = useCallback(
    async (item: PaletteItem, position: { x: number; y: number }) => {
      await addPaletteItems([item], position);
    },
    [addPaletteItems],
  );

  const onPaletteDragStart = (e: React.DragEvent, item: PaletteItem) => {
    e.dataTransfer.setData(PALETTE_DND, JSON.stringify(item));
    e.dataTransfer.effectAllowed = "copy";
  };

  const onCanvasDragOver = (e: React.DragEvent) => {
    if (!e.dataTransfer.types.includes(PALETTE_DND)) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = "copy";
  };

  const onCanvasDrop = (e: React.DragEvent) => {
    e.preventDefault();
    const raw = e.dataTransfer.getData(PALETTE_DND);
    if (!raw || !rfRef.current) return;
    try {
      const item = JSON.parse(raw) as PaletteItem;
      const pos = rfRef.current.screenToFlowPosition({ x: e.clientX, y: e.clientY });
      addNodeAt(item, pos);
    } catch {
      /* ignore */
    }
  };
  const selectedNodes = useMemo(() => nodes.filter((n) => n.selected), [nodes]);
  const selectedNode = selectedNodes[0] || null;
  const selectedNodeIds = useMemo(() => selectedNodes.map((n) => n.id), [selectedNodes]);
  const selectedEdge = useMemo(() => {
    if (!selectedEdgeId) return null;
    return (
      displayEdges.find((e) => e.id === selectedEdgeId) ||
      edges.find((e) => e.id === selectedEdgeId) ||
      null
    );
  }, [selectedEdgeId, displayEdges, edges]);
  const selectedEdgeData = (selectedEdge?.data || {}) as EdgeStyleData;
  const selectedEdgeResolved = selectedEdge ? resolveEdgeStyle(selectedEdgeData, edgeDefaults) : null;
  const selectedEdgeSourceNode = selectedEdge ? nodes.find((n) => n.id === selectedEdge.source) : null;
  const selectedEdgeTargetNode = selectedEdge ? nodes.find((n) => n.id === selectedEdge.target) : null;

  const patchSelectedEdgeStyle = useCallback(
    (
      patch: Partial<
        Pick<EdgeStyleData, "stroke_color" | "stroke_width" | "line_style" | "source_port" | "target_port">
      >,
      opts?: { skipHistory?: boolean },
    ) => {
      if (!selectedEdgeId || !mapId) return;
      const display = displayEdges.find((e) => e.id === selectedEdgeId) || selectedEdge;
      const targetIds = physicalIdsForDisplayEdge(display, edges);
      if (!targetIds.length) return;
      // Port edits only make sense on a single physical link.
      if (
        (isAggregateEdgeId(selectedEdgeId) || targetIds.length > 1) &&
        (patch.source_port !== undefined || patch.target_port !== undefined)
      ) {
        return;
      }
      if (!opts?.skipHistory) pushHistory();
      setEdges((eds) =>
        eds.map((e) => {
          if (!targetIds.includes(e.id)) return e;
          const prev = (e.data || {}) as EdgeStyleData;
          const data: EdgeStyleData = {
            ...prev,
            stroke_color: patch.stroke_color !== undefined ? patch.stroke_color : prev.stroke_color || "",
            stroke_width:
              patch.stroke_width !== undefined ? Number(patch.stroke_width || 0) : Number(prev.stroke_width || 0),
            line_style: patch.line_style !== undefined ? patch.line_style : prev.line_style || "",
            source_port: patch.source_port !== undefined ? patch.source_port : prev.source_port || "",
            target_port: patch.target_port !== undefined ? patch.target_port : prev.target_port || "",
          };
          const portLabel = formatPortPairLabel(data.source_port || "", data.target_port || "");
          return withEdgeVisual({ ...e, data, label: portLabel || undefined }, edgeDefaults);
        }),
      );
      const edge = edges.find((e) => e.id === targetIds[0]);
      const prev = (edge?.data || {}) as EdgeStyleData;
      for (const fabricEdgeId of targetIds) {
        void patchTopologyEdgeStyle(mapId, {
          fabric_edge_id: fabricEdgeId,
          stroke_color: patch.stroke_color !== undefined ? patch.stroke_color : prev.stroke_color || "",
          stroke_width:
            patch.stroke_width !== undefined ? Number(patch.stroke_width || 0) : Number(prev.stroke_width || 0),
          line_style: patch.line_style !== undefined ? patch.line_style : prev.line_style || "",
        }).catch((err) => showError(String(err)));
      }
    },
    [selectedEdgeId, selectedEdge, mapId, edges, displayEdges, setEdges, pushHistory, edgeDefaults, showError],
  );

  const renameSelectedNode = useCallback(() => {
    if (!selectedNode) return;
    const next = window.prompt(t("topology.renameNodePrompt"), selectedNode.data.label || "");
    if (next == null) return;
    const label = next.trim();
    if (!label || label === selectedNode.data.label) {
      setCtxMenu(null);
      return;
    }
    pushHistory();
    markDirty();
    setNodes((ns) =>
      ns.map((n) => (n.id === selectedNode.id ? { ...n, data: { ...n.data, label } } : n)),
    );
    setCtxMenu(null);
  }, [selectedNode, t, pushHistory, markDirty, setNodes]);

  const closeCtxMenu = useCallback(() => setCtxMenu(null), []);

  useEffect(() => {
    const syncFs = () => {
      const el = canvasRef.current;
      const active = Boolean(el && document.fullscreenElement === el);
      setFullscreen(active);
      if (active) {
        window.setTimeout(() => rfRef.current?.fitView({ ...FIT_VIEW_OPTS_FS }), 80);
      }
    };
    document.addEventListener("fullscreenchange", syncFs);
    return () => document.removeEventListener("fullscreenchange", syncFs);
  }, []);

  const toggleFullscreen = useCallback(async () => {
    const el = canvasRef.current;
    if (!el) return;
    try {
      if (document.fullscreenElement === el) {
        await document.exitFullscreen();
      } else {
        await el.requestFullscreen();
      }
    } catch (err) {
      showError(String(err));
    }
  }, [showError]);

  const clearSelection = useCallback(() => {
    setSelectedEdgeId(null);
    setNodes((ns) => ns.map((n) => ({ ...n, selected: false })));
    setEdges((es) => es.map((e) => ({ ...e, selected: false })));
    connectClickRef.current = null;
  }, [setNodes, setEdges]);

  const selectAllNodes = useCallback(() => {
    setSelectedEdgeId(null);
    setNodes((ns) => ns.map((n) => ({ ...n, selected: true })));
    setEdges((es) => es.map((e) => ({ ...e, selected: false })));
  }, [setNodes, setEdges]);

  const removeSelected = useCallback(async () => {
    if (!mapId) return;
    const nodeIds = nodes.filter((n) => n.selected).map((n) => n.id);
    const edgeIds = new Set(edges.filter((e) => e.selected).map((e) => e.id));
    if (!nodeIds.length && !edgeIds.size) return;
    pushHistory();
    try {
      if (nodeIds.length) {
        if (dirtyRef.current) {
          await patchTopologyPositions(mapId, flowToPositions(nodes));
          clearDirty();
        }
        const localPos = new Map(nodes.map((n) => [n.id, n.position]));
        const graph = await removeTopologyViewNodes(mapId, nodeIds);
        queryClient.setQueryData(queryKeys.topologyGraph(mapId), graph);
        appliedMapIdRef.current = mapId;
        historyLockRef.current = true;
        applyViewGraph(graph, edgeDefaults, setNodes, setEdges, localPos);
        historyLockRef.current = false;
        clearDirty();
      } else if (edgeIds.size) {
        setEdges((eds) => eds.filter((e) => !edgeIds.has(e.id)));
        markDirty();
      }
      setSelectedEdgeId(null);
    } catch (err) {
      showError(String(err));
    }
  }, [mapId, nodes, edges, setNodes, setEdges, pushHistory, queryClient, edgeDefaults, clearDirty, markDirty, showError]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const tag = (e.target as HTMLElement | null)?.tagName?.toLowerCase();
      if (tag === "input" || tag === "textarea" || tag === "select" || (e.target as HTMLElement)?.isContentEditable) {
        return;
      }
      if (e.key === "Escape") {
        closeCtxMenu();
        clearSelection();
        connectClickRef.current = null;
        setToolMode((m) => (m === "connect" ? "select" : m));
        if (displayMenuRef.current?.open) displayMenuRef.current.open = false;
        setFindOpen(false);
        return;
      }
      const mode = toolModeFromKey(e.key);
      if (mode && !e.ctrlKey && !e.metaKey && !e.altKey) {
        e.preventDefault();
        setToolMode(mode);
        connectClickRef.current = null;
        return;
      }
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
        e.preventDefault();
        if (mapId && dirtyRef.current && !saveMut.isPending) saveMut.mutate();
        return;
      }
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z" && !e.shiftKey) {
        e.preventDefault();
        undo();
        return;
      }
      if ((e.ctrlKey || e.metaKey) && (e.key.toLowerCase() === "y" || (e.key.toLowerCase() === "z" && e.shiftKey))) {
        e.preventDefault();
        redo();
        return;
      }
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
        e.preventDefault();
        selectAllNodes();
        return;
      }
      if (e.key === "Delete" || e.key === "Backspace") {
        if (nodes.some((n) => n.selected) || edges.some((ed) => ed.selected)) {
          e.preventDefault();
          removeSelected();
        }
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [closeCtxMenu, clearSelection, undo, redo, selectAllNodes, removeSelected, nodes, edges, mapId, saveMut]);

  useEffect(() => {
    if (!ctxMenu) return;
    const onScroll = () => closeCtxMenu();
    const onPointerDown = (e: MouseEvent) => {
      const el = e.target as HTMLElement | null;
      if (el?.closest?.(".topo-ctx")) return;
      closeCtxMenu();
    };
    window.addEventListener("scroll", onScroll, true);
    window.addEventListener("mousedown", onPointerDown, true);
    return () => {
      window.removeEventListener("scroll", onScroll, true);
      window.removeEventListener("mousedown", onPointerDown, true);
    };
  }, [ctxMenu, closeCtxMenu]);

  const removeNodeById = async (nodeId: string) => {
    if (!mapId) return;
    pushHistory();
    closeCtxMenu();
    try {
      if (dirtyRef.current) {
        await patchTopologyPositions(mapId, flowToPositions(nodes));
        clearDirty();
      }
      const localPos = new Map(nodes.map((n) => [n.id, n.position]));
      const graph = await removeTopologyViewNodes(mapId, [nodeId]);
      queryClient.setQueryData(queryKeys.topologyGraph(mapId), graph);
      appliedMapIdRef.current = mapId;
      historyLockRef.current = true;
      applyViewGraph(graph, edgeDefaults, setNodes, setEdges, localPos);
      historyLockRef.current = false;
      clearDirty();
    } catch (err) {
      showError(String(err));
    }
  };

  const removeEdgeById = (edgeId: string) => {
    pushHistory();
    markDirty();
    const display = displayEdges.find((e) => e.id === edgeId);
    const ids = new Set(physicalIdsForDisplayEdge(display, edges));
    if (!ids.size) ids.add(edgeId);
    setEdges((es) => es.filter((e) => !ids.has(e.id)));
    setSelectedEdgeId((cur) => (cur && (ids.has(cur) || cur === edgeId) ? null : cur));
    closeCtxMenu();
  };

  const openNeInventory = (opts: {
    neId?: string;
    create?: boolean;
    name?: string;
    ip_address?: string;
    vendor?: string;
  }) => {
    const q = new URLSearchParams();
    if (opts.neId) {
      q.set("ne_id", opts.neId);
    } else if (opts.create) {
      q.set("create", "1");
      if (opts.name) q.set("name", opts.name);
      if (opts.ip_address) q.set("ip_address", opts.ip_address);
      if (opts.vendor) q.set("vendor", opts.vendor);
    }
    const qs = q.toString();
    openOrFocusModule({
      moduleId: "ne",
      path: qs ? `/ne?${qs}` : "/ne",
    });
  };

  const openWebcrtFor = (node: Node<NeNodeData> | null) => {
    closeCtxMenu();
    if (!node) return;
    const managedId = String(node.data.managed_ne_id || "").trim();
    const umeId = String(node.data.ume_ne_id || "").trim();

    if (managedId) {
      void (async () => {
        try {
          const ne = await fetchManagedNeById(managedId);
          const src = String(ne.source || "").trim().toLowerCase();
          const hasIp = Boolean(String(ne.ip_address || "").trim());
          // Ready inventory hosts: reuse stored credentials (incl. hop/proxy).
          // LLDP placeholders / incomplete rows → full NE edit form (vendor, hop, etc.).
          const needsSetup = !hasIp || src === "lldp";
          if (!needsSetup) {
            openOrFocusModule({
              moduleId: "webcrt",
              path: `/webcrt?ne_id=${encodeURIComponent(managedId)}`,
            });
            return;
          }
          showOk(t("topology.completeNeFirst"));
          openNeInventory({ neId: managedId });
        } catch (err) {
          showError(String(err));
        }
      })();
      return;
    }

    if (umeId) {
      openOrFocusModule({
        moduleId: "webcrt",
        path: `/webcrt?ne_id=${encodeURIComponent(umeId)}&source=ume`,
      });
      return;
    }

    // No inventory link — open NE create with topology hint fields.
    showOk(t("topology.completeNeFirst"));
    openNeInventory({
      create: true,
      name: String(node.data.label || "").trim(),
      ip_address: String(node.data.ne_ip || "").trim(),
      vendor: String(node.data.vendor || "").trim(),
    });
  };

  const openNeFor = (node: Node<NeNodeData> | null) => {
    closeCtxMenu();
    const managedId = String(node?.data.managed_ne_id || "").trim();
    const umeId = String(node?.data.ume_ne_id || "").trim();
    if (managedId) {
      openNeInventory({ neId: managedId });
      return;
    }
    if (umeId) {
      openOrFocusModule({
        moduleId: "ume",
        path: "/ume",
      });
      return;
    }
    showError(t("topology.noNeLink"));
  };

  const openPortTrafficForEdge = (edge: Edge | null) => {
    closeCtxMenu();
    if (!edge) {
      showError(t("topology.noNeLink"));
      return;
    }
    const srcNode = nodes.find((n) => n.id === edge.source);
    const data = (edge.data || {}) as EdgeStyleData;
    const ifname = String(data.source_port || "").trim();
    const managedId = String(srcNode?.data.managed_ne_id || "").trim();
    const umeId = String(srcNode?.data.ume_ne_id || "").trim();
    if (managedId) {
      const q = new URLSearchParams({ ne_id: managedId, source: "managed" });
      if (ifname) q.set("ifname", ifname);
      openOrFocusModule({
        moduleId: "network",
        path: `/network/tasks/port-traffic?${q.toString()}`,
      });
      return;
    }
    if (umeId) {
      const q = new URLSearchParams({ ne_id: umeId, source: "ume" });
      if (ifname) q.set("ifname", ifname);
      openOrFocusModule({
        moduleId: "network",
        path: `/network/tasks/port-traffic?${q.toString()}`,
      });
      return;
    }
    showError(t("topology.noNeLink"));
  };

  const discoverOneFor = (node: Node<NeNodeData> | null) => {
    closeCtxMenu();
    const id = String(node?.data.managed_ne_id || node?.data.ume_ne_id || "").trim();
    if (!id) {
      showError(t("topology.discoverOneNeedNe"));
      return;
    }
    void runDiscover([id]);
  };

  const placeCtxMenu = (clientX: number, clientY: number, size?: { w?: number; h?: number }): { x: number; y: number } => {
    const pad = 8;
    const w = size?.w ?? 200;
    const h = size?.h ?? 240;
    const x = Math.min(clientX, window.innerWidth - w - pad);
    const y = Math.min(clientY, window.innerHeight - h - pad);
    return { x: Math.max(pad, x), y: Math.max(pad, y) };
  };

  const focusNode = useCallback(
    (nodeId: string, additive: boolean) => {
      setSelectedEdgeId(null);
      setNodes((ns) =>
        ns.map((n) => {
          if (additive) {
            if (n.id === nodeId) return { ...n, selected: !n.selected };
            return n;
          }
          return { ...n, selected: n.id === nodeId };
        }),
      );
      setEdges((es) => es.map((e) => ({ ...e, selected: false })));
    },
    [setNodes, setEdges],
  );

  const locateNode = useCallback(
    (nodeId: string) => {
      focusNode(nodeId, false);
      setSearchHitIds([nodeId]);
      if (searchHitTimerRef.current) window.clearTimeout(searchHitTimerRef.current);
      window.setTimeout(() => {
        rfRef.current?.fitView({
          nodes: [{ id: nodeId }],
          padding: 0.45,
          duration: 280,
          includeHiddenNodes: true,
        });
      }, 30);
      searchHitTimerRef.current = window.setTimeout(() => {
        setSearchHitIds((cur) => (cur.length === 1 && cur[0] === nodeId ? [] : cur));
        searchHitTimerRef.current = null;
      }, 2200);
    },
    [focusNode],
  );

  const jumpToTreeSearchHit = useCallback(
    (
      hit: FabricNodeSearchHit,
      view?: NonNullable<FabricNodeSearchHit["views"]>[number],
    ) => {
      const views = hit.views || [];
      const onCurrent =
        Boolean(mapId) &&
        (views.some((v) => v.view_id === mapId) || nodes.some((n) => n.id === hit.id));
      if (onCurrent && mapId && (!view || view.view_id === mapId)) {
        if (nodes.some((n) => n.id === hit.id)) {
          locateNode(hit.id);
        } else {
          setPendingHighlightNe(hit.id);
        }
        setTreeNeQuery("");
        setDebouncedTreeNeQuery("");
        setTreeSearchOpen(false);
        return;
      }
      const target =
        view ||
        views.find((v) => String(v.kind) === "physical") ||
        views[0] ||
        null;
      if (!target) {
        showError(t("topology.treeSearchNotOnMap"));
        return;
      }
      if (!confirmDiscardIfDirty()) return;
      const regionId = target.folder_id || findViewInRegion(regions, target.view_id)?.region.id;
      if (regionId) {
        setSelectedFolderId(regionId);
        setExpandedIds((p) => ({ ...p, [regionId]: true }));
      }
      setMapId(target.view_id);
      setPendingHighlightNe(hit.id);
      setTreeNeQuery("");
      setDebouncedTreeNeQuery("");
      setTreeSearchOpen(false);
    },
    [
      mapId,
      nodes,
      locateNode,
      showError,
      t,
      confirmDiscardIfDirty,
      regions,
    ],
  );

  useEffect(() => {
    if (!treeSearchOpen) return;
    const onDoc = (e: MouseEvent) => {
      const el = treeSearchRef.current;
      if (el && e.target instanceof Element && !el.contains(e.target)) {
        setTreeSearchOpen(false);
      }
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [treeSearchOpen]);

  useEffect(() => {
    if (!pendingHighlightNe || !canvasMode || !nodes.length) return;
    const nodeId = pendingHighlightNe;
    if (!nodes.some((n) => n.id === nodeId)) return;
    setPendingHighlightNe("");
    window.setTimeout(() => locateNode(nodeId), 80);
  }, [pendingHighlightNe, canvasMode, nodes, locateNode]);

  const canvasHits = useMemo(() => {
    const q = canvasQuery.trim();
    if (!q) return [];
    return nodes.filter((n) => nodeMatchesQuery(n, q));
  }, [canvasQuery, nodes]);

  useEffect(() => {
    const q = canvasQuery.trim();
    if (!q) {
      setFindActiveIdx(0);
      setFindOpen(false);
      if (findJustLocatedRef.current) {
        findJustLocatedRef.current = false;
        return;
      }
      setSearchHitIds([]);
      return;
    }
    setFindOpen(true);
    setSearchHitIds(canvasHits.map((n) => n.id));
    setFindActiveIdx((idx) => (canvasHits.length ? Math.min(idx, canvasHits.length - 1) : 0));
  }, [canvasQuery, canvasHits]);

  const findOnCanvas = useCallback(
    (nodeId?: string) => {
      const q = canvasQuery.trim();
      if (!q) return;
      if (!canvasHits.length) {
        showError(t("topology.findNoMatch"));
        return;
      }
      const id =
        nodeId ||
        canvasHits[Math.max(0, Math.min(findActiveIdx, canvasHits.length - 1))]?.id ||
        canvasHits[0].id;
      findJustLocatedRef.current = true;
      setFindOpen(false);
      setCanvasQuery("");
      setFindActiveIdx(0);
      locateNode(id);
    },
    [canvasQuery, canvasHits, findActiveIdx, locateNode, showError, t],
  );

  useEffect(() => {
    const onDoc = (e: MouseEvent) => {
      const target = e.target as HTMLElement | null;
      if (findBoxRef.current && target && !findBoxRef.current.contains(target)) {
        setFindOpen(false);
      }
      const details = displayMenuRef.current;
      if (details?.open && target && !details.contains(target)) {
        details.open = false;
      }
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const locatePaletteItem = useCallback(
    (item: PaletteItem) => {
      const node = nodes.find((n) =>
        item.source === "managed"
          ? n.data.managed_ne_id === item.managed_ne_id
          : n.data.ume_ne_id === item.ume_ne_id,
      );
      if (!node) {
        showError(t("topology.findNoMatch"));
        return;
      }
      locateNode(node.id);
    },
    [nodes, locateNode, showError, t],
  );

  const focusEdge = useCallback(
    (edgeId: string) => {
      setSelectedEdgeId(edgeId);
      setNodes((ns) => ns.map((n) => ({ ...n, selected: false })));
      // Selection is applied in displayEdges; keep store flags clear.
      setEdges((es) => es.map((e) => ({ ...e, selected: false })));
    },
    [setNodes, setEdges],
  );

  const onNodeClick = useCallback(
    (e: React.MouseEvent, node: Node<NeNodeData>) => {
      setCtxMenu(null);
      if (toolMode === "connect") {
        const prev = connectClickRef.current;
        if (!prev) {
          connectClickRef.current = node.id;
          focusNode(node.id, false);
          return;
        }
        if (prev !== node.id) {
          onConnect({ source: prev, target: node.id, sourceHandle: null, targetHandle: null });
        }
        connectClickRef.current = null;
        return;
      }
      focusNode(node.id, e.shiftKey || e.metaKey || e.ctrlKey);
    },
    [toolMode, focusNode, onConnect],
  );

  const outsidePeers = graphQuery.data?.outside_peers || [];
  const activeLeafName = useMemo(() => {
    if (!mapId) return "";
    if (activeView?.name) return activeView.name;
    return graphQuery.data?.view?.name || "";
  }, [mapId, activeView, graphQuery.data?.view?.name]);

  const titleText = useMemo(() => {
    if (canvasMode) return activeLeafName || t("topology.selectMap");
    if (activeRegion) return regionDisplayName(activeRegion);
    return t("topology.rootName");
  }, [canvasMode, activeLeafName, activeRegion, t]);
  const onCanvasManagedIds = useMemo(
    () => new Set(nodes.map((n) => n.data.managed_ne_id).filter(Boolean)),
    [nodes],
  );
  const onCanvasUmeIds = useMemo(
    () => new Set(nodes.map((n) => n.data.ume_ne_id).filter(Boolean)),
    [nodes],
  );
  const palette = useMemo((): PaletteItem[] => {
    if (paletteSource === "ume") {
      return (umeQuery.data?.items || []).map((ne) => {
        const name = (ne.host_name || ne.ne_name || ne.user_label || ne.ip_address || ne.ne_id).trim();
        return {
          key: `ume:${ne.ne_id}`,
          source: "ume" as const,
          managed_ne_id: "",
          ume_ne_id: ne.ne_id,
          name,
          ip: ne.ip_address || "",
          vendor: "ZTE",
          meta: `${ne.ip_address || "-"}${SEP}${ne.ne_type || "UME"}`,
          connect_status: ne.connection_status || "",
        };
      });
    }
    return (neQuery.data?.items || []).map((ne) => ({
      key: `managed:${ne.id}`,
      source: "managed" as const,
      managed_ne_id: ne.id,
      ume_ne_id: "",
      name: ne.name || ne.ip_address,
      ip: ne.ip_address,
      vendor: ne.vendor,
      meta: `${ne.ip_address}${SEP}${ne.vendor}`,
      connect_status: ne.connect_status,
    }));
  }, [paletteSource, neQuery.data, umeQuery.data]);
  const paletteVisible = useMemo(() => {
    const tokens = keyword
      .trim()
      .toLowerCase()
      .split(/\s+/)
      .filter(Boolean);
    let list = palette;
    if (tokens.length) {
      list = list.filter((item) => {
        const bits = [item.name, item.ip, item.vendor, item.managed_ne_id, item.ume_ne_id, item.meta];
        return tokens.every((tok) => bits.some((b) => fuzzyIncludes(String(b || ""), tok)));
      });
    }
    return list.filter((item) =>
      item.source === "managed"
        ? !onCanvasManagedIds.has(item.managed_ne_id)
        : !onCanvasUmeIds.has(item.ume_ne_id),
    );
  }, [palette, onCanvasManagedIds, onCanvasUmeIds, keyword]);
  const paletteLoading =
    (paletteSource === "managed" && neQuery.isLoading) ||
    (paletteSource === "ume" && umeQuery.isLoading);

  return (
    <div className={`topo-page${sidebarCollapsed ? " is-sidebar-collapsed" : ""}`}>
      <aside className="topo-sidebar" aria-label={t("topology.maps")}>
        {sidebarCollapsed ? (
          <div className="topo-sidebar__rail-wrap">
            <button
              type="button"
              className="topo-sidebar__rail"
              title={t("topology.expandSidebar")}
              aria-label={t("topology.expandSidebar")}
              onClick={() => setSidebarCollapsed(false)}
            >
              <span className="topo-sidebar__rail-icon" aria-hidden="true">
                <SidebarFoldIcon expand />
              </span>
            </button>
            <button
              type="button"
              className={`topo-sidebar__rail topo-sidebar__rail--live${liveSync ? " is-on" : ""}`}
              aria-pressed={liveSync}
              title={t("topology.liveSyncHint")}
              aria-label={liveSync ? t("topology.liveSyncOn") : t("topology.liveSync")}
              onClick={() => setLiveSync((v) => !v)}
            >
              <span className="topo-sidebar__rail-live-dot" aria-hidden="true" />
            </button>
          </div>
        ) : (
          <>
            <div className="topo-sidebar__section">
              <div className="topo-tree-search" ref={treeSearchRef}>
                <div className="topo-tree-search__bar">
                  <input
                    className="input"
                    type="search"
                    value={treeNeQuery}
                    placeholder={t("topology.treeSearchPh")}
                    aria-label={t("topology.treeSearch")}
                    onChange={(e) => {
                      setTreeNeQuery(e.target.value);
                      setTreeSearchOpen(true);
                    }}
                    onFocus={() => setTreeSearchOpen(true)}
                  />
                  <button
                    type="button"
                    className="topo-sidebar__icon-btn"
                    onClick={promptNewRegion}
                    disabled={createRegionMut.isPending || !treeRoot}
                    title={t("topology.newRegion")}
                    aria-label={t("topology.newRegion")}
                  >
                    <PlusIcon />
                  </button>
                  <button
                    type="button"
                    className="topo-sidebar__icon-btn"
                    title={t("topology.collapseSidebar")}
                    aria-label={t("topology.collapseSidebar")}
                    onClick={() => setSidebarCollapsed(true)}
                  >
                    <SidebarFoldIcon />
                  </button>
                </div>
                <div className="topo-sidebar__live">
                  <button
                    type="button"
                    className={`btn btn--sm${liveSync ? "" : " btn--ghost"}`}
                    aria-pressed={liveSync}
                    title={t("topology.liveSyncHint")}
                    onClick={() => setLiveSync((v) => !v)}
                  >
                    {liveSync ? t("topology.liveSyncOn") : t("topology.liveSync")}
                  </button>
                </div>
                {treeSearchOpen && treeNeQuery.trim() ? (
                  <div className="topo-tree-search__panel" role="listbox">
                    {debouncedTreeNeQuery.length < 1 || treeNeSearchQuery.isFetching ? (
                      <p className="topo-tree-search__hint muted">…</p>
                    ) : !(treeNeSearchQuery.data?.items || []).length ? (
                      <p className="topo-tree-search__hint muted">{t("topology.treeSearchEmpty")}</p>
                    ) : (
                      (treeNeSearchQuery.data?.items || []).map((hit) => {
                        const views = hit.views || [];
                        const title = hit.name || hit.ip || hit.id.slice(0, 8);
                        return (
                          <div key={hit.id} className="topo-tree-search__item">
                            <button
                              type="button"
                              className="topo-tree-search__ne"
                              onClick={() => jumpToTreeSearchHit(hit)}
                              title={
                                views.length
                                  ? t("topology.locateOnCanvas")
                                  : t("topology.treeSearchNotOnMap")
                              }
                            >
                              <span className="topo-tree-search__name">{title}</span>
                              {hit.ip ? <span className="topo-tree-search__ip muted">{hit.ip}</span> : null}
                              {!views.length ? (
                                <span className="topo-tree-search__meta muted">
                                  {t("topology.treeSearchNoViews")}
                                </span>
                              ) : (
                                <span className="topo-tree-search__meta muted">
                                  {t("topology.treeSearchViewCount").replace(
                                    "{{count}}",
                                    String(views.length),
                                  )}
                                </span>
                              )}
                            </button>
                            {views.length > 1 ? (
                              <div className="topo-tree-search__views">
                                {views.map((v) => (
                                  <button
                                    key={`${hit.id}-${v.view_id}`}
                                    type="button"
                                    className="topo-tree-search__view"
                                    onClick={() => jumpToTreeSearchHit(hit, v)}
                                    title={`${v.folder_name ? `${v.folder_name} / ` : ""}${v.view_name}`}
                                  >
                                    {v.view_name || v.view_id.slice(0, 8)}
                                  </button>
                                ))}
                              </div>
                            ) : null}
                          </div>
                        );
                      })
                    )}
                    {(treeNeSearchQuery.data?.total || 0) > 30 ? (
                      <p className="topo-tree-search__hint muted">
                        {t("topology.treeSearchTruncated").replace(
                          "{{total}}",
                          String(treeNeSearchQuery.data?.total || 0),
                        )}
                      </p>
                    ) : null}
                  </div>
                ) : null}
              </div>
              {!treeRoot ? (
                <p className="panel__hint">{treeQuery.isLoading ? t("topology.treeLoading") : t("topology.emptyMaps")}</p>
              ) : regions.length === 0 ? (
                <p className="panel__hint">{t("topology.emptyMaps")}</p>
              ) : (
                <ul className="topo-map-list topo-region-list">
                  {regions.map((region) => {
                    const open = expandedIds[region.id] ?? false;
                    const regionActive = selectedFolderId === region.id && !mapId;
                    const regionBranch = selectedFolderId === region.id && Boolean(mapId);
                    const regionHot = hotBrowseKey === `region:${region.id}`;
                    return (
                      <li
                        key={region.id}
                        className={`topo-region-list__block${
                          regionActive ? " is-active" : regionBranch ? " is-branch-active" : ""
                        }${regionHot ? " is-hot" : ""}`}
                      >
                        <div
                          className="topo-map-list__row topo-region-list__row"
                          onMouseEnter={() => setHotBrowseKey(`region:${region.id}`)}
                          onMouseLeave={() =>
                            setHotBrowseKey((k) => (k === `region:${region.id}` ? "" : k))
                          }
                        >
                          <button
                            type="button"
                            className="topo-map-list__item"
                            onClick={() => {
                              if (!confirmDiscardIfDirty()) return;
                              const nextOpen = !(expandedIds[region.id] ?? false);
                              setMapId("");
                              setSelectedFolderId(region.id);
                              setExpandedIds((p) => ({ ...p, [region.id]: nextOpen }));
                              clearDirty();
                              setNodes([]);
                              setEdges([]);
                            }}
                            title={
                              open
                                ? t("topology.collapseRegion")
                                : t("topology.expandRegion")
                            }
                          >
                            <span className="topo-map-list__name">
                              <span className="topo-region-list__glyph" aria-hidden="true">
                                <RegionGlyph size={14} />
                              </span>
                              <span className="topo-map-list__title">
                                {regionDisplayName(region)}
                              </span>
                              <span className="topo-map-list__count">
                                {t("topology.regionNodeHint").replace(
                                  "{{count}}",
                                  String(region.views.length),
                                )}
                              </span>
                            </span>
                          </button>
                          <div className="topo-map-list__actions">
                            <button
                              type="button"
                              className="topo-map-list__icon"
                              title={t("topology.renameRegion")}
                              aria-label={t("topology.renameRegion")}
                              disabled={!!region.is_system || renameRegionMut.isPending}
                              onClick={() => promptRenameRegion(region.id, region.name)}
                            >
                              <PencilIcon />
                            </button>
                            <button
                              type="button"
                              className="topo-map-list__icon"
                              title={t("topology.deleteRegion")}
                              aria-label={t("topology.deleteRegion")}
                              disabled={!!region.is_system}
                              onClick={() => {
                                const msg = t("topology.deleteRegionConfirm").replace(
                                  "{{name}}",
                                  region.name,
                                );
                                if (window.confirm(msg)) deleteFolderMut.mutate(region.id);
                              }}
                            >
                              <CloseIcon />
                            </button>
                          </div>
                        </div>
                        {open ? (
                          <ul className="topo-map-list topo-region-list__maps">
                            {(region.views || []).map((v) => {
                              const isPhysical = String(v.kind) === "physical";
                              const viewHot = hotBrowseKey === `view:${v.id}`;
                              return (
                                <li
                                  key={v.id}
                                  className={`${mapId === v.id ? "is-active" : ""}${
                                    viewHot ? " is-hot" : ""
                                  }`}
                                >
                                  <div
                                    className="topo-map-list__row"
                                    onMouseEnter={() => setHotBrowseKey(`view:${v.id}`)}
                                    onMouseLeave={() =>
                                      setHotBrowseKey((k) => (k === `view:${v.id}` ? "" : k))
                                    }
                                  >
                                    <button
                                      type="button"
                                      className="topo-map-list__item"
                                      onClick={() => goCanvas(v.id, region.id)}
                                      onDoubleClick={() => promptRenameMap(v.id, v.name)}
                                      title={t("topology.renameHint")}
                                    >
                                      <span className="topo-map-list__name">
                                        <span
                                          className={`topo-region-list__glyph topo-dir__icon--${
                                            isPhysical ? "core" : "aggregation"
                                          }`}
                                          aria-hidden="true"
                                        >
                                          <LayerGlyph
                                            role={isPhysical ? "core" : "aggregation"}
                                            size={13}
                                          />
                                        </span>
                                        <span className="topo-map-list__title">
                                          {v.name}
                                          {mapId === v.id && dirty ? " *" : ""}
                                        </span>
                                        <span className="topo-map-list__count">
                                          {v.node_count || 0}N
                                        </span>
                                      </span>
                                    </button>
                                    <div className="topo-map-list__actions">
                                      <button
                                        type="button"
                                        className="topo-map-list__icon"
                                        title={t("topology.rename")}
                                        aria-label={t("topology.rename")}
                                        disabled={renameMapMut.isPending}
                                        onClick={() => promptRenameMap(v.id, v.name)}
                                      >
                                        <PencilIcon />
                                      </button>
                                      <button
                                        type="button"
                                        className="topo-map-list__icon"
                                        title={t("topology.deleteMap")}
                                        aria-label={t("topology.deleteMap")}
                                        disabled={isPhysical}
                                        onClick={() => {
                                          const msg = t("topology.deleteMapConfirm").replace(
                                            "{{name}}",
                                            v.name,
                                          );
                                          if (window.confirm(msg)) deleteMapMut.mutate(v.id);
                                        }}
                                      >
                                        <CloseIcon />
                                      </button>
                                    </div>
                                  </div>
                                </li>
                              );
                            })}
                          </ul>
                        ) : null}
                      </li>
                    );
                  })}
                </ul>
              )}
              {mapId && outsidePeers.length > 0 && (
                <p className="panel__hint">
                  {t("topology.outsidePeers").replace("{{count}}", String(outsidePeers.length))}
                </p>
              )}
            </div>
          </>
        )}
      </aside>

      <main className="topo-main">
        {canvasMode ? (
        <div className="topo-toolbar">
          <div className="topo-toolbar__row">
            <div className="topo-toolbar__title">
              <div className="topo-breadcrumb">
                <button
                  type="button"
                  className="topo-breadcrumb__link"
                  onClick={() => goRoot()}
                >
                  {t("topology.rootName")}
                </button>
                {activeRegion ? (
                  <>
                    <span className="topo-breadcrumb__sep">/</span>
                    <button
                      type="button"
                      className="topo-breadcrumb__link"
                      onClick={() => goRegion(activeRegion.id)}
                    >
                      {regionDisplayName(activeRegion)}
                    </button>
                  </>
                ) : null}
                {activeView ? (
                  <>
                    <span className="topo-breadcrumb__sep">/</span>
                    <span className="topo-breadcrumb__current">
                      {activeView.name}
                      {dirty ? " *" : ""}
                    </span>
                  </>
                ) : null}
              </div>
              {selectedNodes.length > 0 || selectedEdgeId ? (
                <span className="topo-toolbar__meta">
                  {selectedNodes.length > 0
                    ? t("topology.selectedCount").replace("{{count}}", String(selectedNodes.length))
                    : t("topology.selectedEdge")}
                </span>
              ) : null}
              <HelpHint text={t("topology.canvasHint")} ariaLabel={t("common.help")} />
            </div>
            <div className="topo-toolbar__actions">
              <button
                type="button"
                className="btn btn--sm"
                onClick={() => {
                  setKeyword("");
                  setPaletteSelectedKeys([]);
                  setAddNeOpen(true);
                }}
              >
                {t("topology.addNe")}
              </button>
              <button type="button" className="btn btn--sm btn--ghost" onClick={() => goBackBrowse()}>
                {t("topology.backUp")}
              </button>
              <button
                type="button"
                className="btn btn--sm btn--ghost"
                disabled={!canUndo}
                onClick={undo}
                title="Ctrl+Z"
              >
                {t("topology.undo")}
              </button>
              <button
                type="button"
                className="btn btn--sm btn--ghost"
                disabled={!canRedo}
                onClick={redo}
                title="Ctrl+Y"
              >
                {t("topology.redo")}
              </button>
              <button
                type="button"
                className={`btn btn--sm${dirty ? "" : " btn--ghost"}`}
                disabled={saveMut.isPending || !dirty}
                onClick={() => saveMut.mutate()}
                title="Ctrl+S"
              >
                {saveMut.isPending
                  ? t("topology.saving")
                  : dirty
                    ? t("topology.saveDirty")
                    : t("topology.save")}
              </button>
              <button
                type="button"
                className="btn btn--sm btn--ghost"
                disabled={nodes.length === 0}
                onClick={() => rfRef.current?.fitView({ ...FIT_VIEW_OPTS })}
              >
                {t("topology.fit")}
              </button>
            </div>
          </div>
          <div className="topo-toolbar__row topo-toolbar__row--tools">
            <div className="topo-toolbar__panel" aria-label={t("topology.toolModes")}>
              <div className="topo-tools" role="toolbar" aria-label={t("topology.toolModes")}>
                {(
                  [
                    ["select", t("topology.toolSelect"), "V"],
                    ["pan", t("topology.toolPan"), "H"],
                    ["connect", t("topology.toolConnect"), "C"],
                  ] as const
                ).map(([mode, label, key]) => (
                  <button
                    key={mode}
                    type="button"
                    className={`topo-tools__btn${toolMode === mode ? " is-active" : ""}`}
                    title={`${label} (${key})`}
                    aria-pressed={toolMode === mode}
                    onClick={() => {
                      setToolMode(mode);
                      connectClickRef.current = null;
                    }}
                  >
                    <span className="topo-tools__label">{label}</span>
                    <kbd className="topo-tools__key">{key}</kbd>
                  </button>
                ))}
              </div>
              <details className="topo-toolbar__display" ref={displayMenuRef}>
                <summary>{t("topology.display")}</summary>
                <div className="topo-display-toggles" role="group" aria-label={t("topology.display")}>
                  <label className="topo-display-toggles__item">
                    <input type="checkbox" checked={hideIp} onChange={(e) => setHideIp(e.target.checked)} />
                    {t("topology.hideIp")}
                  </label>
                  <label className="topo-display-toggles__item">
                    <input
                      type="checkbox"
                      checked={hideVendor}
                      onChange={(e) => setHideVendor(e.target.checked)}
                    />
                    {t("topology.hideVendor")}
                  </label>
                    <label className="topo-display-toggles__item">
                      <input
                        type="checkbox"
                        checked={hidePorts}
                        onChange={(e) => setHidePorts(e.target.checked)}
                      />
                      {t("topology.hidePorts")}
                    </label>
                    <label className="topo-display-toggles__item">
                      <input
                        type="checkbox"
                        checked={expandPhysicalLinks}
                        onChange={(e) => setExpandPhysicalLinks(e.target.checked)}
                      />
                      {t("topology.expandPhysicalLinks")}
                    </label>
                    <label className="topo-display-toggles__item">
                      <input
                        type="checkbox"
                        checked={scaleBundleWidth}
                        disabled={expandPhysicalLinks}
                        onChange={(e) => {
                          const next = e.target.checked;
                          setScaleBundleWidth(next);
                          persistBoolFlag(SCALE_BUNDLE_WIDTH_KEY, next);
                        }}
                      />
                      {t("topology.scaleBundleWidth")}
                    </label>
                  <label className="topo-display-toggles__item">
                    <input
                      type="checkbox"
                      checked={edgeFlow}
                      onChange={(e) => setEdgeFlow(e.target.checked)}
                    />
                    {t("topology.edgeFlow")}
                  </label>
                  <label className="topo-display-toggles__item">
                    <input
                      type="checkbox"
                      checked={snapToGrid}
                      onChange={(e) => setSnapToGrid(e.target.checked)}
                    />
                    {t("topology.snapGrid")}
                  </label>
                  <label className="topo-display-toggles__item">
                    <input
                      type="checkbox"
                      checked={autoLayoutAfterDiscover}
                      onChange={(e) => {
                        const next = e.target.checked;
                        setAutoLayoutAfterDiscover(next);
                        persistAutoLayoutAfterDiscover(next);
                      }}
                    />
                    {t("topology.autoLayoutDiscover")}
                  </label>
                  <label className="topo-display-toggles__item">
                    <input
                      type="checkbox"
                      checked={discoverAutoAddUnmatched}
                      onChange={(e) => {
                        const next = e.target.checked;
                        setDiscoverAutoAddUnmatched(next);
                        persistBoolFlag(DISCOVER_AUTO_ADD_KEY, next);
                      }}
                    />
                    {t("topology.discoverAutoAddUnmatched")}
                  </label>
                  <label className="topo-display-toggles__item">
                    <input
                      type="checkbox"
                      checked={discoverProjectNeighbors}
                      onChange={(e) => {
                        const next = e.target.checked;
                        setDiscoverProjectNeighbors(next);
                        persistBoolFlag(DISCOVER_PROJECT_NEIGHBORS_KEY, next);
                      }}
                    />
                    {t("topology.discoverProjectNeighbors")}
                  </label>
                  <div className="topo-display-defaults topo-display-defaults--canvas-bg">
                    <div className="topo-display-defaults__head">
                      <strong>{t("topology.canvasBg")}</strong>
                      <button
                        type="button"
                        className="btn btn--sm btn--ghost"
                        onClick={() => {
                          setCanvasBg(DEFAULT_CANVAS_BG);
                          persistCanvasBg(DEFAULT_CANVAS_BG);
                        }}
                      >
                        {t("topology.canvasBgReset")}
                      </button>
                    </div>
                    <div className="topo-display-defaults__row">
                      <span className="topo-display-defaults__name">{t("topology.canvasBgColor")}</span>
                      <input
                        type="color"
                        value={canvasBg}
                        title={t("topology.canvasBgColor")}
                        onChange={(e) => {
                          const next = e.target.value;
                          setCanvasBg(next);
                          persistCanvasBg(next);
                        }}
                      />
                      <input
                        className="topo-toolbar__select topo-canvas-bg-hex"
                        value={canvasBg}
                        spellCheck={false}
                        aria-label={t("topology.canvasBgColor")}
                        onChange={(e) => {
                          const raw = e.target.value.trim();
                          if (!/^#[0-9a-fA-F]{0,6}$/.test(raw)) return;
                          setCanvasBg(raw);
                          if (isHexColor(raw)) persistCanvasBg(raw.toLowerCase());
                        }}
                        onBlur={() => {
                          if (!isHexColor(canvasBg)) {
                            setCanvasBg(loadCanvasBg());
                          }
                        }}
                      />
                    </div>
                  </div>
                  <div className="topo-display-defaults topo-display-defaults--canvas-bg">
                    <div className="topo-display-defaults__head">
                      <strong>{t("topology.textColors")}</strong>
                      <button
                        type="button"
                        className="btn btn--sm btn--ghost"
                        onClick={() => {
                          setLabelColors({ ...DEFAULT_LABEL_COLORS });
                          persistLabelColors({ ...DEFAULT_LABEL_COLORS });
                        }}
                      >
                        {t("topology.textColorsReset")}
                      </button>
                    </div>
                    {(
                      [
                        ["name", t("topology.labelColor")],
                        ["edgeLabel", t("topology.edgeLabelColor")],
                      ] as const
                    ).map(([key, label]) => (
                      <div key={key} className="topo-display-defaults__row">
                        <span className="topo-display-defaults__name">{label}</span>
                        <input
                          type="color"
                          value={labelColors[key]}
                          title={label}
                          onChange={(e) => {
                            const next = { ...labelColors, [key]: e.target.value.toLowerCase() };
                            setLabelColors(next);
                            persistLabelColors(next);
                          }}
                        />
                        <input
                          className="topo-toolbar__select topo-canvas-bg-hex"
                          value={labelColors[key]}
                          spellCheck={false}
                          aria-label={label}
                          onChange={(e) => {
                            const raw = e.target.value.trim();
                            if (!/^#[0-9a-fA-F]{0,6}$/.test(raw)) return;
                            const next = { ...labelColors, [key]: raw };
                            setLabelColors(next);
                            if (isHexColor(raw)) persistLabelColors({ ...next, [key]: raw.toLowerCase() });
                          }}
                          onBlur={() => {
                            if (!isHexColor(labelColors[key])) {
                              setLabelColors(loadLabelColors());
                            }
                          }}
                        />
                      </div>
                    ))}
                  </div>
                  <div className="topo-display-defaults topo-display-defaults--canvas-bg">
                    <div className="topo-display-defaults__head">
                      <strong>{t("topology.vendorColors")}</strong>
                      <button
                        type="button"
                        className="btn btn--sm btn--ghost"
                        onClick={() => {
                          setVendorColors({ ...DEFAULT_VENDOR_COLORS });
                          persistVendorColors({ ...DEFAULT_VENDOR_COLORS });
                        }}
                      >
                        {t("topology.vendorColorsReset")}
                      </button>
                    </div>
                    {VENDOR_TONE_KEYS.map((key) => {
                      const label = t(`topology.vendorTone.${key}`);
                      return (
                        <div key={key} className="topo-display-defaults__row">
                          <span className="topo-display-defaults__name">{label}</span>
                          <input
                            type="color"
                            value={vendorColors[key]}
                            title={label}
                            onChange={(e) => {
                              const next = { ...vendorColors, [key]: e.target.value.toLowerCase() };
                              setVendorColors(next);
                              persistVendorColors(next);
                            }}
                          />
                          <input
                            className="topo-toolbar__select topo-canvas-bg-hex"
                            value={vendorColors[key]}
                            spellCheck={false}
                            aria-label={label}
                            onChange={(e) => {
                              const raw = e.target.value.trim();
                              if (!/^#[0-9a-fA-F]{0,6}$/.test(raw)) return;
                              const next = { ...vendorColors, [key]: raw };
                              setVendorColors(next);
                              if (isHexColor(raw)) {
                                persistVendorColors({ ...next, [key]: raw.toLowerCase() });
                              }
                            }}
                            onBlur={() => {
                              if (!isHexColor(vendorColors[key])) {
                                setVendorColors(loadVendorColors());
                              }
                            }}
                          />
                        </div>
                      );
                    })}
                  </div>
                  <div className="topo-display-defaults">
                    <div className="topo-display-defaults__head">
                      <strong>{t("topology.edgeDefaults")}</strong>
                      <button type="button" className="btn btn--sm btn--ghost" onClick={resetEdgeDefaults}>
                        {t("topology.edgeDefaultsReset")}
                      </button>
                    </div>
                    {(
                      [
                        ["manual", t("topology.edgeManual")],
                        ["discovered", t("topology.edgeDiscovered")],
                        ["stale", t("topology.edgeStale")],
                      ] as const
                    ).map(([kind, label]) => {
                      const d = edgeDefaults[kind];
                      return (
                        <div key={kind} className="topo-display-defaults__row">
                          <span className="topo-display-defaults__name">{label}</span>
                          <input
                            type="color"
                            value={d.stroke_color}
                            title={t("topology.edgeColor")}
                            onChange={(e) => updateEdgeDefault(kind, { stroke_color: e.target.value })}
                          />
                          <select
                            className="topo-toolbar__select"
                            aria-label={t("topology.edgeLineStyle")}
                            value={d.line_style}
                            onChange={(e) =>
                              updateEdgeDefault(kind, {
                                line_style: e.target.value as EdgeLineStyle,
                              })
                            }
                          >
                            <option value="solid">{t("topology.edgeLineSolid")}</option>
                            <option value="dashed">{t("topology.edgeLineDashed")}</option>
                            <option value="dotted">{t("topology.edgeLineDotted")}</option>
                          </select>
                          <select
                            className="topo-toolbar__select"
                            aria-label={t("topology.edgeWidth")}
                            value={String(d.stroke_width)}
                            onChange={(e) =>
                              updateEdgeDefault(kind, { stroke_width: Number(e.target.value) || 2 })
                            }
                          >
                            {[1, 2, 3, 4, 5, 6, 8].map((w) => (
                              <option key={w} value={w}>
                                {w}px
                              </option>
                            ))}
                          </select>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </details>
            </div>
            <div className="topo-toolbar__group" aria-label={t("topology.layout")}>
              <select
                className="topo-toolbar__select"
                aria-label={t("topology.layout")}
                disabled={!mapId || nodes.length === 0}
                defaultValue=""
                onChange={(e) => {
                  const v = e.target.value as LayoutKind | "selected-tb" | "";
                  e.target.value = "";
                  if (!v) return;
                  if (v === "selected-tb") void applyLayout("hierarchical-tb", { onlySelected: true });
                  else void applyLayout(v);
                }}
              >
                <option value="" disabled>
                  {t("topology.layout")}
                </option>
                <option value="hierarchical-tb">{t("topology.layoutHierarchicalTb")}</option>
                <option value="hierarchical-lr">{t("topology.layoutHierarchicalLr")}</option>
                <option value="force">{t("topology.layoutForce")}</option>
                <option value="grid">{t("topology.layoutGrid")}</option>
                <option value="radial">{t("topology.layoutRadial")}</option>
                <option value="selected-tb">{t("topology.layoutSelected")}</option>
              </select>
              <select
                className="topo-toolbar__select"
                aria-label={t("topology.align")}
                disabled={selectedNodes.length < 2}
                defaultValue=""
                onChange={(e) => {
                  const v = e.target.value as Parameters<typeof alignNodes>[2] | "";
                  e.target.value = "";
                  if (v) applyAlign(v);
                }}
              >
                <option value="" disabled>
                  {t("topology.align")}
                </option>
                <option value="left">{t("topology.alignLeft")}</option>
                <option value="right">{t("topology.alignRight")}</option>
                <option value="top">{t("topology.alignTop")}</option>
                <option value="bottom">{t("topology.alignBottom")}</option>
                <option value="h-center">{t("topology.alignHCenter")}</option>
                <option value="v-center">{t("topology.alignVCenter")}</option>
                <option value="h-distribute">{t("topology.alignHDistribute")}</option>
                <option value="v-distribute">{t("topology.alignVDistribute")}</option>
              </select>
            </div>
            <div
              className="topo-toolbar__group topo-toolbar__group--find"
              aria-label={t("topology.findNode")}
              ref={findBoxRef}
            >
              <input
                className="topo-toolbar__find"
                value={canvasQuery}
                onChange={(e) => setCanvasQuery(e.target.value)}
                onFocus={() => {
                  if (canvasQuery.trim()) setFindOpen(true);
                }}
                onKeyDown={(e) => {
                  if (e.key === "ArrowDown") {
                    e.preventDefault();
                    if (!canvasHits.length) return;
                    setFindOpen(true);
                    setFindActiveIdx((i) => (i + 1) % canvasHits.length);
                    return;
                  }
                  if (e.key === "ArrowUp") {
                    e.preventDefault();
                    if (!canvasHits.length) return;
                    setFindOpen(true);
                    setFindActiveIdx((i) => (i - 1 + canvasHits.length) % canvasHits.length);
                    return;
                  }
                  if (e.key === "Escape") {
                    setFindOpen(false);
                    return;
                  }
                  if (e.key === "Enter") {
                    e.preventDefault();
                    findOnCanvas();
                  }
                }}
                placeholder={t("topology.findNodePh")}
                disabled={!mapId || nodes.length === 0}
                aria-label={t("topology.findNode")}
                aria-autocomplete="list"
                aria-expanded={findOpen}
              />
              {findOpen && canvasQuery.trim() ? (
                <div className="topo-find-suggest" role="listbox">
                  {canvasHits.length === 0 ? (
                    <div className="topo-find-suggest__empty">{t("topology.findNoMatch")}</div>
                  ) : (
                    canvasHits.slice(0, 12).map((n, idx) => (
                      <button
                        key={n.id}
                        type="button"
                        role="option"
                        aria-selected={idx === findActiveIdx}
                        className={`topo-find-suggest__item${idx === findActiveIdx ? " is-active" : ""}`}
                        onMouseEnter={() => setFindActiveIdx(idx)}
                        onClick={() => findOnCanvas(n.id)}
                      >
                        <span className="topo-find-suggest__name">{n.data.label || n.id}</span>
                        <span className="topo-find-suggest__meta">
                          {[n.data.ne_ip, n.data.vendor].filter(Boolean).join(SEP)}
                        </span>
                      </button>
                    ))
                  )}
                  {canvasHits.length > 12 ? (
                    <div className="topo-find-suggest__more">
                      {t("topology.findMore").replace("{{count}}", String(canvasHits.length - 12))}
                    </div>
                  ) : null}
                </div>
              ) : null}
            </div>
          </div>
        </div>
        ) : null}

        {discoverOpen ? (
          <div className="topo-discover">
            <div className="topo-discover__head">
              <strong>{t("topology.discoverReport")}</strong>
              <button
                type="button"
                className="btn btn--sm btn--ghost"
                onClick={() => {
                  if (discovering) {
                                        return;
                  }
                  setDiscoverOpen(false);
                }}
              >
                {discovering ? t("topology.discoverCancel") : t("topology.discoverClose")}
              </button>
            </div>
            {discovering && discoverProgress.total > 0 ? (
              <div className="topo-discover__progress" aria-live="polite">
                <div className="topo-discover__bar">
                  <div className="topo-discover__bar-fill" style={{ width: `${discoverPct}%` }} />
                </div>
                <div className="topo-discover__progress-meta">
                  <span>
                    {t("topology.discoverProgressLive")
                      .replace("{{index}}", String(discoverProgress.index))
                      .replace("{{total}}", String(discoverProgress.total))
                      .replace(
                        "{{name}}",
                        discoverProgress.neName || discoverProgress.neIp || "?",
                      )}
                  </span>
                  <span>{discoverPct}%</span>
                </div>
              </div>
            ) : null}
            {discovering && discoverProgress.total <= 0 ? (
              <p className="panel__hint panel__hint--live">{t("topology.discoverNoTargets")}</p>
            ) : null}
            {!discovering && discoverReport && discoverReport.scanned === 0 ? (
              <p className="panel__hint">{t("topology.discoverNoTargets")}</p>
            ) : null}
            {discoverError ? <p className="topo-discover__error">{discoverError}</p> : null}
            {discoverResults.length > 0 || discoverReport ? (
              <>
                <p className="topo-discover__summary">
                  {t("topology.discoverSummary")
                    .replace("{{scanned}}", String(discoverSummary.scanned))
                    .replace("{{added}}", String(discoverSummary.added))
                    .replace("{{updated}}", String(discoverSummary.updated))
                    .replace("{{stale}}", String(discoverSummary.missing))
                    .replace("{{failed}}", String(discoverSummary.failed))}
                </p>
                <p className="panel__hint">
                  <button
                    type="button"
                    className="btn btn--sm btn--ghost"
                    onClick={() =>
                      openOrFocusModule({
                        moduleId: "network",
                        path: "/network/topology/lldp",
                      })
                    }
                  >
                    {t("topology.discoverGoLldp")}
                  </button>
                </p>
              </>
            ) : null}
          </div>
        ) : null}

        {!canvasMode ? (
          <div className="topo-browser" aria-label={t("topology.browserTitle")}>
            <div className="topo-browser__head">
              <div>
                {activeRegion ? (
                  <div className="topo-breadcrumb">
                    <button
                      type="button"
                      className="topo-breadcrumb__link"
                      onClick={() => goRoot()}
                    >
                      {t("topology.rootName")}
                    </button>
                    <span className="topo-breadcrumb__sep">/</span>
                    <span className="topo-breadcrumb__current">{regionDisplayName(activeRegion)}</span>
                  </div>
                ) : (
                  <strong>{titleText}</strong>
                )}
                <p className="topo-browser__sub">
                  {activeRegion
                    ? t("topology.browserRegionSub").replace(
                        "{{count}}",
                        String(browseEntries.length),
                      )
                    : t("topology.browserRegionsSub").replace(
                        "{{count}}",
                        String(regions.length),
                      )}
                </p>
              </div>
              <button
                type="button"
                className={`btn btn--sm${liveSync ? "" : " btn--ghost"}`}
                aria-pressed={liveSync}
                title={t("topology.liveSyncHint")}
                onClick={() => setLiveSync((v) => !v)}
              >
                {liveSync ? t("topology.liveSyncOn") : t("topology.liveSync")}
              </button>
            </div>
            {!activeRegion ? (
              regions.length === 0 ? (
                <div className="topo-browser__empty">
                  <span className="topo-browser__empty-icon" aria-hidden="true">
                    <RegionGlyph size={36} />
                  </span>
                  <p>{t("topology.emptyMaps")}</p>
                  <button
                    type="button"
                    className="btn btn--sm"
                    onClick={promptNewRegion}
                    disabled={createRegionMut.isPending || !treeRoot}
                  >
                    {t("topology.newRegion")}
                  </button>
                </div>
              ) : (
                <div className="topo-browser__grid topo-browser__grid--regions">
                  {regions.map((region, idx) => (
                    <button
                      key={region.id}
                      type="button"
                      className={`topo-region-hex topo-region-hex--tone-${idx % 5}${
                        selectedFolderId === region.id ? " is-selected" : ""
                      }${hotBrowseKey === `region:${region.id}` ? " is-hot" : ""}`}
                      onMouseEnter={() => setHotBrowseKey(`region:${region.id}`)}
                      onMouseLeave={() =>
                        setHotBrowseKey((k) => (k === `region:${region.id}` ? "" : k))
                      }
                      onClick={() => goRegion(region.id)}
                      title={t("topology.openRegion")}
                    >
                      <span className="topo-region-hex__icon" aria-hidden="true">
                        <RegionGlyph size={22} />
                      </span>
                      <span className="topo-region-hex__title">
                        <span className="topo-region-hex__name">{regionDisplayName(region)}</span>
                        <span className="topo-region-hex__meta">
                          {t("topology.regionNodeHint").replace(
                            "{{count}}",
                            String(region.views?.length || 0),
                          )}
                        </span>
                      </span>
                    </button>
                  ))}
                  <button
                    type="button"
                    className="topo-region-hex topo-region-hex--add"
                    onClick={promptNewRegion}
                    disabled={createRegionMut.isPending || !treeRoot}
                    title={t("topology.newRegion")}
                  >
                    <span className="topo-region-hex__plus" aria-hidden="true">
                      +
                    </span>
                    <span className="topo-region-hex__name">{t("topology.newRegion")}</span>
                  </button>
                </div>
              )
            ) : browseEntries.length === 0 ? (
              <div className="topo-browser__grid topo-browser__grid--regions">
                <button
                  type="button"
                  className="topo-region-hex topo-region-hex--add"
                  onClick={() => promptNewCustom(activeRegion.id)}
                  title={t("topology.newCustom")}
                >
                  <span className="topo-region-hex__plus" aria-hidden="true">
                    +
                  </span>
                  <span className="topo-region-hex__name">{t("topology.newCustom")}</span>
                </button>
              </div>
            ) : (
              <div className="topo-browser__grid topo-browser__grid--regions">
                {browseEntries.map((v, idx) => {
                  const isPhysical = String(v.kind) === "physical";
                  const tone = isPhysical ? "physical" : String((idx + 1) % 5);
                  return (
                    <button
                      key={v.id}
                      type="button"
                      className={`topo-region-hex topo-region-hex--tone-${tone}${
                        mapId === v.id ? " is-selected" : ""
                      }${hotBrowseKey === `view:${v.id}` ? " is-hot" : ""}`}
                      onMouseEnter={() => setHotBrowseKey(`view:${v.id}`)}
                      onMouseLeave={() =>
                        setHotBrowseKey((k) => (k === `view:${v.id}` ? "" : k))
                      }
                      onClick={() => goCanvas(v.id, activeRegion.id)}
                      title={t("topology.openMap")}
                    >
                      <span className="topo-region-hex__icon" aria-hidden="true">
                        <LayerGlyph role={isPhysical ? "core" : "aggregation"} size={22} />
                      </span>
                      <span className="topo-region-hex__title">
                        <span className="topo-region-hex__name">{v.name}</span>
                        <span className="topo-region-hex__meta">{v.node_count || 0}N</span>
                      </span>
                    </button>
                  );
                })}
                <button
                  type="button"
                  className="topo-region-hex topo-region-hex--add"
                  onClick={() => promptNewCustom(activeRegion.id)}
                  title={t("topology.newCustom")}
                >
                  <span className="topo-region-hex__plus" aria-hidden="true">
                    +
                  </span>
                  <span className="topo-region-hex__name">{t("topology.newCustom")}</span>
                </button>
              </div>
            )}
          </div>
        ) : (
          <div
            className={`topo-canvas${fullscreen ? " is-fullscreen" : ""}${toolMode === "pan" ? " is-pan-mode" : ""}`}
            ref={canvasRef}
            style={
              {
                "--topo-canvas-bg": canvasBg,
                "--topo-label-color": labelColors.name,
                "--topo-edge-label-color": labelColors.edgeLabel,
                "--topo-vendor-cisco": vendorColors.cisco,
                "--topo-vendor-huawei": vendorColors.huawei,
                "--topo-vendor-zte": vendorColors.zte,
                "--topo-vendor-juniper": vendorColors.juniper,
                "--topo-vendor-nokia": vendorColors.nokia,
                "--topo-vendor-ericsson": vendorColors.ericsson,
                "--topo-vendor-h3c": vendorColors.h3c,
                "--topo-vendor-ruijie": vendorColors.ruijie,
                "--topo-vendor-mikrotik": vendorColors.mikrotik,
                "--topo-vendor-gray": vendorColors.gray,
              } as CSSProperties
            }
            onDragOver={onCanvasDragOver}
            onDrop={onCanvasDrop}
          >
            {fullscreen ? (
              <div className="topo-fs-toolbar" role="toolbar" aria-label={t("topology.toolModes")}>
                {(
                  [
                    ["select", t("topology.toolSelect"), "V"],
                    ["pan", t("topology.toolPan"), "H"],
                    ["connect", t("topology.toolConnect"), "C"],
                  ] as const
                ).map(([mode, label, key]) => (
                  <button
                    key={mode}
                    type="button"
                    className={`topo-fs-toolbar__btn${toolMode === mode ? " is-active" : ""}`}
                    title={`${label} (${key})`}
                    aria-pressed={toolMode === mode}
                    onClick={() => {
                      setToolMode(mode);
                      connectClickRef.current = null;
                    }}
                  >
                    {label}
                    <kbd>{key}</kbd>
                  </button>
                ))}
                <button
                  type="button"
                  className="topo-fs-toolbar__btn"
                  title={t("topology.fit")}
                  onClick={() => rfRef.current?.fitView({ ...FIT_VIEW_OPTS })}
                >
                  {t("topology.fit")}
                </button>
                <button
                  type="button"
                  className="topo-fs-toolbar__btn"
                  title={t("topology.exitFullscreen")}
                  onClick={() => void toggleFullscreen()}
                >
                  {t("topology.exitFullscreen")}
                </button>
              </div>
            ) : null}
            {treeRoot ? (
              <TopoDisplayContext.Provider value={displayOpts}>
                <ReactFlow
                  nodes={nodes.map((n) =>
                    searchHitIds.includes(n.id)
                      ? { ...n, className: "is-search-hit" }
                      : { ...n, className: undefined },
                  )}
                  edges={displayEdges}
                  nodeTypes={nodeTypes}
                  edgeTypes={edgeTypes}
                  onlyRenderVisibleElements
                  connectionMode={ConnectionMode.Loose}
                  defaultEdgeOptions={{ type: "straight", labelShowBg: false }}
                  proOptions={{ hideAttribution: true }}
                  minZoom={0.05}
                  maxZoom={4}
                  nodesDraggable={toolBehavior.nodesDraggable}
                  nodesConnectable={toolBehavior.nodesConnectable}
                  elementsSelectable={toolBehavior.elementsSelectable}
                  panOnDrag={toolBehavior.panOnDrag}
                  selectionOnDrag={toolBehavior.selectionOnDrag}
                  panOnScroll={toolBehavior.panOnScroll}
                  selectionMode={SelectionMode.Partial}
                  multiSelectionKeyCode="Shift"
                  snapToGrid={snapToGrid}
                  snapGrid={SNAP_GRID}
                  onNodeDragStart={() => {
                    pushHistory();
                  }}
                  onNodesChange={(changes) => {
                    if (
                      changes.some(
                        (c) => c.type === "position" || c.type === "remove" || c.type === "add",
                      )
                    ) {
                      markDirty();
                    }
                    onNodesChange(changes);
                  }}
                  onEdgesChange={(changes) => {
                    const physical = changes.filter((c) => {
                      if (c.type === "select") return false;
                      if ("id" in c && isAggregateEdgeId(String(c.id))) return false;
                      return true;
                    });
                    if (physical.some((c) => c.type !== "select")) {
                      markDirty();
                    }
                    if (physical.length) onEdgesChange(physical);
                  }}
                  onConnect={onConnect}
                  isValidConnection={isValidConnection}
                  onNodeClick={onNodeClick}
                  onEdgeClick={(_e, edge) => {
                    setCtxMenu(null);
                    focusEdge(edge.id);
                  }}
                  onPaneClick={() => {
                    setCtxMenu(null);
                    clearSelection();
                  }}
                  onNodeContextMenu={(e, node) => {
                    e.preventDefault();
                    const multi = selectedNodeIds.length > 1 && selectedNodeIds.includes(node.id);
                    if (!multi) focusNode(node.id, false);
                    const pos = placeCtxMenu(e.clientX, e.clientY);
                    setCtxMenu(
                      multi ? { kind: "selection", ...pos } : { kind: "node", id: node.id, ...pos },
                    );
                  }}
                  onEdgeContextMenu={(e, edge) => {
                    e.preventDefault();
                    focusEdge(edge.id);
                    const pos = placeCtxMenu(e.clientX, e.clientY, { w: 260, h: 280 });
                    setCtxMenu({ kind: "edge", id: edge.id, ...pos });
                  }}
                  onSelectionContextMenu={(e) => {
                    e.preventDefault();
                    const pos = placeCtxMenu(e.clientX, e.clientY);
                    setCtxMenu({ kind: "selection", ...pos });
                  }}
                  onMoveStart={closeCtxMenu}
                  onInit={(inst) => {
                    rfRef.current = inst as ReactFlowInstance<Node<NeNodeData>, Edge>;
                    if (nodesRef.current.length > 0) {
                      window.setTimeout(() => inst.fitView({ ...FIT_VIEW_OPTS }), 0);
                    }
                  }}
                  fitView
                  fitViewOptions={{ ...FIT_VIEW_OPTS }}
                  deleteKeyCode={null}
                  edgesFocusable
                >
                  <Background
                    variant={BackgroundVariant.Dots}
                    gap={16}
                    size={1}
                    color={canvasDotColor(canvasBg)}
                    bgColor={canvasBg}
                  />
                  {toolMode === "connect" ? (
                    <div className="topo-mode-hint" role="status">
                      {t("topology.connectHint")}
                    </div>
                  ) : null}
                  <Controls showInteractive>
                    <ControlButton
                      className="topo-fs-control"
                      onClick={() => void toggleFullscreen()}
                      title={fullscreen ? t("topology.exitFullscreen") : t("topology.fullscreen")}
                      aria-label={fullscreen ? t("topology.exitFullscreen") : t("topology.fullscreen")}
                    >
                      <FullscreenIcon exit={fullscreen} />
                    </ControlButton>
                  </Controls>
                  <MiniMap pannable zoomable />
                </ReactFlow>
              </TopoDisplayContext.Provider>
            ) : (
              <div className="topo-canvas__empty">{t("topology.treeLoading")}</div>
            )}
          </div>
        )}
      </main>

      {addNeOpen && canvasMode ? (
        <div className="topo-modal" role="dialog" aria-modal="true" aria-label={t("topology.addNe")}>
          <div
            className="topo-modal__backdrop"
            onClick={() => {
              if (paletteAdding) return;
              setAddNeOpen(false);
            }}
          />
          <div className="topo-modal__panel">
            <div className="topo-modal__head">
              <strong>{t("topology.addNe")}</strong>
              <button
                type="button"
                className="btn btn--sm btn--ghost"
                disabled={paletteAdding}
                onClick={() => setAddNeOpen(false)}
              >
                {t("topology.discoverClose")}
              </button>
            </div>
            <p className="panel__hint topo-modal__hint">{t("topology.paletteHint")}</p>
            <div className="topo-palette-source" role="tablist">
              <button
                type="button"
                role="tab"
                aria-selected={paletteSource === "managed"}
                className={`topo-palette-source__btn${paletteSource === "managed" ? " is-active" : ""}`}
                disabled={paletteAdding}
                onClick={() => {
                  setPaletteSource("managed");
                  setPaletteSelectedKeys([]);
                }}
              >
                {t("topology.paletteManaged")}
              </button>
              <button
                type="button"
                role="tab"
                aria-selected={paletteSource === "ume"}
                className={`topo-palette-source__btn${paletteSource === "ume" ? " is-active" : ""}`}
                disabled={paletteAdding}
                onClick={() => {
                  setPaletteSource("ume");
                  setPaletteSelectedKeys([]);
                }}
              >
                {t("topology.paletteUme")}
              </button>
            </div>
            <input
              className="input"
              value={keyword}
              onChange={(e) => {
                setKeyword(e.target.value);
                setPaletteSelectedKeys([]);
              }}
              placeholder={t("topology.filterPh")}
              disabled={paletteAdding}
              autoFocus
            />
            {paletteVisible.length > 0 ? (
              <div className="topo-modal__selectbar">
                <label className="topo-modal__selectall">
                  <input
                    type="checkbox"
                    checked={
                      paletteVisible.length > 0 &&
                      paletteVisible.every((item) => paletteSelectedKeys.includes(item.key))
                    }
                    disabled={paletteAdding}
                    onChange={(e) => {
                      if (e.target.checked) {
                        setPaletteSelectedKeys(paletteVisible.map((item) => item.key));
                        return;
                      }
                      setPaletteSelectedKeys([]);
                    }}
                    aria-label={t("topology.selectAllVisible")}
                  />
                  <span>{t("topology.selectAllVisible")}</span>
                </label>
                <span className="panel__hint">
                  {t("topology.selectedCount").replace("{{count}}", String(paletteSelectedKeys.length))}
                </span>
              </div>
            ) : null}
            <ul className="topo-palette topo-modal__list">
              {paletteLoading ? (
                <li className="topo-palette__empty">
                  <span className="panel__hint">{t("topology.paletteLoading")}</span>
                </li>
              ) : paletteVisible.length === 0 ? (
                <li className="topo-palette__empty">
                  <span className="panel__hint">{t("topology.paletteEmpty")}</span>
                </li>
              ) : (
                paletteVisible.map((item) => {
                  const checked = paletteSelectedKeys.includes(item.key);
                  return (
                    <li key={item.key}>
                      <div className={`topo-palette__row${checked ? " is-selected" : ""}`}>
                        <label className="topo-palette__check">
                          <input
                            type="checkbox"
                            checked={checked}
                            disabled={paletteAdding}
                            onChange={(e) => {
                              setPaletteSelectedKeys((prev) =>
                                e.target.checked
                                  ? [...new Set([...prev, item.key])]
                                  : prev.filter((key) => key !== item.key),
                              );
                            }}
                            aria-label={item.name}
                          />
                        </label>
                        <button
                          type="button"
                          className="topo-palette__item"
                          draggable={!paletteAdding}
                          disabled={paletteAdding}
                          onClick={() => {
                            setPaletteSelectedKeys((prev) =>
                              prev.includes(item.key)
                                ? prev.filter((key) => key !== item.key)
                                : [...prev, item.key],
                            );
                          }}
                          onDragStart={(e) => onPaletteDragStart(e, item)}
                          title={t("topology.paletteDragHint")}
                        >
                          <span className="topo-palette__name">{item.name}</span>
                          <span className="topo-palette__meta">{item.meta}</span>
                        </button>
                      </div>
                    </li>
                  );
                })
              )}
            </ul>
            <div className="topo-modal__foot">
              <button
                type="button"
                className="btn btn--sm btn--ghost"
                disabled={paletteAdding}
                onClick={() => setAddNeOpen(false)}
              >
                {t("topology.discoverClose")}
              </button>
              <button
                type="button"
                className="btn btn--sm"
                disabled={paletteSelectedKeys.length === 0 || paletteAdding}
                onClick={async () => {
                  const selected = paletteVisible.filter((item) => paletteSelectedKeys.includes(item.key));
                  if (selected.length === 0) return;
                  const ok = await addPaletteItems(selected);
                  if (!ok) return;
                  setPaletteSelectedKeys([]);
                  setAddNeOpen(false);
                }}
              >
                {paletteAdding
                  ? t("topology.addingNe")
                  : t("topology.addSelected").replace("{{count}}", String(paletteSelectedKeys.length))}
              </button>
            </div>
          </div>
        </div>
      ) : null}

      {ctxMenu ? (
        <ul
          className={`topo-ctx${ctxMenu.kind === "edge" ? " topo-ctx--edge" : ""}`}
          style={{ left: ctxMenu.x, top: ctxMenu.y }}
          role="menu"
          onContextMenu={(e) => e.preventDefault()}
        >
          {ctxMenu.kind === "selection" ? (
            <>
              <li className="topo-ctx__head" role="presentation">
                {t("topology.selectionMenu")}
              </li>
              <li role="none">
                <button
                  type="button"
                  className="topo-ctx__item topo-ctx__item--danger"
                  role="menuitem"
                  onClick={() => removeSelected()}
                >
                  {t("topology.removeSelected").replace("{{count}}", String(selectedNodes.length))}
                </button>
              </li>
            </>
          ) : ctxMenu.kind === "node" ? (
            <>
              <li className="topo-ctx__head" role="presentation">
                {t("topology.nodeMenu")}
              </li>
              <li role="none">
                <button
                  type="button"
                  className="topo-ctx__item"
                  role="menuitem"
                  onClick={renameSelectedNode}
                >
                  {t("topology.renameNode")}
                </button>
              </li>
              <li role="none">
                <button
                  type="button"
                  className="topo-ctx__item"
                  role="menuitem"
                  disabled={discovering}
                  onClick={() => discoverOneFor(selectedNode)}
                >
                  {t("topology.discoverOne")}
                </button>
              </li>
              <li role="none">
                <button
                  type="button"
                  className="topo-ctx__item"
                  role="menuitem"
                  onClick={() => openWebcrtFor(selectedNode)}
                >
                  {t("topology.openWebcrt")}
                </button>
              </li>
              <li role="none">
                <button
                  type="button"
                  className="topo-ctx__item"
                  role="menuitem"
                  onClick={() => openNeFor(selectedNode)}
                >
                  {t("topology.openNe")}
                </button>
              </li>
              <li className="topo-ctx__sep" aria-hidden />
              <li role="none">
                <button
                  type="button"
                  className="topo-ctx__item topo-ctx__item--danger"
                  role="menuitem"
                  onClick={() => removeNodeById(ctxMenu.id)}
                >
                  {t("topology.removeNode")}
                </button>
              </li>
            </>
          ) : (
            <>
              <li className="topo-ctx__section" role="none">
                <div className="topo-ctx__style" onMouseDown={(e) => e.stopPropagation()}>
                  <div className="topo-ctx__style-title">{t("topology.edgeStyle")}</div>
                  {selectedEdgeResolved ? (
                    <div className="topo-ctx__style-grid">
                      {Number(selectedEdgeData.member_count || 1) > 1 ? (
                        <div className="topo-ctx__style-members">
                          <div className="topo-ctx__style-title">
                            {t("topology.linkMembers").replace(
                              "{{count}}",
                              String(selectedEdgeData.member_count || 0),
                            )}
                          </div>
                          <ul className="topo-ctx__member-list">
                            {(selectedEdgeData.members || []).map((m) => (
                              <li key={m.id}>
                                {formatPortPairLabel(m.a_port, m.b_port) || m.id.slice(0, 8)}
                              </li>
                            ))}
                          </ul>
                          {!expandPhysicalLinks ? (
                            <button
                              type="button"
                              className="btn btn--sm"
                              onClick={() => {
                                setExpandPhysicalLinks(true);
                                closeCtxMenu();
                              }}
                            >
                              {t("topology.expandPhysicalLinks")}
                            </button>
                          ) : null}
                        </div>
                      ) : null}
                      <label className="topo-ctx__style-row">
                        <span>
                          {(selectedEdgeSourceNode?.data.label ||
                            selectedEdgeSourceNode?.data.ne_ip ||
                            t("topology.endpointA")) +
                            " · " +
                            t("topology.port")}
                        </span>
                        <input
                          type="text"
                          className="topo-ctx__style-input"
                          value={selectedEdgeData.source_port || ""}
                          placeholder="?"
                          disabled={Number(selectedEdgeData.member_count || 1) > 1 && !expandPhysicalLinks}
                          onFocus={() => pushHistory()}
                          onChange={(e) =>
                            patchSelectedEdgeStyle({ source_port: e.target.value }, { skipHistory: true })
                          }
                        />
                      </label>
                      <label className="topo-ctx__style-row">
                        <span>
                          {(selectedEdgeTargetNode?.data.label ||
                            selectedEdgeTargetNode?.data.ne_ip ||
                            t("topology.endpointB")) +
                            " · " +
                            t("topology.port")}
                        </span>
                        <input
                          type="text"
                          className="topo-ctx__style-input"
                          value={selectedEdgeData.target_port || ""}
                          placeholder="?"
                          disabled={Number(selectedEdgeData.member_count || 1) > 1 && !expandPhysicalLinks}
                          onFocus={() => pushHistory()}
                          onChange={(e) =>
                            patchSelectedEdgeStyle({ target_port: e.target.value }, { skipHistory: true })
                          }
                        />
                      </label>
                      <label className="topo-ctx__style-row">
                        <span>{t("topology.edgeColor")}</span>
                        <input
                          type="color"
                          value={selectedEdgeResolved.stroke}
                          onFocus={() => pushHistory()}
                          onChange={(e) =>
                            patchSelectedEdgeStyle({ stroke_color: e.target.value }, { skipHistory: true })
                          }
                        />
                      </label>
                      <label className="topo-ctx__style-row">
                        <span>{t("topology.edgeLineStyle")}</span>
                        <select
                          value={
                            selectedEdgeData.line_style ||
                            (selectedEdgeResolved.strokeDasharray ? "dashed" : "solid")
                          }
                          onChange={(e) => patchSelectedEdgeStyle({ line_style: e.target.value })}
                        >
                          <option value="solid">{t("topology.edgeLineSolid")}</option>
                          <option value="dashed">{t("topology.edgeLineDashed")}</option>
                          <option value="dotted">{t("topology.edgeLineDotted")}</option>
                        </select>
                      </label>
                      <label className="topo-ctx__style-row">
                        <span>{t("topology.edgeWidth")}</span>
                        <select
                          value={String(
                            Number(selectedEdgeData.stroke_width || 0) > 0
                              ? Number(selectedEdgeData.stroke_width)
                              : Math.round(Number(selectedEdgeResolved.strokeWidth || 2)),
                          )}
                          onChange={(e) =>
                            patchSelectedEdgeStyle({ stroke_width: Number(e.target.value) || 0 })
                          }
                        >
                          {[1, 2, 3, 4, 5, 6, 8].map((w) => (
                            <option key={w} value={w}>
                              {w}px
                            </option>
                          ))}
                        </select>
                      </label>
                    </div>
                  ) : null}
                </div>
              </li>
              <li className="topo-ctx__sep" aria-hidden />
              <li role="none">
                <button
                  type="button"
                  className="topo-ctx__item"
                  role="menuitem"
                  onClick={() => openPortTrafficForEdge(selectedEdge)}
                >
                  {t("topology.openPortTraffic")}
                </button>
              </li>
              <li role="none">
                <button
                  type="button"
                  className="topo-ctx__item"
                  role="menuitem"
                  onClick={() =>
                    patchSelectedEdgeStyle({ stroke_color: "", stroke_width: 0, line_style: "" })
                  }
                >
                  {t("topology.edgeStyleReset")}
                </button>
              </li>
              <li role="none">
                <button
                  type="button"
                  className="topo-ctx__item topo-ctx__item--danger"
                  role="menuitem"
                  onClick={() => removeEdgeById(ctxMenu.id)}
                >
                  {t("topology.removeEdge")}
                </button>
              </li>
            </>
          )}
        </ul>
      ) : null}
    </div>
  );
}