app.js

(function () {
  "use strict";

  var chartEl = document.getElementById("chart");
  var fileInput = document.getElementById("file-input");
  var uploadBtn = document.getElementById("upload-btn");
  var expandBtn = document.getElementById("expand-btn");
  var mgmtBtn = document.getElementById("mgmt-btn");
  var collapseBtn = document.getElementById("collapse-btn");
  var layoutSelect = document.getElementById("layout-select");
  var searchInput = document.getElementById("search");

  var editPanel = document.getElementById("edit-panel");
  var panelName = document.getElementById("panel-name");
  var panelTitle = document.getElementById("panel-title");
  var panelManager = document.getElementById("panel-manager");
  var panelReports = document.getElementById("panel-reports");
  var panelCloseBtn = document.getElementById("panel-close-btn");
  var panelSaveBtn = document.getElementById("panel-save-btn");
  var panelCancelBtn = document.getElementById("panel-cancel-btn");
  var saveCsvBtn = document.getElementById("save-csv-btn");
  var exportBtn = document.getElementById("export-btn");
  var resetBtn = document.getElementById("reset-btn");
  var legendEl = document.getElementById("change-legend");
  var statsBar = document.getElementById("stats-bar");
  var statTotal = document.getElementById("stat-total");
  var statAssoc = document.getElementById("stat-associates");
  var statManagers = document.getElementById("stat-managers");
  var statMgrOfMgr = document.getElementById("stat-mgr-of-mgr");
  var statRatio = document.getElementById("stat-ratio");
  var statAvgSpan = document.getElementById("stat-avg-span");
  var statLevels = document.getElementById("stat-levels");
  var statOpenRoles = document.getElementById("stat-open-roles");
  var filterBar = document.getElementById("filter-bar");
  var includePartnersCheck = document.getElementById("include-partners");
  var includeInternsCheck = document.getElementById("include-interns");
  var tooltipEl = document.getElementById("tooltip");
  var emptyState = chartEl.querySelector(".empty-state");
  var depthLegend = document.getElementById("depth-legend");
  var changeLegendSection = document.getElementById("change-legend-section");

  var level1Btn = document.getElementById("level1-btn");
  var level2Btn = document.getElementById("level2-btn");
  var level3Btn = document.getElementById("level3-btn");
  var spotlightBtn = document.getElementById("spotlight-btn");
  var changelogTab = document.getElementById("changelog-tab");
  var changelogSidebar = document.getElementById("changelog-sidebar");
  var changelogClose = document.getElementById("changelog-close");
  var changelogCount = document.getElementById("changelog-count");
  var changelogSummary = document.getElementById("changelog-summary");
  var changelogContent = document.getElementById("changelog-content");

  var planBtn = document.getElementById("plan-btn");
  var planFileInput = document.getElementById("plan-file-input");
  var ldapBtn = document.getElementById("ldap-btn");
  var ldapModal = document.getElementById("ldap-modal");
  var ldapModalClose = document.getElementById("ldap-modal-close");
  var ldapUidInput = document.getElementById("ldap-uid");
  var ldapDepthInput = document.getElementById("ldap-depth");
  var ldapImportBtn = document.getElementById("ldap-import-btn");
  var ldapCancelBtn = document.getElementById("ldap-cancel-btn");
  var ldapStatus = document.getElementById("ldap-status");

  let originalPeople = [];
  let currentPeople = [];
  let selectedPerson = null;
  var currentViewMode = "default";
  var spotlightMode = false;
  var includeCollaborativePartners = false;
  var includeInterns = false;
  var layoutOrientation = "horizontal";

  // Version management
  var STORAGE_KEY = "orgchart-versions";
  var versions = [];
  var activeVersionIndex = -1;
  var versionToggle = document.getElementById("version-toggle");
  var versionMenu = document.getElementById("version-menu");
  var versionGroup = document.getElementById("version-group");

  function formatTimestamp(date) {
    var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var m = months[date.getMonth()];
    var d = date.getDate();
    var h = date.getHours();
    var min = String(date.getMinutes()).padStart(2, "0");
    return m + " " + d + ", " + h + ":" + min;
  }

  function deriveVersionName(source) {
    var name = source.replace(/^.*[\\/]/, "").replace(/\.csv$/i, "");
    name = name.replace(/^data[\\/]/, "");
    return name || "untitled";
  }

  function updateVersionDropdown() {
    versionMenu.innerHTML = "";
    if (versions.length === 0) {
      versionGroup.hidden = true;
      return;
    }
    versionGroup.hidden = false;
    var active = versions[activeVersionIndex];
    versionToggle.textContent = active.name + " (" + formatTimestamp(active.loadedAt) + ")";

    for (var i = 0; i < versions.length; i++) {
      var item = document.createElement("div");
      item.className = "version-item" + (i === activeVersionIndex ? " active" : "");
      item.dataset.index = i;

      var nameSpan = document.createElement("span");
      nameSpan.className = "version-item-name";
      nameSpan.textContent = versions[i].name;

      var timeSpan = document.createElement("span");
      timeSpan.className = "version-item-time";
      timeSpan.textContent = formatTimestamp(versions[i].loadedAt);

      var removeBtn = document.createElement("button");
      removeBtn.className = "version-item-remove";
      removeBtn.textContent = "×";
      removeBtn.title = "Remove";
      removeBtn.dataset.index = i;

      item.appendChild(nameSpan);
      item.appendChild(timeSpan);
      item.appendChild(removeBtn);
      versionMenu.appendChild(item);
    }
  }

  function closeVersionMenu() {
    versionMenu.hidden = true;
  }

  function saveVersionsToStorage() {
    if (window.__EXPORT_DATA__) return;
    if (activeVersionIndex >= 0 && activeVersionIndex < versions.length) {
      versions[activeVersionIndex].currentPeople = currentPeople;
    }
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify({
        versions: versions,
        activeVersionIndex: activeVersionIndex
      }));
    } catch (e) {
      console.warn("Could not save to localStorage:", e);
    }
  }

  function loadVersionsFromStorage() {
    try {
      var raw = localStorage.getItem(STORAGE_KEY);
      if (!raw) return false;
      var data = JSON.parse(raw);
      if (!data || !Array.isArray(data.versions) || data.versions.length === 0) return false;

      for (var i = 0; i < data.versions.length; i++) {
        data.versions[i].loadedAt = new Date(data.versions[i].loadedAt);
      }

      versions = data.versions;
      activeVersionIndex = data.activeVersionIndex;
      if (activeVersionIndex < 0 || activeVersionIndex >= versions.length) {
        activeVersionIndex = 0;
      }

      originalPeople = versions[activeVersionIndex].originalPeople;
      currentPeople = versions[activeVersionIndex].currentPeople;
      selectedPerson = null;
      currentViewMode = "default";
      return true;
    } catch (e) {
      console.warn("Could not load from localStorage:", e);
      return false;
    }
  }

  function addVersion(name, people) {
    var existing = -1;
    for (var i = 0; i < versions.length; i++) {
      if (versions[i].name === name) { existing = i; break; }
    }

    var orig = people.map(function (p) { return { name: p.name, title: p.title, manager: p.manager }; });
    var curr = people.map(function (p) { return { name: p.name, title: p.title, manager: p.manager }; });

    if (existing >= 0) {
      versions[existing].originalPeople = orig;
      versions[existing].currentPeople = curr;
      versions[existing].loadedAt = new Date();
      activeVersionIndex = existing;
    } else {
      versions.push({ name: name, originalPeople: orig, currentPeople: curr, loadedAt: new Date() });
      activeVersionIndex = versions.length - 1;
    }

    originalPeople = versions[activeVersionIndex].originalPeople;
    currentPeople = versions[activeVersionIndex].currentPeople;
    selectedPerson = null;
    currentViewMode = "default";
    resetRoleFilters();
    updateVersionDropdown();
    rebuildAndRender();
    saveVersionsToStorage();
  }

  function switchVersion(index) {
    if (index < 0 || index >= versions.length || index === activeVersionIndex) return;
    if (activeVersionIndex >= 0 && activeVersionIndex < versions.length) {
      versions[activeVersionIndex].currentPeople = currentPeople;
    }
    activeVersionIndex = index;
    originalPeople = versions[index].originalPeople;
    currentPeople = versions[index].currentPeople;
    selectedPerson = null;
    currentViewMode = "default";
    resetRoleFilters();
    updateVersionDropdown();
    rebuildAndRender();
    saveVersionsToStorage();
  }

  function removeVersion(index) {
    if (index < 0 || index >= versions.length) return;
    versions.splice(index, 1);
    if (versions.length === 0) {
      activeVersionIndex = -1;
      originalPeople = [];
      currentPeople = [];
      selectedPerson = null;
      updateVersionDropdown();
      if (g) g.selectAll("*").remove();
      statsBar.hidden = true;
      filterBar.hidden = true;
      legendEl.hidden = true;
      exportBtn.hidden = true;
      changelogTab.hidden = true;
      spotlightBtn.hidden = true;
      depthLegend.hidden = true;
      changelogSidebar.classList.remove("visible");
      emptyState.style.display = "";
      emptyState.className = "empty-state";
      emptyState.textContent = "Upload a CSV to get started";
      saveVersionsToStorage();
      return;
    }
    if (index <= activeVersionIndex) {
      activeVersionIndex = Math.max(0, activeVersionIndex - 1);
    }
    originalPeople = versions[activeVersionIndex].originalPeople;
    currentPeople = versions[activeVersionIndex].currentPeople;
    selectedPerson = null;
    currentViewMode = "default";
    resetRoleFilters();
    updateVersionDropdown();
    rebuildAndRender();
    saveVersionsToStorage();
  }

  // D3 state
  var svg, g, zoomBehavior;
  var d3Root = null;
  var nodeIdCounter = 0;

  var levelColors = ["#e85d4a", "#e8774a", "#f0a03c", "#4aad8b", "#4a90c4", "#7b6bb5"];
  var levelFills = ["#2d1815", "#2d1f15", "#2d2515", "#152d25", "#15222d", "#1f1a2d"];
  var depthColors = ["transparent", "#555", "#7b6bb5", "#4a90c4", "#4aad8b", "#f0a03c", "#e85d4a"];

  var rectW = 170, rectH = 40;

  function clonePerson(p) {
    var copy = { name: p.name, title: p.title, manager: p.manager };
    if (p._removed) copy._removed = true;
    return copy;
  }

  function confirmDiscard(msg) {
    return !panelHasUnsavedChanges() || confirm(msg || "You have unsaved changes. Discard them?");
  }

  // ── Change Tracking ──

  function getChanges() {
    var changes = new Map();
    var origMap = new Map(originalPeople.map(function (p) {
      return [p.name, p];
    }));

    for (var i = 0; i < currentPeople.length; i++) {
      var curr = currentPeople[i];

      if (curr._removed) {
        changes.set(curr.name, {
          moved: false, edited: false, added: false, removed: true,
          originalManager: curr.manager
        });
        continue;
      }

      var orig = origMap.get(curr.name);
      if (!orig) {
        changes.set(curr.name, {
          moved: false, edited: false, added: true, removed: false,
          originalManager: ""
        });
        continue;
      }

      var moved = curr.manager !== orig.manager;
      var edited = curr.title !== orig.title;

      if (moved || edited) {
        changes.set(curr.name, {
          moved: moved,
          edited: edited,
          added: false,
          removed: false,
          originalManager: orig.manager
        });
      }
    }

    return changes;
  }

  function hasChanges() {
    var origMap = new Map(originalPeople.map(function (p) { return [p.name, p]; }));
    for (var i = 0; i < currentPeople.length; i++) {
      var curr = currentPeople[i];
      if (curr._removed) return true;
      var orig = origMap.get(curr.name);
      if (!orig) return true;
      if (curr.manager !== orig.manager || curr.title !== orig.title) return true;
    }
    return false;
  }

  function buildChildrenIndex() {
    var idx = new Map();
    for (var i = 0; i < currentPeople.length; i++) {
      var mgr = currentPeople[i].manager;
      if (mgr) {
        var list = idx.get(mgr);
        if (!list) { list = []; idx.set(mgr, list); }
        list.push(currentPeople[i].name);
      }
    }
    return idx;
  }

  function getSubtreeNames(name) {
    var idx = buildChildrenIndex();
    var result = [];
    var stack = idx.get(name) ? idx.get(name).slice() : [];
    while (stack.length > 0) {
      var n = stack.pop();
      result.push(n);
      var kids = idx.get(n);
      if (kids) { for (var i = 0; i < kids.length; i++) stack.push(kids[i]); }
    }
    return result;
  }

  function byManagerThenFirstName(a, b) {
    var aIsMgr = a.children && a.children.length > 0 ? 0 : 1;
    var bIsMgr = b.children && b.children.length > 0 ? 0 : 1;
    if (aIsMgr !== bIsMgr) return aIsMgr - bIsMgr;
    return a.name.split(" ")[0].localeCompare(b.name.split(" ")[0]);
  }

  function getAncestorChain(name) {
    var chain = [name];
    var current = name;
    while (true) {
      var person = currentPeople.find(function (p) { return p.name === current; });
      if (!person || !person.manager) break;
      chain.push(person.manager);
      current = person.manager;
    }
    return chain;
  }

  function getOrgDistance(nameA, nameB) {
    var chainA = getAncestorChain(nameA);
    var chainB = getAncestorChain(nameB);
    for (var i = 0; i < chainA.length; i++) {
      var j = chainB.indexOf(chainA[i]);
      if (j !== -1) return i + j;
    }
    return chainA.length + chainB.length;
  }

  // ── Panel Logic ──

  function openPanel(name) {
    var person = currentPeople.find(function (p) { return p.name === name; });
    if (!person) return;

    changelogSidebar.classList.remove("visible");
    selectedPerson = name;

    panelName.textContent = person.name;
    panelTitle.value = person.title;

    var subtree = getSubtreeNames(name);
    var excluded = new Set(subtree);
    excluded.add(name);

    panelManager.innerHTML = "";

    var noMgrOption = document.createElement("option");
    noMgrOption.value = "";
    noMgrOption.textContent = "(No Manager)";
    panelManager.appendChild(noMgrOption);

    var managers = currentPeople
      .filter(function (p) { return !excluded.has(p.name); })
      .filter(function (p) { return currentPeople.some(function (r) { return r.manager === p.name; }); })
      .sort(function (a, b) {
        var da = getOrgDistance(name, a.name);
        var db = getOrgDistance(name, b.name);
        return da !== db ? da - db : a.name.localeCompare(b.name);
      });

    for (var i = 0; i < managers.length; i++) {
      var opt = document.createElement("option");
      opt.value = managers[i].name;
      opt.textContent = managers[i].name + " — " + managers[i].title;
      panelManager.appendChild(opt);
    }

    panelManager.value = person.manager;

    panelReports.innerHTML = "";
    var reports = currentPeople.filter(function (p) { return p.manager === name; }).sort(function (a, b) {
      var aIsMgr = currentPeople.some(function (p) { return p.manager === a.name; }) ? 0 : 1;
      var bIsMgr = currentPeople.some(function (p) { return p.manager === b.name; }) ? 0 : 1;
      if (aIsMgr !== bIsMgr) return aIsMgr - bIsMgr;
      return a.name.split(" ")[0].localeCompare(b.name.split(" ")[0]);
    });
    for (var j = 0; j < reports.length; j++) {
      var li = document.createElement("li");
      li.textContent = reports[j].name + " — " + reports[j].title;
      panelReports.appendChild(li);
    }

    editPanel.removeAttribute("hidden");
    requestAnimationFrame(function () {
      editPanel.classList.add("visible");
    });
    document.body.classList.add("panel-open");

    highlightSelectedNode();
    setTimeout(fitToView, 300);
  }

  function closePanel() {
    selectedPerson = null;
    editPanel.classList.remove("visible");
    document.body.classList.remove("panel-open");

    highlightSelectedNode();

    setTimeout(function () {
      if (!editPanel.classList.contains("visible")) {
        editPanel.setAttribute("hidden", "");
      }
      fitToView();
    }, 250);
  }

  function highlightSelectedNode() {
    if (!svg) return;
    d3.selectAll(".node-group").classed("node-selected", function (d) {
      return d && d.data && d.data.name === selectedPerson;
    });
  }

  function panelHasUnsavedChanges() {
    if (!selectedPerson) return false;
    var person = currentPeople.find(function (p) { return p.name === selectedPerson; });
    if (!person) return false;
    return panelTitle.value !== person.title || panelManager.value !== person.manager;
  }

  function updateToolbarButtons(changed) {
    saveCsvBtn.hidden = !changed;
    resetBtn.hidden = !changed;
    planBtn.hidden = originalPeople.length === 0;
    exportBtn.hidden = currentPeople.length === 0;
  }

  function updateLegend(changed) {
    legendEl.hidden = !changed;
    depthLegend.hidden = currentPeople.length === 0;
    changeLegendSection.hidden = !changed;
  }

  function updateLegendPosition() {
    var top = 56;
    if (!statsBar.hidden) top += 32;
    if (!filterBar.hidden) top += 28;
    legendEl.style.top = (top + 6) + "px";
  }

  // ── Changelog Sidebar ──

  function buildChangelog() {
    var changes = getChanges();
    if (changes.size === 0) {
      changelogTab.hidden = true;
      spotlightBtn.hidden = true;
      if (spotlightMode) { spotlightMode = false; spotlightBtn.classList.remove("active"); }
      return;
    }
    changelogTab.hidden = false;
    spotlightBtn.hidden = false;
    changelogCount.textContent = changes.size;

    var moved = 0, edited = 0, added = 0, removed = 0;
    changes.forEach(function(c) {
      if (c.removed) removed++;
      else if (c.added) added++;
      else { if (c.moved) moved++; if (c.edited) edited++; }
    });

    var s = "";
    if (moved) s += '<span style="color:#ed8936">● ' + moved + ' Moved</span>';
    if (edited) s += '<span style="color:#b794f4">● ' + edited + ' Edited</span>';
    if (added) s += '<span style="color:#68d391">● ' + added + ' Added</span>';
    if (removed) s += '<span style="color:#fc8181">● ' + removed + ' Removed</span>';
    changelogSummary.innerHTML = s;

    var groups = new Map();
    changes.forEach(function(change, name) {
      var person = currentPeople.find(function(p) { return p.name === name; });
      var mgr = person ? (person.manager || "(top level)") : "(removed)";
      if (change.removed) mgr = "(removed)";
      if (!groups.has(mgr)) groups.set(mgr, []);
      groups.get(mgr).push({ name: name, change: change });
    });

    var html = "";
    groups.forEach(function(entries, mgrName) {
      html += '<div class="changelog-group-header">' + mgrName + ' (' + entries.length + ')</div>';
      entries.sort(function(a, b) { return a.name.localeCompare(b.name); });
      for (var i = 0; i < entries.length; i++) {
        var e = entries[i];
        var color = "#ed8936", detail = "";
        if (e.change.removed) { color = "#fc8181"; detail = "removed"; }
        else if (e.change.added) { color = "#68d391"; detail = "added"; }
        else if (e.change.moved && e.change.edited) { detail = "from " + (e.change.originalManager || "none") + " + title changed"; }
        else if (e.change.moved) { detail = "from " + (e.change.originalManager || "none"); }
        else if (e.change.edited) { color = "#b794f4"; detail = "title changed"; }
        html += '<div class="changelog-entry" data-name="' + e.name.replace(/"/g, '&quot;') + '"' +
          (e.change.removed ? '' : ' data-navigable="1"') + '>' +
          '<span class="changelog-dot" style="background:' + color + '"></span>' +
          '<span class="changelog-name">' + e.name + '</span>' +
          '<span class="changelog-detail">' + detail + '</span></div>';
      }
    });
    changelogContent.innerHTML = html;
  }

  function toggleChangelog() {
    var open = changelogSidebar.classList.toggle("visible");
    if (open && selectedPerson) {
      if (!confirmDiscard()) { changelogSidebar.classList.remove("visible"); return; }
      closePanel();
    }
  }

  function navigateToNode(name) {
    if (!d3Root) return;
    var target = null;
    walkAll(d3Root, function(d) {
      if (d.data && d.data.name === name) target = d;
    });
    if (!target) return;
    var p = target.parent;
    while (p) {
      if (p._children || p._allChildren) expandNode(p);
      p = p.parent;
    }
    updateChart(d3Root);
    applySpotlight();
    setTimeout(function() {
      var svgEl = document.getElementById("tree-svg");
      var w = svgEl.clientWidth, h = svgEl.clientHeight;
      var tx, ty;
      if (isVerticalLayout()) { tx = w / 2 - target.x; ty = h / 3 - target.y; }
      else { tx = w / 3 - target.y; ty = h / 2 - target.x; }
      svg.transition().duration(500)
        .call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(1));
      d3.selectAll(".node-group").classed("node-highlight", function(d) {
        return d.data.name === name;
      });
      setTimeout(function() {
        d3.selectAll(".node-group").classed("node-highlight", false);
      }, 2500);
    }, 450);
  }

  // ── Spotlight ──

  function applySpotlight() {
    if (!d3Root) return;
    var changes = getChanges();
    d3.selectAll(".node-group").classed("node-dimmed", function(d) {
      return spotlightMode && !changes.has(d.data.name);
    });
    d3.selectAll("path.link").classed("link-dimmed", function() {
      return spotlightMode;
    });
  }

  // ── CSV Parsing ──

  function parseCSV(text) {
    const lines = text.split(/\r?\n/).filter((l) => l.trim() !== "");
    if (lines.length === 0) return { error: "empty" };

    const headerLine = lines[0];
    const headers = splitCSVRow(headerLine).map((h) => h.trim().toLowerCase());

    const nameIdx = headers.indexOf("name");
    const titleIdx = headers.indexOf("title");
    const managerIdx = headers.indexOf("manager");

    if (nameIdx === -1 || titleIdx === -1 || managerIdx === -1) {
      return { error: "columns" };
    }

    const colCount = headers.length;
    const people = [];

    for (let i = 1; i < lines.length; i++) {
      const cols = splitCSVRow(lines[i]);
      if (cols.length !== colCount) continue;

      const name = cols[nameIdx].trim();
      const title = cols[titleIdx].trim();
      const manager = cols[managerIdx].trim();

      if (!name) continue;

      people.push({ name, title, manager });
    }

    if (people.length === 0) return { error: "no_data" };
    return { people };
  }

  function splitCSVRow(row) {
    const result = [];
    let current = "";
    let inQuotes = false;

    for (let i = 0; i < row.length; i++) {
      const ch = row[i];
      if (inQuotes) {
        if (ch === '"' && row[i + 1] === '"') {
          current += '"';
          i++;
        } else if (ch === '"') {
          inQuotes = false;
        } else {
          current += ch;
        }
      } else {
        if (ch === '"') {
          inQuotes = true;
        } else if (ch === ",") {
          result.push(current);
          current = "";
        } else {
          current += ch;
        }
      }
    }
    result.push(current);
    return result;
  }

  // ── Role Filters ──

  function isCollaborativePartner(person) {
    return /^collaborative\s+partner$/i.test((person.title || "").trim());
  }

  function isIntern(person) {
    return /\bintern\b/i.test((person.title || "").trim());
  }

  function isExcludedByCategory(person) {
    if (!includeCollaborativePartners && isCollaborativePartner(person)) return true;
    if (!includeInterns && isIntern(person)) return true;
    return false;
  }

  function getVisiblePeople(people) {
    return people.filter(function (p) {
      return !p._removed && !isExcludedByCategory(p);
    });
  }

  function resetRoleFilters() {
    includeCollaborativePartners = false;
    includeInterns = false;
    includePartnersCheck.checked = false;
    includeInternsCheck.checked = false;
  }

  function updateFilterBar() {
    if (currentPeople.length === 0) {
      filterBar.hidden = true;
      return;
    }

    var hasPartners = currentPeople.some(isCollaborativePartner);
    var hasInterns = currentPeople.some(isIntern);
    includePartnersCheck.closest("label").hidden = !hasPartners;
    includeInternsCheck.closest("label").hidden = !hasInterns;
    filterBar.hidden = !hasPartners && !hasInterns;
  }

  // ── Tree Building ──

  function buildTree(people) {
    const map = new Map();

    for (const p of people) {
      map.set(p.name, {
        name: p.name,
        title: p.title,
        manager: p.manager,
        children: [],
      });
    }

    for (const p of people) {
      if (p.manager && !map.has(p.manager)) {
        map.set(p.manager, {
          name: p.manager,
          title: "",
          manager: "",
          children: [],
        });
      }
    }

    const roots = [];

    for (const node of map.values()) {
      if (node.manager && map.has(node.manager)) {
        map.get(node.manager).children.push(node);
      } else {
        roots.push(node);
      }
    }

    for (const node of map.values()) {
      node.children.sort(byManagerThenFirstName);
    }
    roots.sort(byManagerThenFirstName);

    return roots;
  }

  // ── Stats ──

  function isOpenRole(name) {
    return name.toLowerCase().includes("backfill") || /\d/.test(name);
  }

  function computeOrgStats(roots) {
    var associates = 0;
    var managers = 0;
    var managersOfManagers = 0;
    var openRoles = 0;
    var directOpenRoles = 0;
    var maxLevels = 0;
    var totalSpan = 0;
    var spanCount = 0;

    function walk(node, depth) {
      if (isOpenRole(node.name)) { openRoles++; }
      if (node.children.length === 0) {
        associates++;
        if (depth > maxLevels) maxLevels = depth;
      } else {
        managers++;
        totalSpan += node.children.length;
        spanCount++;
        var hasManagerChild = false;
        for (var i = 0; i < node.children.length; i++) {
          if (isOpenRole(node.children[i].name)) { directOpenRoles++; }
          if (node.children[i].children.length > 0) {
            hasManagerChild = true;
          }
          walk(node.children[i], depth + 1);
        }
        if (hasManagerChild) {
          managersOfManagers++;
        }
      }
    }

    for (var i = 0; i < roots.length; i++) {
      walk(roots[i], 0);
    }

    return {
      total: associates + managers,
      associates: associates,
      managers: managers,
      managersOfManagers: managersOfManagers,
      openRoles: openRoles,
      directOpenRoles: directOpenRoles,
      ratio: managers > 0 ? (associates / managers).toFixed(1) : "N/A",
      avgSpan: spanCount > 0 ? (totalSpan / spanCount).toFixed(1) : "N/A",
      levels: maxLevels
    };
  }

  function updateStatsBar(roots) {
    if (roots.length === 0) {
      statsBar.hidden = true;
      return;
    }
    var stats = computeOrgStats(roots);
    statTotal.textContent = stats.total;
    statAssoc.textContent = stats.associates;
    statManagers.textContent = stats.managers;
    statMgrOfMgr.textContent = stats.managersOfManagers;
    statOpenRoles.textContent = stats.openRoles;
    statRatio.textContent = stats.ratio;
    statAvgSpan.textContent = stats.avgSpan;
    statLevels.textContent = stats.levels;
    statsBar.hidden = false;
  }

  // ── D3 Helpers ──

  function countAll(data) {
    var n = 1;
    var ch = data.children || [];
    for (var i = 0; i < ch.length; i++) {
      n += countAll(ch[i]);
    }
    return n;
  }

  function countManagersInData(data) {
    var ch = data.children || [];
    if (ch.length === 0) return 0;
    var n = 1;
    for (var i = 0; i < ch.length; i++) {
      n += countManagersInData(ch[i]);
    }
    return n;
  }

  function mgrDepth(data) {
    var ch = data.children || [];
    if (ch.length === 0) return 0;
    var max = 0;
    for (var i = 0; i < ch.length; i++) {
      var d = mgrDepth(ch[i]);
      if (d > max) max = d;
    }
    return 1 + max;
  }

  function truncText(t, maxLen) {
    if (!t) return "";
    return t.length > maxLen ? t.slice(0, maxLen - 2) + "..." : t;
  }

  function diagonal(s, t) {
    return "M" + s.y + "," + s.x +
      "C" + ((s.y + t.y) / 2) + "," + s.x +
      " " + ((s.y + t.y) / 2) + "," + t.x +
      " " + t.y + "," + t.x;
  }

  function diagonalVertical(s, t) {
    return "M" + s.x + "," + s.y +
      "C" + s.x + "," + ((s.y + t.y) / 2) +
      " " + t.x + "," + ((s.y + t.y) / 2) +
      " " + t.x + "," + t.y;
  }

  function isVerticalLayout() {
    return layoutOrientation === "vertical";
  }

  function getTreeNodeSize() {
    var extra = hasChanges() ? 14 : 0;
    return isVerticalLayout() ? [rectW + 40, rectH + 70 + extra] : [48 + extra, 240];
  }

  function linkPath(s, t) {
    return isVerticalLayout() ? diagonalVertical(s, t) : diagonal(s, t);
  }

  function nodeTransform(d) {
    return isVerticalLayout()
      ? "translate(" + d.x + "," + d.y + ")"
      : "translate(" + d.y + "," + d.x + ")";
  }


  // ── D3 Initialization ──

  function initD3() {
    svg = d3.select("#tree-svg");
    g = svg.append("g");
    zoomBehavior = d3.zoom()
      .scaleExtent([0.1, 3])
      .on("zoom", function (e) { g.attr("transform", e.transform); });
    svg.call(zoomBehavior);
    svg.on("dblclick.zoom", null);
  }

  // ── D3 Rendering ──

  function updateChart(source, changes) {
    if (!d3Root) return;

    if (!changes) changes = getChanges();
    var treeLayout = d3.tree().nodeSize(getTreeNodeSize());
    treeLayout(d3Root);

    var nodes = d3Root.descendants();
    var links = d3Root.links();

    // Filter out virtual root from rendering
    var visibleNodes = nodes.filter(function (d) { return d.data.name !== "__root__"; });
    var visibleLinks = links.filter(function (d) {
      return d.source.data.name !== "__root__" && d.target.data.name !== "__root__";
    });
    // For virtual root, draw links from root's children as if they were roots
    var rootLinks = links.filter(function (d) {
      return d.source.data.name === "__root__";
    });

    var transition = d3.transition().duration(400);

    // ── Links ──
    var link = g.selectAll("path.link").data(visibleLinks.concat(rootLinks), function (d) { return d.target.id; });

    var linkEnter = link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function () {
        var o = { x: source.x0 || 0, y: source.y0 || 0 };
        return linkPath(o, o);
      });

    linkEnter.merge(link).transition(transition)
      .attr("d", function (d) { return linkPath(d.source, d.target); });

    link.exit().transition(transition)
      .attr("d", function () {
        var o = { x: source.x, y: source.y };
        return linkPath(o, o);
      }).remove();

    // ── Nodes ──
    var node = g.selectAll("g.node-group").data(visibleNodes, function (d) { return d.id; });

    var nodeEnter = node.enter().append("g")
      .attr("class", "node-group")
      .attr("transform", function () {
        return nodeTransform({ x: source.x0 || 0, y: source.y0 || 0 });
      });

    // Card background rect
    nodeEnter.append("rect")
      .attr("class", "node-rect")
      .attr("width", rectW)
      .attr("height", rectH)
      .attr("x", -rectW / 2)
      .attr("y", -rectH / 2);

    // Name text
    nodeEnter.append("text")
      .attr("class", "node-name")
      .attr("dy", -4)
      .attr("text-anchor", "middle");

    // Title text
    nodeEnter.append("text")
      .attr("class", "node-title-text")
      .attr("dy", 8)
      .attr("text-anchor", "middle");

    // Reports count (below name/title)
    nodeEnter.append("text")
      .attr("class", "node-count")
      .attr("x", -rectW / 2 + 8)
      .attr("dy", rectH / 2 - 3)
      .attr("text-anchor", "start");

    // Toggle indicator (right side of card)
    nodeEnter.append("text")
      .attr("class", "node-toggle")
      .attr("x", rectW / 2 - 12)
      .attr("dy", 4)
      .attr("text-anchor", "middle");

    // Depth badge circle
    nodeEnter.append("circle")
      .attr("class", "depth-circle")
      .attr("cx", rectW / 2 - 4)
      .attr("cy", -rectH / 2 + 4)
      .attr("r", 8);

    // Depth badge text
    nodeEnter.append("text")
      .attr("class", "depth-badge")
      .attr("x", rectW / 2 - 4)
      .attr("y", -rectH / 2 + 7)
      .attr("text-anchor", "middle");

    // Open roles badge rect (inside card, top-right area)
    nodeEnter.append("rect")
      .attr("class", "node-open-badge-rect")
      .attr("x", rectW / 2 - 48)
      .attr("y", -rectH / 2)
      .attr("width", 0)
      .attr("height", 14)
      .attr("rx", 0).attr("ry", 0);

    // Open roles badge text
    nodeEnter.append("text")
      .attr("class", "node-open-badge-text")
      .attr("x", rectW / 2 - 44)
      .attr("y", -rectH / 2 + 10)
      .attr("text-anchor", "start");

    // Avg span text (inside card, bottom-right)
    nodeEnter.append("text")
      .attr("class", "node-span")
      .attr("x", rectW / 2 - 24)
      .attr("dy", rectH / 2 - 3)
      .attr("text-anchor", "end");

    // Change accent bar (left edge of card)
    nodeEnter.append("rect")
      .attr("class", "change-accent");

    // Change badge rect + text (bottom-left of card)
    nodeEnter.append("rect")
      .attr("class", "change-badge-rect");
    nodeEnter.append("text")
      .attr("class", "change-badge-text");

    // Change note text (inside card, below title)
    nodeEnter.append("text")
      .attr("class", "change-note")
      .attr("text-anchor", "middle");

    // Info icon circle
    nodeEnter.append("circle")
      .attr("class", "node-info-circle")
      .attr("cx", -rectW / 2 + 9)
      .attr("cy", -rectH / 2 + 9)
      .attr("r", 6);

    // Info icon "i" text
    nodeEnter.append("text")
      .attr("class", "node-info-text")
      .attr("x", -rectW / 2 + 9)
      .attr("y", -rectH / 2 + 12)
      .attr("text-anchor", "middle")
      .text("i");

    // ── Click handlers ──

    // Click anywhere on card → expand/collapse one level
    nodeEnter.on("click", function (e, d) {
      e.stopPropagation();
      toggleNodeOneLevel(d);
      updateChart(d);
    });

    // (i) icon intercepts click → open edit panel instead
    nodeEnter.each(function () {
      var el = d3.select(this);
      el.select(".node-info-circle").on("click", function (e, d) {
        e.stopPropagation();
        handleNodeClick(d);
      });
      el.select(".node-info-text").on("click", function (e, d) {
        e.stopPropagation();
        handleNodeClick(d);
      });
    });

    // Right-click on card → open edit panel
    nodeEnter.on("contextmenu", function (e, d) {
      e.preventDefault();
      e.stopPropagation();
      handleNodeClick(d);
    });

    // ── Tooltip handlers ──
    nodeEnter
      .on("mouseenter", function (e, d) {
        if (!d.data._isManager) return;
        var s = computeOrgStats([d.data]);
        var myDirectOpen = d.data._directOpen || 0;
        tooltipEl.textContent = "";
        var nameDiv = document.createElement("div");
        nameDiv.className = "tt-name";
        nameDiv.textContent = d.data.name;
        var titleDiv = document.createElement("div");
        titleDiv.className = "tt-title";
        titleDiv.textContent = d.data.title;
        var statsDiv = document.createElement("div");
        statsDiv.className = "tt-stats";
        statsDiv.textContent = s.total + ' Total · ' + s.associates + ' Associates · ' + s.managers + ' Managers';
        var detailDiv = document.createElement("div");
        detailDiv.className = "tt-detail";
        detailDiv.textContent = s.managersOfManagers + ' Mgrs of Mgrs · ' +
          myDirectOpen + ' Direct Open · ' + s.openRoles + ' Org Open · ' +
          s.ratio + ' Assoc/Mgr · ' + s.avgSpan + ' Avg Span · ' + s.levels + ' Levels';
        tooltipEl.appendChild(nameDiv);
        tooltipEl.appendChild(titleDiv);
        tooltipEl.appendChild(statsDiv);
        tooltipEl.appendChild(detailDiv);
        tooltipEl.classList.add("show");
      })
      .on("mousemove", function (e) {
        tooltipEl.style.left = (e.pageX + 14) + "px";
        tooltipEl.style.top = (e.pageY - 14) + "px";
      })
      .on("mouseleave", function () {
        tooltipEl.classList.remove("show");
      });

    // ── Update selection ──
    var nodeUpdate = nodeEnter.merge(node);

    nodeUpdate.transition(transition)
      .attr("transform", nodeTransform);

    // Update rect colors based on depth and diff
    nodeUpdate.select(".node-rect")
      .attr("fill", function (d) {
        var change = changes.get(d.data.name);
        if (change) {
          if (change.removed) return "#2d1515";
          if (change.added) return "#152d1a";
          if (change.moved) return "#2d1f15";
          if (change.edited) return "#1f1a2d";
        }
        return levelFills[Math.min(d.depth, 5)];
      })
      .attr("stroke", function (d) {
        var change = changes.get(d.data.name);
        if (change) {
          if (change.removed) return "#fc8181";
          if (change.added) return "#38a169";
          if (change.moved) return "#dd6b20";
          if (change.edited) return "#805ad5";
        }
        return levelColors[Math.min(d.depth, 5)];
      })
      .attr("stroke-width", function (d) {
        return changes.has(d.data.name) ? 2 : 1.5;
      })
      .attr("stroke-dasharray", function (d) {
        var change = changes.get(d.data.name);
        return (change && change.removed) ? "6,3" : "none";
      });

    nodeUpdate.select(".node-name")
      .text(function (d) { return truncText(d.data.name, 26); })
      .attr("opacity", function (d) {
        var change = changes.get(d.data.name);
        return (change && change.removed) ? 0.4 : 1;
      });

    nodeUpdate.select(".node-title-text")
      .text(function (d) { return truncText(d.data.title, 32); })
      .attr("opacity", function (d) {
        var change = changes.get(d.data.name);
        return (change && change.removed) ? 0.4 : 1;
      });

    // Reports count
    nodeUpdate.select(".node-count")
      .text(function (d) {
        if (!d.data._isManager) return "";
        var allCh = d._allChildren || d.children || d._children || [];
        var count = allCh.length;
        if (d._children && !d.children) {
          return "+" + countAll(d.data) + " (" + count + " direct)";
        }
        return count + " report" + (count !== 1 ? "s" : "");
      })
      .attr("fill", function (d) { return levelColors[Math.min(d.depth, 5)]; });

    // Toggle icon
    nodeUpdate.select(".node-toggle")
      .text(function (d) {
        if (!d.data._isManager) return "";
        if (d.children) return "−";
        if ((d._children && d._children.length > 0) || (d._allChildren && d._allChildren.length > 0)) return "+";
        return "";
      })
      .attr("fill", function (d) {
        if (!d.data._isManager) return "transparent";
        if (!d.children && !d._children && !d._allChildren) return "transparent";
        return "#8b8f9a";
      });

    // Depth badges
    nodeUpdate.select(".depth-circle")
      .attr("fill", function (d) {
        var md = d.data._mgrDepth || 0;
        return md > 0 ? depthColors[Math.min(md, 6)] : "transparent";
      });

    nodeUpdate.select(".depth-badge")
      .text(function (d) {
        var md = d.data._mgrDepth || 0;
        return md > 0 ? md : "";
      });

    // Open roles badges
    nodeUpdate.select(".node-open-badge-rect")
      .attr("width", function (d) {
        return (d.data._isManager && d.data._directOpen > 0) ? 48 : 0;
      })
      .attr("fill", "rgba(240, 160, 60, 0.15)")
      .attr("stroke", "#f0a03c")
      .attr("stroke-width", 0.5);

    nodeUpdate.select(".node-open-badge-text")
      .text(function (d) {
        if (!d.data._isManager || !d.data._directOpen) return "";
        return d.data._directOpen + " open";
      })
      .attr("fill", "#f0a03c");

    // Avg span text
    nodeUpdate.select(".node-span")
      .text(function (d) {
        if (!d.data._isManager) return "";
        var hc = countAll(d.data);
        var mgr = countManagersInData(d.data);
        if (mgr > 0) return "avg span " + ((hc - 1) / mgr).toFixed(1);
        return "";
      });

    // Change indicators above the card (no card resize needed)
    nodeUpdate.each(function (d) {
      var el = d3.select(this);
      var change = changes.get(d.data.name);

      var color = "transparent";
      var badge = "";
      var note = "";
      if (change) {
        if (change.removed) { color = "#fc8181"; badge = "R"; note = "removed"; }
        else if (change.added) { color = "#38a169"; badge = "A"; note = "added"; }
        else if (change.moved && change.edited) { color = "#dd6b20"; badge = "M+E"; note = "from " + (change.originalManager || "none") + " + title changed"; }
        else if (change.moved) { color = "#dd6b20"; badge = "M"; note = "from " + (change.originalManager || "none"); }
        else if (change.edited) { color = "#805ad5"; badge = "E"; note = "title changed"; }
      }

      // Accent bar on left edge of card
      el.select(".change-accent")
        .attr("x", -rectW / 2).attr("y", -rectH / 2)
        .attr("width", change ? 4 : 0).attr("height", rectH).attr("rx", 2)
        .attr("fill", color);

      // Badge pill — above the card
      var aboveY = -rectH / 2 - 15;
      var bw = badge.length > 1 ? 26 : 18;
      el.select(".change-badge-rect")
        .attr("x", -rectW / 2).attr("y", aboveY)
        .attr("width", badge ? bw : 0).attr("height", 13).attr("rx", 3)
        .attr("fill", color);
      el.select(".change-badge-text")
        .attr("x", -rectW / 2 + bw / 2).attr("y", aboveY + 10)
        .attr("text-anchor", "middle")
        .text(badge);

      // Change note — above the card, next to badge
      el.select(".change-note")
        .attr("x", badge ? -rectW / 2 + bw + 4 : 0)
        .attr("dy", 0).attr("y", aboveY + 10)
        .attr("text-anchor", badge ? "start" : "middle")
        .attr("fill", color)
        .text(note);
    });

    // ── Exit selection ──
    node.exit().transition(transition)
      .attr("transform", nodeTransform(source))
      .remove();

    // Store positions for next transition
    nodes.forEach(function (d) { d.x0 = d.x; d.y0 = d.y; });

    // Highlight selected
    highlightSelectedNode();
  }

  function handleNodeClick(d) {
    if (selectedPerson === d.data.name) {
      if (!confirmDiscard()) return;
      closePanel();
      return;
    }
    if (selectedPerson && !confirmDiscard()) return;
    openPanel(d.data.name);
  }

  // ── Toggle / Expand / Collapse (D3 style) ──

  function collapseNode(d) {
    d._children = d._allChildren || d.children;
    d.children = null;
    d._allChildren = null;
    d._expandMode = null;
  }

  function expandNode(d) {
    d.children = d._allChildren || d._children;
    d._children = null;
    d._allChildren = null;
  }

  function toggleNodeOneLevel(d) {
    if (d.children) {
      collapseNode(d);
    } else if (d._children || d._allChildren) {
      expandNode(d);
      d._expandMode = "all";
      for (var i = 0; i < d.children.length; i++) {
        var child = d.children[i];
        if (child.children && child.children.length > 0) collapseNode(child);
      }
    }
  }

  function isManagerNode(d) {
    return (d.children && d.children.length > 0) ||
           (d._children && d._children.length > 0) ||
           (d._allChildren && d._allChildren.length > 0);
  }

  function toggleNodeAll(d) {
    if (d.children) {
      collapseNode(d);
    } else if (d._children || d._allChildren) {
      expandNode(d);
      d._expandMode = "all";
    }
  }

  function toggleNodeManagers(d) {
    if (d.children) { collapseNode(d); return; }

    var all = d._allChildren || d._children;
    if (!all) return;

    var managerChildren = all.filter(function (c) { return isManagerNode(c); });
    if (managerChildren.length === 0) return;

    d._allChildren = all;
    d.children = managerChildren;
    d._children = null;
    d._expandMode = "managers";

    for (var i = 0; i < d.children.length; i++) {
      var child = d.children[i];
      if (child._children || child._allChildren) {
        var childAll = child._allChildren || child._children;
        var childMgrs = childAll.filter(function (c) { return isManagerNode(c); });
        if (childMgrs.length > 0) {
          child._allChildren = childAll;
          child.children = childMgrs;
          child._children = null;
          child._expandMode = "managers";
        }
      }
    }
  }

  function walkAll(d, fn) {
    fn(d);
    if (d.children) d.children.forEach(function (c) { walkAll(c, fn); });
    if (d._children) d._children.forEach(function (c) { walkAll(c, fn); });
    if (d._allChildren) d._allChildren.forEach(function (c) { walkAll(c, fn); });
  }

  function expandAll() {
    if (!d3Root) return;
    walkAll(d3Root, function (d) {
      if (d._children || d._allChildren) { expandNode(d); d._expandMode = "all"; }
    });
    updateChart(d3Root);
    setTimeout(fitToView, 450);
  }

  function collapseAll() {
    if (!d3Root) return;
    walkAll(d3Root, function (d) {
      if (d.depth > 0 && (d.children || d._allChildren)) collapseNode(d);
    });
    updateChart(d3Root);
    setTimeout(fitToView, 450);
  }

  function expandManagers() {
    if (!d3Root) return;
    // Root is included here (no depth > 0 guard) so its own direct reports
    // get collapsed via the same _allChildren-preferring logic as every
    // other node — special-casing it previously dropped non-manager top
    // level reports from _allChildren on repeated presses.
    walkAll(d3Root, function (d) {
      if (d.children || d._allChildren) collapseNode(d);
    });

    function expandMgrs(d) {
      var all = d._children;
      if (!all) return;
      var managerChildren = all.filter(function (c) { return isManagerNode(c); });
      if (managerChildren.length === 0) return;
      d._allChildren = all;
      d.children = managerChildren;
      d._children = null;
      d._expandMode = "managers";
      for (var i = 0; i < d.children.length; i++) expandMgrs(d.children[i]);
    }

    expandMgrs(d3Root);

    updateChart(d3Root);
    setTimeout(fitToView, 450);
  }

  function expandToDepth(maxDepth) {
    if (!d3Root) return;
    walkAll(d3Root, function (d) {
      if (d.depth < maxDepth) {
        if (d._children || d._allChildren) expandNode(d);
      } else {
        if (d.children && d.children.length > 0) collapseNode(d);
      }
    });
  }

  function getDefaultDepth() {
    var w = window.innerWidth;
    if (w > 1024) return 3;
    if (w >= 768) return 2;
    return 1;
  }

  // ── Fit to View ──

  function fitToView() {
    if (!d3Root || !svg) return;
    var nodes = d3Root.descendants().filter(function (d) {
      return d.x !== undefined && d.data.name !== "__root__";
    });
    if (nodes.length === 0) return;

    var minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
    nodes.forEach(function (d) {
      if (d.x < minX) minX = d.x;
      if (d.x > maxX) maxX = d.x;
      if (d.y < minY) minY = d.y;
      if (d.y > maxY) maxY = d.y;
    });

    var svgEl = document.getElementById("tree-svg");
    var width = svgEl.clientWidth;
    var height = svgEl.clientHeight;
    var pad = 120;
    var treeW;
    var treeH;
    var cx;
    var cy;

    if (isVerticalLayout()) {
      treeW = (maxX - minX) + rectW + 160;
      treeH = (maxY - minY) + rectH + 80;
      cx = (minX + maxX) / 2;
      cy = (minY + maxY) / 2;
    } else {
      treeW = (maxY - minY) + rectW + 160;
      treeH = (maxX - minX) + rectH + 80;
      cx = (minY + maxY) / 2;
      cy = (minX + maxX) / 2;
    }

    var vw = width - pad * 2;
    var vh = height - pad * 2;
    var scale = Math.min(vw / treeW, vh / treeH, 1.2);
    var tx = width / 2 - cx * scale;
    var ty = height / 2 - cy * scale;

    svg.transition().duration(500)
      .call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
  }

  // ── Rebuild and Render ──

  function getCollapsedNames() {
    if (!d3Root) return new Set();
    var collapsed = new Set();
    walkAll(d3Root, function (d) {
      if (d._children && !d.children) {
        collapsed.add(d.data.name);
      }
    });
    return collapsed;
  }

  function rebuildAndRender() {
    var roots = buildTree(getVisiblePeople(currentPeople));

    if (emptyState) emptyState.style.display = "none";

    // Wrap multiple roots under a virtual root
    var treeData;
    if (roots.length === 1) {
      treeData = roots[0];
    } else {
      treeData = { name: "__root__", title: "", manager: "", children: roots };
    }

    function annotate(node) {
      node._isManager = node.children.length > 0;
      node._mgrDepth = mgrDepth(node);
      var directOpen = 0;
      for (var i = 0; i < node.children.length; i++) {
        if (isOpenRole(node.children[i].name)) directOpen++;
        annotate(node.children[i]);
      }
      node._directOpen = directOpen;
    }
    annotate(treeData);

    // Save expand state
    var wasCollapsed = getCollapsedNames();

    d3Root = d3.hierarchy(treeData);

    nodeIdCounter = 0;
    var allNodes = d3Root.descendants();
    allNodes.forEach(function (d) { d.id = ++nodeIdCounter; });

    d3Root.x0 = 0;
    d3Root.y0 = 0;

    if (wasCollapsed.size > 0) {
      allNodes.forEach(function (d) {
        if (d.children && d.children.length > 0 && wasCollapsed.has(d.data.name)) {
          d._children = d.children;
          d.children = null;
        }
      });
    } else {
      // First load: apply default expansion
      if (currentViewMode === "expand" || currentViewMode === "managers") {
        // expand: leave expanded; managers: applied after updateChart
      } else if (currentViewMode === "collapse") {
        d3Root.descendants().forEach(function (d) {
          if (d.depth > 0 && d.children && d.children.length > 0) {
            d._children = d.children;
            d.children = null;
          }
        });
      } else {
        expandToDepth(1);
      }
    }

    var changes = getChanges();
    updateChart(d3Root, changes);
    updateStatsBar(roots);
    updateFilterBar();
    var changed = changes.size > 0;
    updateToolbarButtons(changed);
    updateLegend(changed);
    updateLegendPosition();
    buildChangelog();
    applySpotlight();

    if (currentViewMode === "managers" && wasCollapsed.size === 0) {
      expandManagers();
    } else {
      setTimeout(fitToView, 100);
    }
  }

  // ── Search ──

  searchInput.addEventListener("input", function () {
    if (!d3Root) return;
    var q = searchInput.value.toLowerCase().trim();

    d3.selectAll(".node-group").classed("node-highlight", false);

    if (!q) {
      updateChart(d3Root);
      setTimeout(fitToView, 450);
      return;
    }

    // Auto-expand ancestors of matches
    walkAll(d3Root, function (node) {
      if (node.data && node.data.name && node.data.name.toLowerCase().includes(q)) {
        var p = node.parent;
        while (p) {
          if (p._children) {
            p.children = p._allChildren || p._children;
            p._children = null;
            p._allChildren = null;
          }
          p = p.parent;
        }
      }
    });

    updateChart(d3Root);

    setTimeout(function () {
      d3.selectAll(".node-group").classed("node-highlight", function (d) {
        return d.data.name.toLowerCase().includes(q);
      });
      fitToView();
    }, 450);
  });

  // ── Error display ──

  function showError(message) {
    if (emptyState) {
      emptyState.style.display = "block";
      emptyState.textContent = message;
      emptyState.className = "error-state";
    }
    statsBar.hidden = true;
    filterBar.hidden = true;
    if (g) g.selectAll("*").remove();
  }

  // ── Load CSV text ──

  function parseAndValidate(text) {
    if (!text || text.trim() === "") { showError("Please upload a CSV file"); return null; }
    var result = parseCSV(text);
    if (result.error === "empty") { showError("Please upload a CSV file"); return null; }
    if (result.error === "columns") { showError("CSV must contain columns: Name, Title, Manager"); return null; }
    if (result.error === "no_data") { showError("No valid data found in CSV"); return null; }
    return addMissingManagers(result.people);
  }

  function loadCSVText(text, versionName) {
    var people = parseAndValidate(text);
    if (!people) return;
    var name = versionName || "upload-" + (versions.length + 1);
    addVersion(name, people);
  }

  function loadPlanCSVText(text) {
    var planPeople = parseAndValidate(text);
    if (!planPeople) return;
    var planNames = new Set(planPeople.map(function (p) { return p.name; }));
    var removed = originalPeople.filter(function (p) {
      return !planNames.has(p.name);
    }).map(function (p) {
      var c = clonePerson(p);
      c._removed = true;
      return c;
    });
    currentPeople = planPeople.map(clonePerson).concat(removed);
    selectedPerson = null;
    currentViewMode = "default";
    resetRoleFilters();
    rebuildAndRender();
    saveVersionsToStorage();
  }

  function addMissingManagers(people) {
    var names = new Set(people.map(function (p) { return p.name; }));
    var toAdd = [];
    for (var i = 0; i < people.length; i++) {
      var mgr = people[i].manager;
      if (mgr && !names.has(mgr)) {
        names.add(mgr);
        toAdd.push({ name: mgr, title: "", manager: "" });
      }
    }
    return people.concat(toAdd);
  }

  function csvEscape(value) {
    if (value.indexOf(",") !== -1 || value.indexOf('"') !== -1 || value.indexOf("\n") !== -1) {
      return '"' + value.replace(/"/g, '""') + '"';
    }
    return value;
  }

  // ── Event listeners ──

  uploadBtn.addEventListener("click", function () {
    fileInput.click();
  });

  function readCSVFile(inputEl, loadFn) {
    var file = inputEl.files[0];
    if (!file) return;
    if (!file.name.toLowerCase().endsWith(".csv")) {
      showError("Please upload a CSV file");
      inputEl.value = "";
      return;
    }
    var reader = new FileReader();
    reader.onload = function (e) { loadFn(e.target.result, file); inputEl.value = ""; };
    reader.readAsText(file);
  }

  fileInput.addEventListener("change", function () {
    readCSVFile(fileInput, function (text, file) {
      loadCSVText(text, deriveVersionName(file.name));
    });
  });

  planBtn.addEventListener("click", function () { planFileInput.click(); });

  planFileInput.addEventListener("change", function () { readCSVFile(planFileInput, loadPlanCSVText); });

  var params = new URLSearchParams(window.location.search);
  var autoFile = params.get("file");
  var autoPlan = params.get("plan");

  expandBtn.addEventListener("click", function () { currentViewMode = "expand"; expandAll(); });
  mgmtBtn.addEventListener("click", function () { currentViewMode = "managers"; expandManagers(); });
  collapseBtn.addEventListener("click", function () { currentViewMode = "collapse"; collapseAll(); });

  level1Btn.addEventListener("click", function () { currentViewMode = "default"; expandToDepth(1); updateChart(d3Root); applySpotlight(); setTimeout(fitToView, 450); });
  level2Btn.addEventListener("click", function () { currentViewMode = "default"; expandToDepth(2); updateChart(d3Root); applySpotlight(); setTimeout(fitToView, 450); });
  level3Btn.addEventListener("click", function () { currentViewMode = "default"; expandToDepth(3); updateChart(d3Root); applySpotlight(); setTimeout(fitToView, 450); });

  spotlightBtn.addEventListener("click", function () {
    spotlightMode = !spotlightMode;
    spotlightBtn.classList.toggle("active", spotlightMode);
    applySpotlight();
  });

  changelogTab.addEventListener("click", toggleChangelog);
  changelogClose.addEventListener("click", toggleChangelog);
  changelogContent.addEventListener("click", function (e) {
    var entry = e.target.closest(".changelog-entry");
    if (entry && entry.dataset.navigable) navigateToNode(entry.dataset.name);
  });

  layoutSelect.addEventListener("change", function () {
    layoutOrientation = layoutSelect.value;
    if (d3Root) {
      updateChart(d3Root);
      setTimeout(fitToView, 450);
    }
  });

  panelCloseBtn.addEventListener("click", function () {
    if (!confirmDiscard()) return;
    closePanel();
  });

  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape") {
      if (!ldapModal.hidden) { closeLdapModal(); return; }
      if (changelogSidebar.classList.contains("visible")) { toggleChangelog(); return; }
      if (selectedPerson) {
        if (!confirmDiscard()) return;
        closePanel();
      }
    }
  });

  panelCancelBtn.addEventListener("click", function () {
    if (!confirmDiscard()) return;
    closePanel();
  });

  panelSaveBtn.addEventListener("click", function () {
    if (!selectedPerson) return;

    var newTitle = panelTitle.value.trim();
    var newManager = panelManager.value;

    var person = currentPeople.find(function (p) { return p.name === selectedPerson; });
    if (person) {
      person.title = newTitle;
      person.manager = newManager;
    }

    var savedName = selectedPerson;
    rebuildAndRender();
    openPanel(savedName);
    saveVersionsToStorage();
  });

  saveCsvBtn.addEventListener("click", function () {
    var lines = ["Name,Title,Manager"];

    for (var i = 0; i < currentPeople.length; i++) {
      var p = currentPeople[i];
      if (p._removed) continue;
      lines.push(csvEscape(p.name) + "," + csvEscape(p.title) + "," + csvEscape(p.manager));
    }

    var csvText = lines.join("\n") + "\n";
    var blob = new Blob([csvText], { type: "text/csv;charset=utf-8;" });
    var url = URL.createObjectURL(blob);

    var today = new Date().toISOString().slice(0, 10);
    var a = document.createElement("a");
    a.href = url;
    a.download = "reorg-" + today + ".csv";
    a.click();
    URL.revokeObjectURL(url);
  });

  resetBtn.addEventListener("click", function () {
    if (!confirm("Discard all changes?")) return;

    currentPeople = originalPeople.map(clonePerson);
    selectedPerson = null;
    closePanel();
    currentViewMode = "default";
    rebuildAndRender();
    saveVersionsToStorage();
  });

  // ── Export Static HTML ──

  function exportStaticHTML() {
    fetch('app.js').then(function (r) { return r.text(); }).then(function (appJS) {
      var css = "";
      for (var i = 0; i < document.styleSheets.length; i++) {
        try {
          var rules = document.styleSheets[i].cssRules;
          if (!rules) continue;
          for (var j = 0; j < rules.length; j++) css += rules[j].cssText + "\n";
        } catch (e) { /* cross-origin */ }
      }

      var title = "Org Chart";
      if (activeVersionIndex >= 0 && versions[activeVersionIndex]) {
        title = versions[activeVersionIndex].name;
      }
      var safeTitle = title.replace(/&/g, "&amp;").replace(/</g, "&lt;");

      var bodyClone = document.body.cloneNode(true);
      bodyClone.classList.remove("panel-open");
      var cloneSvg = bodyClone.querySelector("#tree-svg");
      if (cloneSvg) cloneSvg.innerHTML = "";
      var scripts = bodyClone.querySelectorAll("script");
      for (var i = 0; i < scripts.length; i++) scripts[i].parentNode.removeChild(scripts[i]);
      var clonePanel = bodyClone.querySelector("#edit-panel");
      if (clonePanel) { clonePanel.setAttribute("hidden", ""); clonePanel.classList.remove("visible"); }
      var cloneLdap = bodyClone.querySelector("#ldap-modal");
      if (cloneLdap) cloneLdap.setAttribute("hidden", "");
      var clonePartners = bodyClone.querySelector("#include-partners");
      if (clonePartners) clonePartners.checked = includeCollaborativePartners;
      var cloneInterns = bodyClone.querySelector("#include-interns");
      if (cloneInterns) cloneInterns.checked = includeInterns;

      var hiddenCSS = '#upload-btn, #ldap-btn, #plan-btn, #save-csv-btn, #reset-btn, #export-btn,\n' +
        '#file-input, #plan-file-input, #version-group { display: none !important; }\n' +
        '.node-info-circle, .node-info-text { display: none; }\n';

      var dataScript = '<script>\nwindow.__EXPORT_DATA__ = ' +
        JSON.stringify({
          originalPeople: originalPeople,
          currentPeople: currentPeople,
          layout: layoutOrientation,
          includePartners: includeCollaborativePartners,
          includeInterns: includeInterns
        }) + ';\n</' + 'script>';

      var html = '<!DOCTYPE html>\n<html lang="en">\n<head>\n' +
        '<meta charset="UTF-8">\n' +
        '<meta name="viewport" content="width=device-width, initial-scale=1.0">\n' +
        '<title>' + safeTitle + '</title>\n' +
        '<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">\n' +
        '<script src="https://cdn.jsdelivr.net/npm/d3@7"></' + 'script>\n' +
        '<style>\n' + css + '\n' + hiddenCSS + '</style>\n' +
        '</head>\n<body>\n' +
        bodyClone.innerHTML + '\n' +
        dataScript + '\n' +
        '<script>\n' + appJS + '\n</' + 'script>\n' +
        '</body>\n</html>';

      var blob = new Blob([html], { type: "text/html;charset=utf-8" });
      var url = URL.createObjectURL(blob);
      var a = document.createElement("a");
      a.href = url;
      a.download = title.replace(/[^a-zA-Z0-9_-]/g, "-") + "-org-chart.html";
      a.click();
      URL.revokeObjectURL(url);
    }).catch(function () {
      alert("Could not read app.js for export");
    });
  }

  exportBtn.addEventListener("click", exportStaticHTML);

  // ── LDAP Import ──

  function openLdapModal() {
    ldapUidInput.value = "";
    ldapDepthInput.value = "";
    ldapStatus.hidden = true;
    ldapStatus.className = "ldap-status";
    ldapImportBtn.disabled = false;
    ldapModal.hidden = false;
    ldapUidInput.focus();
  }

  function closeLdapModal() {
    ldapModal.hidden = true;
  }

  function setLdapStatus(msg, type) {
    ldapStatus.textContent = msg;
    ldapStatus.className = "ldap-status " + type;
    ldapStatus.hidden = false;
  }

  function doLdapImport() {
    var uid = ldapUidInput.value.trim();
    if (!uid) {
      setLdapStatus("Please enter a UID or name.", "error");
      return;
    }

    var depth = ldapDepthInput.value ? parseInt(ldapDepthInput.value, 10) : 999;
    ldapImportBtn.disabled = true;
    setLdapStatus("Fetching org chart from LDAP... This may take a few minutes for large orgs.", "loading");

    fetch("/api/ldap-org", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ uid: uid, depth: depth })
    })
      .then(function (res) {
        if (!res.ok) {
          return res.json().then(function (err) { throw new Error(err.error || "Request failed"); });
        }
        return res.text();
      })
      .then(function (csvText) {
        closeLdapModal();
        loadCSVText(csvText, "ldap-" + uid);
      })
      .catch(function (err) {
        setLdapStatus(err.message, "error");
        ldapImportBtn.disabled = false;
      });
  }

  ldapBtn.addEventListener("click", function () {
    openLdapModal();
  });

  ldapImportBtn.addEventListener("click", doLdapImport);
  ldapCancelBtn.addEventListener("click", closeLdapModal);
  ldapModalClose.addEventListener("click", closeLdapModal);

  ldapModal.addEventListener("click", function (e) {
    if (e.target === ldapModal) closeLdapModal();
  });

  ldapUidInput.addEventListener("keydown", function (e) {
    if (e.key === "Enter") doLdapImport();
  });

  includePartnersCheck.addEventListener("change", function () {
    includeCollaborativePartners = includePartnersCheck.checked;
    rebuildAndRender();
  });

  includeInternsCheck.addEventListener("change", function () {
    includeInterns = includeInternsCheck.checked;
    rebuildAndRender();
  });

  // ── Version switcher ──
  versionToggle.addEventListener("click", function () {
    versionMenu.hidden = !versionMenu.hidden;
  });

  versionMenu.addEventListener("click", function (e) {
    var removeBtn = e.target.closest(".version-item-remove");
    if (removeBtn) {
      e.stopPropagation();
      removeVersion(parseInt(removeBtn.dataset.index, 10));
      return;
    }
    var item = e.target.closest(".version-item");
    if (item) {
      switchVersion(parseInt(item.dataset.index, 10));
      closeVersionMenu();
    }
  });

  document.addEventListener("click", function (e) {
    if (!e.target.closest(".version-dropdown")) {
      closeVersionMenu();
    }
  });

  // ── Initialize ──
  initD3();

  if (window.__EXPORT_DATA__) {
    originalPeople = window.__EXPORT_DATA__.originalPeople;
    currentPeople = window.__EXPORT_DATA__.currentPeople;
    layoutOrientation = window.__EXPORT_DATA__.layout || "horizontal";
    layoutSelect.value = layoutOrientation;
    includeCollaborativePartners = window.__EXPORT_DATA__.includePartners || false;
    includeInterns = window.__EXPORT_DATA__.includeInterns || false;
    includePartnersCheck.checked = includeCollaborativePartners;
    includeInternsCheck.checked = includeInterns;
    rebuildAndRender();
  } else {
    loadVersionsFromStorage();

    if (autoFile) {
      fetch(autoFile)
        .then(function (r) { return r.text(); })
        .then(function (text) {
          loadCSVText(text, deriveVersionName(autoFile));
          if (autoPlan) {
            return fetch(autoPlan)
              .then(function (r) { return r.text(); })
              .then(loadPlanCSVText)
              .catch(function () { showError("Could not load plan: " + autoPlan); });
          }
        })
        .catch(function () { showError("Could not load " + autoFile); });
    } else if (versions.length > 0) {
      updateVersionDropdown();
      rebuildAndRender();
    }
  }

})();