var CELL = 100;
var currentZ = 0, currentDir = '', selectedRoom = null, mapData = null;
var panX = 0, panY = 0, scale = 1;
var dragging = false, startX = 0, startY = 0, prevX = 0, prevY = 0;
var dragRoom = false;
var linkDrag = false, linkFromId = null, linkTargetId = null, linkGhostDir = null;
var delDrag = false, delFromId = null, delTargetId = null;
var roomMap = {}, occupied = {};
var gridDirs = [
  {dx:0,dy:-1,dir:'north'},{dx:0,dy:1,dir:'south'},
  {dx:1,dy:0,dir:'east'},{dx:-1,dy:0,dir:'west'},
  {dx:1,dy:-1,dir:'northeast'},{dx:-1,dy:-1,dir:'northwest'},
  {dx:1,dy:1,dir:'southeast'},{dx:-1,dy:1,dir:'southwest'}
];
var saveTimer = null;
var upTarget = {}, downTarget = {};

function changeZ(dz) {
  if (dz === 0) currentZ = 0; else currentZ += dz;
  loadMap();
}

function changeDir(dir) {
  currentDir = dir;
  loadMap();
}

function loadMap() {
  $('#zLabel').textContent = 'Z=' + currentZ;
  var url = '/api/map?z=' + currentZ;
  if (currentDir) url += '&dir=' + encodeURIComponent(currentDir);
  API.get(url).then(function(data) {
    mapData = data;
    if (!currentDir && data.dir) {
      currentDir = data.dir;
    }
    updateDirSelect();
    renderMap(data);
  }).catch(function(e) {
    notify('Failed to load map: ' + e.message, 'error');
  });
}

function renderMap(data) {
  var svg = $('#mapSvg');
  var container = $('#mapContainer');
  var W = container.clientWidth;
  var H = container.clientHeight;

  roomMap = {};
  if (data.rooms) data.rooms.forEach(function(r) { roomMap[r.id] = r; });

  occupied = {};
  if (data.rooms) data.rooms.forEach(function(r) { occupied[r.x+','+r.y] = r.id; });

  upTarget = {}; downTarget = {};
  if (data.upLinks) data.upLinks.forEach(function(l) { upTarget[l.from] = l.to; });
  if (data.downLinks) data.downLinks.forEach(function(l) { downTarget[l.from] = l.to; });

  var svgNS = 'http://www.w3.org/2000/svg';
  var g = '';

  if (data.links) {
    data.links.forEach(function(l) {
      var fr = roomMap[l.from], tr = roomMap[l.to];
      if (!fr || !tr) return;
      var x1 = fr.x * CELL + CELL/2, y1 = fr.y * CELL + CELL/2;
      var x2 = tr.x * CELL + CELL/2, y2 = tr.y * CELL + CELL/2;
      var c = fr.color ? resolveColor(fr.color) : '#666';
      c = c.replace('#','');
      g += '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'" stroke="#'+c+'" stroke-width="6" opacity="0.35"'+ (l.bidirectional ? '' : ' stroke-dasharray="4,3"')+' vector-effect="non-scaling-stroke"/>';
    });
  }

  var hasUp = {}, hasDown = {};
  if (data.upLinks) data.upLinks.forEach(function(l) { hasUp[l.from] = true; });
  if (data.downLinks) data.downLinks.forEach(function(l) { hasDown[l.from] = true; });

  var roomHTML = '';
  if (data.rooms) {
    data.rooms.forEach(function(r) {
      var x = r.x * CELL + 8, y = r.y * CELL + 8, w = CELL-16, h = CELL-16;
      var fill = resolveColor(r.color);
      var txtColor = hexLuminance(fill) > 0.35 ? '#111' : '#fff';
      var sel = selectedRoom === r.id;
      roomHTML += '<rect class="rm" x="'+x+'" y="'+y+'" width="'+w+'" height="'+h+'" rx="5" fill="'+fill+'" stroke="'+(sel?'#fff':fill)+'" stroke-width="'+(sel?3:1.5)+'" data-id="'+r.id+'" data-name="'+esc(r.name)+'"/>';
      roomHTML += wrapText(r.name, x+w/2, y+h/2, w, txtColor);

      var btnY = y+h-4;
      var topY = y+4;
      if (hasUp[r.id] && upTarget[r.id]) {
        roomHTML += '<g class="ud-hover"><rect class="nav-btn-bg" x="'+(x+3)+'" y="'+(topY+2)+'" width="14" height="14" rx="3" fill="'+txtColor+'" opacity="0.12" pointer-events="none"/><text class="nav-btn" x="'+(x+10)+'" y="'+(topY+14)+'" text-anchor="middle" fill="'+txtColor+'" data-action="goto" data-dz="1" data-target="'+upTarget[r.id]+'" title="Go up to #'+upTarget[r.id]+'">\u2191</text></g>';
      }
      if (hasDown[r.id] && downTarget[r.id]) {
        roomHTML += '<g class="ud-hover"><rect class="nav-btn-bg" x="'+(x+w-17)+'" y="'+(topY+2)+'" width="14" height="14" rx="3" fill="'+txtColor+'" opacity="0.12" pointer-events="none"/><text class="nav-btn" x="'+(x+w-10)+'" y="'+(topY+14)+'" text-anchor="middle" fill="'+txtColor+'" data-action="goto" data-dz="-1" data-target="'+downTarget[r.id]+'" title="Go down to #'+downTarget[r.id]+'">\u2193</text></g>';
      }

      if (sel) {
        var btnX = x + 6, btnBW = 18;
        roomHTML += '<g class="ud-hover"><rect class="new-btn-bg" x="'+(btnX-2)+'" y="'+(btnY-12)+'" width="'+btnBW+'" height="14" rx="3" fill="'+txtColor+'" opacity="0.12" pointer-events="none"/><text class="ud-btn" x="'+(btnX+btnBW/2-2)+'" y="'+btnY+'" text-anchor="middle" font-size="10" fill="'+txtColor+'" data-dir="up" title="Create room up">+\u2191</text></g>';
        roomHTML += '<g class="ud-hover"><rect class="new-btn-bg" x="'+(x+w-20)+'" y="'+(btnY-12)+'" width="'+btnBW+'" height="14" rx="3" fill="'+txtColor+'" opacity="0.12" pointer-events="none"/><text class="ud-btn" x="'+(x+w-11)+'" y="'+btnY+'" text-anchor="middle" font-size="10" fill="'+txtColor+'" data-dir="down" title="Create room down">+\u2193</text></g>';
      }
    });
  }

  var ghostHTML = '';
  if (selectedRoom && roomMap[selectedRoom]) {
    var sr = roomMap[selectedRoom];
    gridDirs.forEach(function(d) {
      var nx = sr.x + d.dx, ny = sr.y + d.dy;
      var key = nx+','+ny;
      if (!occupied[key]) {
        ghostHTML += '<rect class="ghost ghost-hover" x="'+(nx*CELL+8)+'" y="'+(ny*CELL+8)+'" width="'+(CELL-16)+'" height="'+(CELL-16)+'" rx="5" fill="rgba(100,200,255,0.12)" stroke="rgba(100,200,255,0.25)" stroke-width="1.5" stroke-dasharray="4,4" data-dir="'+d.dir+'" data-gx="'+nx+'" data-gy="'+ny+'"/>';
        ghostHTML += '<text x="'+(nx*CELL+CELL/2)+'" y="'+(ny*CELL+CELL/2+4)+'" text-anchor="middle" font-size="11" fill="rgba(255,255,255,0.35)" pointer-events="none" font-family="monospace">+</text>';
      }
    });
  }

  var innerHTML = g + roomHTML + ghostHTML;
  var vb = [(-panX - W/2)/scale, (-panY - H/2)/scale, W/scale, H/scale];
  var svgHTML = '<svg width="'+W+'" height="'+H+'" viewBox="'+vb.join(' ')+'" xmlns="'+svgNS+'"><g>'+innerHTML+'</g></svg>';
  svg.innerHTML = svgHTML;

  svg.addEventListener('contextmenu', function(e) { e.preventDefault(); });

  svg.onmousedown = function(e) {
    var onRoom = e.target.classList.contains('rm');
    var onGhost = e.target.classList.contains('ghost');
    var onUdBtn = e.target.classList.contains('ud-btn');
    var onNavBtn = e.target.classList.contains('nav-btn');

    if (onNavBtn) {
      e.stopPropagation();
      var dz = parseInt(e.target.getAttribute('data-dz'));
      var tid = parseInt(e.target.getAttribute('data-target'));
      currentZ += dz;
      selectedRoom = tid;
      loadMap();
      selectRoom(tid);
      return;
    }

    if (e.button === 2 && onRoom) {
      delFromId = parseInt(e.target.getAttribute('data-id'));
      delDrag = false; delTargetId = null;
      dragging = true;
      startX = e.clientX; startY = e.clientY;
      prevX = e.clientX; prevY = e.clientY;
      dragRoom = true; linkFromId = null; linkDrag = false; linkTargetId = null; linkGhostDir = null;
      clearLinkHighlight();
      return;
    }

    if (e.button !== 0) return;

    if (onUdBtn) {
      e.stopPropagation();
      var dir = e.target.getAttribute('data-dir');
      createRoom(selectedRoom, dir);
      return;
    }

    dragRoom = onRoom || onGhost;
    dragging = true;
    startX = e.clientX; startY = e.clientY;
    prevX = e.clientX; prevY = e.clientY;
    linkFromId = onRoom ? parseInt(e.target.getAttribute('data-id')) : null;
    linkDrag = false;
    linkTargetId = null;
    linkGhostDir = null;
    delDrag = false; delFromId = null; delTargetId = null;
    clearLinkHighlight();
  };

  svg.onmousemove = function(e) {
    if (!dragging) return;
    var moved = Math.abs(e.clientX - startX) >= 4 || Math.abs(e.clientY - startY) >= 4;

    if (delFromId && moved && !delDrag) {
      delDrag = true;
    }
    if (delDrag && moved) {
      updateDelDragTarget(e);
      return;
    }

    if (!dragRoom && !delDrag && !delFromId) {
      panX += e.clientX - prevX;
      panY += e.clientY - prevY;
      prevX = e.clientX; prevY = e.clientY;
      updateView();
    }

    if (linkFromId && moved) {
      linkDrag = true;
      updateLinkDragTarget(e);
    }
  };

  svg.onmouseup = function(e) {
    if (!dragging) return;

    var moved = Math.abs(e.clientX - startX) >= 4 || Math.abs(e.clientY - startY) >= 4;

    if (delFromId && !delDrag && !moved) {
      showRoomContextMenu(startX, startY, delFromId);
      clearDelHighlight();
      dragging = false; dragRoom = false; delFromId = null; delTargetId = null; delDrag = false;
      return;
    }

    if (delDrag && delFromId && delTargetId) {
      deleteLink(delFromId, delTargetId);
      clearDelHighlight();
      dragging = false; dragRoom = false; delDrag = false; delFromId = null; delTargetId = null;
      return;
    }

    if (linkDrag && linkFromId) {
      if (linkTargetId) {
        createLink(linkFromId, linkTargetId);
      } else if (linkGhostDir) {
        createRoom(linkFromId, linkGhostDir);
      }
    } else if (!moved && !delDrag) {
      if (e.target.classList.contains('rm')) {
        selectRoom(parseInt(e.target.getAttribute('data-id')));
      } else if (e.target.classList.contains('ghost')) {
        var dir = e.target.getAttribute('data-dir');
        createRoom(selectedRoom, dir);
      }
    }

    clearLinkHighlight();
    clearDelHighlight();
    dragging = false; dragRoom = false;
    linkDrag = false; linkFromId = null; linkTargetId = null; linkGhostDir = null;
    delDrag = false; delFromId = null; delTargetId = null;
  };

  svg.onwheel = function(e) {
    e.preventDefault();
    var zf = e.deltaY < 0 ? 1.1 : 0.9;
    scale *= zf;
    if (scale < 0.1) scale = 0.1;
    if (scale > 5) scale = 5;
    updateView();
  };

  svg.querySelectorAll('rect.rm').forEach(function(r) {
    r.addEventListener('mousemove', function(ev) {
      var tip = $('#tooltip');
      tip.style.display = 'block';
      tip.style.left = (ev.clientX+12)+'px';
      tip.style.top = (ev.clientY+12)+'px';
      tip.textContent = '#'+r.getAttribute('data-id')+' '+r.getAttribute('data-name');
    });
    r.addEventListener('mouseleave', function() {
      $('#tooltip').style.display = 'none';
    });
  });
}

function wrapText(name, cx, cy, maxWidth, color) {
  if (!name) name = '';
  color = color || '#fff';
  var charW = 6;
  var maxLen = Math.max(4, Math.floor((maxWidth - 4) / charW));
  var lines = [];
  for (var i = 0; i < name.length; i += maxLen) {
    lines.push(name.substring(i, i + maxLen));
  }
  if (lines.length > 3) lines = lines.slice(0, 3);
  var dy = -(lines.length - 1) * 6;
  return lines.map(function(l, i) {
    return '<text x="'+cx+'" y="'+(cy+dy+i*12)+'" text-anchor="middle" font-size="10" fill="'+color+'" pointer-events="none" font-family="monospace">'+esc(l)+'</text>';
  }).join('');
}

function updateView() {
  var svg = document.querySelector('#mapSvg svg');
  if (!svg) return;
  var W = svg.parentElement.clientWidth;
  var H = svg.parentElement.clientHeight;
  var vb = [(-panX - W/2)/scale, (-panY - H/2)/scale, W/scale, H/scale];
  svg.setAttribute('viewBox', vb.join(' '));
}

function selectRoom(id) {
  selectedRoom = id;
  loadMap();
  API.get('/api/rooms/' + id).then(function(data) {
    renderSidePanel(data);
  }).catch(function(e) {
    notify('Failed to load room: '+e.message, 'error');
  });
}

function renderSidePanel(data) {
  var panel = $('#panelContent');
  if (!data || !data.room) {
    panel.innerHTML = '<p style="color:#888;text-align:center;margin-top:40px">Room not found</p>';
    return;
  }
  var r = data.room;
  var file = data.file || '';
  var html = '<div class="form-group"><label>File</label><span style="font-size:11px;color:#888">' + esc(file) + '</span></div>';

  html += '<div class="form-group"><label>ID</label><input id="roomID" type="number" value="' + r.id + '" onchange="autoSave()"></div>';
  html += '<div class="form-group"><label>Name</label><input id="roomName" value="' + escAttr(r.name || '') + '" oninput="autoSave()"></div>';
  html += '<div class="form-group color-field"><label>Color</label><span class="color-swatch" style="background:'+resolveColor(r.color)+'"></span><input id="roomColor" value="' + escAttr(r.color || '') + '" oninput="autoSave()"></div>';
  html += '<div class="form-group"><label>Directory</label><select id="roomDir" onchange="autoSave()"></select></div>';
  var descText = '';
  if (Array.isArray(r.description)) {
    descText = r.description.map(function(d) { return d.text || ''; }).join('\n\n');
  } else if (typeof r.description === 'string') {
    descText = r.description;
  }
  html += '<div class="form-group"><label>Description</label><textarea id="roomDesc" rows="4" oninput="autoSave()">' + esc(descText) + '</textarea></div>';
  html += '<div class="form-group"><label>Hazard</label><input id="roomHazard" value="' + escAttr(r.hazard || '') + '" oninput="autoSave()"></div>';
  html += '<div class="form-group"><label><input type="checkbox" id="roomBlockTransport" onchange="autoSave()"' + (r.block_transport ? ' checked' : '') + '> Block Transport</label></div>';

  panel.innerHTML = html;
  setTimeout(function() {
    var cf = document.querySelector('#panelContent .color-field');
    if (cf) {
      bindColorField(cf);
      var ci = cf.querySelector('input');
      if (ci) ci.addEventListener('input', function() { autoSave(); });
    }
    loadRoomDirs(function(dirs) {
      var sel = $('#roomDir');
      if (!sel) return;
      var current = (file || '').replace(/^data\/rooms\/?/, '').split('/')[0] || '';
      dirs.forEach(function(d) {
        var opt = document.createElement('option');
        opt.value = d;
        opt.textContent = d || '(root)';
        if (d === current) opt.selected = true;
        sel.appendChild(opt);
      });
    });
  }, 50);
}

function autoSave() {
  if (saveTimer) clearTimeout(saveTimer);
  saveTimer = setTimeout(function() { doSavePanel(); }, 600);
}

function doSavePanel() {
  var id = selectedRoom;
  if (!id) return;
  API.get('/api/rooms/' + id).then(function(data) {
    var r = data.room || {};
    r.id = id;
    var el = $('#roomName'); if (el) r.name = el.value;
    el = $('#roomColor'); if (el) r.color = el.value;
    el = $('#roomDesc'); if (el && el.value) r.description = [{text: el.value}];
    el = $('#roomHazard'); if (el) r.hazard = el.value;
    el = $('#roomBlockTransport'); if (el) r.block_transport = el.checked;

    var newID = parseInt($('#roomID').value) || id;
    var newDir = $('#roomDir').value;
    var currentDir = (data.file || '').replace(/^data\/rooms\/?/, '').split('/')[0] || '';

    var save = function() {
      API.put('/api/rooms/' + id, r).then(function() {
        updateUndoBar();
      }).catch(function(e) { notify('Save failed: '+e.message, 'error'); });
    };

    if (newDir !== currentDir && newDir !== undefined) {
      API.post('/api/rooms/move', {id: id, dir: newDir}).then(function() {
        if (newID !== id) {
          API.post('/api/rooms/rename', {id: id, new_id: newID}).then(function() {
            selectRoom(newID);
          }).catch(function(e) { notify('Rename failed: '+e.message, 'error'); save(); });
        } else { save(); }
      }).catch(function(e) { notify('Move failed: '+e.message, 'error'); save(); });
    } else if (newID !== id) {
      API.post('/api/rooms/rename', {id: id, new_id: newID}).then(function() {
        selectRoom(newID);
      }).catch(function(e) { notify('Rename failed: '+e.message, 'error'); save(); });
    } else { save(); }
  });
}

function deleteRoom(id) {
  if (!confirm('Delete room #' + id + '?')) return;
  if (mapData && mapData.rooms) {
    var neighbors = [];
    if (mapData.links) {
      mapData.links.forEach(function(l) {
        if (l.from === id && l.to !== id) neighbors.push(l.to);
        if (l.to === id && l.from !== id) neighbors.push(l.from);
      });
    }
    if (neighbors.length > 1) {
      var remaining = mapData.rooms.filter(function(r) { return r.id !== id; });
      var adj = {};
      remaining.forEach(function(r) { adj[r.id] = []; });
      if (mapData.links) {
        mapData.links.forEach(function(l) {
          if (l.from === id || l.to === id) return;
          if (adj[l.from]) adj[l.from].push(l.to);
          if (adj[l.to]) adj[l.to].push(l.from);
        });
      }
      if (remaining.length > 0) {
        var visited = {}, queue = [remaining[0].id];
        visited[remaining[0].id] = true;
        while (queue.length > 0) {
          var cur = queue.shift();
          (adj[cur] || []).forEach(function(n) { if (!visited[n]) { visited[n] = true; queue.push(n); } });
        }
        if (Object.keys(visited).length < remaining.length) {
          if (!confirm('Deleting room #'+id+' will split the map into disconnected areas. Continue?')) return;
        }
      }
    }
  }
  API.del('/api/rooms/' + id).then(function() {
    notify('Room #' + id + ' deleted', 'success');
    updateUndoBar();
    selectedRoom = null;
    $('#panelContent').innerHTML = '<p style="color:#888;text-align:center;margin-top:40px">Room deleted</p>';
    loadMap();
  }).catch(function(e) { notify('Delete failed: ' + e.message, 'error'); });
}

function createRoom(fromID, dir) {
  API.get('/api/next-room-id?from=' + fromID).then(function(r) {
    var newID = r.id;
    var name = 'Room #' + newID;
    var body = { name: name, link_from: fromID, link_dir: dir };
    var srcRoom = roomMap[fromID];
    if (srcRoom && srcRoom.color) body.color = srcRoom.color;
    API.post('/api/rooms', body).then(function(resp) {
      var createdId = (resp && resp.room && resp.room.id) || newID;
      notify('Room #' + createdId + ' created', 'success');
      updateUndoBar();
      selectRoom(createdId);
    }).catch(function(e) { notify('Create failed: ' + e.message, 'error'); });
  });
}

function showRoomContextMenu(x, y, id) {
  var overlay = document.createElement('div');
  overlay.className = 'cm-overlay';
  overlay.onclick = function() { overlay.remove(); menu.remove(); };

  var menu = document.createElement('div');
  menu.className = 'cm-menu';
  menu.style.left = x + 'px';
  menu.style.top = y + 'px';

  var delBtn = document.createElement('button');
  delBtn.textContent = 'Delete Room';
  delBtn.className = 'danger';
  delBtn.onclick = function() {
    overlay.remove(); menu.remove();
    deleteRoom(id);
  };
  menu.appendChild(delBtn);

  var selBtn = document.createElement('button');
  selBtn.textContent = 'Room Details';
  selBtn.onclick = function() {
    overlay.remove(); menu.remove();
    selectRoom(id);
  };
  menu.appendChild(selBtn);

  document.body.appendChild(overlay);
  document.body.appendChild(menu);
}

function mouseToGrid(e) {
  var svgEl = document.querySelector('#mapSvg svg');
  if (!svgEl) return null;
  var rect = svgEl.getBoundingClientRect();
  var mx = e.clientX - rect.left;
  var my = e.clientY - rect.top;
  if (mx < 0 || my < 0 || mx > rect.width || my > rect.height) return null;
  var vb = svgEl.getAttribute('viewBox');
  if (!vb) return null;
  var parts = vb.split(' ');
  var vbX = parseFloat(parts[0]), vbY = parseFloat(parts[1]);
  var vbW = parseFloat(parts[2]), vbH = parseFloat(parts[3]);
  var wx = vbX + mx * vbW / rect.width;
  var wy = vbY + my * vbH / rect.height;
  return {
    x: Math.floor(wx / CELL),
    y: Math.floor(wy / CELL)
  };
}

function gridDeltaToDir(dx, dy) {
  for (var i = 0; i < gridDirs.length; i++) {
    if (gridDirs[i].dx === dx && gridDirs[i].dy === dy) return gridDirs[i].dir;
  }
  return null;
}

function updateLinkDragTarget(e) {
  clearLinkHighlight();
  linkTargetId = null;
  linkGhostDir = null;

  var fromRoom = mapData.rooms ? mapData.rooms.find(function(r){return r.id === linkFromId;}) : null;
  if (!fromRoom) return;

  var gp = mouseToGrid(e);
  if (!gp) return;

  var neighbor = occupied[gp.x+','+gp.y];
  var gdx = gp.x - fromRoom.x;
  var gdy = gp.y - fromRoom.y;
  if (Math.abs(gdx) > 1 || Math.abs(gdy) > 1) return;
  if (gdx === 0 && gdy === 0) return;
  var dir = gridDeltaToDir(gdx, gdy);
  if (!dir) return;

  if (neighbor && neighbor !== linkFromId) {
    linkTargetId = neighbor;
    linkGhostDir = null;
    applyLinkHighlight(linkFromId, linkTargetId);
  } else if (!neighbor) {
    linkGhostDir = dir;
    linkTargetId = null;
    applyGhostLinkHighlight(fromRoom, gp.x, gp.y);
  } else {
    linkGhostDir = null;
  }
}

function applyGhostLinkHighlight(fromRoom, gx, gy) {
  clearLinkHighlight();
  linkTargetId = null;

  var fromEl = document.querySelector('.rm[data-id="'+linkFromId+'"]');
  if (!fromEl) return;
  fromEl.setAttribute('stroke', '#0ff');
  fromEl.setAttribute('stroke-width', '3');

  var g = document.querySelector('#mapSvg svg g');
  if (!g) return;
  var svgNS = 'http://www.w3.org/2000/svg';
  var line = document.createElementNS(svgNS, 'line');
  line.id = '__hl_line';
  line.setAttribute('x1', fromRoom.x * CELL + CELL/2);
  line.setAttribute('y1', fromRoom.y * CELL + CELL/2);
  line.setAttribute('x2', gx * CELL + CELL/2);
  line.setAttribute('y2', gy * CELL + CELL/2);
  line.setAttribute('stroke', '#0ff');
  line.setAttribute('stroke-width', '3');
  line.setAttribute('stroke-dasharray', '6,3');
  line.setAttribute('pointer-events', 'none');
  g.appendChild(line);
}

function applyLinkHighlight(fromId, toId) {
  clearLinkHighlight();

  var fromEl = document.querySelector('.rm[data-id="'+fromId+'"]');
  var toEl = document.querySelector('.rm[data-id="'+toId+'"]');
  var fromRoom = roomMap[fromId];
  var toRoom = roomMap[toId];
  if (!fromEl || !toEl || !fromRoom || !toRoom) return;

  fromEl.setAttribute('stroke', '#0ff');
  fromEl.setAttribute('stroke-width', '3');
  toEl.setAttribute('stroke', '#f0f');
  toEl.setAttribute('stroke-width', '3');

  var g = document.querySelector('#mapSvg svg g');
  if (!g) return;
  var svgNS = 'http://www.w3.org/2000/svg';
  var line = document.createElementNS(svgNS, 'line');
  line.id = '__hl_line';
  line.setAttribute('x1', fromRoom.x * CELL + CELL/2);
  line.setAttribute('y1', fromRoom.y * CELL + CELL/2);
  line.setAttribute('x2', toRoom.x * CELL + CELL/2);
  line.setAttribute('y2', toRoom.y * CELL + CELL/2);
  line.setAttribute('stroke', '#f0f');
  line.setAttribute('stroke-width', '3');
  line.setAttribute('stroke-dasharray', '6,3');
  line.setAttribute('pointer-events', 'none');
  g.appendChild(line);
}

function clearLinkHighlight() {
  var line = document.getElementById('__hl_line');
  if (line) line.remove();

  if (linkFromId) {
    var el = document.querySelector('.rm[data-id="'+linkFromId+'"]');
    if (el) {
      el.setAttribute('stroke', selectedRoom === linkFromId ? '#fff' : (el.getAttribute('fill') || '#3a3a6a'));
      el.setAttribute('stroke-width', selectedRoom === linkFromId ? '3' : '1.5');
    }
  }
  if (linkTargetId) {
    var el = document.querySelector('.rm[data-id="'+linkTargetId+'"]');
    if (el) {
      el.setAttribute('stroke', selectedRoom === linkTargetId ? '#fff' : (el.getAttribute('fill') || '#3a3a6a'));
      el.setAttribute('stroke-width', selectedRoom === linkTargetId ? '3' : '1.5');
    }
  }
}

function createLink(fromId, toId) {
  API.post('/api/rooms/link', {from: fromId, to: toId}).then(function() {
    notify('Linked rooms #'+fromId+' '+toId, 'success');
    updateUndoBar();
    loadMap();
    if (selectedRoom) {
      API.get('/api/rooms/' + selectedRoom).then(function(data) {
        renderSidePanel(data);
      });
    }
  }).catch(function(e) {
    notify('Link failed: ' + e.message, 'error');
  });
}

function updateDelDragTarget(e) {
  clearDelHighlight();
  delTargetId = null;

  var fromRoom = mapData.rooms ? mapData.rooms.find(function(r){return r.id === delFromId;}) : null;
  if (!fromRoom) return;

  var gp = mouseToGrid(e);
  if (!gp) return;

  var neighbor = occupied[gp.x+','+gp.y];
  if (!neighbor || neighbor === delFromId) return;

  var gdx = gp.x - fromRoom.x;
  var gdy = gp.y - fromRoom.y;
  if (Math.abs(gdx) > 1 || Math.abs(gdy) > 1) return;
  if (gdx === 0 && gdy === 0) return;
  if (!gridDeltaToDir(gdx, gdy)) return;

  delTargetId = neighbor;
  applyDelHighlight(delFromId, delTargetId);
}

function applyDelHighlight(fromId, toId) {
  clearDelHighlight();

  var fromEl = document.querySelector('.rm[data-id="'+fromId+'"]');
  var toEl = document.querySelector('.rm[data-id="'+toId+'"]');
  var fromRoom = roomMap[fromId];
  var toRoom = roomMap[toId];
  if (!fromEl || !toEl || !fromRoom || !toRoom) return;

  fromEl.setAttribute('stroke', '#f55');
  fromEl.setAttribute('stroke-width', '3');
  toEl.setAttribute('stroke', '#f55');
  toEl.setAttribute('stroke-width', '3');

  var g = document.querySelector('#mapSvg svg g');
  if (!g) return;
  var svgNS = 'http://www.w3.org/2000/svg';
  var line = document.createElementNS(svgNS, 'line');
  line.id = '__dl_line';
  line.setAttribute('x1', fromRoom.x * CELL + CELL/2);
  line.setAttribute('y1', fromRoom.y * CELL + CELL/2);
  line.setAttribute('x2', toRoom.x * CELL + CELL/2);
  line.setAttribute('y2', toRoom.y * CELL + CELL/2);
  line.setAttribute('stroke', '#f55');
  line.setAttribute('stroke-width', '3');
  line.setAttribute('stroke-dasharray', '6,3');
  line.setAttribute('pointer-events', 'none');
  g.appendChild(line);
}

function clearDelHighlight() {
  var line = document.getElementById('__dl_line');
  if (line) line.remove();

  if (delFromId) {
    var el = document.querySelector('.rm[data-id="'+delFromId+'"]');
    if (el) {
      el.setAttribute('stroke', selectedRoom === delFromId ? '#fff' : (el.getAttribute('fill') || '#3a3a6a'));
      el.setAttribute('stroke-width', selectedRoom === delFromId ? '3' : '1.5');
    }
  }
  if (delTargetId) {
    var el = document.querySelector('.rm[data-id="'+delTargetId+'"]');
    if (el) {
      el.setAttribute('stroke', selectedRoom === delTargetId ? '#fff' : (el.getAttribute('fill') || '#3a3a6a'));
      el.setAttribute('stroke-width', selectedRoom === delTargetId ? '3' : '1.5');
    }
  }
}

function deleteLink(fromId, toId) {
  if (mapData && mapData.links) {
    var checkOrphan = function(roomId, otherId) {
      var room = roomMap[roomId];
      if (!room) return false;
      var otherLinks = mapData.links.filter(function(l) {
        return (l.from === roomId || l.to === roomId) && !((l.from === roomId && l.to === otherId) || (l.from === otherId && l.to === roomId));
      });
      if (otherLinks.length === 0) {
        if (!confirm('Removing this link will orphan room #'+roomId+' and it will disappear from the map. Continue?')) return false;
      }
      return true;
    };
    if (!checkOrphan(toId, fromId)) return;
    if (!checkOrphan(fromId, toId)) return;
  }

  fetch('/api/rooms/link', {
    method: 'DELETE',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({from: fromId, to: toId}),
    credentials: 'same-origin'
  }).then(function(r) {
    if (!r.ok) throw new Error('unlink failed');
    return r.json();
  }).then(function() {
    notify('Removed link #'+fromId+' '+toId, 'success');
    updateUndoBar();
    loadMap();
    if (selectedRoom) {
      API.get('/api/rooms/' + selectedRoom).then(function(data) {
        renderSidePanel(data);
      });
    }
  }).catch(function(e) {
    notify('Delete link failed: ' + e.message, 'error');
  });
}

function esc(s) {
  if (!s) return '';
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function escAttr(s) {
  if (!s) return '';
  return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;');
}

window.refreshPage = function() { loadMap(); if (selectedRoom) selectRoom(selectedRoom); };

function loadRoomDirs(cb) {
  API.get('/api/room-dirs').then(function(dirs) {
    var sel = $('#dirSelect');
    if (sel && sel.options.length === 0) {
      dirs.forEach(function(d) {
        var opt = document.createElement('option');
        opt.value = d;
        opt.textContent = d || '(root)';
        sel.appendChild(opt);
      });
    }
    updateDirSelect();
    if (cb) cb(dirs);
  });
}

function updateDirSelect() {
  var sel = $('#dirSelect');
  if (sel && currentDir !== undefined) {
    sel.value = currentDir;
  }
}

document.addEventListener('DOMContentLoaded', function() { loadRoomDirs(function() { loadMap(); }); });