import { RackManager } from './managers/rack-manager.js';
import { DeviceManager } from './managers/device-manager.js';
import { ConnectionManager } from './managers/connection-manager.js';
import { TableManager } from './managers/table-manager.js';

class API {
  constructor() {
    this.currentProjectId = 1; // Default project
  }

  setProjectId(projectId) {
    this.currentProjectId = projectId;
  }

  async request(url, options = {}) {
    const response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        ...options.headers
      },
      ...options
    });

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.error || 'Request failed');
    }

    return response.json();
  }

  // Projects
  getProjects() {
    return this.request('/api/projects');
  }

  getProject(id) {
    return this.request(`/api/projects/${id}`);
  }

  createProject(name, description) {
    return this.request('/api/projects', {
      method: 'POST',
      body: JSON.stringify({ name, description })
    });
  }

  deleteProject(id) {
    return this.request(`/api/projects/${id}`, { method: 'DELETE' });
  }

  // Racks
  getRacks() {
    return this.request(`/api/racks?projectId=${this.currentProjectId}`);
  }

  getNextRackName(prefix) {
    return this.request(`/api/racks/next-name?projectId=${this.currentProjectId}&prefix=${prefix}`).then(r => r.name);
  }

  createRack(name, x, y) {
    return this.request('/api/racks', {
      method: 'POST',
      body: JSON.stringify({ projectId: this.currentProjectId, name, x, y })
    });
  }

  updateRackPosition(id, x, y) {
    return this.request(`/api/racks/${id}/position`, {
      method: 'PUT',
      body: JSON.stringify({ x, y })
    });
  }

  updateRackName(id, name) {
    return this.request(`/api/racks/${id}/name`, {
      method: 'PUT',
      body: JSON.stringify({ name })
    });
  }

  deleteRack(id) {
    return this.request(`/api/racks/${id}`, { method: 'DELETE' });
  }

  // Device Types
  getDeviceTypes() {
    return this.request('/api/devices/types');
  }

  // Devices
  getDevices() {
    return this.request(`/api/devices?projectId=${this.currentProjectId}`);
  }

  createDevice(deviceTypeId, rackId, position, name) {
    return this.request('/api/devices', {
      method: 'POST',
      body: JSON.stringify({ deviceTypeId, rackId, position, name })
    });
  }

  deleteDevice(id) {
    return this.request(`/api/devices/${id}`, { method: 'DELETE' });
  }

  updateDeviceName(id, name) {
    return this.request(`/api/devices/${id}/name`, {
      method: 'PUT',
      body: JSON.stringify({ name })
    });
  }

  getUsedPorts(deviceId) {
    return this.request(`/api/devices/${deviceId}/used-ports`);
  }

  // Connections
  getConnections() {
    return this.request(`/api/connections?projectId=${this.currentProjectId}`);
  }

  createConnection(sourceDeviceId, sourcePort, targetDeviceId, targetPort) {
    return this.request('/api/connections', {
      method: 'POST',
      body: JSON.stringify({ sourceDeviceId, sourcePort, targetDeviceId, targetPort })
    });
  }

  updateConnectionWaypoints(id, waypoints, view = null) {
    return this.request(`/api/connections/${id}/waypoints`, {
      method: 'PUT',
      body: JSON.stringify({ waypoints, view })
    });
  }

  deleteConnection(id) {
    return this.request(`/api/connections/${id}`, { method: 'DELETE' });
  }
}

class DatacenterDesigner {
  constructor() {
    this.api = new API();
    this.stage = null;
    this.layer = null;
    this.rackManager = null;
    this.deviceManager = null;
    this.connectionManager = null;
    this.tableManager = null;
    this.currentScale = 1;
    this.minScale = 0.1;
    this.maxScale = 3;
    this.currentCanvasView = 'physical'; // 'physical' or 'logical'
    this.currentTableView = null; // null, 'racks', 'devices', or 'connections'

    // Separate view states for physical and logical views
    this.viewStates = {
      physical: { x: 50, y: 50, scale: 1 },
      logical: { x: 50, y: 50, scale: 1 }
    };
  }

  async init() {
    this.setupCanvas();
    this.setupManagers();
    await this.loadProjects();
    // Load spacing after project ID is set
    this.rackManager.loadSpacing();
    await this.loadData();
    this.loadViewStates(); // Load saved view states
    this.setupEventListeners();
    this.setupContextMenu();
    this.setupZoomAndPan();
    this.setupResizeHandle();
  }

  async loadProjects() {
    try {
      const projects = await this.api.getProjects();
      const projectSelect = document.getElementById('projectSelect');

      projectSelect.innerHTML = '';

      // Add existing projects
      projects.forEach(project => {
        const option = document.createElement('option');
        option.value = project.id;
        option.textContent = project.name;
        projectSelect.appendChild(option);
      });

      // Add separator
      const separator = document.createElement('option');
      separator.disabled = true;
      separator.textContent = '─────────────────────';
      projectSelect.appendChild(separator);

      // Add "Create New Project" option
      const createOption = document.createElement('option');
      createOption.value = '__create__';
      createOption.textContent = 'Create New Project';
      projectSelect.appendChild(createOption);

      // Add "Manage Projects" option
      const manageOption = document.createElement('option');
      manageOption.value = '__manage__';
      manageOption.textContent = 'Manage Projects';
      projectSelect.appendChild(manageOption);

      // Set current project
      const currentProjectId = parseInt(localStorage.getItem('currentProjectId') || '1');
      projectSelect.value = currentProjectId;
      this.api.setProjectId(currentProjectId);
    } catch (err) {
      console.error('Failed to load projects:', err);
    }
  }

  async switchProject(projectId) {
    this.api.setProjectId(projectId);
    localStorage.setItem('currentProjectId', projectId);

    // Clear canvas
    this.rackManager.racks.clear();
    this.deviceManager.devices.clear();
    this.connectionManager.connections.clear();
    this.layer.destroyChildren();
    this.connectionManager.getConnectionLayer().destroyChildren();

    // Reload spacing for this project
    this.rackManager.loadSpacing();

    // Reset both view states
    this.viewStates.physical = { x: 50, y: 50, scale: 1 };
    this.viewStates.logical = { x: 50, y: 50, scale: 1 };
    this.saveViewStates();

    // Reset view (pan and zoom)
    this.resetView();

    // Reload data for new project
    await this.loadData();
    this.layer.batchDraw();
    this.connectionManager.getConnectionLayer().batchDraw();
  }

  loadViewStates() {
    try {
      const saved = localStorage.getItem(`viewStates_${this.api.currentProjectId}`);
      if (saved) {
        this.viewStates = JSON.parse(saved);
      }
    } catch (err) {
      console.error('Failed to load view states:', err);
    }
  }

  saveViewStates() {
    try {
      localStorage.setItem(`viewStates_${this.api.currentProjectId}`, JSON.stringify(this.viewStates));
    } catch (err) {
      console.error('Failed to save view states:', err);
    }
  }

  saveCurrentViewState() {
    this.viewStates[this.currentCanvasView] = {
      x: this.stage.x(),
      y: this.stage.y(),
      scale: this.stage.scaleX()
    };
    this.saveViewStates();
  }

  restoreViewState(viewType) {
    const state = this.viewStates[viewType];
    this.stage.position({ x: state.x, y: state.y });
    this.stage.scale({ x: state.scale, y: state.scale });
    this.currentScale = state.scale;
    this.updateZoomDisplay(state.scale);
    this.stage.batchDraw();
  }

  setupCanvas() {
    const container = document.getElementById('canvasWrapper');
    const width = container.offsetWidth;
    const height = container.offsetHeight;

    this.stage = new Konva.Stage({
      container: 'canvasWrapper',
      width: width,
      height: height
    });

    this.layer = new Konva.Layer();
    this.stage.add(this.layer);

    // Add initial offset for visual margins (without changing grid coordinates)
    this.stage.position({ x: 50, y: 50 });
  }

  setupManagers() {
    // Create device manager first (needed by rack manager)
    this.deviceManager = new DeviceManager(this.layer, this.api, null);

    // Create rack manager with device manager reference
    this.rackManager = new RackManager(this.layer, this.api, this.deviceManager);

    // Set rack manager reference in device manager
    this.deviceManager.rackManager = this.rackManager;

    this.connectionManager = new ConnectionManager(
      this.layer,
      this.api,
      this.deviceManager,
      this.rackManager
    );

    // Set connection manager reference in device manager
    this.deviceManager.connectionManager = this.connectionManager;

    // Add connection layer on top of main layer so connections are visible
    this.stage.add(this.connectionManager.getConnectionLayer());
    this.connectionManager.getConnectionLayer().moveToTop();

    // Create table manager
    this.tableManager = new TableManager(
      this.api,
      this.rackManager,
      this.deviceManager,
      this.connectionManager
    );
  }

  async loadData() {

    await this.deviceManager.loadDeviceTypes();
    await this.rackManager.loadRacks();
    await this.deviceManager.loadDevices();
    await this.connectionManager.loadConnections();

  }

  setupZoomAndPan() {
    const container = this.stage.container();

    // Zoom with Ctrl + Wheel
    container.addEventListener('wheel', (e) => {
      if (!e.ctrlKey) return;

      e.preventDefault();

      const oldScale = this.stage.scaleX();
      const pointer = this.stage.getPointerPosition();

      const mousePointTo = {
        x: (pointer.x - this.stage.x()) / oldScale,
        y: (pointer.y - this.stage.y()) / oldScale
      };

      const delta = e.deltaY > 0 ? 0.9 : 1.1;
      let newScale = oldScale * delta;

      // Clamp scale
      newScale = Math.max(this.minScale, Math.min(this.maxScale, newScale));

      this.stage.scale({ x: newScale, y: newScale });

      const newPos = {
        x: pointer.x - mousePointTo.x * newScale,
        y: pointer.y - mousePointTo.y * newScale
      };

      this.stage.position(newPos);
      this.stage.batchDraw();

      this.currentScale = newScale;
      this.updateZoomDisplay(newScale);
      this.saveCurrentViewState(); // Save zoom state
    });

    // Pan with Ctrl + drag
    let isPanning = false;
    let startPos = null;

    // Listen to mousedown on container level instead of stage
    // This way we can control panning without interfering with Konva's drag system
    container.addEventListener('mousedown', (evt) => {
      // Ignore right-clicks for panning
      if (evt.button === 2) {
        return;
      }

      // Hide context menu on left click
      this.hideContextMenu();

      // Only pan when Ctrl is held down
      if (evt.ctrlKey) {
        // Check if we're clicking on a Konva element
        const stage = this.stage;
        const pos = stage.getPointerPosition();

        if (!pos) return;

        // Get what's under the cursor
        const shape = stage.getIntersection(pos);

        // Don't pan if clicking on a draggable element
        if (shape && shape.draggable && shape.draggable()) {
          console.log('Clicked on draggable element, not panning');
          return;
        }

        isPanning = true;
        startPos = pos;
        container.style.cursor = 'grabbing';
      }
    });

    container.addEventListener('mousemove', (evt) => {
      if (!isPanning) return;

      const pos = this.stage.getPointerPosition();
      if (!pos) return;

      const dx = pos.x - startPos.x;
      const dy = pos.y - startPos.y;

      this.stage.position({
        x: this.stage.x() + dx,
        y: this.stage.y() + dy
      });

      startPos = pos;
      this.stage.batchDraw();
    });

    container.addEventListener('mouseup', () => {
      if (isPanning) {
        this.saveCurrentViewState(); // Save pan state
      }
      isPanning = false;
      container.style.cursor = 'default';
    });

    container.addEventListener('mouseleave', () => {
      isPanning = false;
      container.style.cursor = 'default';
    });
  }

  setupEventListeners() {
    // Canvas view switcher (Physical / Logical)
    document.getElementById('physicalViewBtn').addEventListener('click', () => {
      this.switchCanvasView('physical');
    });

    document.getElementById('logicalViewBtn').addEventListener('click', () => {
      this.switchCanvasView('logical');
    });

    // Table view switcher (Racks / Devices / Connections) - Toggle behavior
    document.getElementById('racksTableBtn').addEventListener('click', () => {
      this.toggleTableView('racks');
    });

    document.getElementById('devicesTableBtn').addEventListener('click', () => {
      this.toggleTableView('devices');
    });

    document.getElementById('connectionsTableBtn').addEventListener('click', () => {
      this.toggleTableView('connections');
    });

    // Table toolbar buttons
    document.getElementById('addTableRowBtn').addEventListener('click', () => {
      this.tableManager.addRow();
    });

    document.getElementById('deleteTableRowBtn').addEventListener('click', () => {
      this.tableManager.deleteSelectedRows();
    });

    // Load saved view preferences
    const savedCanvasView = localStorage.getItem('currentCanvasView') || 'physical';
    this.switchCanvasView(savedCanvasView);

    // Project selector
    document.getElementById('projectSelect').addEventListener('change', async (e) => {
      const value = e.target.value;

      // Handle special options
      if (value === '__create__') {
        // Reset dropdown to current project
        e.target.value = this.api.currentProjectId;
        // Show create modal
        this.showProjectFormModal();
        return;
      }

      if (value === '__manage__') {
        // Reset dropdown to current project
        e.target.value = this.api.currentProjectId;
        // Show manage modal
        this.showManageProjectsModal();
        return;
      }

      // Normal project switch
      const projectId = parseInt(value);
      await this.switchProject(projectId);
    });

    // Right-click context menu handler
    this.stage.on('contextmenu', (e) => {
      e.evt.preventDefault();

      // Right-click on empty canvas
      if (e.target === this.stage) {
        this.showCanvasContextMenu(e);
        return;
      }

      // Rack right-clicks are handled by RackManager's own context menu
    });

    // ESC key to cancel connection
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && this.connectionManager.isConnectionMode()) {
        this.connectionManager.cancelConnection();
      }
    });

    // Device click handler for connections (when racks are locked)
    this.layer.on('click', (e) => {
      const target = e.target;

      // Check if clicked on a device (find parent group)
      let deviceGroup = target;
      while (deviceGroup && !(deviceGroup.id() && deviceGroup.id().startsWith('device-'))) {
        deviceGroup = deviceGroup.getParent();
        if (!deviceGroup || deviceGroup === this.layer) {
          deviceGroup = null;
          break;
        }
      }

      if (deviceGroup) {
        const deviceId = parseInt(deviceGroup.id().replace('device-', ''));

        // Only handle clicks when racks are locked
        if (this.rackManager.racksLocked) {
          if (this.connectionManager.isConnectionMode()) {
            // Complete connection
            this.connectionManager.completeConnection(deviceId, deviceGroup);
          } else {
            // Start connection
            this.connectionManager.startConnection(deviceId, deviceGroup);
          }
        }
      } else {
        // Clicked on empty space - deselect any selected connection
        this.connectionManager.deselectConnection();
      }
    });


    // Rename rack event
    window.addEventListener('rename-rack', async (e) => {
      const { rackId, rackData, rackShape } = e.detail;
      await this.renameRack(rackId, rackData, rackShape);
    });

    // Rename device event
    window.addEventListener('rename-device', async (e) => {
      const { deviceId, deviceData, deviceShape } = e.detail;
      await this.renameDevice(deviceId, deviceData, deviceShape);
    });

    // Canvas data changed - sync to table
    window.addEventListener('canvas-data-changed', async () => {
      if (this.currentTableView) {
        await this.tableManager.syncFromCanvas();
      }
    });

    // Window resize
    window.addEventListener('resize', () => {
      const container = document.getElementById('canvasWrapper');
      this.stage.width(container.offsetWidth);
      this.stage.height(container.offsetHeight);
    });

    // Zoom input field
    const zoomInput = document.getElementById('zoomInput');
    zoomInput.addEventListener('change', (e) => {
      const percentage = parseInt(e.target.value);
      if (!isNaN(percentage) && percentage >= 10 && percentage <= 300) {
        this.setZoom(percentage / 100);
      }
    });

    // Also handle Enter key
    zoomInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        const percentage = parseInt(e.target.value);
        if (!isNaN(percentage) && percentage >= 10 && percentage <= 300) {
          this.setZoom(percentage / 100);
        }
      }
    });

    // Fit view button
    document.getElementById('fitViewBtn').addEventListener('click', () => {
      this.fitView();
    });

    // Export/Import project buttons
    document.getElementById('exportProjectBtn').addEventListener('click', () => {
      this.exportProject();
    });

    document.getElementById('importProjectBtn').addEventListener('click', () => {
      document.getElementById('importProjectInput').click();
    });

    document.getElementById('importProjectInput').addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        this.importProject(file);
        // Reset input so same file can be selected again
        e.target.value = '';
      }
    });

    // Export to Excel button
    document.getElementById('exportExcelBtn').addEventListener('click', () => {
      this.exportToExcel();
    });
  }

  async showManageProjectsModal() {
    const modal = document.getElementById('manageProjectsModal');
    const closeBtn = document.getElementById('manageProjectsModalClose');
    const newProjectBtn = document.getElementById('newProjectBtnFromManage');
    const projectsList = document.getElementById('projectsList');

    modal.classList.remove('hidden');

    // Load and display projects
    await this.renderProjectsList();

    const handleClose = () => {
      modal.classList.add('hidden');
      closeBtn.removeEventListener('click', handleClose);
      newProjectBtn.removeEventListener('click', handleNewProject);
    };

    const handleNewProject = () => {
      this.showProjectFormModal();
    };

    closeBtn.addEventListener('click', handleClose);
    newProjectBtn.addEventListener('click', handleNewProject);
  }

  async renderProjectsList() {
    const projectsList = document.getElementById('projectsList');
    const projects = await this.api.getProjects();
    const currentProjectId = this.api.currentProjectId;

    projectsList.innerHTML = '';

    projects.forEach(project => {
      const card = document.createElement('div');
      card.className = 'project-card';
      if (project.id === currentProjectId) {
        card.classList.add('active');
      }

      const date = new Date(project.updated_at).toLocaleDateString();

      card.innerHTML = `
        <div class="project-info">
          <div class="project-name">${project.name}</div>
          <div class="project-description">${project.description || 'No description'}</div>
          <div class="project-meta">Last updated: ${date}</div>
        </div>
        <div class="project-actions">
          ${project.id !== currentProjectId ? `<button class="btn-icon btn-success" data-action="switch" data-id="${project.id}">Open</button>` : '<button class="btn-icon" disabled>Current</button>'}
          <button class="btn-icon" data-action="edit" data-id="${project.id}">Edit</button>
          <button class="btn-icon btn-danger" data-action="delete" data-id="${project.id}">Delete</button>
        </div>
      `;

      // Add event listeners to action buttons
      card.querySelectorAll('[data-action]').forEach(btn => {
        btn.addEventListener('click', async (e) => {
          const action = e.target.dataset.action;
          const id = parseInt(e.target.dataset.id);

          if (action === 'switch') {
            document.getElementById('projectSelect').value = id;
            await this.switchProject(id);
            await this.renderProjectsList();
          } else if (action === 'edit') {
            this.showProjectFormModal(project);
          } else if (action === 'delete') {
            await this.deleteProject(project);
          }
        });
      });

      projectsList.appendChild(card);
    });
  }

  showProjectFormModal(project = null) {
    const modal = document.getElementById('projectFormModal');
    const title = document.getElementById('projectFormTitle');
    const saveBtn = document.getElementById('saveProjectBtn');
    const cancelBtn = document.getElementById('cancelProjectBtn');
    const closeBtn = document.getElementById('projectFormModalClose');
    const nameInput = document.getElementById('projectName');
    const descInput = document.getElementById('projectDescription');

    // Set form mode
    const isEdit = !!project;
    title.textContent = isEdit ? 'Edit Project' : 'New Project';
    nameInput.value = isEdit ? project.name : '';
    descInput.value = isEdit ? (project.description || '') : '';

    modal.classList.remove('hidden');
    nameInput.focus();

    const handleSave = async () => {
      const name = nameInput.value.trim();
      const description = descInput.value.trim();

      if (!name) {
        alert('Please enter a project name');
        return;
      }

      try {
        if (isEdit) {
          await this.api.request(`/api/projects/${project.id}`, {
            method: 'PUT',
            body: JSON.stringify({ name, description })
          });
        } else {
          const newProject = await this.api.createProject(name, description);

          // Switch to new project
          await this.loadProjects();
          document.getElementById('projectSelect').value = newProject.id;
          await this.switchProject(newProject.id);
        }

        modal.classList.add('hidden');

        // Reload projects and refresh manage modal if open
        await this.loadProjects();
        const manageModal = document.getElementById('manageProjectsModal');
        if (!manageModal.classList.contains('hidden')) {
          await this.renderProjectsList();
        }
      } catch (err) {
        alert('Failed to save project: ' + err.message);
      }

      cleanup();
    };

    const handleCancel = () => {
      modal.classList.add('hidden');
      cleanup();
    };

    const cleanup = () => {
      saveBtn.removeEventListener('click', handleSave);
      cancelBtn.removeEventListener('click', handleCancel);
      closeBtn.removeEventListener('click', handleCancel);
    };

    saveBtn.addEventListener('click', handleSave);
    cancelBtn.addEventListener('click', handleCancel);
    closeBtn.addEventListener('click', handleCancel);
  }

  async deleteProject(project) {
    const confirmMsg = `Are you sure you want to delete "${project.name}"?\n\nThis will permanently delete:\n- All racks in this project\n- All devices\n- All connections\n\nThis action cannot be undone.`;

    if (!confirm(confirmMsg)) {
      return;
    }

    try {
      await this.api.deleteProject(project.id);

      // Reload projects
      await this.loadProjects();

      // If we deleted the current project, switch to the first available
      if (project.id === this.api.currentProjectId) {
        const projects = await this.api.getProjects();
        if (projects.length > 0) {
          document.getElementById('projectSelect').value = projects[0].id;
          await this.switchProject(projects[0].id);
        }
      }

      // Refresh the project list
      await this.renderProjectsList();
    } catch (err) {
      alert('Failed to delete project: ' + err.message);
    }
  }

  showCanvasContextMenu(e) {
    // Don't show context menu in logical view
    if (this.currentView === 'logical') {
      return;
    }

    const contextMenu = document.getElementById('contextMenu');
    const contextMenuList = document.getElementById('contextMenuList');

    contextMenuList.innerHTML = `
      <li data-action="add-racks">Add Rack(s)</li>
    `;

    contextMenu.style.left = `${e.evt.pageX}px`;
    contextMenu.style.top = `${e.evt.pageY}px`;
    contextMenu.classList.remove('hidden');

    // Mark that menu was just shown (prevents immediate hiding)
    this.contextMenuJustShown = true;
    setTimeout(() => {
      this.contextMenuJustShown = false;
    }, 100);

    // Remove any existing listeners
    const oldHandler = this.contextMenuHandler;
    if (oldHandler) {
      contextMenuList.removeEventListener('click', oldHandler);
    }

    // Create new handler
    this.contextMenuHandler = (evt) => {
      const action = evt.target.dataset.action;
      if (action === 'add-racks') {
        this.showAddRackModal();
      }
      this.hideContextMenu();
    };

    contextMenuList.addEventListener('click', this.contextMenuHandler);
  }

  hideContextMenu() {
    // Don't hide if menu was just shown
    if (this.contextMenuJustShown) {
      return;
    }

    const contextMenu = document.getElementById('contextMenu');
    if (contextMenu) {
      contextMenu.classList.add('hidden');
    }
  }

  async getNextRackNumber(prefix) {
    const racks = await this.api.getRacks();
    const existingRacks = racks.filter(r => r.name.startsWith(prefix));

    if (existingRacks.length === 0) {
      return 1;
    }

    // Find the highest number
    let maxNum = 0;
    existingRacks.forEach(rack => {
      const match = rack.name.match(/\d+$/);
      if (match) {
        const num = parseInt(match[0]);
        if (num > maxNum) maxNum = num;
      }
    });

    return maxNum + 1;
  }

  async updateRackNamesPreview() {
    const count = parseInt(document.getElementById('rackCount').value) || 1;
    const prefix = document.getElementById('rackPrefix').value.trim() || 'RACK';

    const startNum = await this.getNextRackNumber(prefix);
    const previews = [];

    for (let i = 0; i < Math.min(count, 5); i++) {
      const num = String(startNum + i).padStart(2, '0');
      previews.push(`${prefix}${num}`);
    }

    if (count > 5) {
      previews.push('...');
    }

    document.getElementById('rackNamePreview').textContent = previews.join(', ');
  }

  async populateRowDropdown() {
    const existingRacks = await this.api.getRacks();
    const rowSelect = document.getElementById('continueRowSelect');

    if (existingRacks.length === 0) {
      // No racks, just show row 1
      rowSelect.innerHTML = '<option value="0">1</option>';
      return;
    }

    // Get unique Y coordinates (rows) and sort them
    const uniqueRows = [...new Set(existingRacks.map(r => r.y))].sort((a, b) => a - b);

    // Build dropdown options
    rowSelect.innerHTML = '';
    uniqueRows.forEach((yCoord, index) => {
      const option = document.createElement('option');
      option.value = yCoord;
      option.textContent = index + 1; // Display as 1-based row numbers
      rowSelect.appendChild(option);
    });

    // Select the last row by default
    rowSelect.value = uniqueRows[uniqueRows.length - 1];
  }

  async showAddRackModal() {
    const modal = document.getElementById('addRackModal');
    const createBtn = document.getElementById('createRacksBtn');
    const cancelBtn = document.getElementById('cancelRacksBtn');
    const closeBtn = document.getElementById('addRackModalClose');

    // Populate row dropdown
    await this.populateRowDropdown();

    modal.classList.remove('hidden');
    this.updateRackNamesPreview();

    // Add input listeners for live preview
    const countInput = document.getElementById('rackCount');
    const prefixInput = document.getElementById('rackPrefix');

    const updatePreview = () => this.updateRackNamesPreview();
    countInput.addEventListener('input', updatePreview);
    prefixInput.addEventListener('input', updatePreview);

    const handleCreate = async () => {
      const count = parseInt(document.getElementById('rackCount').value);
      const prefix = document.getElementById('rackPrefix').value.trim() || 'RACK';
      const position = document.querySelector('input[name="rowPosition"]:checked').value;
      const selectedRow = position === 'continue' ? parseInt(document.getElementById('continueRowSelect').value) : null;

      try {
        await this.createMultipleRacks(count, prefix, position, selectedRow);
        modal.classList.add('hidden');
      } catch (err) {
        alert('Failed to create racks: ' + err.message);
      }

      cleanup();
    };

    const handleCancel = () => {
      modal.classList.add('hidden');
      cleanup();
    };

    const cleanup = () => {
      createBtn.removeEventListener('click', handleCreate);
      cancelBtn.removeEventListener('click', handleCancel);
      closeBtn.removeEventListener('click', handleCancel);
      countInput.removeEventListener('input', updatePreview);
      prefixInput.removeEventListener('input', updatePreview);
    };

    createBtn.addEventListener('click', handleCreate);
    cancelBtn.addEventListener('click', handleCancel);
    closeBtn.addEventListener('click', handleCancel);
  }

  async createMultipleRacks(count, prefix, position, selectedRowY = null) {
    const existingRacks = await this.api.getRacks();

    // Use current grid dimensions from RackManager
    const gridSize = this.rackManager.gridSize;
    const gridVertical = this.rackManager.gridVertical;
    const startX = 0; // Start at grid origin
    const startY = 0; // Start at grid origin

    let x, y;

    // Determine starting position based on position type
    if (existingRacks.length === 0) {
      // First racks ever
      x = startX;
      y = startY;
    } else if (position === 'continue') {
      // Continue on the selected row
      const rowY = selectedRowY;
      const rowRacks = existingRacks.filter(r => r.y === rowY);

      if (rowRacks.length > 0) {
        const maxX = Math.max(...rowRacks.map(r => r.x));
        x = maxX + gridSize;
      } else {
        // No racks in this row yet, start at beginning
        x = startX;
      }
      y = rowY;
    } else if (position === 'below') {
      // New row below
      const maxY = Math.max(...existingRacks.map(r => r.y));
      x = startX;
      y = maxY + gridVertical;
    } else if (position === 'above') {
      // New row above
      const minY = Math.min(...existingRacks.map(r => r.y));
      x = startX;
      y = minY - gridVertical;
    }

    // Get starting number for sequential naming
    const startNum = await this.getNextRackNumber(prefix);

    // Create racks
    for (let i = 0; i < count; i++) {
      const num = String(startNum + i).padStart(2, '0');
      const name = `${prefix}${num}`;

      const rackX = x + (i * gridSize);
      const rackY = y;

      const rackData = await this.api.createRack(name, rackX, rackY);
      this.rackManager.createRackShape(rackData);
    }

    this.layer.batchDraw();
  }

  showAddDeviceModal(rackId) {
    const modal = document.getElementById('addDeviceModal');
    const deviceTypeList = document.getElementById('deviceTypeList');
    const closeBtn = document.getElementById('addDeviceModalClose');

    // Populate device types
    deviceTypeList.innerHTML = '';
    this.deviceManager.deviceTypes.forEach(type => {
      const card = document.createElement('div');
      card.className = 'device-type-card';
      card.innerHTML = `
        <div class="device-type-name">${type.name}</div>
        <div class="device-type-ports">${type.ports_count} ports</div>
      `;

      card.addEventListener('click', async () => {
        const deviceName = prompt(`Enter name for ${type.name}:`, type.name);
        if (deviceName) {
          try {
            // Check if name will be auto-numbered
            const uniqueName = this.deviceManager.generateUniqueName(deviceName);
            if (uniqueName !== deviceName) {
              const proceed = confirm(`Device name "${deviceName}" is already in use.\n\nDevice will be named "${uniqueName}" instead.\n\nContinue?`);
              if (!proceed) {
                return;
              }
            }

            const position = this.deviceManager.getNextDevicePosition(rackId, type.rack_units);
            await this.deviceManager.addDevice(type.id, rackId, position, deviceName);
            modal.classList.add('hidden');
          } catch (err) {
            alert('Failed to add device: ' + err.message);
          }
        }
      });

      deviceTypeList.appendChild(card);
    });

    modal.classList.remove('hidden');

    const handleClose = () => {
      modal.classList.add('hidden');
      closeBtn.removeEventListener('click', handleClose);
    };

    closeBtn.addEventListener('click', handleClose);
  }

  async renameRack(rackId, rackData, rackShape) {
    const newName = prompt('Enter new rack name:', rackData.name);
    if (newName && newName !== rackData.name) {
      try {
        await this.api.updateRackName(rackId, newName);

        // Update the rack name in the shape
        const nameLabel = rackShape.findOne('Text');
        if (nameLabel) {
          nameLabel.text(newName);
          this.layer.batchDraw();
        }

        // Update local data
        rackData.name = newName;

        // Notify table to sync
        window.dispatchEvent(new CustomEvent('canvas-data-changed'));
      } catch (err) {
        alert('Failed to rename rack: ' + err.message);
      }
    }
  }

  async renameDevice(deviceId, deviceData, deviceShape) {
    const newName = prompt('Enter new device name:', deviceData.name);
    if (newName && newName !== deviceData.name) {
      // Check if name is already taken
      if (this.deviceManager.isDeviceNameTaken(newName, deviceId)) {
        alert(`Device name "${newName}" is already in use. Please choose a different name.`);
        return;
      }

      try {
        await this.api.updateDeviceName(deviceId, newName);

        // Update the device name in the shape
        const nameLabel = deviceShape.findOne('.device-text');
        if (nameLabel) {
          nameLabel.text(newName);
          this.layer.batchDraw();
        }

        // Update local data
        deviceData.name = newName;

        // Notify table to sync
        window.dispatchEvent(new CustomEvent('canvas-data-changed'));
      } catch (err) {
        alert('Failed to rename device: ' + err.message);
      }
    }
  }

  setupContextMenu() {
    // Hide context menu on any click/mousedown anywhere
    const hideHandler = (e) => {
      const contextMenu = document.getElementById('contextMenu');
      // Don't hide if clicking inside the context menu itself
      if (contextMenu && !contextMenu.contains(e.target)) {
        this.hideContextMenu();
      }
    };

    // Listen on document for clicks outside the canvas
    document.addEventListener('mousedown', hideHandler);
    document.addEventListener('click', hideHandler);
  }

  resetView() {
    // Reset to default position and zoom
    this.stage.position({ x: 50, y: 50 });
    this.stage.scale({ x: 1, y: 1 });
    this.currentScale = 1;
    this.updateZoomDisplay(1);
    this.stage.batchDraw();
  }

  fitView() {
    let minX = Infinity, minY = Infinity;
    let maxX = -Infinity, maxY = -Infinity;

    if (this.currentCanvasView === 'logical') {
      // In logical view, fit to devices
      const devices = Array.from(this.deviceManager.devices.values());

      if (devices.length === 0) {
        this.resetView();
        return;
      }

      devices.forEach(device => {
        const pos = device.shape.position();
        const x = pos.x;
        const y = pos.y;
        const width = this.deviceManager.deviceWidth;
        const height = device.shape.height();

        minX = Math.min(minX, x);
        minY = Math.min(minY, y);
        maxX = Math.max(maxX, x + width);
        maxY = Math.max(maxY, y + height);
      });
    } else {
      // In physical view, fit to racks
      const racks = Array.from(this.rackManager.racks.values());

      if (racks.length === 0) {
        this.resetView();
        return;
      }

      racks.forEach(rack => {
        const x = rack.data.x;
        const y = rack.data.y;
        const width = rack.data.width || this.rackManager.rackWidth;
        const height = rack.data.height || this.rackManager.rackHeight;

        minX = Math.min(minX, x);
        minY = Math.min(minY, y - 30); // Include rack name
        maxX = Math.max(maxX, x + width);
        maxY = Math.max(maxY, y + height);
      });
    }

    // Add padding
    const padding = 100;
    minX -= padding;
    minY -= padding;
    maxX += padding;
    maxY += padding;

    const contentWidth = maxX - minX;
    const contentHeight = maxY - minY;

    // Calculate scale to fit
    const containerWidth = this.stage.width();
    const containerHeight = this.stage.height();

    const scaleX = containerWidth / contentWidth;
    const scaleY = containerHeight / contentHeight;
    const scale = Math.min(scaleX, scaleY, this.maxScale);

    // Clamp to min/max scale
    const finalScale = Math.max(this.minScale, Math.min(this.maxScale, scale));

    // Calculate position to center the content
    const centerX = (minX + maxX) / 2;
    const centerY = (minY + maxY) / 2;

    const newX = containerWidth / 2 - centerX * finalScale;
    const newY = containerHeight / 2 - centerY * finalScale;

    // Apply the transformation
    this.stage.scale({ x: finalScale, y: finalScale });
    this.stage.position({ x: newX, y: newY });
    this.currentScale = finalScale;
    this.updateZoomDisplay(finalScale);
    this.stage.batchDraw();
    this.saveCurrentViewState(); // Save state after fit
  }

  updateZoomDisplay(scale) {
    const percentage = Math.round(scale * 100);
    document.getElementById('zoomInput').value = percentage;
  }

  setZoom(scale) {
    // Clamp scale to min/max
    const newScale = Math.max(this.minScale, Math.min(this.maxScale, scale));

    // Get current center point in world coordinates
    const containerWidth = this.stage.width();
    const containerHeight = this.stage.height();
    const centerX = containerWidth / 2;
    const centerY = containerHeight / 2;

    // Convert to world coordinates
    const oldScale = this.stage.scaleX();
    const worldX = (centerX - this.stage.x()) / oldScale;
    const worldY = (centerY - this.stage.y()) / oldScale;

    // Apply new scale
    this.stage.scale({ x: newScale, y: newScale });

    // Recalculate position to keep center point fixed
    const newPos = {
      x: centerX - worldX * newScale,
      y: centerY - worldY * newScale
    };

    this.stage.position(newPos);
    this.currentScale = newScale;
    this.updateZoomDisplay(newScale);
    this.stage.batchDraw();
    this.saveCurrentViewState(); // Save state after zoom change
  }

  async switchCanvasView(canvasViewType) {
    if (canvasViewType !== 'physical' && canvasViewType !== 'logical') {
      console.error('Invalid canvas view type:', canvasViewType);
      return;
    }

    // Save current view state before switching
    this.saveCurrentViewState();

    this.currentCanvasView = canvasViewType;
    localStorage.setItem('currentCanvasView', canvasViewType);

    // Update button states
    const physicalBtn = document.getElementById('physicalViewBtn');
    const logicalBtn = document.getElementById('logicalViewBtn');

    physicalBtn.classList.remove('active');
    logicalBtn.classList.remove('active');

    if (canvasViewType === 'physical') {
      physicalBtn.classList.add('active');
    } else {
      logicalBtn.classList.add('active');
    }

    // Update device manager's view (changes device width)
    this.deviceManager.setCurrentView(canvasViewType);

    if (canvasViewType === 'physical') {
      this.renderPhysicalView();
    } else {
      this.renderLogicalView();
    }

    // Update connection manager's view (reloads connections with view-specific waypoints)
    await this.connectionManager.setCurrentView(canvasViewType);

    // Restore the target view's saved state
    this.restoreViewState(canvasViewType);

    // Sync table if visible
    if (this.currentTableView) {
      await this.tableManager.refreshTable();
    }
  }

  async toggleTableView(tableViewType) {
    const racksTableBtn = document.getElementById('racksTableBtn');
    const devicesTableBtn = document.getElementById('devicesTableBtn');
    const connectionsTableBtn = document.getElementById('connectionsTableBtn');
    const tablePane = document.getElementById('tablePane');
    const resizeHandle = document.getElementById('resizeHandle');

    // If clicking the same table view, close it (toggle off)
    if (this.currentTableView === tableViewType) {
      this.currentTableView = null;
      tablePane.classList.add('hidden');
      resizeHandle.classList.add('hidden');

      // Remove active state from all table buttons
      racksTableBtn.classList.remove('active');
      devicesTableBtn.classList.remove('active');
      connectionsTableBtn.classList.remove('active');

      this.tableManager.hideTable();
      this.resizeCanvas();
      return;
    }

    // Otherwise, switch to the new table view or open it
    this.currentTableView = tableViewType;

    // Show table pane and resize handle
    tablePane.classList.remove('hidden');
    resizeHandle.classList.remove('hidden');

    // Update button states
    racksTableBtn.classList.remove('active');
    devicesTableBtn.classList.remove('active');
    connectionsTableBtn.classList.remove('active');

    if (tableViewType === 'racks') {
      racksTableBtn.classList.add('active');
    } else if (tableViewType === 'devices') {
      devicesTableBtn.classList.add('active');
    } else if (tableViewType === 'connections') {
      connectionsTableBtn.classList.add('active');
    }

    // Show the table
    await this.tableManager.showTable(`${tableViewType}-table`);
    this.resizeCanvas();
  }

  setupResizeHandle() {
    const resizeHandle = document.getElementById('resizeHandle');
    const tablePane = document.getElementById('tablePane');
    const canvasPane = document.getElementById('canvasPane');

    let isResizing = false;
    let startY = 0;
    let startHeight = 0;

    resizeHandle.addEventListener('mousedown', (e) => {
      isResizing = true;
      startY = e.clientY;
      startHeight = tablePane.offsetHeight;
      document.body.style.cursor = 'ns-resize';
      document.body.style.userSelect = 'none';
    });

    document.addEventListener('mousemove', (e) => {
      if (!isResizing) return;

      const deltaY = startY - e.clientY; // Negative delta = drag down

      // Get actual available height (main-content area)
      const mainContent = document.querySelector('.main-content');
      const availableHeight = mainContent.offsetHeight;
      const resizeHandleHeight = resizeHandle.offsetHeight || 4;

      const minHeight = 0; // Allow collapsing completely
      const maxHeight = availableHeight - resizeHandleHeight; // Up to fill entire main-content
      const newHeight = Math.max(minHeight, Math.min(maxHeight, startHeight + deltaY));

      tablePane.style.height = `${newHeight}px`;
      this.resizeCanvas();
    });

    document.addEventListener('mouseup', () => {
      if (isResizing) {
        isResizing = false;
        document.body.style.cursor = 'default';
        document.body.style.userSelect = 'auto';
      }
    });
  }

  resizeCanvas() {
    // Use requestAnimationFrame to ensure DOM has completed reflow
    requestAnimationFrame(() => {
      const canvasWrapper = document.getElementById('canvasWrapper');
      if (this.stage && canvasWrapper) {
        const width = canvasWrapper.offsetWidth;
        const height = canvasWrapper.offsetHeight;

        // Only resize if dimensions are valid (non-zero)
        if (width > 0 && height > 0) {
          this.stage.width(width);
          this.stage.height(height);
          this.stage.batchDraw();
        }
      }

      // Trigger table grid resize
      if (this.tableManager.gridApi) {
        // ag-Grid automatically handles resize, but we can trigger it explicitly
        setTimeout(() => {
          if (this.tableManager.gridApi) {
            this.tableManager.gridApi.sizeColumnsToFit();
          }
        }, 100);
      }
    });
  }

  renderPhysicalView() {
    // Show racks
    this.rackManager.racks.forEach((rack) => {
      rack.shape.visible(true);
    });

    // Move devices back into racks and position them relatively
    this.deviceManager.devices.forEach((device, deviceId) => {
      const deviceData = device.data;
      const rackShape = this.rackManager.getRackShape(deviceData.rack_id);

      if (rackShape) {
        const devicesContainer = rackShape.findOne('.devices-container');

        // Move device back into its rack's container
        if (device.shape.getParent() !== devicesContainer) {
          device.shape.moveTo(devicesContainer);
        }

        // Calculate relative position within rack (using the rack assignment stored in DB)
        // U1 (slot 1) is at the bottom, U42 (slot 42) is at the top
        const maxSlots = 42;
        const visualPosition = maxSlots - deviceData.position;
        const y = 10 + (visualPosition * (this.deviceManager.deviceHeight + this.deviceManager.deviceSpacing));
        device.shape.position({ x: 10, y: y });

        // Remove logical view drag handlers
        device.shape.off('dragstart');
        device.shape.off('dragmove');
        device.shape.off('dragmove.connection');
        device.shape.off('dragend');
        device.shape.off('dragend.logical');

        // Re-add physical view drag handlers
        device.shape.on('dragstart', () => {
          // Store original parent and position
          device.shape.setAttr('originalParent', device.shape.getParent());
          device.shape.setAttr('originalPosition', device.shape.position());

          // Move to main layer to be on top of everything
          const absolutePos = device.shape.getAbsolutePosition();
          device.shape.moveTo(this.layer);
          device.shape.setAbsolutePosition(absolutePos);
          device.shape.moveToTop();
          device.shape.opacity(0.7);
        });

        device.shape.on('dragend', async () => {
          device.shape.opacity(1);
          await this.deviceManager.handleDeviceDrop(deviceData.id, device.shape);
        });

        // Devices are always draggable in physical view
        device.shape.draggable(true);

        // Enable context menu for device deletion (context menu handler is already attached)
        device.shape.listening(true);
      }
    });

    this.layer.batchDraw();
    this.connectionManager.updateAllConnections();
  }

  renderLogicalView() {
    // Hide racks
    this.rackManager.racks.forEach((rack) => {
      rack.shape.visible(false);
    });

    // Move devices to main layer and position them at logical positions
    this.deviceManager.devices.forEach((device, deviceId) => {
      const deviceData = device.data;

      // Use logical position if available, otherwise calculate from physical position
      let logicalX = deviceData.logical_x;
      let logicalY = deviceData.logical_y;

      if (logicalX === null || logicalX === undefined) {
        // First time in logical view - calculate position from physical layout
        const rack = this.rackManager.racks.get(deviceData.rack_id);
        if (rack) {
          logicalX = rack.data.x + 100; // Offset from rack position
          logicalY = rack.data.y + deviceData.position * 40;
        } else {
          logicalX = 200;
          logicalY = 200;
        }
        // Save this initial logical position
        this.api.request(`/api/devices/${deviceId}/logical-position`, {
          method: 'PUT',
          body: JSON.stringify({ x: logicalX, y: logicalY })
        }).catch(err => console.error('Failed to save logical position:', err));
      }

      // Move device to main layer (out of rack container)
      if (device.shape.getParent() !== this.layer) {
        device.shape.moveTo(this.layer);
      }

      // Position device at logical coordinates (absolute positioning)
      device.shape.position({ x: logicalX, y: logicalY });
      device.shape.draggable(true);

      // IMPORTANT: Remove ALL existing drag handlers (including physical view handlers)
      device.shape.off('dragstart');
      device.shape.off('dragmove');
      device.shape.off('dragmove.connection');
      device.shape.off('dragend');
      device.shape.off('dragend.logical');

      // Add ONLY logical view drag handler - does NOT change rack assignment
      device.shape.on('dragend.logical', async () => {
        const pos = device.shape.position();
        try {
          // Update ONLY logical position, never rack_id or position
          await this.api.request(`/api/devices/${deviceId}/logical-position`, {
            method: 'PUT',
            body: JSON.stringify({ x: pos.x, y: pos.y })
          });
          // Update local data
          deviceData.logical_x = pos.x;
          deviceData.logical_y = pos.y;
          // Update connections
          this.connectionManager.updateAllConnections();
        } catch (err) {
          console.error('Failed to save logical position:', err);
        }
      });
    });

    this.layer.batchDraw();
    this.connectionManager.updateAllConnections();
  }

  async exportProject() {
    try {
      // Get current project info
      const project = await this.api.getProject(this.api.currentProjectId);
      const racks = await this.api.getRacks();
      const devices = await this.api.getDevices();
      const connections = await this.api.getConnections();

      // Create export data
      const exportData = {
        version: '1.0',
        exportDate: new Date().toISOString(),
        project: {
          name: project.name,
          description: project.description
        },
        racks: racks,
        devices: devices,
        connections: connections,
        gridSettings: {
          gridSize: this.rackManager.gridSize,
          gridVertical: this.rackManager.gridVertical
        }
      };

      // Convert to JSON
      const jsonString = JSON.stringify(exportData, null, 2);

      // Create blob and download
      const blob = new Blob([jsonString], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${project.name.replace(/[^a-z0-9]/gi, '_')}_${new Date().toISOString().split('T')[0]}.json`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);

      alert(`Project "${project.name}" exported successfully!`);
    } catch (err) {
      console.error('Failed to export project:', err);
      alert('Failed to export project: ' + err.message);
    }
  }

  async importProject(file) {
    try {
      const text = await file.text();
      const importData = JSON.parse(text);

      // Validate import data
      if (!importData.version || !importData.project) {
        throw new Error('Invalid project file format');
      }

      const confirmMsg = `Import project "${importData.project.name}"?\n\nThis will create a new project with:\n- ${importData.racks?.length || 0} racks\n- ${importData.devices?.length || 0} devices\n- ${importData.connections?.length || 0} connections`;

      if (!confirm(confirmMsg)) {
        return;
      }

      // Create new project
      const newProject = await this.api.createProject(
        importData.project.name + ' (Imported)',
        importData.project.description || ''
      );

      // Switch to new project
      await this.loadProjects();
      document.getElementById('projectSelect').value = newProject.id;
      await this.switchProject(newProject.id);

      // Import grid settings if available
      if (importData.gridSettings) {
        this.rackManager.gridSize = importData.gridSettings.gridSize || 600;
        this.rackManager.gridVertical = importData.gridSettings.gridVertical || 1610;
        this.rackManager.saveSpacing();
      }

      // Import racks
      const rackIdMap = new Map(); // Map old IDs to new IDs
      if (importData.racks) {
        for (const rack of importData.racks) {
          const newRack = await this.api.createRack(rack.name, rack.x, rack.y);
          rackIdMap.set(rack.id, newRack.id);
          this.rackManager.createRackShape(newRack);
        }
      }

      // Import devices
      const deviceIdMap = new Map(); // Map old IDs to new IDs
      if (importData.devices) {
        for (const device of importData.devices) {
          const newRackId = rackIdMap.get(device.rack_id);
          if (newRackId) {
            const newDevice = await this.api.createDevice(
              device.device_type_id,
              newRackId,
              device.position,
              device.name
            );
            deviceIdMap.set(device.id, newDevice.id);

            // Fetch complete device data
            const devices = await this.api.getDevices();
            const deviceData = devices.find(d => d.id === newDevice.id);
            if (deviceData) {
              // Update rack_units and logical position if available
              if (device.rack_units) {
                await this.api.request(`/api/devices/${newDevice.id}/rack-units`, {
                  method: 'PUT',
                  body: JSON.stringify({ rackUnits: device.rack_units })
                });
                deviceData.rack_units = device.rack_units;
              }
              if (device.logical_x !== null && device.logical_y !== null) {
                await this.api.request(`/api/devices/${newDevice.id}/logical-position`, {
                  method: 'PUT',
                  body: JSON.stringify({ x: device.logical_x, y: device.logical_y })
                });
              }
              this.deviceManager.createDeviceShape(deviceData);
            }
          }
        }
      }

      // Import connections
      if (importData.connections) {
        for (const conn of importData.connections) {
          const newSourceId = deviceIdMap.get(conn.source_device_id);
          const newTargetId = deviceIdMap.get(conn.target_device_id);

          if (newSourceId && newTargetId) {
            const newConn = await this.api.createConnection(
              newSourceId,
              conn.source_port,
              newTargetId,
              conn.target_port
            );

            // Update waypoints if available
            if (conn.waypoints_physical) {
              await this.api.updateConnectionWaypoints(
                newConn.id,
                typeof conn.waypoints_physical === 'string' ? JSON.parse(conn.waypoints_physical) : conn.waypoints_physical,
                'physical'
              );
            }
            if (conn.waypoints_logical) {
              await this.api.updateConnectionWaypoints(
                newConn.id,
                typeof conn.waypoints_logical === 'string' ? JSON.parse(conn.waypoints_logical) : conn.waypoints_logical,
                'logical'
              );
            }
          }
        }

        // Reload connections to display them
        await this.connectionManager.loadConnections();
      }

      this.layer.batchDraw();
      this.connectionManager.getConnectionLayer().batchDraw();

      alert(`Project imported successfully as "${newProject.name}"!`);
    } catch (err) {
      console.error('Failed to import project:', err);
      alert('Failed to import project: ' + err.message);
    }
  }

  async exportToExcel() {
    try {
      // Get current project data
      const project = await this.api.getProject(this.api.currentProjectId);
      const racks = await this.api.getRacks();
      const devices = await this.api.getDevices();
      const connections = await this.api.getConnections();

      // Create workbook
      const wb = XLSX.utils.book_new();

      // Racks sheet
      const racksData = racks.map(r => ({
        'Rack Name': r.name,
        'Position X': r.x,
        'Position Y': r.y,
        'Width': r.width,
        'Height': r.height
      }));
      const racksWs = XLSX.utils.json_to_sheet(racksData);
      XLSX.utils.book_append_sheet(wb, racksWs, 'Racks');

      // Devices sheet
      const racksMap = new Map(racks.map(r => [r.id, r.name]));
      const devicesData = devices.map(d => ({
        'Device Name': d.name,
        'Type': d.type_name,
        'Rack': racksMap.get(d.rack_id) || 'Unknown',
        'Slot': `U${d.position}`,
        'Form Factor': `${d.rack_units || 1}U`,
        'Ports': d.ports_count,
        'Color': d.color
      }));
      const devicesWs = XLSX.utils.json_to_sheet(devicesData);
      XLSX.utils.book_append_sheet(wb, devicesWs, 'Devices');

      // Connections sheet
      const devicesMap = new Map(devices.map(d => [d.id, d.name]));
      const connectionsData = connections.map(c => ({
        'Source Device': devicesMap.get(c.source_device_id) || 'Unknown',
        'Source Port': c.source_port,
        'Target Device': devicesMap.get(c.target_device_id) || 'Unknown',
        'Target Port': c.target_port
      }));
      const connectionsWs = XLSX.utils.json_to_sheet(connectionsData);
      XLSX.utils.book_append_sheet(wb, connectionsWs, 'Connections');

      // Generate filename
      const filename = `${project.name.replace(/[^a-z0-9]/gi, '_')}_${new Date().toISOString().split('T')[0]}.xlsx`;

      // Write file
      XLSX.writeFile(wb, filename);

      alert(`Excel file "${filename}" downloaded successfully!`);
    } catch (err) {
      console.error('Failed to export to Excel:', err);
      alert('Failed to export to Excel: ' + err.message);
    }
  }
}

// Initialize app
const app = new DatacenterDesigner();
app.init();