peardock/app.js

import Hyperswarm from 'hyperswarm';
import b4a from 'b4a';
import { startTerminal, appendTerminalOutput } from './libs/terminal.js';
import { startDockerTerminal, cleanUpDockerTerminal } from './libs/dockerTerminal.js';
import { fetchTemplates, displayTemplateList, openDeployModal } from './libs/templateDeploy.js';

// DOM Elements
const containerList = document.getElementById('container-list');
const connectionList = document.getElementById('connection-list');
const addConnectionForm = document.getElementById('add-connection-form');
const newConnectionTopic = document.getElementById('new-connection-topic');
const connectionTitle = document.getElementById('connection-title');
const dashboard = document.getElementById('dashboard');

// Modal Elements
const duplicateModalElement = document.getElementById('duplicateModal');
const duplicateModal = new bootstrap.Modal(duplicateModalElement);
const duplicateContainerForm = document.getElementById('duplicate-container-form');

// Global variables
const connections = {};
window.openTerminals = {};
let activePeer = null;
window.activePeer = null; // Expose to other modules

hideStatusIndicator();
let statsInterval = null;
let lastStatsUpdate = Date.now();
function stopStatsInterval() {
  if (statsInterval) {
    clearInterval(statsInterval);
    statsInterval = null;
    console.log('[INFO] Stats interval stopped.');
  }
}

function closeAllModals() {
  // Find and hide all open modals
  const modals = document.querySelectorAll('.modal.show'); // Adjust selector if necessary
  modals.forEach(modal => {
    const modalInstance = bootstrap.Modal.getInstance(modal); // Get Bootstrap modal instance
    modalInstance.hide(); // Close the modal
  });
}


document.addEventListener('DOMContentLoaded', () => {
  const dockerTerminalModal = document.getElementById('dockerTerminalModal');

  if (dockerTerminalModal) {
    dockerTerminalModal.addEventListener('hidden.bs.modal', () => {
      console.log('[INFO] Modal fully closed. Performing additional cleanup.');
      cleanUpDockerTerminal();
    });
  }
});

function startStatsInterval() {
  if (statsInterval) {
    clearInterval(statsInterval);
  }

  statsInterval = setInterval(() => {
    if (window.activePeer) {
      const now = Date.now();
      if (now - lastStatsUpdate >= 500) { // Ensure at least 500ms between updates
        // sendCommand('allStats', {}); // Adjust command if necessary
        lastStatsUpdate = now;
      }
    } else {
      console.warn('[WARN] No active peer; skipping stats request.');
    }
  }, 100); // Poll every 100ms for better reactivity
}
const smoothedStats = {}; // Container-specific smoothing storage

function smoothStats(containerId, newStats, smoothingFactor = 0.2) {
  if (!smoothedStats[containerId]) {
    smoothedStats[containerId] = { cpu: 0, memory: 0, ip: newStats.ip || 'No IP Assigned' };
  }

  smoothedStats[containerId].cpu =
    smoothedStats[containerId].cpu * (1 - smoothingFactor) +
    newStats.cpu * smoothingFactor;

  smoothedStats[containerId].memory =
    smoothedStats[containerId].memory * (1 - smoothingFactor) +
    newStats.memory * smoothingFactor;

  // Preserve the latest IP address
  smoothedStats[containerId].ip = newStats.ip || smoothedStats[containerId].ip;

  return smoothedStats[containerId];
}


function refreshContainerStats() {
  console.log('[INFO] Refreshing container stats...');
  sendCommand('listContainers'); // Request an updated container list
  startStatsInterval(); // Restart stats interval
}

function waitForPeerResponse(expectedMessageFragment, timeout = 900000) {
  console.log(`[DEBUG] Waiting for peer response with fragment: "${expectedMessageFragment}"`);

  return new Promise((resolve, reject) => {
    const startTime = Date.now();

    window.handlePeerResponse = (response) => {
      console.log(`[DEBUG] Received response: ${JSON.stringify(response)}`);
      console.log(response.message)
      if (response && response.success && response.message.includes(expectedMessageFragment)) {
        console.log(`[DEBUG] Expected response received: ${response.message}`);
        resolve(response);
      } else if (Date.now() - startTime > timeout) {
        console.warn('[WARN] Timeout while waiting for peer response');
        reject(new Error('Timeout waiting for peer response'));
      }
    };

    // Timeout fallback
    setTimeout(() => {
      console.warn('[WARN] Timed out waiting for response');
      reject(new Error('Timed out waiting for peer response'));
    }, timeout);
  });
}

// Utility functions for managing cookies
function setCookie(name, value, days = 365) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = `expires=${date.toUTCString()}`;
  document.cookie = `${name}=${encodeURIComponent(value)};${expires};path=/`;
}

function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (let i = 0; i < cookies.length; i++) {
    const [key, value] = cookies[i].split('=');
    if (key === name) return decodeURIComponent(value);
  }
  return null;
}

function deleteCookie(name) {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}

// Load connections from cookies
function loadConnections() {
  const savedConnections = getCookie('connections');
  const connections = savedConnections ? JSON.parse(savedConnections) : {};

  // Recreate the topic Buffer from the hex string
  for (const topicId in connections) {
    const { topicHex } = connections[topicId];
    connections[topicId] = {
      topic: b4a.from(topicHex, 'hex'),
      topicHex,
      peer: null, // Initialize additional properties
      swarm: null,
    };
  }

  return connections;
}


// Save connections to cookies
function saveConnections() {
  const serializableConnections = {};

  for (const topicId in connections) {
    const { topic, topicHex } = connections[topicId]; // Only serialize simple properties
    serializableConnections[topicId] = {
      topicHex,
      topic: b4a.toString(topic, 'hex'), // Convert Buffer to hex string
    };
  }

  setCookie('connections', JSON.stringify(serializableConnections));
}


// Add Reset Connections Button
// Toggle Reset Connections Button Visibility
function toggleResetButtonVisibility() {
  const resetConnectionsBtn = document.querySelector('#sidebar .btn-danger');
  if (!resetConnectionsBtn) return;

  // Show or hide the button based on active connections
  resetConnectionsBtn.style.display = Object.keys(connections).length > 0 ? 'block' : 'none';
}

// Add Reset Connections Button
const resetConnectionsBtn = document.createElement('button');
resetConnectionsBtn.textContent = 'Reset Connections';
resetConnectionsBtn.className = 'btn btn-danger w-100 mt-2';
resetConnectionsBtn.addEventListener('click', () => {
  console.log('[INFO] Resetting connections and clearing cookies.');
  Object.keys(connections).forEach((topicId) => {
    disconnectConnection(topicId);
  });
  deleteCookie('connections');
  resetConnectionsView();
  showWelcomePage();
  toggleResetButtonVisibility(); // Ensure button visibility is updated
});
document.getElementById('sidebar').appendChild(resetConnectionsBtn);



// Initialize the app
console.log('[INFO] Client app initialized');
// Load connections from cookies and restore them
document.addEventListener('DOMContentLoaded', () => {
  const savedConnections = loadConnections();
  console.log('[INFO] Restoring saved connections:', savedConnections);

  // Restore saved connections
  Object.keys(savedConnections).forEach((topicId) => {
    let topicHex = savedConnections[topicId].topic;

    // Ensure topicHex is a string
    if (typeof topicHex !== 'string') {
      topicHex = b4a.toString(topicHex, 'hex');
    }

    addConnection(topicHex);
  });

  if (Object.keys(connections).length > 0) {
    hideWelcomePage();
  } else {
    showWelcomePage();
  }

  assertVisibility(); // Ensure visibility reflects the restored connections
});

// Show Status Indicator
// Modify showStatusIndicator to recreate it dynamically
function showStatusIndicator(message = 'Processing...') {
  const statusIndicator = document.createElement('div');
  statusIndicator.id = 'status-indicator';
  statusIndicator.className = 'position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-dark bg-opacity-75';
  statusIndicator.innerHTML = `
    <div class="text-center">
      <div class="spinner-border text-light" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <p class="mt-3 text-light">${message}</p>
    </div>
  `;
  document.body.appendChild(statusIndicator);
}

function hideStatusIndicator() {
  const statusIndicator = document.getElementById('status-indicator');
  if (statusIndicator) {
    console.log('[DEBUG] Hiding status indicator');
    statusIndicator.remove();
  } else {
    console.error('[ERROR] Status indicator element not found!');
  }
}
// Show Alert
// Show alert message
function showAlert(type, message) {
  const alertBox = document.createElement('div');
  alertBox.className = `alert alert-${type}`;
  alertBox.textContent = message;

  const container = document.querySelector('#alert-container');
  if (container) {
      container.appendChild(alertBox);

      setTimeout(() => {
          container.removeChild(alertBox);
      }, 5000);
  } else {
      console.warn('[WARN] Alert container not found.');
  }
}



// Collapse Sidebar Functionality
const collapseSidebarBtn = document.getElementById('collapse-sidebar-btn');
collapseSidebarBtn.addEventListener('click', () => {
  const sidebar = document.getElementById('sidebar');
  sidebar.classList.toggle('collapsed');
  const btn = collapseSidebarBtn;
  btn.innerHTML = sidebar.classList.contains('collapsed') ? '&gt;' : '&lt;';

  // Toggle Reset Connections Button Visibility
  const resetConnectionsBtn = document.querySelector('#sidebar .btn-danger');
  resetConnectionsBtn.style.display = sidebar.classList.contains('collapsed') ? 'none' : 'block';
});

function handlePeerData(data, topicId, peer) {
  try {
    // Parse the incoming data
    const response = JSON.parse(data.toString());
    console.log(`[DEBUG] Received data from peer (topic: ${topicId}): ${JSON.stringify(response)}`);
    console.log(response.message)
    if (response.success && response.message.includes && response.message.includes('deployed successfully')) {
      console.log(`[INFO] Template deployed successfully: ${response.message}`);
      closeAllModals(); // Close all modals after successful deployment

      hideStatusIndicator();
      startStatsInterval(); // Restart stats polling
      showAlert('success', response.message);
      hideStatusIndicator();

    }
    // Ensure the data is for the active connection
    if (!connections[topicId]) {
      console.warn(`[WARN] No connection found for topic: ${topicId}. Ignoring data.`);
      return;
    }

    if (peer !== connections[topicId].peer) {
      console.warn(`[WARN] Ignoring data from a non-active peer for topic: ${topicId}`);
      return;
    }

    // Delegate handling based on the response type
    switch (response.type) {
      case 'allStats':
        console.log('[INFO] Received aggregated stats for all containers.');
        response.data.forEach((stats) => updateContainerStats(stats));
        break;

      case 'containers':
        console.log('[INFO] Processing container list...');
        renderContainers(response.data, topicId); // Render containers specific to this topic
        break;

      case 'terminalOutput':
        console.log('[INFO] Appending terminal output...');
        appendTerminalOutput(response.data, response.containerId, response.encoding);
        break;

      case 'containerConfig':
        console.log('[INFO] Handling container configuration...');
        if (window.inspectContainerCallback) {
          window.inspectContainerCallback(response.data);
          window.inspectContainerCallback = null; // Reset the callback
        }
        break;

      case 'logs':
        console.log('[INFO] Handling logs output...');
        if (window.handleLogOutput) {
          window.handleLogOutput(response);
        }
        break;

      default:
        console.warn(`[WARN] Unhandled response type: ${response.type}`);
        break;
    }

    // Handle peer response callback if defined
    if (typeof window.handlePeerResponse === 'function') {
      window.handlePeerResponse(response);
    }
  } catch (err) {
    // Catch and log any parsing or processing errors
    console.error(`[ERROR] Failed to process peer data: ${err.message}`);
    console.error(`[DEBUG] Raw data received: ${data.toString()}`);
    showAlert('danger', 'Failed to process peer data. Check the console for details.');
  }
}







// Add a new connection
addConnectionForm.addEventListener('submit', (e) => {
  e.preventDefault();

  const topicHex = newConnectionTopic.value.trim();
  if (topicHex) {
    addConnection(topicHex);
    newConnectionTopic.value = '';
  }
});

function addConnection(topicHex) {
  console.log(`[DEBUG] Adding connection with topic: ${topicHex}`);

  if (Object.keys(connections).length === 0) {
    hideWelcomePage();
  }

  const topic = b4a.from(topicHex, 'hex');
  const topicId = topicHex.substring(0, 12);

  connections[topicId] = { topic, peer: null, swarm: null, topicHex };
  saveConnections(); // Save updated connections to cookies

  const connectionItem = document.createElement('li');
  connectionItem.className = 'list-group-item d-flex align-items-center justify-content-between';
  connectionItem.dataset.topicId = topicId;
  connectionItem.innerHTML = `
  <div class="connection-item row align-items-center px-2 py-1 border-bottom bg-dark text-light">
    <!-- Connection Info -->
    <div class="col-8 connection-info text-truncate">
    	        <span>
          <span class="connection-status ${connections[topicId].peer ? 'status-connected' : 'status-disconnected'}"></span>${topicId}
        </span>
    </div>
    <!-- Action Buttons -->
    <div class="col-4 d-flex justify-content-end">
      <div class="btn-group btn-group-sm">
        <button class="btn btn-outline-primary docker-terminal-btn p-1" title="Open Terminal">
          <i class="fas fa-terminal"></i>
        </button>
        <button class="btn btn-outline-secondary deploy-template-btn p-1" title="Deploy Template">
          <i class="fas fa-cubes"></i>
        </button>
        <button class="btn btn-outline-danger disconnect-btn p-1" title="Disconnect">
          <i class="fas fa-plug"></i>
        </button>
      </div>
    </div>
  </div>
`;
  // Add event listener for "Deploy Template" button
  connectionItem.querySelector('.deploy-template-btn').addEventListener('click', () => {
    console.log(`[INFO] Opening template deploy modal for connection: ${topicId}`);
    openTemplateDeployModal(topicId);
  });


  // Add Docker Terminal button event listener
  connectionItem.querySelector('.docker-terminal-btn')?.addEventListener('click', (event) => {
    event.stopPropagation();

    console.log('[DEBUG] Docker terminal button clicked.');

    if (!topicId) {
      console.error('[ERROR] Missing topicId. Cannot proceed.');
      return;
    }

    const connection = connections[topicId];
    console.log(`[DEBUG] Retrieved connection for topicId: ${topicId}`, connection);

    if (connection && connection.peer) {
      try {
        console.log(`[DEBUG] Starting Docker terminal for topicId: ${topicId}`);
        startDockerTerminal(topicId, connection.peer);

        const dockerTerminalModal = document.getElementById('dockerTerminalModal');
        if (dockerTerminalModal) {
          const modalInstance = new bootstrap.Modal(dockerTerminalModal);
          modalInstance.show();
          console.log('[DEBUG] Docker Terminal modal displayed.');
        } else {
          console.error('[ERROR] Docker Terminal modal not found in the DOM.');
        }
      } catch (error) {
        console.error(`[ERROR] Failed to start Docker CLI terminal for topicId: ${topicId}`, error);
      }
    } else {
      console.warn(`[WARNING] No active peer found for topicId: ${topicId}. Unable to start Docker CLI terminal.`);
    }
  });


  connectionItem.querySelector('span').addEventListener('click', () => switchConnection(topicId));
  connectionItem.querySelector('.disconnect-btn').addEventListener('click', (e) => {
    e.stopPropagation();
    disconnectConnection(topicId, connectionItem);
  });
  refreshContainerStats();

  connectionList.appendChild(connectionItem);

  const swarm = new Hyperswarm();
  connections[topicId].swarm = swarm;

  swarm.join(topic, { client: true, server: false });

  swarm.on('connection', (peer) => {
    console.log(`[INFO] Connected to peer for topic: ${topicHex}`);
    if (connections[topicId].peer) {
      peer.destroy();
      return;
    }
    connections[topicId].peer = peer;
    updateConnectionStatus(topicId, true);

    peer.on('data', (data) => handlePeerData(data, topicId, peer));
    peer.on('close', () => {
      updateConnectionStatus(topicId, false);
      if (window.activePeer === peer) {
        window.activePeer = null;
        dashboard.classList.add('hidden');
        containerList.innerHTML = '';
        stopStatsInterval(); // Stop stats polling
      }
    });
    if (!window.activePeer) {
      switchConnection(topicId);
    }
    startStatsInterval();
  });

  // Collapse the sidebar after adding a connection
  const sidebar = document.getElementById('sidebar');
  const collapseSidebarBtn = document.getElementById('collapse-sidebar-btn');
  if (!sidebar.classList.contains('collapsed')) {
    sidebar.classList.add('collapsed');
    collapseSidebarBtn.innerHTML = '&gt;';
    console.log('[DEBUG] Sidebar collapsed after adding connection');
  }
}


// Function to open the template deploy modal
function openTemplateDeployModal(topicId) {
  // Pass the topic ID or other connection-specific info if needed
  console.log(`[INFO] Preparing template deploy modal for topic: ${topicId}`);

  // Ensure the modal fetches templates
  fetchTemplates(); // Refresh template list

  // Show the modal
  const templateDeployModal = new bootstrap.Modal(document.getElementById('templateDeployModal'));
  templateDeployModal.show();
}


// Initialize connections from cookies on page load
document.addEventListener('DOMContentLoaded', () => {
  const savedConnections = loadConnections();
  console.log('[INFO] Loading saved connections:', savedConnections);

  Object.keys(savedConnections).forEach((topicId) => {
    const topicHex = savedConnections[topicId].topic;
    addConnection(topicHex);
  });

  if (Object.keys(connections).length > 0) {
    hideWelcomePage();
    startStatsInterval(); // Start stats polling for active peers
  } else {
    showWelcomePage();
  }

  assertVisibility();
});


function disconnectConnection(topicId, connectionItem) {
  const connection = connections[topicId];
  if (!connection) {
    console.error(`[ERROR] No connection found for topicId: ${topicId}`);
    return;
  }

  // Clean up terminals
  if (window.openTerminals[topicId]) {
    console.log(`[INFO] Closing terminals for topic: ${topicId}`);
    window.openTerminals[topicId].forEach((terminalId) => {
      try {
        cleanUpTerminal(terminalId);
      } catch (err) {
        console.error(`[ERROR] Failed to clean up terminal ${terminalId}: ${err.message}`);
      }
    });
    delete window.openTerminals[topicId];
  }

  // Destroy the peer and swarm
  if (connection.peer) {
    connection.peer.destroy();
  }
  if (connection.swarm) {
    connection.swarm.destroy();
  }

  // Remove from global connections
  delete connections[topicId];

  // Save the updated connections to cookies
  saveConnections();

  // Remove the connection item from the UI
  if (connectionItem) {
    connectionList.removeChild(connectionItem);
  }

  // Reset the connection title if this was the active peer
  if (window.activePeer === connection.peer) {
    window.activePeer = null;

    const connectionTitle = document.getElementById('connection-title');
    if (connectionTitle) {
      connectionTitle.textContent = 'Choose a Connection'; // Reset the title
    }

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

    resetContainerList(); // Clear containers
  }

  // Show welcome page if no connections remain
  if (Object.keys(connections).length === 0) {
    showWelcomePage();
  }

  console.log(`[INFO] Disconnected and removed connection: ${topicId}`);
}


// Function to reset the container list
function resetContainerList() {
  containerList.innerHTML = ''; // Clear the existing list
  console.log('[INFO] Container list cleared.');
}

// Function to reset the connections view
function resetConnectionsView() {
  // Clear the connection list
  connectionList.innerHTML = '';

  // Re-populate the connection list from the `connections` object
  Object.keys(connections).forEach((topicId) => {
    const connectionItem = document.createElement('li');
    connectionItem.className = 'list-group-item d-flex align-items-center justify-content-between';
    connectionItem.dataset.topicId = topicId;
    connectionItem.innerHTML = `
        <span>
          <span class="connection-status ${connections[topicId].peer ? 'status-connected' : 'status-disconnected'}"></span>
        </span>
        <button class="btn btn-sm btn-danger disconnect-btn">Disconnect</button>
      `;

    // Add click event to switch connection
    connectionItem.querySelector('span').addEventListener('click', () => switchConnection(topicId));

    // Add click event to the disconnect button
    const disconnectBtn = connectionItem.querySelector('.disconnect-btn');
    disconnectBtn.addEventListener('click', (e) => {
      e.stopPropagation(); // Prevent triggering the switch connection event
      disconnectConnection(topicId, connectionItem);
    });

    connectionList.appendChild(connectionItem);
  });

  console.log('[INFO] Connections view reset.');
}

// Update connection status
function updateConnectionStatus(topicId, isConnected) {
  const connectionItem = document.querySelector(`[data-topic-id="${topicId}"] .connection-status`);
  if (connectionItem) {
    connectionItem.className = `connection-status ${isConnected ? 'status-connected' : 'status-disconnected'}`;
  }
}

// Switch between connections
function switchConnection(topicId) {
  const connection = connections[topicId];

  if (!connection || !connection.peer) {
    console.error('[ERROR] No connection found or no active peer.');
    showWelcomePage();
    stopStatsInterval(); // Stop stats interval if no active peer
    return;
  }

  // Update the active peer
  window.activePeer = connection.peer;

  // Clear container list before loading new data
  resetContainerList();

  console.log(`[INFO] Switched to connection: ${topicId}`);

  // Start the stats interval
  startStatsInterval();

  sendCommand('listContainers'); // Request containers for the new connection
}


// Attach switchConnection to the global window object
window.switchConnection = switchConnection;

// Send a command to the active peer
function sendCommand(command, args = {}) {
  if (window.activePeer) {
    const message = JSON.stringify({ command, args });
    console.log(`[DEBUG] Sending command to server: ${message}`);
    window.activePeer.write(message);
  } else {
    console.error('[ERROR] No active peer to send command.');
  }
}

// Attach sendCommand to the global window object
window.sendCommand = sendCommand;

// Render the container list
function renderContainers(containers, topicId) {
  if (!window.activePeer || !connections[topicId] || window.activePeer !== connections[topicId].peer) {
    console.warn('[WARN] Active peer mismatch or invalid connection. Skipping container rendering.');
    return;
  }

  console.log(`[INFO] Rendering ${containers.length} containers for topic: ${topicId}`);
  containerList.innerHTML = ''; // Clear the current list

  containers.forEach((container) => {
    const name = container.Names[0]?.replace(/^\//, '') || 'Unknown'; // Avoid undefined Names
    const image = container.Image || '-';
    const containerId = container.Id;
    const ipAddress = container.ipAddress || 'No IP Assigned';
    if (ipAddress === 'No IP Assigned') {
      console.warn(`[WARN] IP address missing for container ${container.Id}. Retrying...`);
      sendCommand('inspectContainer', { id: container.Id });
    }

    const row = document.createElement('tr');
    row.dataset.containerId = containerId; // Store container ID for reference
    row.innerHTML = `
    <td>${name}</td>
    <td>${image}</td>
    <td>${container.State || 'Unknown'}</td>
    <td class="cpu">0</td>
    <td class="memory">0</td>
    <td class="ip-address">${ipAddress}</td>
    <td>
      <div class="btn-group btn-group-sm">
        <button class="btn btn-outline-success action-start p-1" title="Start" ${container.State === 'running' ? 'disabled' : ''}>
          <i class="fas fa-play"></i>
        </button>
        <button class="btn btn-outline-info action-restart p-1" title="Restart" ${container.State !== 'running' ? 'disabled' : ''}>
          <i class="fas fa-redo"></i>
        </button>
        <button class="btn btn-outline-warning action-stop p-1" title="Stop" ${container.State !== 'running' ? 'disabled' : ''}>
          <i class="fas fa-stop"></i>
        </button>
<button class="btn btn-outline-primary action-logs p-1" title="Logs">
  <i class="fas fa-list-alt"></i>
</button>
        <button class="btn btn-outline-primary action-terminal p-1" title="Terminal" ${container.State !== 'running' ? 'disabled' : ''}>
          <i class="fas fa-terminal"></i>
        </button>
        <button class="btn btn-outline-secondary action-duplicate p-1" title="Duplicate">
          <i class="fas fa-clone"></i>
        </button>
        <button class="btn btn-outline-danger action-remove p-1" title="Remove">
          <i class="fas fa-trash"></i>
        </button>
      </div>
    </td>
  `;

    containerList.appendChild(row);
    // Add event listener for duplicate button
    const duplicateBtn = row.querySelector('.action-duplicate');
    duplicateBtn.addEventListener('click', () => openDuplicateModal(container));
    // Add event listeners for action buttons
    addActionListeners(row, container);
  });
}



function addActionListeners(row, container) {
  const startBtn = row.querySelector('.action-start');
  const stopBtn = row.querySelector('.action-stop');
  const removeBtn = row.querySelector('.action-remove');
  const terminalBtn = row.querySelector('.action-terminal');
  const restartBtn = row.querySelector('.action-restart');

  // Start Button
  startBtn.addEventListener('click', async () => {
    showStatusIndicator(`Starting container "${container.Names[0]}"...`);
    sendCommand('startContainer', { id: container.Id });

    const expectedMessageFragment = `Container ${container.Id} started`;

    try {
      const response = await waitForPeerResponse(expectedMessageFragment);
      console.log('[DEBUG] Start container response:', response);

      showAlert('success', response.message);

      // Refresh the container list to update states
      sendCommand('listContainers');

      // Restart stats interval
      startStatsInterval();
    } catch (error) {
      console.error('[ERROR] Failed to start container:', error.message);
      showAlert('danger', error.message || 'Failed to start container.');
    } finally {
      console.log('[DEBUG] Hiding status indicator in startBtn finally block');
      hideStatusIndicator();
    }
  });


  stopBtn.addEventListener('click', async () => {
    showStatusIndicator(`Stopping container "${container.Names[0]}"...`);
    sendCommand('stopContainer', { id: container.Id });

    const expectedMessageFragment = `Container ${container.Id} stopped`;

    try {
      const response = await waitForPeerResponse(expectedMessageFragment);
      console.log('[DEBUG] Stop container response:', response);

      showAlert('success', response.message);

      // Refresh the container list to update states
      sendCommand('listContainers');

      // Restart stats interval
      startStatsInterval();
    } catch (error) {
      console.error('[ERROR] Failed to stop container:', error.message);
      showAlert('danger', error.message || 'Failed to stop container.');
    } finally {
      console.log('[DEBUG] Hiding status indicator in stopBtn finally block');
      hideStatusIndicator();
    }
  });



  // Restart Button
  restartBtn.addEventListener('click', async () => {
    showStatusIndicator(`Restarting container "${container.Names[0]}"...`);
    sendCommand('restartContainer', { id: container.Id });

    const expectedMessageFragment = `Container ${container.Id} restarted`;

    try {
      const response = await waitForPeerResponse(expectedMessageFragment);
      console.log('[DEBUG] Restart container response:', response);

      showAlert('success', response.message);

      // Refresh the container list to update states
      sendCommand('listContainers');
    } catch (error) {
      console.error('[ERROR] Failed to restart container:', error.message);
      showAlert('danger', error.message || 'Failed to restart container.');
    } finally {
      console.log('[DEBUG] Hiding status indicator in restartBtn finally block');
      hideStatusIndicator();
    }
  });

  const logsBtn = row.querySelector('.action-logs');
  logsBtn.addEventListener('click', () => openLogModal(container.Id));

  function openLogModal(containerId) {
    console.log(`[INFO] Opening logs modal for container: ${containerId}`);

    const modal = new bootstrap.Modal(document.getElementById('logsModal'));
    const logContainer = document.getElementById('logs-container');

    // Clear any existing logs
    logContainer.innerHTML = '';

    // Request previous logs
    sendCommand('logs', { id: containerId });

    // Listen for logs
    window.handleLogOutput = (logData) => {
      const logLine = atob(logData.data); // Decode base64 logs
      const logElement = document.createElement('pre');
      logElement.textContent = logLine;
      logContainer.appendChild(logElement);

      // Scroll to the bottom
      logContainer.scrollTop = logContainer.scrollHeight;
    };

    // Show the modal
    modal.show();
  }

  // Remove Button
  removeBtn.addEventListener('click', async () => {
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();

    const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
    confirmDeleteBtn.onclick = async () => {
      deleteModal.hide();

      showStatusIndicator(`Deleting container "${container.Names[0]}"...`);

      // Check if the container has active terminals
      if (window.openTerminals[container.Id]) {
        console.log(`[INFO] Closing active terminals for container: ${container.Id}`);
        window.openTerminals[container.Id].forEach((terminalId) => {
          try {
            cleanUpTerminal(terminalId);
          } catch (err) {
            console.error(`[ERROR] Failed to clean up terminal ${terminalId}: ${err.message}`);
          }
        });
        delete window.openTerminals[container.Id];
      }

      // Hide the terminal modal if it is active
      const terminalModal = document.getElementById('terminal-modal');
      if (terminalModal.style.display === 'flex') {
        console.log(`[INFO] Hiding terminal modal for container: ${container.Id}`);
        terminalModal.style.display = 'none';
      }


      terminalModal.addEventListener('shown.bs.modal', () => {
        terminal.focus();
      });

      sendCommand('removeContainer', { id: container.Id });

      const expectedMessageFragment = `Container ${container.Id} removed`;

      try {
        const response = await waitForPeerResponse(expectedMessageFragment);
        console.log('[DEBUG] Remove container response:', response);

        showAlert('success', response.message);

        // Refresh the container list to update states
        sendCommand('listContainers');
      } catch (error) {
        console.error('[ERROR] Failed to delete container:', error.message);
        showAlert('danger', error.message || `Failed to delete container "${container.Names[0]}".`);
      } finally {
        console.log('[DEBUG] Hiding status indicator in removeBtn finally block');
        hideStatusIndicator();
      }
    };
  });


  terminalBtn.addEventListener('click', () => {
    console.log(`[DEBUG] Opening terminal for container ID: ${container.Id}`);
    try {
      startTerminal(container.Id, container.Names[0] || container.Id);
    } catch (error) {
      console.error(`[ERROR] Failed to start terminal for container ${container.Id}: ${error.message}`);
      showAlert('danger', `Failed to start terminal: ${error.message}`);
    }
  });
}


function updateContainerStats(stats) {
  if (!stats || !stats.id || typeof stats.cpu === 'undefined' || typeof stats.memory === 'undefined') {
    console.error('[ERROR] Invalid stats object:', stats);
    return;
  }

  console.log(`[DEBUG] Updating stats for container ID: ${stats.id}`);

  const row = containerList.querySelector(`tr[data-container-id="${stats.id}"]`);
  if (!row) {
    console.warn(`[WARN] No matching row for container ID: ${stats.id}`);
    return;
  }

  // Ensure the IP address is added or retained from existing row
  const existingIpAddress = row.querySelector('.ip-address')?.textContent || 'No IP Assigned';
  stats.ip = stats.ip || existingIpAddress;

  const smoothed = smoothStats(stats.id, stats);
  updateStatsUI(row, smoothed);
}

function updateStatsUI(row, stats) {
  requestIdleCallback(() => {
    row.querySelector('.cpu').textContent = stats.cpu.toFixed(2) || '0.00';
    row.querySelector('.memory').textContent = (stats.memory / (1024 * 1024)).toFixed(2) || '0.00';
    row.querySelector('.ip-address').textContent = stats.ip;
  });
}


// Function to open the Duplicate Modal with container configurations
function openDuplicateModal(container) {
  console.log(`[INFO] Opening Duplicate Modal for container: ${container.Id}`);

  showStatusIndicator('Fetching container configuration...');

  // Send a command to inspect the container
  sendCommand('inspectContainer', { id: container.Id });

  // Listen for the inspectContainer response
  window.inspectContainerCallback = (config) => {
    hideStatusIndicator();

    if (!config) {
      console.error('[ERROR] Failed to retrieve container configuration.');
      showAlert('danger', 'Failed to retrieve container configuration.');
      return;
    }

    console.log(`[DEBUG] Retrieved container configuration: ${JSON.stringify(config)}`);

    // Parse configuration and populate the modal fields
    try {
      const CPUs = config.HostConfig?.CpusetCpus?.split(',') || [];

      document.getElementById('container-name').value = config.Name.replace(/^\//, '');
      document.getElementById('container-hostname').value = config.Config.Hostname || '';
      document.getElementById('container-image').value = config.Config.Image || '';
      document.getElementById('container-netmode').value = config.HostConfig?.NetworkMode || '';
      document.getElementById('container-cpu').value = CPUs.length || 0;
      document.getElementById('container-memory').value = Math.round(config.HostConfig?.Memory / (1024 * 1024)) || 0;
      document.getElementById('container-config').value = JSON.stringify(config, null, 2);

      // Show the duplicate modal
      duplicateModal.show();
    } catch (error) {
      console.error(`[ERROR] Failed to populate modal fields: ${error.message}`);
      showAlert('danger', 'Failed to populate container configuration fields.');
    }
  };
}


// Handle the Duplicate Container Form Submission
duplicateContainerForm.addEventListener('submit', (e) => {
  e.preventDefault();
  duplicateModal.hide();

  showStatusIndicator('Duplicating container...');

  const name = document.getElementById('container-name').value.trim();
  const hostname = document.getElementById('container-hostname').value.trim();
  const image = document.getElementById('container-image').value.trim();
  const netmode = document.getElementById('container-netmode').value.trim();
  const cpu = document.getElementById('container-cpu').value.trim();
  const memory = document.getElementById('container-memory').value.trim();
  const configJSON = document.getElementById('container-config').value.trim();

  let config;
  try {
    config = JSON.parse(configJSON);
  } catch (err) {
    hideStatusIndicator();
    showAlert('danger', 'Invalid JSON in configuration.');
    return;
  }

  sendCommand('duplicateContainer', { name, image, hostname, netmode, cpu, memory, config });

  // Simulate delay for the demo
  setTimeout(() => {
    hideStatusIndicator();
    showAlert('success', 'Container duplicated successfully!');

    // Refresh container list
    sendCommand('listContainers');
  }, 2000); // Simulated processing time
});


function showWelcomePage() {
  const welcomePage = document.getElementById('welcome-page');
  const dashboard = document.getElementById('dashboard');
  const connectionTitle = document.getElementById('connection-title');

  if (welcomePage) {
    welcomePage.classList.remove('hidden');
  }

  if (dashboard) {
    dashboard.classList.add('hidden');
  }

  if (connectionTitle) {
    connectionTitle.textContent = '';
  } else {
    console.warn('[WARN] Connection title element not found!');
  }
}

function hideWelcomePage() {
  const welcomePage = document.getElementById('welcome-page');
  const dashboard = document.getElementById('dashboard');

  if (welcomePage) {
    console.log('[DEBUG] Hiding welcome page');
    welcomePage.classList.add('hidden'); // Hide the welcome page
  } else {
    console.error('[ERROR] Welcome page element not found!');
  }

  if (dashboard) {
    console.log('[DEBUG] Showing dashboard');
    dashboard.classList.remove('hidden'); // Show the dashboard
  } else {
    console.error('[ERROR] Dashboard element not found!');
  }
}

function assertVisibility() {
  const welcomePage = document.getElementById('welcome-page');
  const dashboard = document.getElementById('dashboard');
  if (Object.keys(connections).length === 0) {
    console.assert(!welcomePage.classList.contains('hidden'), '[ASSERTION FAILED] Welcome page should be visible.');
    console.assert(dashboard.classList.contains('hidden'), '[ASSERTION FAILED] Dashboard should be hidden.');
  } else {
    console.assert(welcomePage.classList.contains('hidden'), '[ASSERTION FAILED] Welcome page should be hidden.');
    console.assert(!dashboard.classList.contains('hidden'), '[ASSERTION FAILED] Dashboard should be visible.');
  }
}
// Attach startTerminal to the global window object
window.startTerminal = startTerminal;

// Handle window unload to clean up swarms and peers
window.addEventListener('beforeunload', () => {
  for (const topicId in connections) {
    const connection = connections[topicId];
    if (connection.peer) {
      connection.peer.destroy();
    }
    if (connection.swarm) {
      connection.swarm.destroy();
    }
  }
});