// Memory Module View
// Three-column layout: Context Hotspots | Memory Graph | Recent Context

// ========== Memory State ==========
var memoryStats = null;
var memoryGraphData = null;
var recentContext = [];
var memoryTimeFilter = 'all'; // 'today', 'week', 'all'
var selectedNode = null;
var activeMemoryEnabled = false;
var activeMemoryStatus = null;
var activeMemoryConfig = {
  interval: 'manual', // manual, 5, 15, 30, 60 (minutes)
  tool: 'gemini'      // gemini, qwen
};
var activeMemorySyncTimer = null; // Timer for automatic periodic sync
var insightsHistory = []; // Insights analysis history
var selectedInsight = null; // Currently selected insight for detail view

// ========== Main Render Function ==========
async function renderMemoryView() {
  var container = document.getElementById('mainContent');
  if (!container) return;

  // Hide stats grid and search for memory view
  var statsGrid = document.getElementById('statsGrid');
  var searchInput = document.getElementById('searchInput');
  if (statsGrid) statsGrid.style.display = 'none';
  if (searchInput) searchInput.parentElement.style.display = 'none';

  // Show loading state
  container.innerHTML = '<div class="memory-view loading">' +
    '<div class="loading-spinner"><i data-lucide="loader-2" class="w-8 h-8 animate-spin"></i></div>' +
    '<p>' + t('common.loading') + '</p>' +
    '</div>';

  // Load data
  await Promise.all([
    loadMemoryStats(),
    loadMemoryGraph(),
    loadRecentContext(),
    loadActiveMemoryStatus(),
    loadInsightsHistory()
  ]);

  // Render layout with Active Memory header
  container.innerHTML = '<div class="memory-view">' +
    '<div class="memory-header">' +
    '<div class="memory-header-left">' +
    '<h2><i data-lucide="brain" class="w-5 h-5"></i> ' + t('memory.title') + '</h2>' +
    '</div>' +
    '<div class="memory-header-right">' +
    renderActiveMemoryControls() +
    '</div>' +
    '</div>' +
    '<div class="memory-columns">' +
    '<div class="memory-column left" id="memory-hotspots"></div>' +
    '<div class="memory-column center" id="memory-graph"></div>' +
    '<div class="memory-column right" id="memory-context"></div>' +
    '</div>' +
    '</div>';

  // Render each column
  renderHotspotsColumn();
  renderGraphColumn();
  renderContextColumn();

  // Initialize Lucide icons
  if (window.lucide) lucide.createIcons();
}

function renderActiveMemoryControls() {
  var html = '<div class="active-memory-controls">' +
    '<div class="active-memory-toggle">' +
    '<span class="toggle-label">' + t('memory.activeMemory') + '</span>' +
    '<label class="toggle-switch">' +
    '<input type="checkbox" id="activeMemorySwitch" ' + (activeMemoryEnabled ? 'checked' : '') + ' onchange="toggleActiveMemory(this.checked)">' +
    '<span class="toggle-slider"></span>' +
    '</label>' +
    (activeMemoryEnabled ? '<span class="toggle-status active"><i data-lucide="zap" class="w-3 h-3"></i> ' + t('memory.active') + '</span>' : '<span class="toggle-status">' + t('memory.inactive') + '</span>') +
    '</div>';

  if (activeMemoryEnabled) {
    var isAutoSync = activeMemoryConfig.interval !== 'manual';
    html += '<div class="active-memory-config">' +
      // Interval selector
      '<div class="config-item">' +
      '<label>' + t('memory.interval') + '</label>' +
      '<select id="activeMemoryInterval" onchange="updateActiveMemoryConfig(\'interval\', this.value)">' +
      '<option value="manual"' + (activeMemoryConfig.interval === 'manual' ? ' selected' : '') + '>' + t('memory.intervalManual') + '</option>' +
      '<option value="5"' + (activeMemoryConfig.interval === '5' ? ' selected' : '') + '>5 ' + t('memory.minutes') + '</option>' +
      '<option value="15"' + (activeMemoryConfig.interval === '15' ? ' selected' : '') + '>15 ' + t('memory.minutes') + '</option>' +
      '<option value="30"' + (activeMemoryConfig.interval === '30' ? ' selected' : '') + '>30 ' + t('memory.minutes') + '</option>' +
      '<option value="60"' + (activeMemoryConfig.interval === '60' ? ' selected' : '') + '>60 ' + t('memory.minutes') + '</option>' +
      '</select>' +
      '</div>' +
      // CLI tool selector
      '<div class="config-item">' +
      '<label>' + t('memory.cliTool') + '</label>' +
      '<select id="activeMemoryCli" onchange="updateActiveMemoryConfig(\'tool\', this.value)">' +
      '<option value="gemini"' + (activeMemoryConfig.tool === 'gemini' ? ' selected' : '') + '>Gemini</option>' +
      '<option value="qwen"' + (activeMemoryConfig.tool === 'qwen' ? ' selected' : '') + '>Qwen</option>' +
      '</select>' +
      '</div>' +
      // Auto-sync indicator
      (isAutoSync ? '<div class="auto-sync-indicator"><i data-lucide="timer" class="w-3 h-3"></i> ' + t('memory.autoSyncActive') + '</div>' : '') +
      '</div>' +
      // Sync button and status
      '<div class="active-memory-actions">' +
      '<button class="btn-icon btn-sync" onclick="syncActiveMemory()" title="' + t('memory.syncNow') + '">' +
      '<i data-lucide="refresh-cw" class="w-4 h-4"></i>' +
      '</button>' +
      (activeMemoryStatus && activeMemoryStatus.lastSync ?
        '<span class="last-sync">' + t('memory.lastSync') + ': ' + formatTimestamp(activeMemoryStatus.lastSync) + '</span>' : '') +
      '</div>';
  }

  html += '</div>';
  return html;
}

// ========== Data Loading ==========
async function loadMemoryStats() {
  try {
    var response = await fetch('/api/memory/stats?filter=' + memoryTimeFilter);
    if (!response.ok) throw new Error('Failed to load memory stats');
    var data = await response.json();
    memoryStats = data.stats || { mostRead: [], mostEdited: [] };
    return memoryStats;
  } catch (err) {
    console.error('Failed to load memory stats:', err);
    memoryStats = { mostRead: [], mostEdited: [] };
    return memoryStats;
  }
}

async function loadMemoryGraph() {
  try {
    var response = await fetch('/api/memory/graph');
    if (!response.ok) throw new Error('Failed to load memory graph');
    var data = await response.json();
    memoryGraphData = data.graph || { nodes: [], edges: [] };
    return memoryGraphData;
  } catch (err) {
    console.error('Failed to load memory graph:', err);
    memoryGraphData = { nodes: [], edges: [] };
    return memoryGraphData;
  }
}

async function loadRecentContext() {
  try {
    var response = await fetch('/api/memory/recent');
    if (!response.ok) throw new Error('Failed to load recent context');
    var data = await response.json();
    recentContext = data.recent || [];
    return recentContext;
  } catch (err) {
    console.error('Failed to load recent context:', err);
    recentContext = [];
    return [];
  }
}

async function loadInsightsHistory() {
  try {
    var response = await fetch('/api/memory/insights?limit=10');
    if (!response.ok) throw new Error('Failed to load insights history');
    var data = await response.json();
    insightsHistory = data.insights || [];
    return insightsHistory;
  } catch (err) {
    console.error('Failed to load insights history:', err);
    insightsHistory = [];
    return [];
  }
}

// ========== Active Memory Functions ==========
// Timer management for automatic sync
function startActiveMemorySyncTimer() {
  // Clear any existing timer
  stopActiveMemorySyncTimer();

  // Only start timer if interval is not manual
  if (activeMemoryConfig.interval === 'manual' || !activeMemoryEnabled) {
    return;
  }

  var intervalMs = parseInt(activeMemoryConfig.interval, 10) * 60 * 1000; // Convert minutes to ms
  console.log('[ActiveMemory] Starting auto-sync timer:', activeMemoryConfig.interval, 'minutes');

  activeMemorySyncTimer = setInterval(function() {
    console.log('[ActiveMemory] Auto-sync triggered');
    syncActiveMemory();
  }, intervalMs);
}

function stopActiveMemorySyncTimer() {
  if (activeMemorySyncTimer) {
    console.log('[ActiveMemory] Stopping auto-sync timer');
    clearInterval(activeMemorySyncTimer);
    activeMemorySyncTimer = null;
  }
}

async function loadActiveMemoryStatus() {
  try {
    var response = await fetch('/api/memory/active/status');
    if (!response.ok) throw new Error('Failed to load active memory status');
    var data = await response.json();
    activeMemoryEnabled = data.enabled || false;
    activeMemoryStatus = data.status || null;
    // Load config if available
    if (data.config) {
      activeMemoryConfig = Object.assign(activeMemoryConfig, data.config);
    }

    // Start timer if active memory is enabled and interval is not manual
    if (activeMemoryEnabled && activeMemoryConfig.interval !== 'manual') {
      startActiveMemorySyncTimer();
    }

    return data;
  } catch (err) {
    console.error('Failed to load active memory status:', err);
    activeMemoryEnabled = false;
    activeMemoryStatus = null;
    return { enabled: false };
  }
}

async function toggleActiveMemory(enabled) {
  try {
    var response = await fetch('/api/memory/active/toggle', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        enabled: enabled,
        config: activeMemoryConfig
      })
    });
    if (!response.ok) throw new Error('Failed to toggle active memory');
    var data = await response.json();
    activeMemoryEnabled = data.enabled;

    // Manage auto-sync timer based on enabled state
    if (activeMemoryEnabled) {
      startActiveMemorySyncTimer();
    } else {
      stopActiveMemorySyncTimer();
    }

    // Show notification
    if (window.showToast) {
      showToast(enabled ? t('memory.activeMemoryEnabled') : t('memory.activeMemoryDisabled'), 'success');
    }

    // Re-render the view to update UI
    renderMemoryView();
  } catch (err) {
    console.error('Failed to toggle active memory:', err);
    if (window.showToast) {
      showToast(t('memory.activeMemoryError'), 'error');
    }
    // Revert checkbox state
    var checkbox = document.getElementById('activeMemorySwitch');
    if (checkbox) checkbox.checked = !enabled;
  }
}

async function updateActiveMemoryConfig(key, value) {
  activeMemoryConfig[key] = value;

  try {
    var response = await fetch('/api/memory/active/config', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ config: activeMemoryConfig })
    });
    if (!response.ok) throw new Error('Failed to update config');

    // Restart timer if interval changed and active memory is enabled
    if (key === 'interval' && activeMemoryEnabled) {
      startActiveMemorySyncTimer();
    }

    if (window.showToast) {
      showToast(t('memory.configUpdated'), 'success');
    }
  } catch (err) {
    console.error('Failed to update active memory config:', err);
    if (window.showToast) {
      showToast(t('memory.configError'), 'error');
    }
  }
}

async function syncActiveMemory() {
  var syncBtn = document.querySelector('.btn-sync');
  if (syncBtn) {
    syncBtn.classList.add('syncing');
    syncBtn.disabled = true;
  }

  try {
    var response = await fetch('/api/memory/active/sync', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        tool: activeMemoryConfig.tool
      })
    });
    if (!response.ok) throw new Error('Failed to sync active memory');
    var data = await response.json();

    if (window.showToast) {
      showToast(t('memory.syncComplete') + ' (' + (data.filesAnalyzed || 0) + ' ' + t('memory.filesAnalyzed') + ')', 'success');
    }

    // Refresh data and update last sync time
    await loadActiveMemoryStatus();
    // Update last sync display without full re-render
    var lastSyncEl = document.querySelector('.last-sync');
    if (lastSyncEl && activeMemoryStatus && activeMemoryStatus.lastSync) {
      lastSyncEl.textContent = t('memory.lastSync') + ': ' + formatTimestamp(activeMemoryStatus.lastSync);
    }
  } catch (err) {
    console.error('Failed to sync active memory:', err);
    if (window.showToast) {
      showToast(t('memory.syncError'), 'error');
    }
  } finally {
    if (syncBtn) {
      syncBtn.classList.remove('syncing');
      syncBtn.disabled = false;
    }
  }
}

// ========== Left Column: Context Hotspots ==========
function renderHotspotsColumn() {
  var container = document.getElementById('memory-hotspots');
  if (!container) return;

  var mostRead = memoryStats.mostRead || [];
  var mostEdited = memoryStats.mostEdited || [];
  var mostMentioned = memoryStats.mostMentioned || [];

  container.innerHTML = '<div class="memory-section">' +
    '<div class="section-header">' +
    '<div class="section-header-left">' +
    '<h3><i data-lucide="flame" class="w-4 h-4"></i> ' + t('memory.contextHotspots') + '</h3>' +
    '</div>' +
    '<div class="section-header-actions">' +
    '<button class="btn-icon" onclick="refreshMemoryData()" title="' + t('common.refresh') + '">' +
    '<i data-lucide="refresh-cw" class="w-4 h-4"></i>' +
    '</button>' +
    '</div>' +
    '</div>' +
    '<div class="memory-filters">' +
    '<button class="filter-btn ' + (memoryTimeFilter === 'today' ? 'active' : '') + '" onclick="setMemoryTimeFilter(\'today\')">' + t('memory.today') + '</button>' +
    '<button class="filter-btn ' + (memoryTimeFilter === 'week' ? 'active' : '') + '" onclick="setMemoryTimeFilter(\'week\')">' + t('memory.week') + '</button>' +
    '<button class="filter-btn ' + (memoryTimeFilter === 'all' ? 'active' : '') + '" onclick="setMemoryTimeFilter(\'all\')">' + t('memory.allTime') + '</button>' +
    '</div>' +
    '<div class="hotspot-lists">' +
    '<div class="hotspot-list-container">' +
    '<h4 class="hotspot-list-title"><i data-lucide="eye" class="w-3.5 h-3.5"></i> ' + t('memory.mostRead') + '</h4>' +
    renderHotspotList(mostRead, 'read') +
    '</div>' +
    '<div class="hotspot-list-container">' +
    '<h4 class="hotspot-list-title"><i data-lucide="pencil" class="w-3.5 h-3.5"></i> ' + t('memory.mostEdited') + '</h4>' +
    renderHotspotList(mostEdited, 'edit') +
    '</div>' +
    '<div class="hotspot-list-container">' +
    '<h4 class="hotspot-list-title"><i data-lucide="message-circle" class="w-3.5 h-3.5"></i> ' + t('memory.mostMentioned') + '</h4>' +
    renderTopicList(mostMentioned) +
    '</div>' +
    '</div>' +
    '</div>';

  if (window.lucide) lucide.createIcons();
}

function renderHotspotList(items, type) {
  if (!items || items.length === 0) {
    return '<div class="hotspot-empty">' +
      '<i data-lucide="inbox" class="w-5 h-5"></i>' +
      '<p>' + t('memory.noData') + '</p>' +
      '</div>';
  }

  return '<div class="hotspot-list">' +
    items.map(function(item, index) {
      var heat = item.heat || item.count || 0;
      var heatClass = heat > 50 ? 'high' : heat > 20 ? 'medium' : 'low';
      var path = item.path || item.file || 'Unknown';
      var fileName = path.split('/').pop().split('\\').pop();

      return '<div class="hotspot-item" onclick="highlightNode(\'' + escapeHtml(path) + '\')">' +
        '<div class="hotspot-rank">' + (index + 1) + '</div>' +
        '<div class="hotspot-info">' +
        '<div class="hotspot-name" title="' + escapeHtml(path) + '">' + escapeHtml(fileName) + '</div>' +
        '<div class="hotspot-path">' + escapeHtml(path.substring(0, path.lastIndexOf(fileName))) + '</div>' +
        '</div>' +
        '<div class="hotspot-heat ' + heatClass + '">' +
        '<span class="heat-badge">' + heat + '</span>' +
        '<i data-lucide="' + (type === 'read' ? 'eye' : 'pencil') + '" class="w-3 h-3"></i>' +
        '</div>' +
        '</div>';
    }).join('') +
    '</div>';
}

function renderTopicList(items) {
  if (!items || items.length === 0) {
    return '<div class="hotspot-empty">' +
      '<i data-lucide="inbox" class="w-5 h-5"></i>' +
      '<p>' + t('memory.noData') + '</p>' +
      '</div>';
  }

  return '<div class="hotspot-list topic-list">' +
    items.map(function(item, index) {
      var heat = item.heat || item.count || 0;
      var heatClass = heat > 10 ? 'high' : heat > 5 ? 'medium' : 'low';
      var preview = item.preview || item.topic || 'Unknown';

      return '<div class="hotspot-item topic-item">' +
        '<div class="hotspot-rank">' + (index + 1) + '</div>' +
        '<div class="hotspot-info">' +
        '<div class="hotspot-name topic-preview" title="' + escapeHtml(item.topic || '') + '">' + escapeHtml(preview) + '</div>' +
        '</div>' +
        '<div class="hotspot-heat ' + heatClass + '">' +
        '<span class="heat-badge">' + heat + '</span>' +
        '<i data-lucide="message-circle" class="w-3 h-3"></i>' +
        '</div>' +
        '</div>';
    }).join('') +
    '</div>';
}

// ========== Center Column: Memory Graph ==========
// Store graph state for zoom/pan
var graphZoom = null;
var graphSvg = null;
var graphGroup = null;
var graphSimulation = null;

function renderGraphColumn() {
  var container = document.getElementById('memory-graph');
  if (!container) return;

  container.innerHTML = '<div class="memory-section">' +
    '<div class="section-header">' +
    '<div class="section-header-left">' +
    '<h3><i data-lucide="network" class="w-4 h-4"></i> ' + t('memory.memoryGraph') + '</h3>' +
    '<span class="section-count">' + (memoryGraphData.nodes || []).length + ' ' + t('memory.nodes') + '</span>' +
    '</div>' +
    '<div class="section-header-actions graph-controls">' +
    '<button class="btn-icon" onclick="zoomGraphIn()" title="' + t('memory.zoomIn') + '">' +
    '<i data-lucide="zoom-in" class="w-4 h-4"></i>' +
    '</button>' +
    '<button class="btn-icon" onclick="zoomGraphOut()" title="' + t('memory.zoomOut') + '">' +
    '<i data-lucide="zoom-out" class="w-4 h-4"></i>' +
    '</button>' +
    '<button class="btn-icon" onclick="fitGraphToView()" title="' + t('memory.fitView') + '">' +
    '<i data-lucide="maximize-2" class="w-4 h-4"></i>' +
    '</button>' +
    '<button class="btn-icon" onclick="resetGraphView()" title="' + t('memory.resetView') + '">' +
    '<i data-lucide="refresh-cw" class="w-4 h-4"></i>' +
    '</button>' +
    '</div>' +
    '</div>' +
    '<div class="memory-graph-container" id="memoryGraphSvg"></div>' +
    '<div class="memory-graph-legend">' +
    '<div class="legend-item"><span class="legend-dot file"></span> ' + t('memory.file') + '</div>' +
    '<div class="legend-item"><span class="legend-dot module"></span> ' + t('memory.module') + '</div>' +
    '<div class="legend-item"><span class="legend-dot component"></span> ' + t('memory.component') + '</div>' +
    '</div>' +
    '</div>';

  // Render D3 graph
  renderMemoryGraph(memoryGraphData);

  if (window.lucide) lucide.createIcons();
}

function renderMemoryGraph(graphData) {
  if (!graphData || !graphData.nodes || graphData.nodes.length === 0) {
    var container = document.getElementById('memoryGraphSvg');
    if (container) {
      container.innerHTML = '<div class="graph-empty-state">' +
        '<i data-lucide="network" class="w-8 h-8"></i>' +
        '<p>' + t('memory.noGraphData') + '</p>' +
        '</div>';
      if (window.lucide) lucide.createIcons();
    }
    return;
  }

  // Check if D3 is available
  if (typeof d3 === 'undefined') {
    var container = document.getElementById('memoryGraphSvg');
    if (container) {
      container.innerHTML = '<div class="graph-error">' +
        '<i data-lucide="alert-triangle" class="w-6 h-6"></i>' +
        '<p>' + t('memory.d3NotLoaded') + '</p>' +
        '</div>';
      if (window.lucide) lucide.createIcons();
    }
    return;
  }

  var container = document.getElementById('memoryGraphSvg');
  if (!container) return;

  var width = container.clientWidth || 600;
  var height = container.clientHeight || 400;

  // Clear existing
  container.innerHTML = '';

  // Filter and clean nodes - remove invalid names (like JSON data)
  var cleanNodes = graphData.nodes.filter(function(node) {
    var name = node.name || node.id || '';
    // Filter out JSON-like data, error messages, and very long strings
    if (name.length > 100) return false;
    if (name.includes('"status"') || name.includes('"content"')) return false;
    if (name.includes('"todos"') || name.includes('"activeForm"')) return false;
    if (name.startsWith('{') || name.startsWith('[')) return false;
    // Allow all valid node types: file, module, component
    return true;
  }).map(function(node) {
    // Truncate long names for display
    var displayName = node.name || node.id || 'Unknown';
    if (displayName.length > 25) {
      displayName = displayName.substring(0, 22) + '...';
    }
    return Object.assign({}, node, { displayName: displayName });
  });

  // Filter edges to only include valid nodes
  var nodeIds = new Set(cleanNodes.map(function(n) { return n.id; }));
  var cleanEdges = graphData.edges.filter(function(edge) {
    var sourceId = typeof edge.source === 'object' ? edge.source.id : edge.source;
    var targetId = typeof edge.target === 'object' ? edge.target.id : edge.target;
    return nodeIds.has(sourceId) && nodeIds.has(targetId);
  });

  // Create SVG with zoom support
  graphSvg = d3.select('#memoryGraphSvg')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .attr('class', 'memory-graph-svg')
    .attr('viewBox', [0, 0, width, height]);

  // Create a group for zoom/pan transformations
  graphGroup = graphSvg.append('g').attr('class', 'graph-content');

  // Setup zoom behavior
  graphZoom = d3.zoom()
    .scaleExtent([0.1, 4])
    .on('zoom', function(event) {
      graphGroup.attr('transform', event.transform);
    });

  graphSvg.call(graphZoom);

  // Create force simulation
  graphSimulation = d3.forceSimulation(cleanNodes)
    .force('link', d3.forceLink(cleanEdges).id(function(d) { return d.id; }).distance(80))
    .force('charge', d3.forceManyBody().strength(-200))
    .force('center', d3.forceCenter(width / 2, height / 2))
    .force('collision', d3.forceCollide().radius(function(d) { return Math.max(15, (d.heat || 10) + 10); }))
    .force('x', d3.forceX(width / 2).strength(0.05))
    .force('y', d3.forceY(height / 2).strength(0.05));

  // Draw edges
  var link = graphGroup.append('g')
    .attr('class', 'graph-links')
    .selectAll('line')
    .data(cleanEdges)
    .enter()
    .append('line')
    .attr('class', 'graph-edge')
    .attr('stroke-width', function(d) { return Math.sqrt(d.weight || 1); });

  // Draw nodes
  var node = graphGroup.append('g')
    .attr('class', 'graph-nodes')
    .selectAll('g')
    .data(cleanNodes)
    .enter()
    .append('g')
    .attr('class', function(d) { return 'graph-node-group ' + (d.type || 'file'); })
    .call(d3.drag()
      .on('start', dragstarted)
      .on('drag', dragged)
      .on('end', dragended))
    .on('click', function(event, d) {
      event.stopPropagation();
      selectNode(d);
    });

  // Add circles to nodes
  node.append('circle')
    .attr('class', function(d) { return 'graph-node ' + (d.type || 'file'); })
    .attr('r', function(d) { return Math.max(8, Math.min(20, (d.heat || 10))); })
    .attr('data-id', function(d) { return d.id; });

  // Add labels to nodes
  node.append('text')
    .attr('class', 'graph-label')
    .text(function(d) {
      // Show file count for modules
      if (d.type === 'module' && d.fileCount) {
        return d.displayName + ' (' + d.fileCount + ')';
      }
      return d.displayName;
    })
    .attr('x', function(d) { return Math.max(10, (d.heat || 10)) + 4; })
    .attr('y', 4)
    .attr('font-size', '11px');

  // Update positions on simulation tick
  graphSimulation.on('tick', function() {
    link
      .attr('x1', function(d) { return d.source.x; })
      .attr('y1', function(d) { return d.source.y; })
      .attr('x2', function(d) { return d.target.x; })
      .attr('y2', function(d) { return d.target.y; });

    node.attr('transform', function(d) {
      return 'translate(' + d.x + ',' + d.y + ')';
    });
  });

  // Auto-fit after simulation stabilizes
  graphSimulation.on('end', function() {
    fitGraphToView();
  });

  // Also fit after initial layout
  setTimeout(function() {
    fitGraphToView();
  }, 1000);

  // Drag functions
  function dragstarted(event, d) {
    if (!event.active) graphSimulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(event, d) {
    d.fx = event.x;
    d.fy = event.y;
  }

  function dragended(event, d) {
    if (!event.active) graphSimulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
}

// ========== Graph Zoom Controls ==========
function zoomGraphIn() {
  if (graphSvg && graphZoom) {
    graphSvg.transition().duration(300).call(graphZoom.scaleBy, 1.3);
  }
}

function zoomGraphOut() {
  if (graphSvg && graphZoom) {
    graphSvg.transition().duration(300).call(graphZoom.scaleBy, 0.7);
  }
}

function fitGraphToView() {
  if (!graphSvg || !graphGroup || !graphZoom) return;

  var container = document.getElementById('memoryGraphSvg');
  if (!container) return;

  var width = container.clientWidth || 600;
  var height = container.clientHeight || 400;

  // Get the bounds of all nodes
  var bounds = graphGroup.node().getBBox();
  if (bounds.width === 0 || bounds.height === 0) return;

  // Calculate scale to fit with padding
  var padding = 40;
  var scale = Math.min(
    (width - padding * 2) / bounds.width,
    (height - padding * 2) / bounds.height
  );
  scale = Math.min(Math.max(scale, 0.2), 2); // Clamp scale between 0.2 and 2

  // Calculate translation to center
  var tx = (width - bounds.width * scale) / 2 - bounds.x * scale;
  var ty = (height - bounds.height * scale) / 2 - bounds.y * scale;

  // Apply transform with animation
  graphSvg.transition()
    .duration(500)
    .call(graphZoom.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
}

function centerGraphOnNode(nodeId) {
  if (!graphSvg || !graphGroup || !graphZoom) return;

  var container = document.getElementById('memoryGraphSvg');
  if (!container) return;

  var width = container.clientWidth || 600;
  var height = container.clientHeight || 400;

  // Find the node
  var nodeData = null;
  graphGroup.selectAll('.graph-node-group').each(function(d) {
    if (d.id === nodeId) nodeData = d;
  });

  if (!nodeData || nodeData.x === undefined) return;

  // Calculate translation to center on node
  var scale = 1.2;
  var tx = width / 2 - nodeData.x * scale;
  var ty = height / 2 - nodeData.y * scale;

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

function selectNode(node) {
  selectedNode = node;

  // Highlight in graph
  if (graphGroup) {
    graphGroup.selectAll('.graph-node').classed('selected', false);
    graphGroup.selectAll('.graph-node[data-id="' + node.id + '"]').classed('selected', true);
  }

  // Center graph on selected node
  centerGraphOnNode(node.id);

  // Show node details in context column
  showNodeDetails(node);
}

function highlightNode(path) {
  var node = memoryGraphData.nodes.find(function(n) { return n.path === path || n.id === path; });
  if (node) {
    selectNode(node);
  }
}

function resetGraphView() {
  selectedNode = null;
  if (graphGroup) {
    graphGroup.selectAll('.graph-node').classed('selected', false);
  }
  fitGraphToView();
  renderContextColumn();
}

// ========== Right Column: Recent Context ==========
function renderContextColumn() {
  var container = document.getElementById('memory-context');
  if (!container) return;

  if (selectedNode) {
    showNodeDetails(selectedNode);
    return;
  }

  container.innerHTML = '<div class="memory-section">' +
    '<div class="section-header">' +
    '<div class="section-header-left">' +
    '<h3><i data-lucide="clock" class="w-4 h-4"></i> ' + t('memory.recentContext') + '</h3>' +
    '<span class="section-count">' + recentContext.length + ' ' + t('memory.activities') + '</span>' +
    '</div>' +
    '</div>' +
    '<div class="context-search">' +
    '<input type="text" id="contextSearchInput" class="context-search-input" placeholder="' + t('memory.searchContext') + '" onkeyup="filterRecentContext(this.value)">' +
    '<i data-lucide="search" class="w-4 h-4 search-icon"></i>' +
    '</div>' +
    renderContextTimeline(recentContext) +
    renderContextStats() +
    '</div>';

  if (window.lucide) lucide.createIcons();
}

function renderContextTimeline(prompts) {
  if (!prompts || prompts.length === 0) {
    return '<div class="context-empty">' +
      '<i data-lucide="inbox" class="w-6 h-6"></i>' +
      '<p>' + t('memory.noRecentActivity') + '</p>' +
      '</div>';
  }

  return '<div class="context-timeline">' +
    prompts.map(function(item, index) {
      var timestamp = item.timestamp ? formatTimestamp(item.timestamp) : 'Unknown time';
      var type = item.type || 'unknown';
      var typeIcon = type === 'read' ? 'eye' : type === 'write' ? 'pencil' : type === 'edit' ? 'pencil' : 'file-text';
      var files = item.files || [];
      var description = item.prompt || item.description || 'No description';

      return '<div class="timeline-item" data-index="' + index + '" onclick="toggleTimelineItem(this)">' +
        '<div class="timeline-icon ' + type + '">' +
        '<i data-lucide="' + typeIcon + '" class="w-3.5 h-3.5"></i>' +
        '</div>' +
        '<div class="timeline-content">' +
        '<div class="timeline-header">' +
        '<span class="timeline-type">' + escapeHtml(type.charAt(0).toUpperCase() + type.slice(1)) + '</span>' +
        '<span class="timeline-time">' + timestamp + '</span>' +
        '</div>' +
        '<div class="timeline-prompt">' + escapeHtml(description) + '</div>' +
        (files.length > 0 ? '<div class="timeline-files">' +
          files.map(function(f) {
            return '<span class="file-tag" onclick="event.stopPropagation(); highlightNode(\'' + escapeHtml(f) + '\')">' +
              '<i data-lucide="file" class="w-3 h-3"></i> ' + escapeHtml(f.split('/').pop().split('\\').pop()) +
              '</span>';
          }).join('') +
          '</div>' : '') +
        '</div>' +
        '</div>';
    }).join('') +
    '</div>';
}

/**
 * Toggle timeline item expansion
 */
function toggleTimelineItem(element) {
  element.classList.toggle('expanded');
}

function renderContextStats() {
  var totalReads = recentContext.filter(function(c) { return c.type === 'read'; }).length;
  var totalEdits = recentContext.filter(function(c) { return c.type === 'edit' || c.type === 'write'; }).length;
  var totalMentions = recentContext.filter(function(c) { return c.type === 'mention'; }).length;

  return '<div class="context-stats">' +
    '<div class="context-stat-item">' +
    '<i data-lucide="eye" class="w-4 h-4"></i>' +
    '<span class="stat-label">' + t('memory.reads') + '</span>' +
    '<span class="stat-value">' + totalReads + '</span>' +
    '</div>' +
    '<div class="context-stat-item">' +
    '<i data-lucide="pencil" class="w-4 h-4"></i>' +
    '<span class="stat-label">' + t('memory.edits') + '</span>' +
    '<span class="stat-value">' + totalEdits + '</span>' +
    '</div>' +
    '<div class="context-stat-item">' +
    '<i data-lucide="message-square" class="w-4 h-4"></i>' +
    '<span class="stat-label">' + t('memory.mentions') + '</span>' +
    '<span class="stat-value">' + totalMentions + '</span>' +
    '</div>' +
    '</div>';
}

function showNodeDetails(node) {
  var container = document.getElementById('memory-context');
  if (!container) return;

  var associations = memoryGraphData.edges
    .filter(function(e) { return e.source.id === node.id || e.target.id === node.id; })
    .map(function(e) {
      var other = e.source.id === node.id ? e.target : e.source;
      return { node: other, weight: e.weight || 1 };
    })
    .sort(function(a, b) { return b.weight - a.weight; });

  container.innerHTML = '<div class="memory-section">' +
    '<div class="section-header">' +
    '<div class="section-header-left">' +
    '<h3><i data-lucide="info" class="w-4 h-4"></i> ' + t('memory.nodeDetails') + '</h3>' +
    '</div>' +
    '<div class="section-header-actions">' +
    '<button class="btn-icon" onclick="resetGraphView()" title="' + t('common.close') + '">' +
    '<i data-lucide="x" class="w-4 h-4"></i>' +
    '</button>' +
    '</div>' +
    '</div>' +
    '<div class="node-details">' +
    '<div class="node-detail-header">' +
    '<div class="node-detail-icon ' + (node.type || 'file') + '">' +
    '<i data-lucide="' + (node.type === 'module' ? 'package' : node.type === 'component' ? 'box' : 'file') + '" class="w-5 h-5"></i>' +
    '</div>' +
    '<div class="node-detail-info">' +
    '<div class="node-detail-name">' + escapeHtml(node.name || node.id) + '</div>' +
    '<div class="node-detail-path">' + escapeHtml(node.path || node.id) + '</div>' +
    '</div>' +
    '</div>' +
    '<div class="node-detail-stats">' +
    '<div class="detail-stat">' +
    '<span class="detail-stat-label">' + t('memory.heat') + '</span>' +
    '<span class="detail-stat-value">' + (node.heat || 0) + '</span>' +
    '</div>' +
    '<div class="detail-stat">' +
    '<span class="detail-stat-label">' + t('memory.associations') + '</span>' +
    '<span class="detail-stat-value">' + associations.length + '</span>' +
    '</div>' +
    '<div class="detail-stat">' +
    '<span class="detail-stat-label">' + t('memory.type') + '</span>' +
    '<span class="detail-stat-value">' + (node.type || 'file') + '</span>' +
    '</div>' +
    '</div>' +
    (associations.length > 0 ? '<div class="node-associations">' +
      '<h4 class="associations-title">' + t('memory.relatedNodes') + '</h4>' +
      '<div class="associations-list">' +
      associations.slice(0, 10).map(function(a) {
        return '<div class="association-item" onclick="selectNode(' + JSON.stringify(a.node).replace(/"/g, '&quot;') + ')">' +
          '<div class="association-node">' +
          '<i data-lucide="' + (a.node.type === 'module' ? 'package' : a.node.type === 'component' ? 'box' : 'file') + '" class="w-3.5 h-3.5"></i>' +
          '<span>' + escapeHtml(a.node.name || a.node.id) + '</span>' +
          '</div>' +
          '<div class="association-weight">' + a.weight + '</div>' +
          '</div>';
      }).join('') +
      (associations.length > 10 ? '<div class="associations-more">+' + (associations.length - 10) + ' more</div>' : '') +
      '</div>' +
      '</div>' : '<div class="node-no-associations">' + t('memory.noAssociations') + '</div>') +
    '</div>' +
    '</div>';

  if (window.lucide) lucide.createIcons();
}

// ========== Insights Section ==========
function renderInsightsSection() {
  var container = document.getElementById('memory-insights');
  if (!container) return;

  container.innerHTML = '<div class="insights-section">' +
    '<div class="section-header">' +
    '<div class="section-header-left">' +
    '<h3><i data-lucide="lightbulb" class="w-4 h-4"></i> ' + t('memory.insightsHistory') + '</h3>' +
    '<span class="section-count">' + insightsHistory.length + ' ' + t('memory.analyses') + '</span>' +
    '</div>' +
    '<div class="section-header-actions">' +
    '<button class="btn-icon" onclick="refreshInsightsHistory()" title="' + t('common.refresh') + '">' +
    '<i data-lucide="refresh-cw" class="w-4 h-4"></i>' +
    '</button>' +
    '</div>' +
    '</div>' +
    '<div class="insights-cards-container">' +
    renderInsightsCards() +
    '</div>' +
    (selectedInsight ? '<div class="insight-detail-panel" id="insightDetailPanel">' + renderInsightDetail(selectedInsight) + '</div>' : '') +
    '</div>';

  if (window.lucide) lucide.createIcons();
}

function renderInsightsCards() {
  if (!insightsHistory || insightsHistory.length === 0) {
    return '<div class="insights-empty">' +
      '<i data-lucide="lightbulb-off" class="w-8 h-8"></i>' +
      '<p>' + t('memory.noInsightsYet') + '</p>' +
      '<p class="insights-empty-hint">' + t('memory.triggerAnalysis') + '</p>' +
      '</div>';
  }

  return '<div class="insights-cards">' +
    insightsHistory.map(function(insight) {
      var patternCount = (insight.patterns || []).length;
      var suggestionCount = (insight.suggestions || []).length;
      var severity = getInsightSeverity(insight.patterns);
      var date = new Date(insight.created_at);
      var timeAgo = formatTimestamp(insight.created_at);

      return '<div class="insight-card ' + severity + '" onclick="showInsightDetail(\'' + insight.id + '\')">' +
        '<div class="insight-card-header">' +
        '<div class="insight-card-tool">' +
        '<i data-lucide="' + getToolIcon(insight.tool) + '" class="w-4 h-4"></i>' +
        '<span>' + insight.tool + '</span>' +
        '</div>' +
        '<div class="insight-card-time">' + timeAgo + '</div>' +
        '</div>' +
        '<div class="insight-card-stats">' +
        '<div class="insight-stat">' +
        '<span class="insight-stat-value">' + patternCount + '</span>' +
        '<span class="insight-stat-label">' + t('memory.patterns') + '</span>' +
        '</div>' +
        '<div class="insight-stat">' +
        '<span class="insight-stat-value">' + suggestionCount + '</span>' +
        '<span class="insight-stat-label">' + t('memory.suggestions') + '</span>' +
        '</div>' +
        '<div class="insight-stat">' +
        '<span class="insight-stat-value">' + insight.prompt_count + '</span>' +
        '<span class="insight-stat-label">' + t('memory.prompts') + '</span>' +
        '</div>' +
        '</div>' +
        '<div class="insight-card-preview">' +
        (insight.patterns && insight.patterns.length > 0 ?
          '<div class="pattern-preview ' + (insight.patterns[0].severity || 'low') + '">' +
          '<span class="pattern-type">' + escapeHtml(insight.patterns[0].type || 'pattern') + '</span>' +
          '<span class="pattern-desc">' + escapeHtml((insight.patterns[0].description || '').substring(0, 60)) + '...</span>' +
          '</div>' : '') +
        '</div>' +
        '</div>';
    }).join('') +
    '</div>';
}

function getInsightSeverity(patterns) {
  if (!patterns || patterns.length === 0) return 'low';
  var hasHigh = patterns.some(function(p) { return p.severity === 'high'; });
  var hasMedium = patterns.some(function(p) { return p.severity === 'medium'; });
  return hasHigh ? 'high' : (hasMedium ? 'medium' : 'low');
}

function getToolIcon(tool) {
  switch(tool) {
    case 'gemini': return 'sparkles';
    case 'qwen': return 'bot';
    case 'codex': return 'code-2';
    default: return 'cpu';
  }
}

async function showInsightDetail(insightId) {
  try {
    var response = await fetch('/api/memory/insights/' + insightId);
    if (!response.ok) throw new Error('Failed to load insight detail');
    var data = await response.json();
    selectedInsight = data.insight;
    renderInsightsSection();
  } catch (err) {
    console.error('Failed to load insight detail:', err);
    if (window.showToast) {
      showToast(t('memory.loadInsightError'), 'error');
    }
  }
}

function closeInsightDetail() {
  selectedInsight = null;
  renderInsightsSection();
}

function renderInsightDetail(insight) {
  if (!insight) return '';

  var html = '<div class="insight-detail">' +
    '<div class="insight-detail-header">' +
    '<h4><i data-lucide="lightbulb" class="w-4 h-4"></i> ' + t('memory.insightDetail') + '</h4>' +
    '<button class="btn-icon" onclick="closeInsightDetail()" title="' + t('common.close') + '">' +
    '<i data-lucide="x" class="w-4 h-4"></i>' +
    '</button>' +
    '</div>' +
    '<div class="insight-detail-meta">' +
    '<span><i data-lucide="' + getToolIcon(insight.tool) + '" class="w-3 h-3"></i> ' + insight.tool + '</span>' +
    '<span><i data-lucide="clock" class="w-3 h-3"></i> ' + formatTimestamp(insight.created_at) + '</span>' +
    '<span><i data-lucide="file-text" class="w-3 h-3"></i> ' + insight.prompt_count + ' ' + t('memory.promptsAnalyzed') + '</span>' +
    '</div>';

  // Patterns
  if (insight.patterns && insight.patterns.length > 0) {
    html += '<div class="insight-patterns">' +
      '<h5><i data-lucide="alert-triangle" class="w-3.5 h-3.5"></i> ' + t('memory.patternsFound') + ' (' + insight.patterns.length + ')</h5>' +
      '<div class="patterns-list">' +
      insight.patterns.map(function(p) {
        return '<div class="pattern-item ' + (p.severity || 'low') + '">' +
          '<div class="pattern-header">' +
          '<span class="pattern-type-badge">' + escapeHtml(p.type || 'pattern') + '</span>' +
          '<span class="pattern-severity">' + (p.severity || 'low') + '</span>' +
          (p.occurrences ? '<span class="pattern-occurrences">' + p.occurrences + 'x</span>' : '') +
          '</div>' +
          '<div class="pattern-description">' + escapeHtml(p.description || '') + '</div>' +
          (p.suggestion ? '<div class="pattern-suggestion"><i data-lucide="arrow-right" class="w-3 h-3"></i> ' + escapeHtml(p.suggestion) + '</div>' : '') +
          '</div>';
      }).join('') +
      '</div>' +
      '</div>';
  }

  // Suggestions
  if (insight.suggestions && insight.suggestions.length > 0) {
    html += '<div class="insight-suggestions">' +
      '<h5><i data-lucide="lightbulb" class="w-3.5 h-3.5"></i> ' + t('memory.suggestionsProvided') + ' (' + insight.suggestions.length + ')</h5>' +
      '<div class="suggestions-list">' +
      insight.suggestions.map(function(s) {
        return '<div class="suggestion-item">' +
          '<div class="suggestion-title">' + escapeHtml(s.title || '') + '</div>' +
          '<div class="suggestion-description">' + escapeHtml(s.description || '') + '</div>' +
          (s.example ? '<div class="suggestion-example"><code>' + escapeHtml(s.example) + '</code></div>' : '') +
          '</div>';
      }).join('') +
      '</div>' +
      '</div>';
  }

  html += '<div class="insight-detail-actions">' +
    '<button class="btn btn-sm btn-danger" onclick="deleteInsight(\'' + insight.id + '\')">' +
    '<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> ' + t('common.delete') +
    '</button>' +
    '</div>' +
    '</div>';

  return html;
}

async function deleteInsight(insightId) {
  if (!confirm(t('memory.confirmDeleteInsight'))) return;

  try {
    var response = await csrfFetch('/api/memory/insights/' + insightId, { method: 'DELETE' });
    if (!response.ok) throw new Error('Failed to delete insight');

    selectedInsight = null;
    await loadInsightsHistory();
    renderInsightsSection();

    if (window.showToast) {
      showToast(t('memory.insightDeleted'), 'success');
    }
  } catch (err) {
    console.error('Failed to delete insight:', err);
    if (window.showToast) {
      showToast(t('memory.deleteInsightError'), 'error');
    }
  }
}

async function refreshInsightsHistory() {
  await loadInsightsHistory();
  renderInsightsSection();
}

// ========== Actions ==========
async function setMemoryTimeFilter(filter) {
  memoryTimeFilter = filter;
  await loadMemoryStats();
  renderHotspotsColumn();
}

async function refreshMemoryData() {
  await Promise.all([
    loadMemoryStats(),
    loadMemoryGraph(),
    loadRecentContext()
  ]);
  renderHotspotsColumn();
  renderGraphColumn();
  renderContextColumn();
}

function filterRecentContext(query) {
  var filtered = recentContext;
  if (query && query.trim()) {
    var q = query.toLowerCase();
    filtered = recentContext.filter(function(item) {
      var promptMatch = (item.prompt || '').toLowerCase().includes(q);
      var filesMatch = (item.files || []).some(function(f) { return f.toLowerCase().includes(q); });
      return promptMatch || filesMatch;
    });
  }

  var container = document.getElementById('memory-context');
  if (!container) return;

  var timeline = container.querySelector('.context-timeline');
  if (timeline) {
    timeline.outerHTML = renderContextTimeline(filtered);
    if (window.lucide) lucide.createIcons();
  }
}

// ========== WebSocket Event Handlers ==========
function handleMemoryUpdated(payload) {
  // Refresh graph and stats without full re-render
  if (payload.type === 'stats') {
    loadMemoryStats().then(function() { renderHotspotsColumn(); });
  } else if (payload.type === 'graph') {
    loadMemoryGraph().then(function() { renderGraphColumn(); });
  } else if (payload.type === 'context') {
    loadRecentContext().then(function() { renderContextColumn(); });
  } else {
    // Full refresh
    refreshMemoryData();
  }

  // Highlight updated node if provided
  if (payload.nodeId) {
    highlightNode(payload.nodeId);
  }
}

// ========== Utilities ==========
function formatTimestamp(timestamp) {
  var date = new Date(timestamp);
  var now = new Date();
  var diff = now - date;

  // Less than 1 minute
  if (diff < 60000) {
    return t('memory.justNow');
  }
  // Less than 1 hour
  if (diff < 3600000) {
    var minutes = Math.floor(diff / 60000);
    return minutes + ' ' + t('memory.minutesAgo');
  }
  // Less than 1 day
  if (diff < 86400000) {
    var hours = Math.floor(diff / 3600000);
    return hours + ' ' + t('memory.hoursAgo');
  }
  // Otherwise show date
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
}