class WiringApp {
  constructor() {
    this.diagramId = null;
    this.currentViewId = null;     // null = main layout, number = view id
    this._views = [];              // view objects for current diagram
    this._savedTimer = null;
    this._customConnectors = [];   // loaded from backend
    this._editingConnId = null;    // id of custom connector being edited in modal
    this._clipboard = null;        // copied device data
    this._pasteCount = 0;          // paste offset counter
    this._undoStack = [];          // array of async undo functions
    this._preDrag = null;          // snapshot captured at dragstart for undo
    this._octopartReady = null;    // null=unknown, true/false after status check
    this._bundles = [];            // wire bundles for current diagram
    this._updatingBundleDropdown = false;
    this._copiedWireStyle = null;  // clipboard for wire style copy/paste

    this.canvas = new DiagramCanvas("canvas-container", {
      onDeviceSelected:   (d)                      => this._showDeviceProps(d),
      onWireSelected:     (w)                      => this._showWireProps(w),
      onSelectionCleared: ()                       => this._clearProps(),
      onMultipleSelected: (count)                  => this._showMultiProps(count),
      onDeviceMoved:      (id, x, y)              => { this._savePosForCurrentView(id, x, y); this._flashSaved(); },
      onDeviceDropped:    (type, wx, wy)           => this.addDevice(type, wx, wy),
      onConnectorDropped: (connId, wx, wy)         => this.addConnector(connId, wx, wy),
      onWireCreated:      (fDev, fPin, tDev, tPin) => this.createWire(fDev, fPin, tDev, tPin),
      onWaypointsChanged: (id, wps)               => { this._saveWaypointsForCurrentView(id, wps); this._flashSaved(); },
      onDragStarted:        (snap)                  => { this._preDrag = snap; },
      onDragEnded:          (ids)                   => { this._pushMoveUndo(ids); },
      onDeviceContextMenu:  (id, x, y)              => this._showCtxDevice(id, x, y),
      onWireContextMenu:    (id, x, y)              => this._showCtxWire(id, x, y),
      onMultiWireSelected:  (ids)                   => this._onMultiWireSelected(ids),
      onPinoutRequested:    (d)                    => this._showPinoutPopup(d),
      onDeviceResized:    async (id, x, y, w, h)  => {
        const device = this.canvas.deviceData.get(id);
        if (!device) return;
        this._recalcPinOffsets(device.pins || [], w, h, device);
        await api.devices.update(id, { x, y, width: w, height: h, pins: device.pins }).catch(console.error);
        this.canvas.updateDevice(device);
        this.canvas.selectDevice(id);
        this._flashSaved();
      },
    });

    this._fb = null;          // FormboardCanvas instance (lazy)
    this._fbActive = false;

    this._buildDeviceLibrary();
    this._bindToolbar();
    this._bindKeyboard();
    this._bindProps();
    this._bindTabs();
    this._bindConnectorModal();
    this._bindPinoutModal();
    this._bindLibrarySearch();
    this._bindFormboard();

    this.loadDiagramList()
      .then(() => this._autoOpenLast())
      .then(() => this.loadCustomConnectors())
      .then(() => this._checkOctopartStatus());
  }

  // ── View-aware position/waypoint saving ───────────────────────────────────────

  _savePosForCurrentView(id, x, y) {
    if (this.currentViewId) {
      api.views.updateDevicePos(this.currentViewId, id, { x, y }).catch(console.error);
    } else {
      api.devices.update(id, { x, y }).catch(console.error);
    }
  }

  _saveWaypointsForCurrentView(wireId, waypoints) {
    if (this.currentViewId) {
      api.views.updateWireWaypoints(this.currentViewId, wireId, { waypoints }).catch(console.error);
    } else {
      api.wires.update(wireId, { waypoints }).catch(console.error);
    }
  }

  // ── Auto-reopen & saved indicator ────────────────────────────────────────────

  _autoOpenLast() {
    const lastId = localStorage.getItem("lastDiagramId");
    if (lastId) return this.openDiagram(parseInt(lastId));
  }

  _flashSaved() {
    clearTimeout(this._savedTimer);
    this._savedTimer = setTimeout(() => {
      const el = document.getElementById("saved-indicator");
      if (!el) return;
      el.textContent = "✓ Saved";
      el.style.color = "";
      el.classList.add("show");
      setTimeout(() => el.classList.remove("show"), 1400);
    }, 600);
  }

  _flashError() {
    clearTimeout(this._savedTimer);
    const el = document.getElementById("saved-indicator");
    if (!el) return;
    el.textContent = "✗ Save failed";
    el.style.color = "#e06c6c";
    el.classList.add("show");
    this._savedTimer = setTimeout(() => {
      el.classList.remove("show");
      el.style.color = "";
    }, 3000);
  }

  // ── Align & Distribute ────────────────────────────────────────────────────────

  async _alignDevices(edge) {
    const ids = [...this.canvas.selectedIds];
    if (ids.length < 2) return;
    const boxes = ids.map(id => {
      const d = this.canvas.deviceData.get(id);
      return { id, x: d.x, y: d.y, w: d.width || 80, h: d.height || 60 };
    });
    let target;
    if (edge === "left")   target = Math.min(...boxes.map(b => b.x));
    if (edge === "right")  target = Math.max(...boxes.map(b => b.x + b.w));
    if (edge === "top")    target = Math.min(...boxes.map(b => b.y));
    if (edge === "bottom") target = Math.max(...boxes.map(b => b.y + b.h));
    for (const b of boxes) {
      const d = this.canvas.deviceData.get(b.id);
      if (edge === "left")   d.x = target;
      if (edge === "right")  d.x = target - b.w;
      if (edge === "top")    d.y = target;
      if (edge === "bottom") d.y = target - b.h;
      this.canvas.updateDevice(d);
      await api.devices.update(b.id, { x: d.x, y: d.y }).catch(console.error);
    }
    this._flashSaved();
  }

  async _distributeDevices(axis) {
    const ids = [...this.canvas.selectedIds];
    if (ids.length < 3) return;
    const boxes = ids.map(id => {
      const d = this.canvas.deviceData.get(id);
      return { id, x: d.x, y: d.y, w: d.width || 80, h: d.height || 60 };
    });
    if (axis === "h") {
      boxes.sort((a, b) => a.x - b.x);
      const totalW = boxes.reduce((s, b) => s + b.w, 0);
      const gap = (boxes[boxes.length - 1].x + boxes[boxes.length - 1].w - boxes[0].x - totalW) / (boxes.length - 1);
      let cursor = boxes[0].x + boxes[0].w;
      for (let i = 1; i < boxes.length - 1; i++) {
        const d = this.canvas.deviceData.get(boxes[i].id);
        d.x = Math.round(cursor + gap);
        this.canvas.updateDevice(d);
        await api.devices.update(boxes[i].id, { x: d.x }).catch(console.error);
        cursor = d.x + boxes[i].w;
      }
    } else {
      boxes.sort((a, b) => a.y - b.y);
      const totalH = boxes.reduce((s, b) => s + b.h, 0);
      const gap = (boxes[boxes.length - 1].y + boxes[boxes.length - 1].h - boxes[0].y - totalH) / (boxes.length - 1);
      let cursor = boxes[0].y + boxes[0].h;
      for (let i = 1; i < boxes.length - 1; i++) {
        const d = this.canvas.deviceData.get(boxes[i].id);
        d.y = Math.round(cursor + gap);
        this.canvas.updateDevice(d);
        await api.devices.update(boxes[i].id, { y: d.y }).catch(console.error);
        cursor = d.y + boxes[i].h;
      }
    }
    this._flashSaved();
  }

  // ── Undo ──────────────────────────────────────────────────────────────────────

  _pushUndo(fn) {
    this._undoStack.push(fn);
    if (this._undoStack.length > 50) this._undoStack.shift();
  }

  async _undo() {
    const fn = this._undoStack.pop();
    if (fn) await fn();
  }

  _pushMoveUndo(movedIds) {
    if (!this._preDrag) return;
    const { positions, waypoints } = this._preDrag;
    this._preDrag = null;
    this._pushUndo(async () => {
      for (const [id, { x, y }] of positions) {
        const g = this.canvas.deviceNodes.get(id);
        const d = this.canvas.deviceData.get(id);
        if (g) { g.x(x); g.y(y); }
        if (d) { d.x = x; d.y = y; }
        this._savePosForCurrentView(id, x, y);
        this.canvas._redrawWiresFor(id);
      }
      for (const [wId, wps] of waypoints) {
        const wire = this.canvas.wireData.get(wId);
        if (wire) {
          wire.waypoints = wps.map(wp => ({ ...wp }));
          this._saveWaypointsForCurrentView(wId, wire.waypoints);
        }
      }
      this.canvas.deviceLayer.batchDraw();
      this.canvas.wireLayer.batchDraw();
      this._flashSaved();
    });
  }

  // ── Device library ────────────────────────────────────────────────────────────

  _buildDeviceLibrary() {
    const container = document.getElementById("device-library");
    container.innerHTML = "";
    Object.entries(DEVICE_TYPES).forEach(([key, type]) => {
      const item = document.createElement("div");
      item.className = "lib-item";
      item.draggable = true;
      item.dataset.type = key;
      item.innerHTML = `<span class="lib-icon">${type.icon}</span><span class="lib-label">${type.label}</span>`;
      item.title = type.description;
      item.addEventListener("dragstart", (e) => { e.dataTransfer.setData("device_type", key); e.dataTransfer.effectAllowed = "copy"; });
      item.addEventListener("dblclick", () => { if (!this.diagramId) return this._needDiagram(); this.addDevice(key, 200 + Math.random() * 100, 150 + Math.random() * 100); });
      container.appendChild(item);
    });
  }

  // ── Connector library ─────────────────────────────────────────────────────────

  async loadCustomConnectors() {
    try { this._customConnectors = await api.connectors.list(); }
    catch { this._customConnectors = []; }
    this._filterConnectors();
  }

  _bindLibrarySearch() {
    document.getElementById("lib-search")?.addEventListener("input",  () => this._filterConnectors());
    document.getElementById("lib-category")?.addEventListener("change", () => this._filterConnectors());
  }

  _buildConnectorLibrary() {
    const catSelect = document.getElementById("lib-category");
    catSelect.innerHTML = '<option value="">All Categories</option>';
    const cats = new Set(Object.keys(CONNECTOR_LIBRARY));
    this._customConnectors.forEach(c => cats.add(c.category || "Custom"));
    cats.forEach(cat => {
      const opt = document.createElement("option");
      opt.value = cat; opt.textContent = cat;
      catSelect.appendChild(opt);
    });
  }

  _filterConnectors() {
    const savedCat = document.getElementById("lib-category")?.value || "";
    this._buildConnectorLibrary(); // refresh category list
    const catSelect = document.getElementById("lib-category");
    if (catSelect && savedCat) catSelect.value = savedCat; // restore selection after innerHTML rebuild
    const query     = (document.getElementById("lib-search")?.value || "").toLowerCase();
    const catFilter = catSelect?.value || "";
    const list      = document.getElementById("lib-list");
    list.innerHTML  = "";

    // ── Custom connectors (from DB) ──────────────────────────────────────────
    const customs = this._customConnectors.filter(conn => {
      if (catFilter && (conn.category || "Custom") !== catFilter) return false;
      if (query && !`${conn.name} ${conn.manufacturer} ${conn.part_number} ${conn.description}`.toLowerCase().includes(query)) return false;
      return true;
    });

    if (customs.length) {
      const header = document.createElement("div");
      header.className = "lib-section-header";
      header.textContent = "Custom Connectors";
      list.appendChild(header);
      customs.forEach(conn => list.appendChild(this._makeCustomItem(conn)));
    }

    // ── Built-in library ─────────────────────────────────────────────────────
    Object.entries(CONNECTOR_LIBRARY).forEach(([cat, conns]) => {
      if (catFilter && cat !== catFilter) return;
      const matched = conns.filter(conn => !query ||
        `${conn.name} ${conn.manufacturer} ${conn.partNumber} ${conn.description}`.toLowerCase().includes(query));
      if (!matched.length) return;

      const header = document.createElement("div");
      header.className = "lib-section-header";
      header.textContent = cat;
      list.appendChild(header);
      matched.forEach(conn => list.appendChild(this._makeBuiltinItem(conn)));
    });

    if (!list.children.length) {
      list.innerHTML = '<p class="muted small" style="padding:8px 10px">No connectors match</p>';
    }
  }

  _makeCustomItem(conn) {
    const item = document.createElement("div");
    item.className = "lib-conn-item";
    item.draggable = true;
    item.title = conn.description || conn.name;
    item.innerHTML = `
      <div class="conn-item-body">
        <div class="conn-name">${conn.name} <span class="conn-custom-badge">custom</span></div>
        <div class="conn-meta">${conn.manufacturer || "—"} · ${conn.pin_count}p${conn.part_number ? " · " + conn.part_number : ""}</div>
      </div>
      <button class="conn-edit-btn" title="Edit connector">✏</button>`;
    item.addEventListener("dragstart", (e) => { e.dataTransfer.setData("connector_id", "custom_" + conn.id); e.dataTransfer.effectAllowed = "copy"; });
    item.addEventListener("dblclick", (e) => { if (e.target.classList.contains("conn-edit-btn")) return; if (!this.diagramId) return this._needDiagram(); this.addConnector("custom_" + conn.id, 220, 160); });
    item.querySelector(".conn-edit-btn").addEventListener("click", (e) => { e.stopPropagation(); this.openConnectorModal(conn); });
    return item;
  }

  _makeBuiltinItem(conn) {
    const item = document.createElement("div");
    item.className = "lib-conn-item";
    item.draggable = true;
    item.title = conn.description || conn.name;
    item.innerHTML = `
      <div class="conn-item-body">
        <div class="conn-name">${conn.name}</div>
        <div class="conn-meta">${conn.manufacturer} · ${conn.pinCount}p · ${conn.partNumber}</div>
      </div>`;
    item.addEventListener("dragstart", (e) => { e.dataTransfer.setData("connector_id", conn.id); e.dataTransfer.effectAllowed = "copy"; });
    item.addEventListener("dblclick", () => { if (!this.diagramId) return this._needDiagram(); this.addConnector(conn.id, 220 + Math.random() * 80, 160 + Math.random() * 80); });
    return item;
  }

  // ── Custom connector modal ────────────────────────────────────────────────────

  _bindConnectorModal() {
    document.getElementById("btn-new-connector")?.addEventListener("click", () => this.openConnectorModal(null));
    document.getElementById("cm-save")?.addEventListener("click", () => this._saveConnectorModal());
    document.getElementById("cm-delete")?.addEventListener("click", () => this._deleteConnectorModal());
    document.getElementById("cm-cancel")?.addEventListener("click", () => this.closeConnectorModal());

    // Close on backdrop click
    document.getElementById("connector-modal")?.addEventListener("click", (e) => {
      if (e.target.id === "connector-modal") this.closeConnectorModal();
    });

    // Escape key
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape" && document.getElementById("connector-modal")?.style.display !== "none") {
        this.closeConnectorModal();
      }
      if (e.key === "Escape" && document.getElementById("pinout-modal")?.style.display !== "none") {
        this._closePinoutPopup();
      }
    });

    // Update pin labels when pin count changes
    document.getElementById("cm-pincount")?.addEventListener("input", (e) => {
      const count = Math.max(1, Math.min(64, parseInt(e.target.value) || 1));
      const existing = [...document.querySelectorAll(".pin-label-input")].map(i => i.value);
      this._buildPinLabelInputs(count, existing);
    });
  }

  openConnectorModal(conn = null) {
    this._editingConnId = conn?.id ?? null;
    document.getElementById("cm-modal-title").textContent = conn ? "Edit Custom Connector" : "New Custom Connector";
    document.getElementById("cm-name").value         = conn?.name || "";
    document.getElementById("cm-category").value    = conn?.category || "Custom";
    document.getElementById("cm-manufacturer").value = conn?.manufacturer || "";
    document.getElementById("cm-partnumber").value   = conn?.part_number || "";
    document.getElementById("cm-description").value  = conn?.description || "";
    document.getElementById("cm-pincount").value     = conn?.pin_count || 4;
    document.getElementById("cm-delete").style.display = (conn?.id != null) ? "" : "none";
    this._buildPinLabelInputs(conn?.pin_count || 4, conn?.pin_labels || []);
    document.getElementById("connector-modal").style.display = "flex";
    document.getElementById("cm-name").focus();
  }

  closeConnectorModal() {
    document.getElementById("connector-modal").style.display = "none";
    this._editingConnId = null;
  }

  _buildPinLabelInputs(count, existingLabels = []) {
    const container = document.getElementById("cm-pin-labels");
    container.innerHTML = "";
    for (let i = 0; i < count; i++) {
      const row = document.createElement("div");
      row.className = "pin-label-row";
      row.innerHTML = `<span class="pin-idx">${i + 1}</span>
        <input type="text" class="pin-label-input" placeholder="Pin ${i + 1}" value="${(existingLabels[i] || "").replace(/"/g, "&quot;")}">`;
      container.appendChild(row);
    }
  }

  async _saveConnectorModal() {
    const name     = document.getElementById("cm-name").value.trim();
    const pinCount = parseInt(document.getElementById("cm-pincount").value);
    if (!name) { document.getElementById("cm-name").focus(); return; }
    if (!pinCount || pinCount < 1 || pinCount > 64) { alert("Pin count must be 1–64"); return; }

    const data = {
      name,
      category:     document.getElementById("cm-category").value.trim() || "Custom",
      manufacturer: document.getElementById("cm-manufacturer").value.trim(),
      part_number:  document.getElementById("cm-partnumber").value.trim(),
      description:  document.getElementById("cm-description").value.trim(),
      pin_count:    pinCount,
      pin_labels:   [...document.querySelectorAll(".pin-label-input")].map(i => i.value.trim()),
    };

    const btn = document.getElementById("cm-save");
    btn.disabled = true; btn.textContent = "Saving…";
    try {
      if (this._editingConnId != null) {
        await api.connectors.update(this._editingConnId, data);
      } else {
        await api.connectors.create(data);
      }
      this.closeConnectorModal();
      await this.loadCustomConnectors();
      this._flashSaved();
    } catch (e) {
      alert("Failed to save connector: " + e.message);
    } finally {
      btn.disabled = false; btn.textContent = "Save";
    }
  }

  async _deleteConnectorModal() {
    if (this._editingConnId == null) return;
    if (!confirm(`Delete "${document.getElementById("cm-name").value}"? This cannot be undone.`)) return;
    try {
      await api.connectors.delete(this._editingConnId);
      this.closeConnectorModal();
      await this.loadCustomConnectors();
      this._flashSaved();
    } catch (e) { alert("Failed to delete: " + e.message); }
  }

  // ── Pinout popup ─────────────────────────────────────────────────────────────

  _bindPinoutModal() {
    document.getElementById("pinout-close")?.addEventListener("click", () => this._closePinoutPopup());
    document.getElementById("pinout-modal")?.addEventListener("click", (e) => {
      if (e.target.id === "pinout-modal") this._closePinoutPopup();
    });
    document.getElementById("prop-pinout-btn")?.addEventListener("click", () => {
      if (this._propDevice) this._showPinoutPopup(this._propDevice);
    });
    document.getElementById("pinout-print-btn")?.addEventListener("click", () => {
      if (this._propDevice) this._printPinout(this._propDevice);
    });
    document.getElementById("pinout-copy-btn")?.addEventListener("click", () => {
      if (this._propDevice) this._copyPinoutTable(this._propDevice);
    });
  }

  _showPinoutPopup(device) {
    if (!device) return;
    const connId = device.properties?.connectorLibraryId;
    const conn   = connId ? getConnectorById(connId) : null;
    const pins   = device.pins || [];

    // ── SVG face view ────────────────────────────────────────────────────────
    const svg = device.properties?.shape === "circular"
      ? this._buildCircularSVG(device, pins, false)
      : this._buildSchematicSVG(device, pins, false);

    // ── Pin table ────────────────────────────────────────────────────────────
    const pinConnections = this._buildPinConnections(device);

    const tbody = document.getElementById("pinout-table-body");
    tbody.innerHTML = "";
    pins.forEach((pin, i) => {
      const num        = i + 1;
      const isDefault  = !pin.name || pin.name === String(num);
      const customNote = isDefault ? null : pin.name;
      const conn       = pinConnections.get(pin.id) || null;
      const note       = customNote || conn?.label || null;
      const noteColor  = customNote ? "#dde0f5" : conn ? "#8899cc" : "#333355";

      // Wire color swatch — stripe drawn as a diagonal slash over the primary color
      let swatchHTML = "";
      if (conn?.colorPrimary) {
        const cp = conn.colorPrimary;
        const cs = conn.colorStripe;
        if (cs) {
          swatchHTML = `<svg width="22" height="12" style="vertical-align:middle;margin-right:5px;flex-shrink:0" xmlns="http://www.w3.org/2000/svg">
            <rect width="22" height="12" rx="2" fill="${cp}"/>
            <line x1="5" y1="0" x2="17" y2="12" stroke="${cs}" stroke-width="4"/>
          </svg>`;
        } else {
          swatchHTML = `<span style="display:inline-block;width:22px;height:12px;border-radius:2px;background:${cp};vertical-align:middle;margin-right:5px;flex-shrink:0"></span>`;
        }
      }

      const tr = document.createElement("tr");
      tr.style.borderBottom = "1px solid #1a1a2e";
      tr.innerHTML = `
        <td style="padding:3px 6px;color:#556688;text-align:right;white-space:nowrap">${num}</td>
        <td style="padding:3px 6px;display:flex;align-items:center;gap:0">${swatchHTML}<span style="color:${noteColor}">${note ?? "—"}</span></td>`;
      tbody.appendChild(tr);
    });

    document.getElementById("pinout-modal-title").textContent = device.label;
    document.getElementById("pinout-svg-container").innerHTML = svg;
    document.getElementById("pinout-info").textContent =
      [conn?.partNumber || device.properties?.partNumber, `${pins.length} pins`].filter(Boolean).join(" · ");
    document.getElementById("pinout-modal").style.display = "flex";
  }

  _buildPinConnections(device) {
    const map = new Map();
    this.canvas.wireData.forEach(wire => {
      const check = (thisDevId, thisPinId, otherDevId, otherPinId) => {
        if (thisDevId !== device.id || map.has(thisPinId)) return;
        const otherDev = this.canvas.deviceData.get(otherDevId);
        if (!otherDev) return;
        const otherPin = (otherDev.pins || []).find(p => p.id === otherPinId);
        map.set(thisPinId, {
          label:        `${otherDev.label || otherDev.reference || `Device ${otherDevId}`}, ${otherPin?.name || otherPinId}`,
          colorPrimary: wire.color_primary || null,
          colorStripe:  wire.color_stripe  || null,
        });
      };
      check(wire.from_device_id, wire.from_pin, wire.to_device_id,   wire.to_pin);
      check(wire.to_device_id,   wire.to_pin,   wire.from_device_id, wire.from_pin);
    });
    return map;
  }

  _printPinout(device) {
    const pins    = device.pins || [];
    const connId  = device.properties?.connectorLibraryId;
    const conn    = connId ? getConnectorById(connId) : null;
    const conns   = this._buildPinConnections(device);
    const svg     = device.properties?.shape === "circular"
      ? this._buildCircularSVG(device, pins, true)
      : this._buildSchematicSVG(device, pins, true);

    const subtitle = [conn?.partNumber || device.properties?.partNumber, `${pins.length} pins`]
      .filter(Boolean).join(" · ");

    const rows = pins.map((pin, i) => {
      const num        = i + 1;
      const isDefault  = !pin.name || pin.name === String(num);
      const customNote = isDefault ? null : pin.name;
      const c          = conns.get(pin.id);
      const note       = customNote || c?.label || "—";

      let swatch = "";
      if (c?.colorPrimary) {
        if (c.colorStripe) {
          swatch = `<svg width="24" height="12" style="vertical-align:middle;margin-right:4px" xmlns="http://www.w3.org/2000/svg">
            <rect width="24" height="12" rx="2" fill="${c.colorPrimary}" stroke="#ccc" stroke-width="0.5"/>
            <line x1="6" y1="0" x2="18" y2="12" stroke="${c.colorStripe}" stroke-width="4"/>
          </svg>`;
        } else {
          swatch = `<span style="display:inline-block;width:24px;height:12px;border-radius:2px;background:${c.colorPrimary};border:1px solid #bbb;vertical-align:middle;margin-right:4px"></span>`;
        }
      }
      return `<tr><td class="pn">${num}</td><td class="pc">${swatch}</td><td>${note}</td></tr>`;
    }).join("");

    const html = `<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>Pinout — ${device.label}</title>
<style>
  * { box-sizing: border-box; }
  body { font-family: Arial, sans-serif; font-size: 11px; margin: 16mm; color: #111; }
  h1 { font-size: 15px; margin: 0 0 2px; }
  .sub { color: #666; font-size: 10px; margin-bottom: 14px; }
  .layout { display: flex; gap: 24px; align-items: flex-start; }
  .tbl-wrap { flex: 1; }
  table { border-collapse: collapse; width: 100%; }
  th { border-bottom: 1.5px solid #333; padding: 4px 6px; text-align: left; font-size: 10px; color: #555; font-weight: 600; }
  td { border-bottom: 1px solid #e8e8e8; padding: 3px 6px; vertical-align: middle; }
  .pn { color: #666; text-align: right; width: 28px; font-size: 10px; }
  .pc { width: 30px; }
  @media print { @page { margin: 10mm; size: letter; } }
</style></head>
<body>
<h1>${device.label}</h1>
<div class="sub">${subtitle}</div>
<div class="layout">
  <div>${svg}</div>
  <div class="tbl-wrap">
    <table>
      <thead><tr><th>#</th><th>Color</th><th>Note / Connection</th></tr></thead>
      <tbody>${rows}</tbody>
    </table>
  </div>
</div>
<script>window.onload = () => { window.print(); };<\/script>
</body></html>`;

    const win = window.open("", "_blank");
    if (!win) { alert("Allow pop-ups to use the print feature."); return; }
    win.document.write(html);
    win.document.close();
  }

  _copyPinoutTable(device) {
    const pins  = device.pins || [];
    const conns = this._buildPinConnections(device);

    const header = "Pin\tWire Color\tNote / Connection";
    const rows = pins.map((pin, i) => {
      const num        = i + 1;
      const isDefault  = !pin.name || pin.name === String(num);
      const customNote = isDefault ? null : pin.name;
      const c          = conns.get(pin.id);
      const note       = customNote || c?.label || "";
      const color      = c?.colorPrimary
        ? (c.colorStripe ? `${c.colorPrimary} / ${c.colorStripe}` : c.colorPrimary)
        : "";
      return `${num}\t${color}\t${note}`;
    });

    navigator.clipboard.writeText([header, ...rows].join("\n")).then(() => {
      const btn = document.getElementById("pinout-copy-btn");
      if (!btn) return;
      const orig = btn.textContent;
      btn.textContent = "✓ Copied!";
      setTimeout(() => { btn.textContent = orig; }, 1800);
    }).catch(() => alert("Clipboard write failed — try again."));
  }

  _buildCircularSVG(device, pins, light = false) {
    const C = light
      ? { body: "#e8e8f4", bodyStroke: "#334466", dash: "#aaaacc", notch: "#c8c8e8", notchStroke: "#334466", notchText: "#888aaa", pinFill: "#ffffff", pinStroke: "#334466", pinText: "#111133" }
      : { body: "#12121f", bodyStroke: "#5a5a8a", dash: "#2a2a4a", notch: "#333355", notchStroke: "#5a5a8a", notchText: "#555577", pinFill: "#0d1020", pinStroke: "#5566aa", pinText: "#dde0f5" };

    const rings      = device.properties?.pinRings || [];
    const pinCount   = pins.length;
    const ringCounts = rings.length ? rings : [pinCount];
    const ringRadii  = ringCounts.length === 3 ? [72, 48, 23]
                     : ringCounts.length === 2 ? [65, 34]
                     : [Math.min(65, Math.max(22, Math.sqrt(pinCount) * 13))];
    const W = 200, H = 200, cx = 100, cy = 100, bodyR = 92;

    let pinNum = 1;
    let pinsHTML = "";
    ringCounts.forEach((count, ri) => {
      const r = ringRadii[ri] ?? 30;
      for (let i = 0; i < count && pinNum <= pinCount; i++, pinNum++) {
        const angle = -Math.PI / 2 + (2 * Math.PI * i / count);
        const px = cx + r * Math.cos(angle);
        const py = cy + r * Math.sin(angle);
        pinsHTML += `<circle cx="${px.toFixed(1)}" cy="${py.toFixed(1)}" r="7" fill="${C.pinFill}" stroke="${C.pinStroke}" stroke-width="1.5"/>
          <text x="${px.toFixed(1)}" y="${(py + 2.5).toFixed(1)}" font-size="6" text-anchor="middle" dominant-baseline="middle" fill="${C.pinText}" font-family="monospace" font-weight="bold">${pinNum}</text>`;
      }
    });

    return `<svg viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg">
      <circle cx="${cx}" cy="${cy}" r="${bodyR}" fill="${C.body}" stroke="${C.bodyStroke}" stroke-width="2"/>
      <circle cx="${cx}" cy="${cy}" r="${bodyR - 5}" fill="none" stroke="${C.dash}" stroke-width="1" stroke-dasharray="3 3"/>
      <rect x="${cx - 5}" y="${cy - bodyR - 2}" width="10" height="8" rx="2" fill="${C.notch}" stroke="${C.notchStroke}" stroke-width="1"/>
      <text x="${cx}" y="${cy - bodyR + 13}" font-size="6" text-anchor="middle" fill="${C.notchText}" font-family="monospace">▲ key</text>
      ${pinsHTML}
    </svg>`;
  }

  _buildSchematicSVG(device, pins, light = false) {
    const C = light
      ? { body: "#e8e8f4", bodyStroke: "#334466", bodyText: "#888aaa", stubStroke: "#334466", pinFill: "#ffffff", pinStroke: "#334466", lblFill: "#334466" }
      : { body: "#12121f", bodyStroke: "#5a5a8a", bodyText: "#444466", stubStroke: "#5566aa", pinFill: "#0d1020", pinStroke: "#5566aa", lblFill: "#8899cc" };

    const bySide = { left: [], right: [], top: [], bottom: [] };
    pins.forEach(p => { const s = p.side || "right"; (bySide[s] || (bySide[s] = [])).push(p); });

    const lr = Math.max(bySide.left.length, bySide.right.length, 1);
    const tb = Math.max(bySide.top.length,  bySide.bottom.length, 0);

    const rowH  = Math.max(9, Math.min(18, 160 / lr));
    const colW  = tb ? Math.max(9, Math.min(18, 80 / tb)) : 18;
    const bodyH = rowH * lr + 12;
    const bodyW = Math.max(56, tb ? colW * tb + 12 : 56);

    const STUB = 20, LBL = 30;
    const padX = bySide.left.length || bySide.right.length ? STUB + LBL + 4 : 10;
    const padY = bySide.top.length  || bySide.bottom.length ? STUB + 14 : 12;

    const W = bodyW + 2 * padX;
    const H = bodyH + 2 * padY;
    const bx = padX, by = padY;

    let pinsHTML = "";
    const stub = (x1, y1, x2, y2, anchor, lx, ly, label) =>
      `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${C.stubStroke}" stroke-width="1.5"/>
       <circle cx="${x2}" cy="${y2}" r="3.5" fill="${C.pinFill}" stroke="${C.pinStroke}" stroke-width="1.5"/>
       <text x="${lx.toFixed(1)}" y="${(ly + 3).toFixed(1)}" font-size="8" text-anchor="${anchor}" fill="${C.lblFill}" font-family="monospace">${label}</text>`;

    bySide.left.forEach((p, i) => {
      const y = by + (i + 1) / (bySide.left.length + 1) * bodyH;
      pinsHTML += stub(bx, y, bx - STUB, y, "end", bx - STUB - 3, y, p.name);
    });
    bySide.right.forEach((p, i) => {
      const y = by + (i + 1) / (bySide.right.length + 1) * bodyH;
      pinsHTML += stub(bx + bodyW, y, bx + bodyW + STUB, y, "start", bx + bodyW + STUB + 3, y, p.name);
    });
    bySide.top.forEach((p, i) => {
      const x = bx + (i + 1) / (bySide.top.length + 1) * bodyW;
      pinsHTML += stub(x, by, x, by - STUB, "middle", x, by - STUB - 4, p.name);
    });
    bySide.bottom.forEach((p, i) => {
      const x = bx + (i + 1) / (bySide.bottom.length + 1) * bodyW;
      pinsHTML += stub(x, by + bodyH, x, by + bodyH + STUB, "middle", x, by + bodyH + STUB + 7, p.name);
    });

    const scale = Math.min(1, 200 / Math.max(W, H));
    const svgW  = Math.round(W * scale);
    const svgH  = Math.round(H * scale);
    return `<svg viewBox="0 0 ${W} ${H}" width="${svgW}" height="${svgH}" xmlns="http://www.w3.org/2000/svg">
      <rect x="${bx}" y="${by}" width="${bodyW}" height="${bodyH}" rx="4" fill="${C.body}" stroke="${C.bodyStroke}" stroke-width="2"/>
      <text x="${(bx + bodyW / 2).toFixed(1)}" y="${(by + bodyH / 2 + 4).toFixed(1)}" font-size="9" text-anchor="middle" fill="${C.bodyText}" font-family="monospace">${device.device_type}</text>
      ${pinsHTML}
    </svg>`;
  }

  _closePinoutPopup() {
    document.getElementById("pinout-modal").style.display = "none";
  }

  // ── Tabs ──────────────────────────────────────────────────────────────────────

  _bindTabs() {
    document.querySelectorAll(".sidebar-tab").forEach(btn => {
      btn.addEventListener("click", () => {
        document.querySelectorAll(".sidebar-tab").forEach(b => b.classList.remove("active"));
        btn.classList.add("active");
        document.querySelectorAll(".tab-panel").forEach(p => {
          p.style.display = p.dataset.panel === btn.dataset.tab ? "" : "none";
        });
      });
    });
  }

  // ── Toolbar ───────────────────────────────────────────────────────────────────

  _bindToolbar() {
    const on = (id, fn) => document.getElementById(id)?.addEventListener("click", fn);
    on("btn-select",    () => this.setMode("select"));
    on("btn-wire",      () => this.setMode("wire"));
    on("btn-delete",    () => this.deleteSelected());
    on("btn-duplicate", () => this.duplicateSelected());
    on("btn-undo",      () => this._undo());
    on("btn-fit",       () => this.canvas.fitView());
    on("btn-new",       () => this.newDiagram());
    on("btn-bom",       () => this._export("bom"));
    on("btn-assembly",  () => this._export("assembly"));
    on("btn-json",      () => this._export("json"));
    on("btn-img",       () => { const n = document.getElementById("diagram-name")?.value || "diagram"; this.canvas.exportImage(n); });
    on("btn-formboard", () => this._export("formboard"));
    on("btn-git",    () => this._openGitModal());
    on("btn-drc",    () => this._runDrc());
    on("btn-import", () => document.getElementById("import-file-input")?.click());
    document.getElementById("import-file-input")?.addEventListener("change", (e) => {
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = async (ev) => {
        try {
          const data = JSON.parse(ev.target.result);
          const diag = await api.diagrams.import(data);
          await this.loadDiagramList();
          await this.openDiagram(diag.id);
        } catch (err) { alert("Import failed: " + err.message); }
        e.target.value = "";
      };
      reader.readAsText(file);
    });

    on("btn-jumps", () => {
      const btn = document.getElementById("btn-jumps");
      const enabled = !this.canvas.jumpsEnabled;
      this.canvas.setJumpsEnabled(enabled);
      btn?.classList.toggle("active", enabled);
    });
    on("btn-snap", () => {
      const btn = document.getElementById("btn-snap");
      const enabled = !this.canvas.snapEnabled;
      this.canvas.toggleSnap(enabled);
      btn?.classList.toggle("active", enabled);
    });
    on("btn-harness", () => {
      const btn = document.getElementById("btn-harness");
      const enabled = !this.canvas.harnessMode;
      this.canvas.setHarnessMode(enabled);
      btn?.classList.toggle("active", enabled);
    });
    on("btn-route-ortho",  () => this._setRouteMode("ortho"));
    on("btn-route-direct", () => this._setRouteMode("direct"));
    on("btn-route-curved", () => this._setRouteMode("curved"));

    document.getElementById("export-toggle")?.addEventListener("click", (e) => { e.stopPropagation(); document.getElementById("export-menu").classList.toggle("open"); });
    document.addEventListener("click", (e) => {
      document.getElementById("export-menu")?.classList.remove("open");
      this._closeCtx();
      if (!e.target.closest("#octopart-results") && !e.target.closest("#btn-octopart-search")) {
        const res = document.getElementById("octopart-results");
        if (res) res.style.display = "none";
      }
    });
    document.addEventListener("contextmenu", (e) => {
      // Close ctx menu if right-clicking outside canvas (browser default handles the rest)
      if (!e.target.closest("#canvas-container")) this._closeCtx();
    });

    document.getElementById("diagram-name")?.addEventListener("change", async (e) => {
      if (this.diagramId) { await api.diagrams.update(this.diagramId, { name: e.target.value }).catch(console.error); this._flashSaved(); }
    });
  }

  // ── Context menu ──────────────────────────────────────────────────────────────

  _ctxMenu() { return document.getElementById("ctx-menu"); }

  _openCtx(x, y, items) {
    const menu = this._ctxMenu();
    menu.innerHTML = items.map(item => {
      if (item === "---") return `<div class="ctx-sep"></div>`;
      return `<div class="ctx-item${item.danger ? " danger" : ""}" data-action="${item.action}">
        ${item.icon ? `<span>${item.icon}</span>` : ""}<span>${item.label}</span>
      </div>`;
    }).join("");
    menu.classList.add("open");
    // Position, keeping within viewport
    const vw = window.innerWidth, vh = window.innerHeight;
    const mw = 180, mh = menu.childElementCount * 32;
    menu.style.left = (x + mw > vw ? x - mw : x) + "px";
    menu.style.top  = (y + mh > vh ? y - mh : y) + "px";
  }

  _closeCtx() { this._ctxMenu().classList.remove("open"); }

  _showCtxDevice(id, x, y) {
    const d = this.canvas.deviceData.get(id);
    const count = this.canvas.selectedDeviceIds.size;
    const isMulti = count > 1;
    const isGroup = d?.device_type === "group";
    const isLocked = !!d?.properties?.locked;

    const items = isMulti ? [
      { action: "dup",          icon: "⊕", label: `Duplicate ${count} items` },
      { action: "zoom",         icon: "⊞", label: "Zoom to selection" },
      "---",
      { action: "align-left",   icon: "⇤", label: "Align Left" },
      { action: "align-right",  icon: "⇥", label: "Align Right" },
      { action: "align-top",    icon: "⇡", label: "Align Top" },
      { action: "align-bottom", icon: "⇣", label: "Align Bottom" },
      ...(count >= 3 ? [
        "---",
        { action: "dist-h", icon: "↔", label: "Distribute Horizontally" },
        { action: "dist-v", icon: "↕", label: "Distribute Vertically" },
      ] : []),
      "---",
      { action: "del", icon: "✕", label: `Delete ${count} items`, danger: true },
    ] : [
      { action: "dup",   icon: "⊕", label: "Duplicate" },
      ...(!isGroup ? [{ action: "addpin", icon: "+", label: "Add Pin" }] : []),
      ...(!isGroup ? [{ action: "savelb", icon: "⬆", label: "Save to Library" }] : []),
      "---",
      { action: "front", icon: "▲", label: "Bring to Front" },
      { action: "back",  icon: "▼", label: "Send to Back" },
      "---",
      isLocked
        ? { action: "unlock", icon: "🔓", label: "Unlock Position" }
        : { action: "lock",   icon: "🔒", label: "Lock Position" },
      "---",
      { action: "del", icon: "✕", label: "Delete", danger: true },
    ];

    this._openCtx(x, y, items);
    this._ctxMenu().onclick = async (e) => {
      const action = e.target.closest(".ctx-item")?.dataset.action;
      this._closeCtx();
      if (!action) return;
      if (action === "dup")          this.duplicateSelected();
      if (action === "del")          this.deleteSelected();
      if (action === "zoom")         this.canvas.zoomToSelection();
      if (action === "addpin"  && d) this._addDevicePin(d);
      if (action === "savelb"  && d) this._saveDeviceAsConnector(d);
      if (action === "front")        { this.canvas.bringToFront(id); const dd = this.canvas.deviceData.get(id); if (dd) { dd.properties = { ...(dd.properties||{}), zOrder: Date.now() }; api.devices.update(id, { properties: dd.properties }).catch(console.error); } }
      if (action === "back")         { this.canvas.sendToBack(id);   const dd = this.canvas.deviceData.get(id); if (dd) { dd.properties = { ...(dd.properties||{}), zOrder: -Date.now() }; api.devices.update(id, { properties: dd.properties }).catch(console.error); } }
      if (action === "lock")         { this.canvas.setDeviceLocked(id, true);  const dd = this.canvas.deviceData.get(id); if (dd) await api.devices.update(id, { properties: dd.properties }).catch(console.error); }
      if (action === "unlock")       { this.canvas.setDeviceLocked(id, false); const dd = this.canvas.deviceData.get(id); if (dd) await api.devices.update(id, { properties: dd.properties }).catch(console.error); }
      if (action === "align-left")   this._alignDevices("left");
      if (action === "align-right")  this._alignDevices("right");
      if (action === "align-top")    this._alignDevices("top");
      if (action === "align-bottom") this._alignDevices("bottom");
      if (action === "dist-h")       this._distributeDevices("h");
      if (action === "dist-v")       this._distributeDevices("v");
    };
  }

  _showCtxWire(id, x, y) {
    const multiIds = this.canvas.selectedWireIds;
    if (multiIds.size > 1 && multiIds.has(id)) {
      // Multi-wire context menu
      const items = [
        { action: "multi-clearwp",   icon: "⌀", label: `Clear waypoints (${multiIds.size} wires)` },
        { action: "multi-autoroute", icon: "⤢", label: `Auto-route (${multiIds.size} wires)` },
      ];
      this._openCtx(x, y, items);
      this._ctxMenu().onclick = async (e) => {
        const action = e.target.closest(".ctx-item")?.dataset.action;
        this._closeCtx();
        if (!action) return;
        if (action === "multi-clearwp") {
          for (const wid of multiIds) {
            const w = this.canvas.wireData.get(wid);
            if (!w) continue;
            w.waypoints = [];
            this.canvas.updateWire(w);
            api.wires.update(wid, { waypoints: [] }).catch(console.error);
          }
          this._flashSaved();
        }
        if (action === "multi-autoroute") {
          for (const wid of multiIds) {
            const newWps = this.canvas.autoRouteWire(wid);
            if (newWps !== null) {
              api.wires.update(wid, { waypoints: newWps }).catch(console.error);
            }
          }
          this._flashSaved();
        }
      };
      return;
    }

    const wire = this.canvas.wireData.get(id);
    const hasWaypoints = (wire?.waypoints?.length ?? 0) > 0;
    const items = [
      { action: "copystyle",  icon: "⎘", label: "Copy Style" },
      ...(this._copiedWireStyle ? [{ action: "pastestyle", icon: "⎗", label: "Paste Style" }] : []),
      ...(wire?.label ? [{ action: "selectnet", icon: "⋈", label: `Select net "${wire.label}"` }] : []),
      "---",
      { action: "autoroute",  icon: "⤢", label: "Auto-route" },
      { action: "straighten", icon: "⤡", label: "Straighten wire" },
      ...(hasWaypoints ? [{ action: "clearwp", icon: "⌀", label: "Clear waypoints" }] : []),
      "---",
      { action: "del", icon: "✕", label: "Delete wire", danger: true },
    ];
    this._openCtx(x, y, items);
    this._ctxMenu().onclick = async (e) => {
      const action = e.target.closest(".ctx-item")?.dataset.action;
      this._closeCtx();
      if (!action) return;
      if (action === "del") this.deleteSelected();
      if (action === "autoroute" && wire) {
        const newWps = this.canvas.autoRouteWire(id);
        if (newWps !== null) {
          api.wires.update(id, { waypoints: newWps }).catch(console.error);
          this._flashSaved();
        }
      }
      if ((action === "clearwp" || action === "straighten") && wire) {
        wire.waypoints = [];
        this.canvas.updateWire(wire);
        api.wires.update(id, { waypoints: [] }).catch(console.error);
        this._flashSaved();
      }
      if (action === "copystyle" && wire) {
        this._copiedWireStyle = {
          color_primary: wire.color_primary,
          color_stripe:  wire.color_stripe,
          gauge:         wire.gauge,
          twisted_pair:  wire.twisted_pair,
          twist_pitch:   wire.twist_pitch,
          shielded:      wire.shielded,
          show_size_label: wire.show_size_label,
        };
      }
      if (action === "pastestyle" && wire && this._copiedWireStyle) {
        Object.assign(wire, this._copiedWireStyle);
        this.canvas.updateWire(wire);
        await api.wires.update(id, this._copiedWireStyle).catch(console.error);
        if (this.canvas.selectedId === id) this._showWireProps(wire);
        this._flashSaved();
      }
      if (action === "selectnet" && wire?.label) {
        this.canvas.highlightNet(wire.label);
      }
    };
  }

  _onMultiWireSelected(ids) {
    // No panel update needed for multi-wire; the count could be shown in status bar
  }

  _setRouteMode(mode) {
    this.canvas.setRouteMode(mode);
    document.querySelectorAll(".route-btn").forEach(b => b.classList.remove("active"));
    document.getElementById(`btn-route-${mode}`)?.classList.add("active");
  }

  _bindKeyboard() {
    document.addEventListener("keydown", (e) => {
      if (["INPUT", "TEXTAREA", "SELECT"].includes(e.target.tagName)) return;
      if (e.key === "Delete" || e.key === "Backspace") this.deleteSelected();
      if (e.key === "Escape") { this.setMode("select"); this._closeCtx(); }
      if (e.key === "w") this.setMode("wire");
      if (e.key === "s") this.setMode("select");
      if (e.key === "f" && !e.shiftKey) this.canvas.fitView();
      if (e.key === "F" && e.shiftKey) this.canvas.zoomToSelection();
      if (e.key === "g") { const btn = document.getElementById("btn-snap"); const en = !this.canvas.snapEnabled; this.canvas.toggleSnap(en); btn?.classList.toggle("active", en); }
      if (e.key === "h") { const btn = document.getElementById("btn-harness"); const en = !this.canvas.harnessMode; this.canvas.setHarnessMode(en); btn?.classList.toggle("active", en); }
      if ((e.ctrlKey || e.metaKey) && e.key === "c" && this.canvas.selectedType === "device") { e.preventDefault(); this.copySelected(); }
      if ((e.ctrlKey || e.metaKey) && e.key === "v") { e.preventDefault(); this.pasteClipboard(); }
      if ((e.ctrlKey || e.metaKey) && e.key === "d") { e.preventDefault(); this.duplicateSelected(); }
      if ((e.ctrlKey || e.metaKey) && e.key === "z") { e.preventDefault(); this._undo(); }

      // Arrow key nudge
      if (["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)) {
        const ids = [...this.canvas.selectedDeviceIds];
        if (!ids.length) return;
        e.preventDefault();
        const step = e.shiftKey ? 10 : 1;
        const dx = e.key === "ArrowLeft" ? -step : e.key === "ArrowRight" ? step : 0;
        const dy = e.key === "ArrowUp"   ? -step : e.key === "ArrowDown"  ? step : 0;
        ids.forEach(id => {
          const g = this.canvas.deviceNodes.get(id);
          const d = this.canvas.deviceData.get(id);
          if (!g || !d) return;
          d.x += dx; d.y += dy;
          g.x(d.x); g.y(d.y);
          this.canvas._redrawWiresFor(id);
        });
        this.canvas.deviceLayer.batchDraw();
        clearTimeout(this._nudgeSaveTimer);
        this._nudgeSaveTimer = setTimeout(() => {
          ids.forEach(id => {
            const d = this.canvas.deviceData.get(id);
            if (d) this._savePosForCurrentView(id, d.x, d.y);
          });
          this._flashSaved();
        }, 300);
      }
    });
  }

  // ── Properties panel ──────────────────────────────────────────────────────────

  _bindProps() {
    this._onPropChange("prop-reference",    (v) => this._patchDevice({ reference: v }, true));
    this._onPropChange("prop-label",        (v) => this._patchDevice({ label: v }, true));
    this._onPropChange("prop-partnumber",   (v) => this._patchDeviceProp("partNumber", v));
    this._onPropChange("prop-manufacturer", (v) => this._patchDeviceProp("manufacturer", v));
    this._onPropChange("prop-fontsize",     (v) => this._patchDeviceProp("fontSize", Math.max(6, Math.min(72, parseInt(v) || 12)), true));

    this._onPropChange("wire-label",  (v) => this._patchWire({ label: v }));
    this._onPropChange("wire-gauge",  (v) => this._patchWire({ gauge: v }));
    this._onPropChange("wire-length", (v) => this._patchWire({ length: v ? parseFloat(v) : null }, true));
    this._onPropChange("wire-unit",   (v) => this._patchWire({ length_unit: v }, true));
    this._onPropChange("wire-notes",  (v) => this._patchWire({ notes: v }));

    document.getElementById("wire-color")?.addEventListener("input", (e) => this._patchWire({ color_primary: e.target.value }, true));

    document.getElementById("wire-stripe-enabled")?.addEventListener("change", (e) => {
      const picker = document.getElementById("wire-stripe");
      picker.disabled = !e.target.checked;
      picker.style.opacity = e.target.checked ? "1" : "0.3";
      this._patchWire({ color_stripe: e.target.checked ? picker.value : null }, true);
    });
    document.getElementById("wire-stripe")?.addEventListener("input", (e) => {
      const isTwisted = document.getElementById("wire-twisted")?.checked;
      if (isTwisted || document.getElementById("wire-stripe-enabled")?.checked) {
        this._patchWire({ color_stripe: e.target.value }, true);
      }
    });

    document.getElementById("btn-octopart-search")?.addEventListener("click", () => this._octopartSearch());

    document.getElementById("group-fill-color")?.addEventListener("input", async (e) => {
      if (this.canvas.selectedType !== "device") return;
      const d = this.canvas.deviceData.get(this.canvas.selectedId);
      if (!d || d.device_type !== "group") return;
      d.properties = { ...d.properties, fillColor: e.target.value };
      await api.devices.update(d.id, { properties: d.properties }).catch(console.error);
      this.canvas.updateDevice(d);
      this._flashSaved();
    });
    document.getElementById("group-fill-opacity")?.addEventListener("input", async (e) => {
      if (this.canvas.selectedType !== "device") return;
      const d = this.canvas.deviceData.get(this.canvas.selectedId);
      if (!d || d.device_type !== "group") return;
      const opacity = parseFloat(e.target.value);
      document.getElementById("group-fill-opacity-val").textContent = Math.round(opacity * 100) + "%";
      d.properties = { ...d.properties, fillOpacity: opacity };
      await api.devices.update(d.id, { properties: d.properties }).catch(console.error);
      this.canvas.updateDevice(d);
      this._flashSaved();
    });

    document.getElementById("cable-jacket-color")?.addEventListener("input", async (e) => {
      if (this.canvas.selectedType !== "device") return;
      const d = this.canvas.deviceData.get(this.canvas.selectedId);
      if (!d || d.device_type !== "cable") return;
      d.properties = { ...d.properties, jacketColor: e.target.value };
      await api.devices.update(d.id, { properties: d.properties }).catch(console.error);
      this.canvas.updateDevice(d);
      this._flashSaved();
    });
    document.getElementById("cable-sleeve-length")?.addEventListener("input", async (e) => {
      if (this.canvas.selectedType !== "device") return;
      const d = this.canvas.deviceData.get(this.canvas.selectedId);
      if (!d || d.device_type !== "cable") return;
      const val = parseInt(e.target.value);
      document.getElementById("cable-sleeve-length-val").textContent = val + " px";
      d.properties = { ...d.properties, sleeveLength: val };
      await api.devices.update(d.id, { properties: d.properties }).catch(console.error);
      this.canvas.updateDevice(d);
      this._flashSaved();
    });
    document.getElementById("prop-add-conductor")?.addEventListener("click", () => {
      if (this.canvas.selectedType !== "device") return;
      const d = this.canvas.deviceData.get(this.canvas.selectedId);
      if (d?.device_type === "cable") this._addConductor(d);
    });

    document.getElementById("wire-twisted")?.addEventListener("change", (e) => {
      const pitchEl = document.getElementById("wire-twist-pitch");
      pitchEl.disabled = !e.target.checked;
      pitchEl.style.opacity = e.target.checked ? "1" : "0.3";
      const updates = { twisted_pair: e.target.checked };
      if (e.target.checked) {
        const stripeEl = document.getElementById("wire-stripe");
        if (!document.getElementById("wire-stripe-enabled").checked) {
          stripeEl.value = "#cccccc";
          updates.color_stripe = "#cccccc";
        }
      }
      this._patchWire(updates, true);
      this._updateWireTwistedUI(e.target.checked);
    });
    document.getElementById("wire-twist-pitch")?.addEventListener("change", (e) => {
      this._patchWire({ twist_pitch: Math.max(8, Math.min(64, parseFloat(e.target.value) || 16)) }, true);
    });
    document.getElementById("wire-shielded")?.addEventListener("change", (e) => {
      this._patchWire({ shielded: e.target.checked }, true);
    });
    document.getElementById("wire-show-size-label")?.addEventListener("change", (e) => {
      this._patchWire({ show_size_label: e.target.checked }, true);
    });

    document.getElementById("wire-bundle-select")?.addEventListener("change", (e) => {
      if (this._updatingBundleDropdown) return;
      const bundleId = e.target.value ? parseInt(e.target.value) : null;
      this._patchWire({ bundle_id: bundleId }, true);
      this._refreshBundleEditPanel(bundleId);
    });
    document.getElementById("wire-bundle-new")?.addEventListener("click", async () => {
      if (!this.diagramId) return;
      try {
        const b = await api.bundles.create({ diagram_id: this.diagramId, label: "New Bundle", jacket_color: "#2a2a2a" });
        this._bundles.push(b);
        this.canvas.loadBundles(this._bundles);
        this._refreshBundleDropdown(b.id);
        this._patchWire({ bundle_id: b.id }, true);
        this._refreshBundleEditPanel(b.id);
      } catch (e) { console.error("Create bundle failed:", e); }
    });
    document.getElementById("wire-bundle-label")?.addEventListener("change", async (e) => {
      const bundleId = parseInt(document.getElementById("wire-bundle-select")?.value);
      if (!bundleId) return;
      try {
        const updated = await api.bundles.update(bundleId, { label: e.target.value });
        const idx = this._bundles.findIndex(b => b.id === bundleId);
        if (idx >= 0) this._bundles[idx] = updated;
        this.canvas.loadBundles(this._bundles);
        this._refreshBundleDropdown(bundleId);
      } catch (ex) { console.error(ex); }
    });
    document.getElementById("wire-bundle-color")?.addEventListener("input", async (e) => {
      const bundleId = parseInt(document.getElementById("wire-bundle-select")?.value);
      if (!bundleId) return;
      try {
        const updated = await api.bundles.update(bundleId, { jacket_color: e.target.value });
        const idx = this._bundles.findIndex(b => b.id === bundleId);
        if (idx >= 0) this._bundles[idx] = updated;
        this.canvas.loadBundles(this._bundles);
      } catch (ex) { console.error(ex); }
    });
    document.getElementById("wire-bundle-delete")?.addEventListener("click", async () => {
      const bundleId = parseInt(document.getElementById("wire-bundle-select")?.value);
      if (!bundleId || !confirm("Delete this bundle? Wires will be unassigned.")) return;
      try {
        await api.bundles.delete(bundleId);
        this._bundles = this._bundles.filter(b => b.id !== bundleId);
        this.canvas.wireData.forEach((w, wId) => {
          if (w.bundle_id === bundleId) { w.bundle_id = null; api.wires.update(wId, { bundle_id: null }).catch(console.error); }
        });
        this.canvas.loadBundles(this._bundles); // also calls _renderBundles
        const selWire = this.canvas.wireData.get(this.canvas.selectedId);
        if (selWire?.bundle_id === null) this._refreshBundleDropdown(null);
        else this._refreshBundleDropdown(selWire?.bundle_id || null);
        this._refreshBundleEditPanel(selWire?.bundle_id || null);
      } catch (ex) { console.error(ex); }
    });

    document.getElementById("prop-add-pin")?.addEventListener("click", () => {
      if (this.canvas.selectedType !== "device") return;
      const d = this.canvas.deviceData.get(this.canvas.selectedId);
      if (d) this._addDevicePin(d);
    });
    document.getElementById("prop-save-connector")?.addEventListener("click", () => {
      if (this.canvas.selectedType !== "device") return;
      const d = this.canvas.deviceData.get(this.canvas.selectedId);
      if (d) this._saveDeviceAsConnector(d);
    });

    const presetSelect = document.getElementById("wire-color-preset");
    if (presetSelect) {
      WIRE_COLORS.forEach(c => {
        const opt = document.createElement("option");
        opt.value = c.hex; opt.textContent = c.name;
        presetSelect.appendChild(opt);
      });
      presetSelect.addEventListener("change", (e) => {
        if (!e.target.value) return;
        document.getElementById("wire-color").value = e.target.value;
        this._patchWire({ color_primary: e.target.value }, true);
        presetSelect.value = "";
      });
    }
  }

  _onPropChange(id, fn) { document.getElementById(id)?.addEventListener("change", (e) => fn(e.target.value)); }

  async _patchDevice(data, redraw = false) {
    if (this.canvas.selectedType !== "device") return;
    const id = this.canvas.selectedId;
    const d = this.canvas.deviceData.get(id);
    const oldData = d ? Object.fromEntries(Object.keys(data).map(k => [k, d[k]])) : {};
    if (d) Object.assign(d, data);
    await api.devices.update(id, data).catch(console.error);
    this._flashSaved();
    if (redraw && d) this.canvas.updateDevice(d);
    this._pushUndo(async () => {
      const cur = this.canvas.deviceData.get(id);
      if (cur) Object.assign(cur, oldData);
      await api.devices.update(id, oldData).catch(console.error);
      if (redraw && cur) this.canvas.updateDevice(cur);
      this._flashSaved();
    });
  }

  async _patchDeviceProp(key, value, redraw = false) {
    if (this.canvas.selectedType !== "device") return;
    const id = this.canvas.selectedId;
    const d = this.canvas.deviceData.get(id);
    if (!d) return;
    const oldProps = { ...(d.properties || {}) };
    d.properties = { ...oldProps, [key]: value };
    await api.devices.update(id, { properties: d.properties }).catch(console.error);
    this._flashSaved();
    if (redraw) { this.canvas.updateDevice(d); this.canvas.selectDevice(id); }
    this._pushUndo(async () => {
      const cur = this.canvas.deviceData.get(id);
      if (cur) { cur.properties = oldProps; }
      await api.devices.update(id, { properties: oldProps }).catch(console.error);
      if (redraw) { if (cur) this.canvas.updateDevice(cur); this.canvas.selectDevice(id); }
      this._flashSaved();
    });
  }

  async _patchWire(data, redraw = false) {
    if (this.canvas.selectedType !== "wire") return;
    const id = this.canvas.selectedId;
    const w = this.canvas.wireData.get(id);
    const oldData = w ? Object.fromEntries(Object.keys(data).map(k => [k, w[k]])) : {};
    if (w) {
      Object.assign(w, data);
      if (redraw) this.canvas.updateWire(w);
    }
    try {
      await api.wires.update(id, data);
      this._flashSaved();
      this._pushUndo(async () => {
        const cur = this.canvas.wireData.get(id);
        if (cur) { Object.assign(cur, oldData); this.canvas.updateWire(cur); }
        await api.wires.update(id, oldData).catch(console.error);
        this._flashSaved();
      });
    } catch (e) {
      console.error("Wire save failed:", e);
      this._flashError();
    }
  }

  // ── Diagram management ────────────────────────────────────────────────────────

  async loadDiagramList() {
    const list = document.getElementById("diagram-list");
    try {
      const diagrams = await api.diagrams.list();
      if (!diagrams.length) {
        list.innerHTML = '<p class="muted small" style="padding:6px 10px">No diagrams yet</p>';
        return;
      }
      list.innerHTML = "";
      diagrams.forEach(d => {
        const el = document.createElement("div");
        el.className = "diagram-item" + (d.id === this.diagramId ? " active" : "");
        el.dataset.id = d.id;
        el.innerHTML = `<span class="di-name">${d.name}</span>
          <span class="di-date">${new Date(d.updated_at + "Z").toLocaleDateString()}</span>
          <button class="di-dup-btn" title="Duplicate diagram">⊕</button>
          <button class="di-del-btn" title="Delete diagram">×</button>`;
        el.querySelector(".di-name").addEventListener("click", () => this.openDiagram(d.id));
        el.querySelector(".di-date").addEventListener("click", () => this.openDiagram(d.id));
        el.querySelector(".di-dup-btn").addEventListener("click", async (e) => {
          e.stopPropagation();
          try {
            const copy = await api.diagrams.duplicate(d.id);
            await this.loadDiagramList();
            await this.openDiagram(copy.id);
          } catch (err) { alert("Duplicate failed: " + err.message); }
        });
        el.querySelector(".di-del-btn").addEventListener("click", (e) => {
          e.stopPropagation();
          this.deleteDiagram(d.id, d.name);
        });
        list.appendChild(el);
      });
    } catch { list.innerHTML = '<p class="muted small" style="padding:6px 10px">Failed to load</p>'; }
  }

  async deleteDiagram(id, name) {
    if (!confirm(`Delete "${name}" and all its contents? This cannot be undone.`)) return;
    try {
      await api.diagrams.delete(id);
      if (this.diagramId === id) {
        this.diagramId = null;
        this.currentViewId = null;
        this._views = [];
        localStorage.removeItem("lastDiagramId");
        this.canvas.loadDiagram({ devices: [], wires: [] });
        document.getElementById("diagram-name").value = "";
        document.getElementById("canvas-placeholder").style.display = "";
        document.getElementById("view-tab-bar").style.display = "none";
        this._clearProps();
      }
      await this.loadDiagramList();
    } catch (e) { alert("Failed to delete: " + e.message); }
  }

  async newDiagram() {
    const name = prompt("Diagram name:", "New Diagram");
    if (!name) return;
    try {
      const d = await api.diagrams.create({ name });
      await this.loadDiagramList();
      await this.openDiagram(d.id);
    } catch (e) { alert("Failed to create: " + e.message); }
  }

  async openDiagram(id) {
    try {
      // Tear down formboard canvas so it's rebuilt fresh for the new diagram
      if (this._fb) { this._fb.destroy(); this._fb = null; }
      this._fbActive = false;
      document.getElementById("canvas-container").style.display = "";
      document.getElementById("fb-container").style.display = "none";
      document.getElementById("fb-toolbar").style.display = "none";
      document.getElementById("props-formboard").style.display = "none";
      document.getElementById("btn-formboard-tab")?.classList.remove("active");

      const diagram = await api.diagrams.get(id);
      this.diagramId = id;
      this.currentViewId = null;
      localStorage.setItem("lastDiagramId", id);
      document.getElementById("diagram-name").value = diagram.name;
      document.getElementById("canvas-placeholder").style.display = "none";
      this._bundles = diagram.wire_bundles || [];
      this.canvas.loadDiagram(diagram);
      this.canvas.loadBundles(this._bundles);
      if (diagram.devices?.length) setTimeout(() => this.canvas.fitView(), 50);
      this.setMode("select");
      this._clearProps();
      await this.loadDiagramList();
      await this._loadViews();
    } catch (e) {
      localStorage.removeItem("lastDiagramId");
      console.error("Failed to open diagram:", e);
    }
  }

  // ── Views ─────────────────────────────────────────────────────────────────────

  async _loadViews() {
    if (!this.diagramId) return;
    try { this._views = await api.views.listForDiagram(this.diagramId); }
    catch { this._views = []; }
    this._renderViewTabs();
  }

  _renderViewTabs() {
    const bar = document.getElementById("view-tab-bar");
    if (!bar) return;
    // Remove all view tabs (keep add button)
    bar.querySelectorAll(".view-tab:not(.fb-tab)").forEach(t => t.remove());
    const addBtn = document.getElementById("btn-add-view");

    const mainTab = document.createElement("button");
    mainTab.className = "view-tab" + (this.currentViewId === null ? " active" : "");
    mainTab.dataset.viewId = "main";
    mainTab.textContent = "Main";
    mainTab.addEventListener("click", () => this._switchToView(null));
    bar.insertBefore(mainTab, addBtn);

    this._views.forEach(v => {
      const tab = document.createElement("button");
      tab.className = "view-tab" + (this.currentViewId === v.id ? " active" : "");
      tab.dataset.viewId = v.id;

      const label = document.createElement("span");
      label.textContent = v.name;
      tab.appendChild(label);

      const closeBtn = document.createElement("span");
      closeBtn.textContent = "×";
      closeBtn.className = "view-tab-close";
      closeBtn.title = "Delete view";
      closeBtn.addEventListener("click", async (e) => {
        e.stopPropagation();
        if (!confirm(`Delete view "${v.name}"?`)) return;
        try {
          await api.views.delete(v.id);
          this._views = this._views.filter(x => x.id !== v.id);
          if (this.currentViewId === v.id) await this._switchToView(null);
          else this._renderViewTabs();
        } catch (err) { alert("Failed to delete view: " + err.message); }
      });
      tab.appendChild(closeBtn);

      tab.addEventListener("dblclick", () => this._renameView(v));
      tab.addEventListener("click", () => this._switchToView(v.id));
      tab.addEventListener("contextmenu", (e) => { e.preventDefault(); this._viewTabCtx(v, e.clientX, e.clientY); });
      bar.insertBefore(tab, addBtn);
    });

    bar.style.display = this.diagramId ? "" : "none";

    if (!addBtn._bound) {
      addBtn._bound = true;
      addBtn.addEventListener("click", () => this._addView());
    }
  }

  async _addView() {
    const name = prompt("View name (e.g. \"Curved\"):", "View " + (this._views.length + 1));
    if (!name || !this.diagramId) return;
    const routeMode = prompt("Default routing (direct / curved / ortho):", "direct") || "direct";
    try {
      const v = await api.views.create({ diagram_id: this.diagramId, name, route_mode: routeMode });
      this._views.push(v);
      this._renderViewTabs();
      await this._switchToView(v.id);
    } catch (e) { alert("Failed to create view: " + e.message); }
  }

  async _renameView(v) {
    const name = prompt("Rename view:", v.name);
    if (!name) return;
    try {
      const updated = await api.views.update(v.id, { name });
      const idx = this._views.findIndex(x => x.id === v.id);
      if (idx >= 0) this._views[idx] = updated;
      this._renderViewTabs();
    } catch (e) { alert("Failed to rename: " + e.message); }
  }

  _viewTabCtx(v, x, y) {
    this._openCtx(x, y, [
      { action: "rename", icon: "✏", label: "Rename…" },
      { action: "del",    icon: "✕", label: "Delete view", danger: true },
    ]);
    this._ctxMenu().onclick = async (e) => {
      const action = e.target.closest(".ctx-item")?.dataset.action;
      this._closeCtx();
      if (action === "rename") this._renameView(v);
      if (action === "del") {
        if (!confirm(`Delete view "${v.name}"?`)) return;
        try {
          await api.views.delete(v.id);
          this._views = this._views.filter(x => x.id !== v.id);
          if (this.currentViewId === v.id) await this._switchToView(null);
          else this._renderViewTabs();
        } catch (err) { alert("Failed to delete view: " + err.message); }
      }
    };
  }

  async _switchToView(viewId) {
    this.currentViewId = viewId;
    const diagram = await api.diagrams.get(this.diagramId).catch(() => null);
    if (!diagram) return;

    if (viewId === null) {
      // Restore main layout — reload the diagram as-is
      this.canvas.loadDiagram(diagram);
      this.canvas.loadBundles(this._bundles);
      const routeBtn = document.querySelector(".route-btn.active");
      // Keep current route mode
    } else {
      const view = this._views.find(v => v.id === viewId);
      const layout = await api.views.getLayout(viewId).catch(() => ({ device_positions: {}, wire_waypoints: {} }));

      this.canvas.loadDiagram(diagram);
      this.canvas.loadBundles(this._bundles);

      // Apply stored view positions
      const storedIds = new Set(Object.keys(layout.device_positions).map(Number));
      Object.entries(layout.device_positions).forEach(([devIdStr, pos]) => {
        const devId = parseInt(devIdStr);
        const d = this.canvas.deviceData.get(devId);
        const g = this.canvas.deviceNodes.get(devId);
        if (d && g) { d.x = pos.x; d.y = pos.y; g.x(pos.x); g.y(pos.y); }
      });

      // Snapshot any device NOT yet in this view's layout so main-tab moves
      // can never bleed through after this point.
      const toSnapshot = [];
      this.canvas.deviceData.forEach((d, devId) => {
        if (!storedIds.has(devId)) toSnapshot.push({ devId, x: d.x, y: d.y });
      });
      toSnapshot.forEach(({ devId, x, y }) =>
        api.views.updateDevicePos(viewId, devId, { x, y }).catch(console.error)
      );

      // Apply stored wire waypoints
      Object.entries(layout.wire_waypoints).forEach(([wireIdStr, wps]) => {
        const wireId = parseInt(wireIdStr);
        const w = this.canvas.wireData.get(wireId);
        if (w) { w.waypoints = wps; }
      });
      this.canvas.deviceLayer.batchDraw();
      this.canvas.wireLayer.batchDraw();

      if (view?.route_mode) this._setRouteMode(view.route_mode);
    }

    this._renderViewTabs();
    this.setMode("select");
    this._clearProps();
  }

  // ── DRC ───────────────────────────────────────────────────────────────────────

  _runDrc() {
    if (!this.diagramId) return this._needDiagram();
    const devices = [...this.canvas.deviceData.values()];
    const wires   = [...this.canvas.wireData.values()];

    const categories = [
      { key: "unconnected", label: "Unconnected Pins",    icon: "🔴", items: [] },
      { key: "dupref",      label: "Duplicate References",icon: "🟠", items: [] },
      { key: "nolength",    label: "Missing Wire Length",  icon: "🔵", items: [] },
      { key: "nopn",        label: "Missing Part Numbers", icon: "🟡", items: [] },
    ];
    const cat = Object.fromEntries(categories.map(c => [c.key, c.items]));

    // Unconnected pins
    const connectedPins = new Set();
    wires.forEach(w => {
      if (w.from_device_id) connectedPins.add(`${w.from_device_id}::${w.from_pin}`);
      if (w.to_device_id)   connectedPins.add(`${w.to_device_id}::${w.to_pin}`);
    });
    devices.forEach(d => {
      if (d.device_type === "group") return;
      (d.pins || []).forEach(pin => {
        if (!connectedPins.has(`${d.id}::${pin.id}`))
          cat.unconnected.push(`${d.reference || d.label || "Device"} — pin "${pin.name || pin.id}"`);
      });
    });

    // Duplicate references
    const refCount = new Map();
    devices.forEach(d => { if (d.reference) refCount.set(d.reference, (refCount.get(d.reference) || 0) + 1); });
    refCount.forEach((count, ref) => {
      if (count > 1) cat.dupref.push(`"${ref}" used on ${count} devices`);
    });

    // Missing wire length
    wires.forEach(w => {
      if (!w.length) cat.nolength.push(`Wire ${w.label ? `"${w.label}"` : `ID ${w.id}`}`);
    });

    // Missing part numbers
    devices.forEach(d => {
      if (d.device_type === "group") return;
      if (!d.properties?.partNumber) cat.nopn.push(`${d.reference || d.label || "Device"}`);
    });

    // Render
    const modal   = document.getElementById("drc-modal");
    const results = document.getElementById("drc-results");
    if (!modal || !results) return;

    const totalIssues = categories.reduce((s, c) => s + c.items.length, 0);

    if (!totalIssues) {
      results.innerHTML = `<div style="color:#6ec97b;padding:16px;text-align:center;font-size:14px">✓ No issues found</div>`;
    } else {
      results.innerHTML = categories.map(c => {
        const count = c.items.length;
        const catId = `drc-cat-${c.key}`;
        const rows  = c.items.map(msg =>
          `<div class="drc-row">${msg}</div>`
        ).join("");
        return `
          <div class="drc-category">
            <label class="drc-cat-header">
              <input type="checkbox" class="drc-toggle" data-cat="${catId}" ${count ? "checked" : "disabled"}>
              <span class="drc-cat-icon">${c.icon}</span>
              <span class="drc-cat-label">${c.label}</span>
              <span class="drc-cat-count">${count}</span>
            </label>
            <div id="${catId}" class="drc-cat-body" ${!count ? 'style="display:none"' : ""}>
              ${count ? rows : '<div class="drc-row drc-none">None</div>'}
            </div>
          </div>`;
      }).join("");

      results.querySelectorAll(".drc-toggle").forEach(cb => {
        cb.addEventListener("change", () => {
          const body = document.getElementById(cb.dataset.cat);
          if (body) body.style.display = cb.checked ? "" : "none";
        });
      });
    }

    modal.style.display = "flex";
    document.getElementById("drc-close")?.addEventListener("click", () => { modal.style.display = "none"; }, { once: true });
    modal.addEventListener("click", (e) => { if (e.target === modal) modal.style.display = "none"; }, { once: true });
  }

  // ── Actions ───────────────────────────────────────────────────────────────────

  setMode(mode) {
    this.canvas.setMode(mode);
    document.querySelectorAll(".mode-btn").forEach(b => b.classList.remove("active"));
    document.getElementById(`btn-${mode}`)?.classList.add("active");
    const ind = document.getElementById("mode-indicator");
    if (ind) ind.textContent = mode === "wire"
      ? "Wire Mode  —  drag from a pin to another pin to connect  (Esc to cancel)"
      : "";
  }

  async addDevice(typeKey, wx, wy) {
    if (!this.diagramId) return this._needDiagram();
    const def = buildDefaultDevice(typeKey, this.diagramId);
    if (!def) return;
    def.x = wx - def.width / 2;
    def.y = wy - def.height / 2;
    try {
      const device = await api.devices.create(def);
      this.canvas.addDevice(device);
      this._flashSaved();
      this._pushUndo(async () => {
        this.canvas.removeDevice(device.id);
        await api.devices.delete(device.id).catch(console.error);
        this._flashSaved();
      });
    } catch (e) { console.error("Create device failed:", e); }
  }

  async addConnector(connId, wx, wy) {
    if (!this.diagramId) return this._needDiagram();
    let def;
    if (connId.startsWith("custom_")) {
      const id = parseInt(connId.replace("custom_", ""));
      const conn = this._customConnectors.find(c => c.id === id);
      if (!conn) return;
      def = this._customConnectorToDevice(conn, this.diagramId);
    } else {
      def = connectorToDevice(connId, this.diagramId);
    }
    if (!def) return;
    def.x = wx - def.width / 2;
    def.y = wy - def.height / 2;
    try {
      const device = await api.devices.create(def);
      this.canvas.addDevice(device);
      this._flashSaved();
      this._pushUndo(async () => {
        this.canvas.removeDevice(device.id);
        await api.devices.delete(device.id).catch(console.error);
        this._flashSaved();
      });
    } catch (e) { console.error("Create connector failed:", e); }
  }

  _customConnectorToDevice(conn, diagramId) {
    const pinCount = conn.pin_count;
    const w = 120;
    const h = Math.max(60, pinCount * 18 + 20);
    const pins = Array.from({ length: pinCount }, (_, i) => ({
      id: `pin_${i + 1}`,
      name: (conn.pin_labels && conn.pin_labels[i]) || String(i + 1),
      side: "right",
      x_offset: w,
      y_offset: ((i + 1) / (pinCount + 1)) * h,
    }));
    return {
      diagram_id: diagramId,
      device_type: "connector",
      label: conn.name,
      reference: "",
      x: 200, y: 200,
      width: w, height: h,
      properties: { pinCount, orientation: "right", partNumber: conn.part_number || "", manufacturer: conn.manufacturer || "", customConnectorId: conn.id },
      pins,
    };
  }

  _conductorColorForPin(deviceId, pinId) {
    const d = this.canvas.deviceData.get(deviceId);
    if (d?.device_type !== "cable") return null;
    const m = pinId.match(/^[LR](\d+)$/);
    if (!m) return null;
    return d.properties?.conductors?.[parseInt(m[1]) - 1]?.color || null;
  }

  async createWire(fromDev, fromPin, toDev, toPin) {
    if (!this.diagramId) return;
    try {
      const autoColor = this._conductorColorForPin(fromDev, fromPin)
                     || this._conductorColorForPin(toDev, toPin)
                     || "#CC0000";
      const wire = await api.wires.create({
        diagram_id: this.diagramId,
        from_device_id: fromDev, from_pin: fromPin,
        to_device_id: toDev,    to_pin: toPin,
        color_primary: autoColor, gauge: "18 AWG",
      });
      this.canvas.addWire(wire);
      this.setMode("select");
      this.canvas.selectWire(wire.id);
      this._showWireProps(wire);
      this._flashSaved();
      this._pushUndo(async () => {
        this.canvas.clearSelection();
        this._clearProps();
        this.canvas.removeWire(wire.id);
        await api.wires.delete(wire.id).catch(console.error);
        this._flashSaved();
      });
    } catch (e) { console.error("Create wire failed:", e); }
  }

  async deleteSelected() {
    const deviceIds = [...this.canvas.selectedDeviceIds];
    if (deviceIds.length) {
      // Snapshot data for undo before clearing
      const deviceSnaps = deviceIds.map(id => JSON.parse(JSON.stringify(this.canvas.deviceData.get(id)))).filter(Boolean);
      const wireIds = new Set();
      deviceIds.forEach(id => {
        this.canvas.wireData.forEach((w, wId) => {
          if (w.from_device_id === id || w.to_device_id === id) wireIds.add(wId);
        });
      });
      const wireSnaps = [...wireIds].map(wId => JSON.parse(JSON.stringify(this.canvas.wireData.get(wId)))).filter(Boolean);

      this.canvas.clearSelection();
      this._clearProps();
      try {
        for (const wId of wireIds) { await api.wires.delete(wId); this.canvas.removeWire(wId); }
        for (const id of deviceIds) { await api.devices.delete(id); this.canvas.removeDevice(id); }
        this._flashSaved();
        this._pushUndo(async () => {
          for (const snap of deviceSnaps) {
            const restored = await api.devices.create(snap).catch(console.error);
            if (restored) this.canvas.addDevice(restored);
          }
          for (const snap of wireSnaps) {
            const restored = await api.wires.create(snap).catch(console.error);
            if (restored) this.canvas.addWire(restored);
          }
          this._flashSaved();
        });
      } catch (e) { console.error("Delete failed:", e); }
      return;
    }
    if (this.canvas.selectedType === "wire" && this.canvas.selectedId) {
      const id = this.canvas.selectedId;
      const wireSnap = JSON.parse(JSON.stringify(this.canvas.wireData.get(id)));
      this.canvas.clearSelection();
      this._clearProps();
      try {
        await api.wires.delete(id); this.canvas.removeWire(id); this._flashSaved();
        this._pushUndo(async () => {
          const restored = await api.wires.create(wireSnap).catch(console.error);
          if (restored) { this.canvas.addWire(restored); this._flashSaved(); }
        });
      }
      catch (e) { console.error("Delete failed:", e); }
    }
  }

  copySelected() {
    const ids = new Set(this.canvas.selectedDeviceIds);
    if (!ids.size) return;
    this._clipboard = [...ids]
      .map(id => JSON.parse(JSON.stringify(this.canvas.deviceData.get(id))))
      .filter(Boolean);
    // Collect wires where both endpoints are within the selection
    this._clipboardWires = [];
    this.canvas.wireData.forEach(wire => {
      if (ids.has(wire.from_device_id) && ids.has(wire.to_device_id))
        this._clipboardWires.push(JSON.parse(JSON.stringify(wire)));
    });
    this._pasteCount = 0;
  }

  async pasteClipboard() {
    if (!this._clipboard?.length || !this.diagramId) return;
    this._pasteCount++;
    await this._cloneDevices(this._clipboard, this._pasteCount * 30);
  }

  async duplicateSelected() {
    const ids = new Set(this.canvas.selectedDeviceIds);
    if (!ids.size || !this.diagramId) return;
    const sources = [...ids]
      .map(id => JSON.parse(JSON.stringify(this.canvas.deviceData.get(id))))
      .filter(Boolean);
    this._clipboard = sources;
    this._clipboardWires = [];
    this.canvas.wireData.forEach(wire => {
      if (ids.has(wire.from_device_id) && ids.has(wire.to_device_id))
        this._clipboardWires.push(JSON.parse(JSON.stringify(wire)));
    });
    this._pasteCount = 1;
    await this._cloneDevices(sources, 30);
  }

  async _cloneDevices(sources, offset) {
    this.canvas.clearSelection();
    const clonedIds  = [];
    const oldToNew   = new Map(); // old device id → new device id

    for (const source of sources) {
      const def = {
        diagram_id: this.diagramId,
        device_type: source.device_type,
        label: source.label,
        reference: "",
        x: source.x + offset,
        y: source.y + offset,
        width: source.width,
        height: source.height,
        properties: JSON.parse(JSON.stringify(source.properties || {})),
        pins: JSON.parse(JSON.stringify(source.pins || [])),
      };
      try {
        const device = await api.devices.create(def);
        this.canvas.addDevice(device);
        this.canvas.addToSelection(device.id);
        clonedIds.push(device.id);
        oldToNew.set(source.id, device.id);
      } catch (e) { console.error("Clone device failed:", e); }
    }

    // Recreate wires that connect devices within the cloned set.
    // Pin IDs are stored as JSON strings ("pin_1", etc.) and are preserved
    // verbatim in the cloned device, so only device IDs need remapping.
    const clonedWireIds = [];
    for (const w of (this._clipboardWires || [])) {
      const newFrom = oldToNew.get(w.from_device_id);
      const newTo   = oldToNew.get(w.to_device_id);
      if (!newFrom || !newTo) continue;
      try {
        const wire = await api.wires.create({
          diagram_id:    this.diagramId,
          from_device_id: newFrom, from_pin: w.from_pin,
          to_device_id:   newTo,   to_pin:   w.to_pin,
          color_primary: w.color_primary,
          color_stripe:  w.color_stripe,
          gauge:         w.gauge,
          label:         w.label,
          twisted_pair:  w.twisted_pair,
          twist_pitch:   w.twist_pitch,
          // waypoints not copied — they hold absolute positions that don't
          // translate correctly when devices are offset or cross-diagram
        });
        this.canvas.addWire(wire);
        clonedWireIds.push(wire.id);
      } catch (e) { console.error("Clone wire failed:", e); }
    }

    this._flashSaved();
    this._pushUndo(async () => {
      this.canvas.clearSelection();
      this._clearProps();
      for (const wid of clonedWireIds) {
        this.canvas.removeWire(wid);
        await api.wires.delete(wid).catch(console.error);
      }
      for (const cid of clonedIds) {
        this.canvas.removeDevice(cid);
        await api.devices.delete(cid).catch(console.error);
      }
      this._flashSaved();
    });
    if (this.canvas.selectedDeviceIds.size === 1) {
      const [id] = this.canvas.selectedDeviceIds;
      this.canvas.selectedId = id;
      this._showDeviceProps(this.canvas.deviceData.get(id));
    } else if (this.canvas.selectedDeviceIds.size > 1) {
      this._showMultiProps(this.canvas.selectedDeviceIds.size);
    }
  }

  _export(type) {
    if (!this.diagramId) return this._needDiagram();
    document.getElementById("export-menu")?.classList.remove("open");
    const url = type === "bom"       ? api.export.bomUrl(this.diagramId)
              : type === "assembly"  ? api.export.assemblyUrl(this.diagramId)
              : type === "formboard" ? api.export.formboardUrl(this.diagramId)
              : api.export.jsonUrl(this.diagramId);
    window.open(url, "_blank");
  }

  _needDiagram() { alert("Please open or create a diagram first."); }

  // ── Octopart / Nexar part search ──────────────────────────────────────────────

  async _checkOctopartStatus() {
    try {
      const { configured } = await api.octopart.status();
      this._octopartReady = configured;
    } catch { this._octopartReady = false; }
  }

  async _octopartSearch() {
    const pn = document.getElementById("prop-partnumber")?.value?.trim();
    const resultsEl = document.getElementById("octopart-results");
    const statusEl  = document.getElementById("octopart-status-msg");
    const btn       = document.getElementById("btn-octopart-search");
    if (!resultsEl || !statusEl) return;

    resultsEl.style.display = "none";
    resultsEl.innerHTML = "";
    statusEl.style.display = "none";

    if (this._octopartReady === false) {
      statusEl.textContent = "Nexar API not configured — set NEXAR_CLIENT_ID and NEXAR_CLIENT_SECRET on the server.";
      statusEl.style.display = "";
      return;
    }

    if (!pn) {
      statusEl.textContent = "Enter a part number first.";
      statusEl.style.display = "";
      return;
    }

    btn?.classList.add("searching");
    try {
      const results = await api.octopart.search(pn, 8);
      btn?.classList.remove("searching");

      if (!results.length) {
        resultsEl.innerHTML = `<div class="op-no-results">No parts found for "${pn}"</div>`;
        resultsEl.style.display = "";
        return;
      }

      resultsEl.innerHTML = results.map((r, i) => `
        <div class="op-result" data-idx="${i}">
          <div class="op-mpn">${r.mpn}</div>
          <div class="op-mfr">${r.manufacturer || "—"}</div>
          ${r.description ? `<div class="op-desc">${r.description}</div>` : ""}
          ${r.datasheet_url ? `<div class="op-ds">📄 datasheet available</div>` : ""}
        </div>`).join("");

      resultsEl.style.display = "";

      resultsEl.querySelectorAll(".op-result").forEach((el, i) => {
        el.addEventListener("click", () => {
          this._applyOctopartResult(results[i]);
          resultsEl.style.display = "none";
        });
      });
    } catch (e) {
      btn?.classList.remove("searching");
      statusEl.textContent = `Search failed: ${e.message}`;
      statusEl.style.display = "";
    }
  }

  async _applyOctopartResult(result) {
    if (this.canvas.selectedType !== "device") return;
    const id = this.canvas.selectedId;
    const d  = this.canvas.deviceData.get(id);
    if (!d) return;

    document.getElementById("prop-partnumber").value   = result.mpn;
    document.getElementById("prop-manufacturer").value = result.manufacturer || "";

    d.properties = {
      ...(d.properties || {}),
      partNumber:   result.mpn,
      manufacturer: result.manufacturer || "",
      description:  result.description  || "",
      datasheetUrl: result.datasheet_url || "",
    };

    await api.devices.update(id, {
      properties: d.properties,
      reference: d.reference,
    }).catch(console.error);

    this._showDatasheetLink(result.datasheet_url);
    this._flashSaved();
  }

  _showDatasheetLink(url) {
    const row  = document.getElementById("prop-datasheet-row");
    const link = document.getElementById("prop-datasheet-link");
    if (!row || !link) return;
    if (url) {
      link.href = url;
      row.style.display = "";
    } else {
      row.style.display = "none";
    }
  }

  // ── Cable management ──────────────────────────────────────────────────────────

  _refreshGroupSection(device) {
    const section = document.getElementById("group-section");
    if (!section) return;
    if (device.device_type !== "group") { section.style.display = "none"; return; }
    section.style.display = "";
    const color   = device.properties?.fillColor   || "#2828a0";
    const opacity = device.properties?.fillOpacity ?? 0.15;
    document.getElementById("group-fill-color").value = color;
    document.getElementById("group-fill-opacity").value = opacity;
    document.getElementById("group-fill-opacity-val").textContent = Math.round(opacity * 100) + "%";
  }

  _refreshCableSection(device) {
    const section = document.getElementById("cable-section");
    if (!section) return;
    if (device.device_type !== "cable") { section.style.display = "none"; return; }
    section.style.display = "";
    document.getElementById("cable-jacket-color").value = device.properties?.jacketColor || "#2a2a2a";
    const sl = device.properties?.sleeveLength ?? 60;
    document.getElementById("cable-sleeve-length").value = sl;
    document.getElementById("cable-sleeve-length-val").textContent = sl + " px";

    const tbody = document.getElementById("conductor-table-body");
    tbody.innerHTML = "";
    (device.properties?.conductors || []).forEach((cond, i) => {
      const tr = document.createElement("tr");
      tr.innerHTML = `<td class="pin-side">${i + 1}</td>
        <td><input type="text" class="conductor-name-input pin-input" data-idx="${i}" value="${(cond.name || String(i+1)).replace(/"/g, "&quot;")}"></td>
        <td><input type="color" class="conductor-color-input" data-idx="${i}" value="${cond.color || "#888888"}" style="width:40px;height:22px;padding:1px;cursor:pointer"></td>
        <td><button class="conductor-del-btn pin-del-btn" data-idx="${i}" title="Remove">×</button></td>`;
      tr.querySelector(".conductor-name-input").addEventListener("change", async (e) => {
        const d = this.canvas.deviceData.get(device.id);
        if (!d?.properties?.conductors) return;
        const idx = parseInt(e.target.dataset.idx);
        d.properties.conductors[idx].name = e.target.value;
        const lp = d.pins.find(p => p.id === `L${idx + 1}`);
        const rp = d.pins.find(p => p.id === `R${idx + 1}`);
        if (lp) lp.name = e.target.value;
        if (rp) rp.name = e.target.value;
        await api.devices.update(d.id, { properties: d.properties, pins: d.pins }).catch(console.error);
        this.canvas.updateDevice(d);
        this._flashSaved();
      });
      tr.querySelector(".conductor-color-input").addEventListener("input", async (e) => {
        const d = this.canvas.deviceData.get(device.id);
        if (!d?.properties?.conductors) return;
        d.properties.conductors[parseInt(e.target.dataset.idx)].color = e.target.value;
        await api.devices.update(d.id, { properties: d.properties }).catch(console.error);
        this.canvas.updateDevice(d);
        this._flashSaved();
      });
      tr.querySelector(".conductor-del-btn").addEventListener("click", () => {
        const d = this.canvas.deviceData.get(device.id);
        if (d) this._removeConductor(d, parseInt(tr.querySelector(".conductor-del-btn").dataset.idx));
      });
      tbody.appendChild(tr);
    });
  }

  async _addConductor(device) {
    const d = this.canvas.deviceData.get(device.id);
    if (!d) return;
    const conductors = [...(d.properties?.conductors || [])];
    const color = CABLE_DEFAULT_COLORS[conductors.length % CABLE_DEFAULT_COLORS.length];
    const i = conductors.length;
    conductors.push({ name: String(i + 1), color });
    const newH = conductors.length * 24 + 40;
    d.properties = { ...d.properties, conductors, conductorCount: conductors.length };
    d.height = newH;
    d.pins.push(
      { id: `L${i + 1}`, name: String(i + 1), side: "left",  x_offset: 0,        y_offset: 26 + i * 24 + 12 },
      { id: `R${i + 1}`, name: String(i + 1), side: "right", x_offset: d.width,  y_offset: 26 + i * 24 + 12 },
    );
    await api.devices.update(d.id, { properties: d.properties, height: newH, pins: d.pins }).catch(console.error);
    this.canvas.updateDevice(d);
    this.canvas.selectDevice(d.id);
    this._flashSaved();
  }

  async _removeConductor(device, idx) {
    const d = this.canvas.deviceData.get(device.id);
    if (!d) return;
    const conductors = [...(d.properties?.conductors || [])];
    if (conductors.length <= 1) { alert("Cable must have at least one conductor."); return; }
    conductors.splice(idx, 1);
    d.pins = d.pins.filter(p => p.id !== `L${idx + 1}` && p.id !== `R${idx + 1}`);
    // Renumber remaining pins
    let li = 0, ri = 0;
    d.pins = d.pins.map(p => {
      if (p.side === "left")  { const n = li++; return { ...p, id: `L${n+1}`, name: conductors[n]?.name || String(n+1), y_offset: 26 + n * 24 + 12 }; }
      if (p.side === "right") { const n = ri++; return { ...p, id: `R${n+1}`, name: conductors[n]?.name || String(n+1), y_offset: 26 + n * 24 + 12 }; }
      return p;
    });
    const newH = conductors.length * 24 + 40;
    d.height = newH;
    d.properties = { ...d.properties, conductors, conductorCount: conductors.length };
    await api.devices.update(d.id, { properties: d.properties, height: newH, pins: d.pins }).catch(console.error);
    this.canvas.updateDevice(d);
    this.canvas.selectDevice(d.id);
    this._flashSaved();
  }

  _updateWireTwistedUI(isTwisted) {
    document.getElementById("wire-stripe-lbl").textContent       = isTwisted ? "Wire 2 Color" : "Stripe Color";
    document.getElementById("wire-stripe-toggle-lbl").style.display = isTwisted ? "none" : "";
    const picker = document.getElementById("wire-stripe");
    if (isTwisted) {
      picker.disabled = false;
      picker.style.opacity = "1";
    } else {
      const hasStripe = document.getElementById("wire-stripe-enabled").checked;
      picker.disabled = !hasStripe;
      picker.style.opacity = hasStripe ? "1" : "0.3";
    }
  }

  // ── Properties panel ──────────────────────────────────────────────────────────

  _showDeviceProps(device) {
    this._propDevice = device;
    this._setPropVisible("props-device");
    document.getElementById("prop-type").textContent        = DEVICE_TYPES[device.device_type]?.label || device.device_type;
    document.getElementById("prop-reference").value          = device.reference || "";
    document.getElementById("prop-label").value              = device.label || "";
    document.getElementById("prop-partnumber").value         = device.properties?.partNumber || "";
    document.getElementById("prop-manufacturer").value       = device.properties?.manufacturer || "";
    document.getElementById("prop-fontsize").value           = device.properties?.fontSize || 12;

    const isGroup = device.device_type === "group";
    if (!isGroup) this._showDatasheetLink(device.properties?.datasheetUrl || "");
    else { const dr = document.getElementById("prop-datasheet-row"); if (dr) dr.style.display = "none"; }
    document.getElementById("prop-save-connector").style.display = isGroup ? "none" : "";
    document.getElementById("prop-add-pin").style.display        = isGroup ? "none" : "";
    document.getElementById("pin-table-body").closest(".prop-row").style.display = isGroup ? "none" : "";
    document.getElementById("prop-pinout-btn").style.display =
      (!isGroup && (device.pins || []).length > 0) ? "" : "none";
    // Reset any open search results
    const res = document.getElementById("octopart-results");
    const msg = document.getElementById("octopart-status-msg");
    if (res) { res.style.display = "none"; res.innerHTML = ""; }
    if (msg) msg.style.display = "none";

    this._refreshCableSection(device);
    this._refreshGroupSection(device);

    const tbody = document.getElementById("pin-table-body");
    tbody.innerHTML = "";
    (device.pins || []).forEach(pin => {
      const tr = document.createElement("tr");
      const sides = ["left", "right", "top", "bottom"];
      const sideOpts = sides.map(s => `<option value="${s}"${pin.side === s ? " selected" : ""}>${s[0].toUpperCase()}</option>`).join("");
      tr.innerHTML = `<td class="pin-side">${pin.id}</td>
        <td><input class="pin-input" data-dev="${device.id}" data-pin="${pin.id}" value="${(pin.name || "").replace(/"/g, "&quot;")}"></td>
        <td><select class="pin-side-select">${sideOpts}</select></td>
        <td><button class="pin-del-btn" title="Remove pin">×</button></td>`;
      tr.querySelector(".pin-side-select").addEventListener("change", async (e) => {
        const d = this.canvas.deviceData.get(device.id);
        if (!d) return;
        const p = d.pins.find(p => p.id === pin.id);
        if (!p) return;
        p.side = e.target.value;
        this._recalcPinOffsets(d.pins, d.width, d.height, d);
        await api.devices.update(d.id, { pins: d.pins }).catch(console.error);
        this.canvas.updateDevice(d);
        this._showDeviceProps(d);
        this._flashSaved();
      });
      tr.querySelector(".pin-del-btn").addEventListener("click", () => {
        const d = this.canvas.deviceData.get(device.id);
        if (d) this._removeDevicePin(d, pin.id);
      });
      tbody.appendChild(tr);
    });
    tbody.querySelectorAll(".pin-input").forEach(inp => {
      inp.addEventListener("change", async (e) => {
        const devId = parseInt(e.target.dataset.dev);
        const pinId = e.target.dataset.pin;
        const d = this.canvas.deviceData.get(devId);
        if (!d) return;
        const pin = d.pins.find(p => p.id === pinId);
        if (pin) pin.name = e.target.value;
        await api.devices.update(devId, { pins: d.pins }).catch(console.error);
        this.canvas.updateDevice(d);
        this._flashSaved();
      });
    });
  }

  _showWireProps(wire) {
    this._setPropVisible("props-wire");
    const fd = this.canvas.deviceData.get(wire.from_device_id);
    const td = this.canvas.deviceData.get(wire.to_device_id);
    document.getElementById("wire-from").textContent = fd ? `${fd.reference || fd.label} : ${wire.from_pin}` : "—";
    document.getElementById("wire-to").textContent   = td ? `${td.reference || td.label} : ${wire.to_pin}` : "—";
    document.getElementById("wire-label").value  = wire.label || "";
    document.getElementById("wire-color").value  = wire.color_primary || "#cc0000";
    const hasStripe = !!wire.color_stripe;
    document.getElementById("wire-stripe-enabled").checked = hasStripe;
    document.getElementById("wire-stripe").value    = wire.color_stripe || "#cccccc";
    document.getElementById("wire-stripe").disabled = !hasStripe;
    document.getElementById("wire-stripe").style.opacity = hasStripe ? "1" : "0.3";
    document.getElementById("wire-gauge").value  = wire.gauge || "18 AWG";
    document.getElementById("wire-length").value = wire.length != null ? wire.length : "";
    document.getElementById("wire-unit").value   = wire.length_unit || "in";
    const isTwisted = !!wire.twisted_pair;
    document.getElementById("wire-twisted").checked    = isTwisted;
    document.getElementById("wire-twist-pitch").value  = wire.twist_pitch || 16;
    document.getElementById("wire-twist-pitch").disabled = !isTwisted;
    document.getElementById("wire-twist-pitch").style.opacity = isTwisted ? "1" : "0.3";
    document.getElementById("wire-shielded").checked   = !!wire.shielded;
    document.getElementById("wire-show-size-label").checked = !!wire.show_size_label;
    document.getElementById("wire-notes").value  = wire.notes || "";
    this._updateWireTwistedUI(isTwisted);
    this._refreshBundleDropdown(wire.bundle_id || null);
    this._refreshBundleEditPanel(wire.bundle_id || null);
  }

  _refreshBundleDropdown(selectedId) {
    const sel = document.getElementById("wire-bundle-select");
    if (!sel) return;
    this._updatingBundleDropdown = true;
    sel.innerHTML = '<option value="">— none —</option>';
    this._bundles.forEach(b => {
      const opt = document.createElement("option");
      opt.value = b.id;
      opt.textContent = b.label || `Bundle #${b.id}`;
      if (b.id === selectedId) opt.selected = true;
      sel.appendChild(opt);
    });
    this._updatingBundleDropdown = false;
  }

  _refreshBundleEditPanel(bundleId) {
    const panel = document.getElementById("wire-bundle-edit");
    if (!panel) return;
    if (!bundleId) { panel.style.display = "none"; return; }
    const b = this._bundles.find(x => x.id === bundleId);
    if (!b) { panel.style.display = "none"; return; }
    panel.style.display = "";
    document.getElementById("wire-bundle-label").value = b.label || "";
    document.getElementById("wire-bundle-color").value = b.jacket_color || "#2a2a2a";
  }

  _clearProps() { this._setPropVisible("props-empty"); }

  _showMultiProps(count) {
    this._setPropVisible("props-multi");
    const el = document.getElementById("props-multi-count");
    if (el) el.textContent = `${count} items selected`;
  }

  _setPropVisible(activeId) {
    ["props-empty", "props-device", "props-wire", "props-multi"].forEach(id => {
      const el = document.getElementById(id);
      if (el) el.style.display = id === activeId ? "" : "none";
    });
  }

  // ── Pin management ────────────────────────────────────────────────────────────

  _recalcPinOffsets(pins, width, height, device = null) {
    if (device?.properties?.shape === "circular") {
      const cx = width / 2, cy = height / 2;
      const pinR = Math.min(width, height) * 0.471; // must exceed body radius (0.386)
      pins.forEach((p, i) => {
        const angle = -Math.PI / 2 + (2 * Math.PI * i / pins.length);
        p.x_offset = Math.round(cx + pinR * Math.cos(angle));
        p.y_offset = Math.round(cy + pinR * Math.sin(angle));
        if      (angle >= -3 * Math.PI / 4 && angle < -Math.PI / 4) p.side = "top";
        else if (angle >= -Math.PI / 4      && angle <  Math.PI / 4) p.side = "right";
        else if (angle >=  Math.PI / 4      && angle <  3 * Math.PI / 4) p.side = "bottom";
        else p.side = "left";
      });
      return;
    }
    ["left", "right", "top", "bottom"].forEach(side => {
      const sp = pins.filter(p => p.side === side);
      sp.forEach((p, i) => {
        const t = (i + 1) / (sp.length + 1);
        if (side === "left")   { p.x_offset = 0;     p.y_offset = t * height; }
        if (side === "right")  { p.x_offset = width;  p.y_offset = t * height; }
        if (side === "top")    { p.x_offset = t * width; p.y_offset = 0; }
        if (side === "bottom") { p.x_offset = t * width; p.y_offset = height; }
      });
    });
  }

  async _addDevicePin(device) {
    const pins = device.pins || [];
    const lastSide = pins[pins.length - 1]?.side || "right";
    const maxNum = pins.reduce((m, p) => Math.max(m, parseInt(p.id.replace(/\D/g, "")) || 0), 0);
    const newPins = [...pins, { id: `pin_${maxNum + 1}`, name: String(maxNum + 1), side: lastSide, x_offset: 0, y_offset: 0 }];
    const newHeight = Math.max(device.height || 60, newPins.length * 18 + 20);
    this._recalcPinOffsets(newPins, device.width, newHeight, device);
    device.pins = newPins;
    device.height = newHeight;
    await api.devices.update(device.id, { pins: newPins, height: newHeight }).catch(console.error);
    this.canvas.updateDevice(device);
    this._showDeviceProps(device);
    this._flashSaved();
  }

  async _removeDevicePin(device, pinId) {
    const connectedWireIds = [];
    this.canvas.wireData.forEach((w, wId) => {
      if ((w.from_device_id === device.id && w.from_pin === pinId) ||
          (w.to_device_id === device.id && w.to_pin === pinId)) connectedWireIds.push(wId);
    });
    if (connectedWireIds.length && !confirm(`This pin has ${connectedWireIds.length} connected wire(s). Remove pin and its wires?`)) return;
    for (const wId of connectedWireIds) {
      await api.wires.delete(wId).catch(console.error);
      this.canvas.removeWire(wId);
    }
    const newPins = (device.pins || []).filter(p => p.id !== pinId);
    const newHeight = Math.max(60, newPins.length * 18 + 20);
    this._recalcPinOffsets(newPins, device.width, newHeight, device);
    device.pins = newPins;
    device.height = newHeight;
    await api.devices.update(device.id, { pins: newPins, height: newHeight }).catch(console.error);
    this.canvas.updateDevice(device);
    this._showDeviceProps(device);
    this._flashSaved();
  }

  _saveDeviceAsConnector(device) {
    const pins = device.pins || [];
    const connData = {
      name: device.label || "From Canvas",
      manufacturer: device.properties?.manufacturer || "",
      part_number: device.properties?.partNumber || "",
      category: "Custom",
      description: "",
      pin_count: pins.length,
      pin_labels: pins.map(p => p.name || ""),
    };
    const customConnId = device.properties?.customConnectorId;
    if (customConnId != null) {
      const existing = this._customConnectors.find(c => c.id === customConnId);
      if (existing) { this.openConnectorModal({ ...existing, ...connData }); return; }
    }
    this.openConnectorModal(connData);
  }

  // ── Git version control ───────────────────────────────────────────────────

  async _openGitModal() {
    const modal = document.getElementById("git-modal");
    if (!modal) return;
    modal.style.display = "flex";

    // Wire close button once
    const closeBtn = document.getElementById("git-close");
    if (!closeBtn._gitBound) {
      closeBtn._gitBound = true;
      closeBtn.addEventListener("click", () => { modal.style.display = "none"; });
      modal.addEventListener("click", (e) => { if (e.target === modal) modal.style.display = "none"; });
    }

    // Wire action buttons once
    const commitBtn = document.getElementById("btn-git-commit");
    if (!commitBtn._gitBound) {
      commitBtn._gitBound = true;
      commitBtn.addEventListener("click", () => this._gitCommit());
      document.getElementById("btn-git-push").addEventListener("click", () => this._gitPush());

      // History scope toggle
      const btnDiagram = document.getElementById("btn-git-log-diagram");
      const btnAll     = document.getElementById("btn-git-log-all");
      btnDiagram.addEventListener("click", () => {
        btnDiagram.classList.add("active"); btnAll.classList.remove("active");
        this._gitLoadLog();
      });
      btnAll.addEventListener("click", () => {
        btnAll.classList.add("active"); btnDiagram.classList.remove("active");
        this._gitLoadLog();
      });
    }

    // Default scope: "this diagram" if one is open, else "all"
    const hasDiagram = !!this.diagramId;
    document.getElementById("btn-git-log-diagram").classList.toggle("active", hasDiagram);
    document.getElementById("btn-git-log-all").classList.toggle("active", !hasDiagram);
    document.getElementById("btn-git-log-diagram").disabled = !hasDiagram;

    await this._gitRefresh();
  }

  async _gitRefresh() {
    await Promise.all([this._gitLoadStatus(), this._gitLoadLog()]);
  }

  async _gitLoadStatus() {
    const badge = document.getElementById("git-status-badge");
    if (!badge) return;
    try {
      const s = await api.git.status();
      const ahead = s.commits_ahead > 0 ? ` · ${s.commits_ahead} ahead` : "";
      const dirty = s.is_clean ? "clean" : `${s.changed_count} changed`;
      badge.textContent = `${s.branch}  ${dirty}${ahead}`;
      badge.className = "git-badge " + (s.is_clean ? "git-clean" : "git-dirty");
    } catch {
      badge.textContent = "git unavailable";
      badge.className = "git-badge";
    }
  }

  async _gitLoadLog() {
    const list = document.getElementById("git-log-list");
    if (!list) return;
    const diagramScope = document.getElementById("btn-git-log-diagram")?.classList.contains("active");
    const diagramId = diagramScope && this.diagramId ? this.diagramId : null;
    const title = document.getElementById("git-log-title");
    if (title) title.textContent = diagramId ? "History — this diagram" : "History — all commits";
    list.innerHTML = '<div style="color:#556;padding:4px">Loading…</div>';
    try {
      const entries = await api.git.log(diagramId);
      if (!entries.length) {
        list.innerHTML = '<div style="color:#556;padding:4px">No commits yet</div>';
        return;
      }
      list.innerHTML = "";
      entries.forEach(e => {
        const row = document.createElement("div");
        row.className = "git-log-row";
        row.innerHTML = `
          <span class="git-hash">${e.short}</span>
          <span class="git-msg">${this._esc(e.message)}</span>
          <span class="git-date">${e.date.slice(0, 10)}</span>
          <button class="git-restore-btn" data-hash="${e.hash}" title="Restore a diagram from this commit">↩ Restore</button>
        `;
        row.querySelector(".git-restore-btn").addEventListener("click", () => this._gitRestoreFlow(e));
        list.appendChild(row);
      });
    } catch {
      list.innerHTML = '<div style="color:#e06c6c;padding:4px">Failed to load log</div>';
    }
  }

  async _gitCommit() {
    const msg = document.getElementById("git-commit-msg")?.value?.trim();
    if (!msg) { alert("Enter a commit message first."); return; }
    const currentOnly = document.getElementById("git-scope-current")?.checked;
    if (currentOnly && !this.diagramId) { alert("No diagram is currently open."); return; }
    const diagramId = currentOnly ? this.diagramId : null;
    const status = document.getElementById("git-op-status");
    status.textContent = "Committing…"; status.style.color = "#aabb88";
    try {
      const r = await api.git.commit(msg, diagramId);
      if (r.status === "nothing_to_commit") {
        status.textContent = "Nothing to commit — diagram unchanged.";
        status.style.color = "#8899bb";
      } else {
        status.textContent = "✓ Committed: " + r.output.split("\n")[0];
        status.style.color = "#88cc88";
        document.getElementById("git-commit-msg").value = "";
        await this._gitRefresh();
      }
    } catch (e) {
      status.textContent = "✗ " + (e.message || "Commit failed");
      status.style.color = "#e06c6c";
    }
  }

  async _gitPush() {
    const status = document.getElementById("git-op-status");
    status.textContent = "Pushing…"; status.style.color = "#aabb88";
    try {
      const r = await api.git.push();
      status.textContent = "✓ Pushed. " + (r.output || "").split("\n")[0];
      status.style.color = "#88cc88";
      await this._gitLoadStatus();
    } catch (e) {
      status.textContent = "✗ Push failed: " + (e.message || "unknown error");
      status.style.color = "#e06c6c";
    }
  }

  async _gitRestoreFlow(entry) {
    const status = document.getElementById("git-op-status");
    status.textContent = `Loading files from ${entry.short}…`; status.style.color = "#aabb88";
    try {
      const { files } = await api.git.history(entry.hash);
      if (!files.length) { status.textContent = "No diagrams in that commit."; status.style.color = "#8899bb"; return; }

      // Build a small picker inline
      const pick = files.map((f, i) => `${i + 1}. ${f.replace("diagrams/", "").replace(/\.json$/, "").replace(/^\d{4}_/, "").replace(/_/g, " ")}`).join("\n");
      const choice = prompt(`Diagrams in commit ${entry.short} — "${entry.message}"\n\nEnter number to restore:\n${pick}`);
      if (!choice) { status.textContent = ""; return; }
      const idx = parseInt(choice) - 1;
      if (isNaN(idx) || idx < 0 || idx >= files.length) { status.textContent = "Invalid selection."; return; }

      const filepath = files[idx];
      status.textContent = `Restoring ${filepath}…`; status.style.color = "#aabb88";
      const r = await api.git.restore(entry.hash, filepath);
      status.textContent = `✓ Restored as "${r.name}" (id ${r.id})`;
      status.style.color = "#88cc88";
      await this.loadDiagramList();
    } catch (e) {
      status.textContent = "✗ Restore failed: " + (e.message || "unknown");
      status.style.color = "#e06c6c";
    }
  }

  _esc(s) { return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }

  // ── Formboard ─────────────────────────────────────────────────────────────

  _bindFormboard() {
    document.getElementById("btn-formboard-tab")?.addEventListener("click", () => {
      if (this._fbActive) this._closeFormboard(); else this._openFormboard();
    });

    const on = (id, fn) => document.getElementById(id)?.addEventListener("click", fn);
    on("fb-btn-select",  () => this._fbSetMode("select"));
    on("fb-btn-branch",  () => this._fbSetMode("add-branch"));
    on("fb-btn-splice",  () => this._fbSetMode("add-splice"));
    on("fb-btn-connect", () => this._fbSetMode("connect"));
    on("fb-btn-fit",     () => this._fb?.fitView());
    on("fb-btn-sync",    () => this._fbSync());
    on("fb-btn-del",     () => this._fbDeleteSelected());

    // Node props
    document.getElementById("fb-node-label")?.addEventListener("input", (e) => {
      if (!this._fb || this._fb.selectedType !== "node") return;
      clearTimeout(this._fbSaveTimer);
      this._fbSaveTimer = setTimeout(() => this._fbPatchNode({ label: e.target.value }), 400);
    });
    document.getElementById("fb-node-notes")?.addEventListener("input", (e) => {
      if (!this._fb || this._fb.selectedType !== "node") return;
      clearTimeout(this._fbSaveTimer);
      this._fbSaveTimer = setTimeout(() => this._fbPatchNode({ notes: e.target.value }), 400);
    });

    // Segment props
    document.getElementById("fb-seg-fitting")?.addEventListener("change", (e) => {
      if (!this._fb || this._fb.selectedType !== "segment") return;
      const showColor = ["heat_shrink", "tape"].includes(e.target.value);
      document.getElementById("fb-seg-color-row").style.display = showColor ? "" : "none";
      this._fbPatchSeg({ fitting_type: e.target.value });
    });
    document.getElementById("fb-seg-fitting-color")?.addEventListener("input", (e) => {
      if (!this._fb || this._fb.selectedType !== "segment") return;
      clearTimeout(this._fbColorTimer);
      this._fbColorTimer = setTimeout(() => this._fbPatchSeg({ fitting_color: e.target.value }), 200);
    });
    document.getElementById("fb-seg-label")?.addEventListener("input", (e) => {
      if (!this._fb || this._fb.selectedType !== "segment") return;
      clearTimeout(this._fbSaveTimer);
      this._fbSaveTimer = setTimeout(() => this._fbPatchSeg({ label: e.target.value }), 400);
    });
    document.getElementById("fb-seg-length")?.addEventListener("input", (e) => {
      if (!this._fb || this._fb.selectedType !== "segment") return;
      clearTimeout(this._fbSaveTimer);
      this._fbSaveTimer = setTimeout(() => this._fbPatchSeg({ length_mm: parseFloat(e.target.value) || null }), 400);
    });

    // Keyboard delete in formboard
    document.addEventListener("keydown", (e) => {
      if (!this._fbActive) return;
      if (["INPUT","TEXTAREA","SELECT"].includes(e.target.tagName)) return;
      if (e.key === "Delete" || e.key === "Backspace") this._fbDeleteSelected();
    });
  }

  async _openFormboard() {
    if (!this.diagramId) return this._needDiagram();
    this._fbActive = true;

    // Tab styling
    document.getElementById("btn-formboard-tab")?.classList.add("active");
    document.querySelectorAll(".view-tab:not(.fb-tab)").forEach(t => t.classList.remove("active"));

    // Show formboard, hide main canvas
    document.getElementById("canvas-container").style.display = "none";
    document.getElementById("fb-container").style.display = "flex";
    document.getElementById("fb-toolbar").style.display = "flex";

    // Swap properties panel
    document.getElementById("props-empty").style.display    = "none";
    document.getElementById("props-device").style.display   = "none";
    document.getElementById("props-wire").style.display     = "none";
    document.getElementById("props-formboard").style.display = "";

    // Create canvas immediately (synchronous) so sync button is never "not ready"
    if (!this._fb) {
      try {
      this._fb = new FormboardCanvas("fb-canvas", {
        onNodeSelected:    (n) => this._fbShowNodeProps(n),
        onSegmentSelected: (s) => this._fbShowSegProps(s),
        onSelectionCleared:()  => this._fbClearProps(),
        onNodeMoved: (id, x, y) => api.formboard.updateNode(id, { x, y }).catch(console.error),
        onAddNode: async (data) => {
          const n = await api.formboard.createNode(this.diagramId, data).catch(console.error);
          if (n) this._fb.addNode(n);
        },
        onSegmentDrawn: async (fromId, toId) => {
          const s = await api.formboard.createSegment(this.diagramId, { from_node_id: fromId, to_node_id: toId }).catch(console.error);
          if (s) this._fb.addSegment(s);
        },
        onNodeCtx: (id, x, y) => this._fbNodeCtx(id, x, y),
        onSegCtx:  (id, x, y) => this._fbSegCtx(id, x, y),
      });
      } catch(err) { alert("FormboardCanvas error: " + err); return; }
    }

    // Load data — wait one frame first so the browser has computed fb-container layout
    await new Promise(r => requestAnimationFrame(r));
    const data = await api.formboard.get(this.diagramId).catch(() => null);
    if (data) this._fb.load(data);
    if (data?.nodes?.length) this._fb.fitView();
  }

  _closeFormboard() {
    this._fbActive = false;
    document.getElementById("btn-formboard-tab")?.classList.remove("active");
    document.getElementById("canvas-container").style.display = "";
    document.getElementById("fb-container").style.display = "none";
    document.getElementById("fb-toolbar").style.display = "none";
    document.getElementById("props-formboard").style.display = "none";
    document.getElementById("props-empty").style.display = "";
    this._renderViewTabs(); // restore active view tab highlight
  }

  _fbSetMode(mode) {
    this._fb?.setMode(mode);
    document.querySelectorAll(".fb-mode-btn").forEach(b => b.classList.remove("active"));
    document.getElementById(`fb-btn-${mode === "add-branch" ? "branch" : mode === "add-splice" ? "splice" : mode === "connect" ? "connect" : "select"}`)?.classList.add("active");
  }

  async _fbSync() {
    if (!this.diagramId) return;
    if (!this._fb) return;
    const data = await api.formboard.sync(this.diagramId).catch(e => { alert("Sync failed: " + e.message); return null; });
    if (!data) return;
    this._fb.load(data);
    this._fb.fitView();
    if (!data.nodes?.length) alert("No devices in this diagram to sync.");
  }

  async _fbDeleteSelected() {
    if (!this._fb || this._fb.selectedId === null) return;
    const { selectedId, selectedType } = this._fb;
    if (selectedType === "node") {
      await api.formboard.deleteNode(selectedId).catch(console.error);
      // Also remove segments that referenced this node from the canvas
      [...this._fb.segData.values()]
        .filter(s => s.from_node_id === selectedId || s.to_node_id === selectedId)
        .forEach(s => this._fb.deleteSegment(s.id));
      this._fb.deleteNode(selectedId);
    } else if (selectedType === "segment") {
      await api.formboard.deleteSegment(selectedId).catch(console.error);
      this._fb.deleteSegment(selectedId);
    }
    this._fbClearProps();
  }

  async _fbPatchNode(data) {
    if (!this._fb || this._fb.selectedType !== "node") return;
    const id = this._fb.selectedId;
    const updated = await api.formboard.updateNode(id, data).catch(console.error);
    if (updated) this._fb.refreshNodeLabel(updated);
  }

  async _fbPatchSeg(data) {
    if (!this._fb || this._fb.selectedType !== "segment") return;
    const id = this._fb.selectedId;
    const updated = await api.formboard.updateSegment(id, data).catch(console.error);
    if (updated) this._fb.refreshSegment(updated);
  }

  _fbShowNodeProps(node) {
    document.getElementById("fb-props-empty").style.display  = "none";
    document.getElementById("fb-seg-props").style.display    = "none";
    document.getElementById("fb-node-props").style.display   = "";

    const typeLabels = { connector: "Connector (synced from diagram)", branch: "Branch point", splice: "Splice / joint" };
    document.getElementById("fb-node-type-badge").textContent = typeLabels[node.node_type] || node.node_type;
    document.getElementById("fb-node-label").value = node.label || "";
    document.getElementById("fb-node-notes").value = node.notes || "";

    const infoEl = document.getElementById("fb-connector-info");
    if (node.node_type === "connector" && node.device_id) {
      const dev = this.canvas.deviceData.get(node.device_id);
      document.getElementById("fb-connector-dev-label").textContent =
        dev ? `${dev.reference || ""} ${dev.label || ""}`.trim() || `Device ${dev.id}` : `Device ID ${node.device_id}`;
      infoEl.style.display = "";
    } else {
      infoEl.style.display = "none";
    }
  }

  _fbShowSegProps(seg) {
    document.getElementById("fb-props-empty").style.display  = "none";
    document.getElementById("fb-node-props").style.display   = "none";
    document.getElementById("fb-seg-props").style.display    = "";

    document.getElementById("fb-seg-fitting").value       = seg.fitting_type || "open";
    document.getElementById("fb-seg-fitting-color").value = seg.fitting_color || "#884444";
    document.getElementById("fb-seg-label").value         = seg.label || "";
    document.getElementById("fb-seg-length").value        = seg.length_mm || "";
    const showColor = ["heat_shrink", "tape"].includes(seg.fitting_type || "");
    document.getElementById("fb-seg-color-row").style.display = showColor ? "" : "none";

    // Build wire checklist from main diagram
    const wireList = document.getElementById("fb-wire-list");
    const assignedIds = new Set(seg.wire_ids || []);
    wireList.innerHTML = "";
    this.canvas.wireData.forEach(w => {
      const row = document.createElement("label");
      row.style.cssText = "display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:3px;cursor:pointer;";
      row.innerHTML = `
        <input type="checkbox" ${assignedIds.has(w.id) ? "checked" : ""}>
        <span style="width:12px;height:12px;border-radius:2px;background:${w.color_primary || "#cc0000"};flex-shrink:0"></span>
        <span style="color:#bbc">${w.label || "(unlabeled)"}</span>
        <span style="color:#556;margin-left:auto">${w.gauge || ""}</span>
      `;
      row.querySelector("input").addEventListener("change", () => {
        const checked = [];
        wireList.querySelectorAll("label[data-wire-id]").forEach(lbl => {
          if (lbl.querySelector("input")?.checked) checked.push(parseInt(lbl.dataset.wireId));
        });
        this._fbPatchSeg({ wire_ids: checked });
      });
      row.dataset.wireId = w.id;
      wireList.appendChild(row);
    });
  }

  _fbClearProps() {
    document.getElementById("fb-props-empty").style.display  = "";
    document.getElementById("fb-node-props").style.display   = "none";
    document.getElementById("fb-seg-props").style.display    = "none";
  }

  _fbNodeCtx(id, x, y) {
    this._openCtx(x, y, [
      { action: "del", icon: "✕", label: "Delete node + segments", danger: true },
    ]);
    this._ctxMenu().onclick = async (e) => {
      const action = e.target.closest(".ctx-item")?.dataset.action;
      this._closeCtx();
      if (action === "del") { this._fb.selectNode(id); await this._fbDeleteSelected(); }
    };
  }

  _fbSegCtx(id, x, y) {
    this._openCtx(x, y, [
      { action: "del", icon: "✕", label: "Delete segment", danger: true },
    ]);
    this._ctxMenu().onclick = async (e) => {
      const action = e.target.closest(".ctx-item")?.dataset.action;
      this._closeCtx();
      if (action === "del") { this._fb.selectSegment(id); await this._fbDeleteSelected(); }
    };
  }
}

window.addEventListener("DOMContentLoaded", () => { window.app = new WiringApp(); });