renderer.js

document.addEventListener('DOMContentLoaded', () => {
  const openBtn = document.getElementById('open-btn');
  const saveBtn = document.getElementById('save-btn');
  const fileNameSpan = document.getElementById('file-name');
  const welcomeDiv = document.getElementById('welcome');
  const editorContainer = document.getElementById('editor-container');
  const editorPane = document.getElementById('editor-pane');
  const previewPane = document.getElementById('preview-pane');
  const editor = document.getElementById('editor');
  const contentDiv = document.getElementById('content');
  const toggleGroup = document.getElementById('toggle-group');
  const editBtn = document.getElementById('edit-btn');
  const previewBtn = document.getElementById('preview-btn');
  const splitBtn = document.getElementById('split-btn');
  const themeToggle = document.getElementById('theme-toggle');
  const lineNumbers = document.getElementById('line-numbers');
  const cursorPosition = document.getElementById('cursor-position');
  const wordCountSpan = document.getElementById('word-count');
  const charCountSpan = document.getElementById('char-count');
  const lineCountSpan = document.getElementById('line-count');
  const toggleLineNumbersBtn = document.getElementById('toggle-line-numbers');
  const toggleWordWrapBtn = document.getElementById('toggle-word-wrap');
  const sidebar = document.getElementById('sidebar');
  const toggleSidebarBtn = document.getElementById('toggle-sidebar');
  const fileList = document.getElementById('file-list');
  const tabsBar = document.getElementById('tabs-bar');
  const rightSidebar = document.getElementById('right-sidebar');
  const toggleRightSidebarBtn = document.getElementById('toggle-right-sidebar');
  const outlineToggleBtn = document.getElementById('outline-toggle-btn');
  const outlineList = document.getElementById('outline-list');
  const currentFilePathSpan = document.getElementById('current-file-path');
  const openFilesSection = document.getElementById('open-files-section');
  const openFilesHeader = document.getElementById('open-files-header');
  const folderSection = document.getElementById('folder-section');
  const folderHeader = document.getElementById('folder-header');
  const folderSectionTitle = document.getElementById('folder-section-title');
  const folderFileList = document.getElementById('folder-file-list');
  const folderEmpty = document.getElementById('folder-empty');
  const openFolderBtn = document.getElementById('open-folder-btn');
  const closeFolderBtn = document.getElementById('close-folder-btn');
  const openFolderToolbarBtn = document.getElementById('open-folder-toolbar-btn');

  // Multi-file state management
  let openFiles = new Map(); // Map of filePath -> { content, unsaved, cursorPos, scrollPos }
  let activeFilePath = null;
  let untitledCounter = 1;
  const VIEW_MODES = ['edit', 'preview', 'split'];

  function getStoredViewMode() {
    const stored = localStorage.getItem('defaultViewMode');
    return VIEW_MODES.includes(stored) ? stored : 'preview';
  }

  let defaultViewMode = getStoredViewMode();
  let isDarkMode = localStorage.getItem('darkMode') === 'true';
  let showLineNumbers = localStorage.getItem('showLineNumbers') !== 'false';
  let sidebarCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
  let wordWrap = localStorage.getItem('wordWrap') !== 'false'; // Default to true
  let rightSidebarHidden = localStorage.getItem('rightSidebarHidden') === 'true';
  let openFilesSectionCollapsed = localStorage.getItem('openFilesSectionCollapsed') === 'true';
  let folderSectionCollapsed = localStorage.getItem('folderSectionCollapsed') === 'true';
  let currentFolder = null; // { folderPath, folderName, files }
  let outlineCollapsedItems = JSON.parse(localStorage.getItem('outlineCollapsedItems') || '{}');
  let sidebarWidth = parseInt(localStorage.getItem('sidebarWidth') || '200', 10);
  let rightSidebarWidth = parseInt(localStorage.getItem('rightSidebarWidth') || '220', 10);

  // Shared regex for matching YAML frontmatter
  const frontmatterRegex = /^---\s*\n[\s\S]*?\n---\s*\n?/;

  // Utility function to escape HTML special characters
  function escapeHtml(str) {
    if (str === null || str === undefined) return '';
    return String(str)
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }

  // Initialize theme
  const lightIcon = themeToggle.querySelector('.light-icon');
  const darkIcon = themeToggle.querySelector('.dark-icon');

  function initTheme() {
    if (isDarkMode) {
      document.body.classList.add('dark');
      lightIcon.classList.remove('active');
      darkIcon.classList.add('active');
    } else {
      document.body.classList.remove('dark');
      lightIcon.classList.add('active');
      darkIcon.classList.remove('active');
    }
  }

  function toggleTheme() {
    isDarkMode = !isDarkMode;
    localStorage.setItem('darkMode', isDarkMode);
    initTheme();
    // Update mermaid theme and re-render diagrams
    if (typeof mermaid !== 'undefined') {
      mermaid.initialize({
        startOnLoad: false,
        theme: isDarkMode ? 'dark' : 'default',
        securityLevel: 'strict'
      });
      updatePreview();
    }
  }

  // Initialize theme on load
  initTheme();

  // Theme toggle button
  themeToggle.addEventListener('click', toggleTheme);

  // Sidebar functionality
  const sidebarResizeHandle = document.getElementById('sidebar-resize-handle');
  const rightSidebarResizeHandle = document.getElementById('right-sidebar-resize-handle');

  function initSidebar() {
    if (sidebarCollapsed) {
      sidebar.classList.add('collapsed');
      sidebar.style.width = '';
      sidebar.style.minWidth = '';
      sidebarResizeHandle.style.display = 'none';
    } else {
      sidebar.classList.remove('collapsed');
      sidebar.style.width = sidebarWidth + 'px';
      sidebar.style.minWidth = sidebarWidth + 'px';
      sidebarResizeHandle.style.display = '';
    }
  }

  function toggleSidebar() {
    sidebarCollapsed = !sidebarCollapsed;
    localStorage.setItem('sidebarCollapsed', sidebarCollapsed);
    initSidebar();
  }

  initSidebar();
  toggleSidebarBtn.addEventListener('click', toggleSidebar);

  // Sidebar resize functionality
  function initSidebarWidths() {
    if (!sidebarCollapsed) {
      sidebar.style.width = sidebarWidth + 'px';
      sidebar.style.minWidth = sidebarWidth + 'px';
    }
    if (!rightSidebarHidden) {
      rightSidebar.style.width = rightSidebarWidth + 'px';
      rightSidebar.style.minWidth = rightSidebarWidth + 'px';
    }
  }

  function setupResizeHandlers() {
    let isResizing = false;
    let currentHandle = null;
    let startX = 0;
    let startWidth = 0;

    function onMouseDown(e, handle, target, isLeft) {
      isResizing = true;
      currentHandle = handle;
      startX = e.clientX;
      startWidth = target.offsetWidth;
      handle.classList.add('resizing');
      document.body.classList.add('resizing');
      e.preventDefault();

      function onMouseMove(e) {
        if (!isResizing) return;

        const diff = isLeft ? e.clientX - startX : startX - e.clientX;
        const newWidth = Math.max(150, Math.min(500, startWidth + diff));

        target.style.width = newWidth + 'px';
        target.style.minWidth = newWidth + 'px';

        // Update line numbers if resizing affects editor
        if (wordWrap) {
          updateLineNumbers();
        }
      }

      function onMouseUp() {
        if (!isResizing) return;
        isResizing = false;
        currentHandle.classList.remove('resizing');
        document.body.classList.remove('resizing');

        // Save the new width
        if (currentHandle === sidebarResizeHandle) {
          sidebarWidth = sidebar.offsetWidth;
          localStorage.setItem('sidebarWidth', sidebarWidth);
        } else {
          rightSidebarWidth = rightSidebar.offsetWidth;
          localStorage.setItem('rightSidebarWidth', rightSidebarWidth);
        }

        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      }

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    }

    sidebarResizeHandle.addEventListener('mousedown', (e) => {
      if (!sidebarCollapsed) {
        onMouseDown(e, sidebarResizeHandle, sidebar, true);
      }
    });

    rightSidebarResizeHandle.addEventListener('mousedown', (e) => {
      if (!rightSidebarHidden) {
        onMouseDown(e, rightSidebarResizeHandle, rightSidebar, false);
      }
    });
  }

  initSidebarWidths();
  setupResizeHandlers();

  // Open Files section collapse
  function initOpenFilesSection() {
    if (openFilesSectionCollapsed) {
      openFilesSection.classList.add('collapsed');
    } else {
      openFilesSection.classList.remove('collapsed');
    }
  }

  function toggleOpenFilesSection() {
    openFilesSectionCollapsed = !openFilesSectionCollapsed;
    localStorage.setItem('openFilesSectionCollapsed', openFilesSectionCollapsed);
    initOpenFilesSection();
  }

  initOpenFilesSection();
  openFilesHeader.addEventListener('click', toggleOpenFilesSection);

  function initFolderSection() {
    if (folderSectionCollapsed) {
      folderSection.classList.add('collapsed');
    } else {
      folderSection.classList.remove('collapsed');
    }
  }

  function toggleFolderSection() {
    folderSectionCollapsed = !folderSectionCollapsed;
    localStorage.setItem('folderSectionCollapsed', folderSectionCollapsed);
    initFolderSection();
  }

  initFolderSection();
  folderHeader.addEventListener('click', toggleFolderSection);

  function getRelativeParent(relativePath) {
    const normalized = String(relativePath || '').replace(/\\/g, '/');
    const idx = normalized.lastIndexOf('/');
    return idx > 0 ? normalized.slice(0, idx) : '';
  }

  function applyOpenedFolder(data) {
    if (!data || !data.success && !data.folderPath) {
      return;
    }
    currentFolder = {
      folderPath: data.folderPath,
      folderName: data.folderName || data.folderPath.split(/[/\\]/).pop(),
      files: data.files || []
    };
    localStorage.setItem('lastFolderPath', currentFolder.folderPath);
    folderSectionTitle.textContent = currentFolder.folderName;
    folderSectionTitle.title = currentFolder.folderPath;
    updateExplorerLayout();
    folderEmpty.style.display = currentFolder.files.length === 0 ? 'block' : 'none';
    folderEmpty.textContent = 'No markdown files found in this folder';
    renderFolderList();
  }

  function closeFolder() {
    currentFolder = null;
    localStorage.removeItem('lastFolderPath');
    folderSectionTitle.textContent = 'Folder';
    folderSectionTitle.title = '';
    folderFileList.innerHTML = '';
    folderEmpty.style.display = 'block';
    folderEmpty.textContent = 'Open a folder to list markdown files';
    updateExplorerLayout();
  }

  function updateExplorerLayout() {
    const folderOpen = !!currentFolder;
    openFolderBtn.classList.toggle('hidden', folderOpen);
    closeFolderBtn.classList.toggle('hidden', !folderOpen);
    openFilesSection.classList.toggle('hidden', folderOpen);
  }

  function renderFolderList() {
    folderFileList.innerHTML = '';
    if (!currentFolder) return;

    currentFolder.files.forEach((file) => {
      const li = document.createElement('li');
      const openKey = findOpenPath(file.path);
      if (openKey && openKey === activeFilePath) {
        li.classList.add('active');
      }
      li.dataset.path = file.path;
      li.title = file.path;
      const parent = getRelativeParent(file.relativePath);
      const unsaved = openKey && openFiles.get(openKey)?.unsaved;
      li.innerHTML = `
        <span class="file-icon">📄</span>
        <div class="file-info">
          <span class="file-name">${escapeHtml(file.name)}</span>
          ${parent ? `<span class="file-path">${escapeHtml(parent)}</span>` : ''}
        </div>
        ${unsaved ? '<span class="unsaved-dot"></span>' : ''}
      `;
      li.addEventListener('click', () => {
        window.electronAPI.openFilePath(file.path);
      });
      li.addEventListener('contextmenu', (e) => {
        e.preventDefault();
        showFileContextMenu(file.path, e.clientX, e.clientY);
      });
      folderFileList.appendChild(li);
    });
  }

  function highlightFolderFiles() {
    if (!folderFileList) return;
    folderFileList.querySelectorAll('li').forEach((li) => {
      const openKey = findOpenPath(li.dataset.path);
      li.classList.toggle('active', !!(openKey && openKey === activeFilePath));
      const unsaved = !!(openKey && openFiles.get(openKey)?.unsaved);
      let dot = li.querySelector('.unsaved-dot');
      if (unsaved && !dot) {
        dot = document.createElement('span');
        dot.className = 'unsaved-dot';
        li.appendChild(dot);
      } else if (!unsaved && dot) {
        dot.remove();
      }
    });
  }

  function requestOpenFolder() {
    window.electronAPI.openFolder();
  }

  openFolderBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    requestOpenFolder();
  });
  closeFolderBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    closeFolder();
  });
  if (openFolderToolbarBtn) {
    openFolderToolbarBtn.addEventListener('click', requestOpenFolder);
  }

  let restoringFolder = false;

  window.electronAPI.onFolderOpened((data) => {
    applyOpenedFolder(data);
    if (!restoringFolder) {
      if (sidebarCollapsed) {
        toggleSidebarBtn.click();
      }
      if (folderSectionCollapsed) {
        toggleFolderSection();
      }
    }
    restoringFolder = false;
  });

  const lastFolderPath = localStorage.getItem('lastFolderPath');
  if (lastFolderPath) {
    restoringFolder = true;
    window.electronAPI.listFolderMarkdown(lastFolderPath).then((result) => {
      if (!result || !result.success) {
        restoringFolder = false;
        localStorage.removeItem('lastFolderPath');
      }
    });
  }

  // Right Sidebar (Outline) functionality
  function initRightSidebar() {
    if (rightSidebarHidden) {
      rightSidebar.classList.add('hidden');
      outlineToggleBtn.classList.remove('active');
      rightSidebar.style.width = '';
      rightSidebar.style.minWidth = '';
      rightSidebarResizeHandle.style.display = 'none';
    } else {
      rightSidebar.classList.remove('hidden');
      outlineToggleBtn.classList.add('active');
      rightSidebar.style.width = rightSidebarWidth + 'px';
      rightSidebar.style.minWidth = rightSidebarWidth + 'px';
      rightSidebarResizeHandle.style.display = '';
    }
  }

  function toggleRightSidebar() {
    rightSidebarHidden = !rightSidebarHidden;
    localStorage.setItem('rightSidebarHidden', rightSidebarHidden);
    initRightSidebar();
  }

  // Right sidebar tabs
  const tabOutline = document.getElementById('tab-outline');
  const tabChat = document.getElementById('tab-chat');
  const outlinePanel = document.getElementById('outline-panel');
  const chatPanel = document.getElementById('chat-panel');
  const chatMessages = document.getElementById('chat-messages');
  const chatInput = document.getElementById('chat-input');
  const chatSendBtn = document.getElementById('chat-send');
  const chatIncludeContext = document.getElementById('chat-include-context');
  const chatClearBtn = document.getElementById('chat-clear');

  let chatHistory = [];
  let isChatStreaming = false;
  let chatAbortFn = null;

  function clearChat() {
    // Abort any ongoing stream
    if (chatAbortFn) {
      chatAbortFn();
      chatAbortFn = null;
    }

    // Clear history
    chatHistory = [];
    isChatStreaming = false;
    chatSendBtn.disabled = false;

    // Reset UI
    chatMessages.innerHTML = `
      <div class="chat-welcome">
        <p>Ask AI anything about your document or get writing help.</p>
      </div>
    `;
  }

  chatClearBtn.addEventListener('click', clearChat);

  // Open chat links in external browser
  chatMessages.addEventListener('click', (e) => {
    const link = e.target.closest('a');
    if (link && link.href) {
      e.preventDefault();
      window.electronAPI.openExternal(link.href);
    }
  });

  function switchToTab(tabName) {
    tabOutline.classList.toggle('active', tabName === 'outline');
    tabChat.classList.toggle('active', tabName === 'chat');
    outlinePanel.classList.toggle('active', tabName === 'outline');
    chatPanel.classList.toggle('active', tabName === 'chat');

    if (tabName === 'chat') {
      chatInput.focus();
    }
  }

  tabOutline.addEventListener('click', () => switchToTab('outline'));
  tabChat.addEventListener('click', () => switchToTab('chat'));

  // Chat functionality
  function addChatMessage(role, content, isStreaming = false) {
    // Remove welcome message if it exists
    const welcome = chatMessages.querySelector('.chat-welcome');
    if (welcome) welcome.remove();

    const messageDiv = document.createElement('div');
    messageDiv.className = `chat-message ${role}${isStreaming ? ' streaming' : ''}`;

    if (role === 'assistant') {
      messageDiv.innerHTML = `
        <div class="chat-message-content"></div>
        <button class="chat-copy-btn" title="Copy response">
          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
          </svg>
        </button>
      `;
      // Store raw content for copying
      messageDiv.dataset.rawContent = content;
    } else {
      messageDiv.innerHTML = `<div class="chat-message-content"></div>`;
    }

    const contentDiv = messageDiv.querySelector('.chat-message-content');

    if (role === 'assistant') {
      // Render markdown for assistant messages
      window.electronAPI.parseMarkdown(content).then(html => {
        contentDiv.innerHTML = html;
      });

      // Add copy button handler
      const copyBtn = messageDiv.querySelector('.chat-copy-btn');
      copyBtn.addEventListener('click', () => {
        const rawContent = messageDiv.dataset.rawContent || contentDiv.textContent;
        navigator.clipboard.writeText(rawContent).then(() => {
          copyBtn.classList.add('copied');
          setTimeout(() => copyBtn.classList.remove('copied'), 1500);
        });
      });
    } else {
      contentDiv.textContent = content;
    }

    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;

    return messageDiv;
  }

  function updateChatMessage(messageDiv, content) {
    const contentDiv = messageDiv.querySelector('.chat-message-content');
    // Store raw content for copying
    messageDiv.dataset.rawContent = content;
    window.electronAPI.parseMarkdown(content).then(html => {
      contentDiv.innerHTML = html;
      chatMessages.scrollTop = chatMessages.scrollHeight;
    });
  }

  async function sendChatMessage() {
    const message = chatInput.value.trim();
    if (!message || isChatStreaming) return;

    // Add user message
    addChatMessage('user', message);
    chatHistory.push({ role: 'user', content: message });

    chatInput.value = '';
    chatInput.style.height = 'auto';
    chatSendBtn.disabled = true;
    isChatStreaming = true;

    // Add assistant message placeholder
    const assistantDiv = addChatMessage('assistant', '', true);

    try {
      // Build system message with optional document context
      let systemContent = 'You are a helpful AI assistant in a markdown editor. Help users with writing, editing, and answering questions. Keep responses concise and helpful. Use markdown formatting when appropriate.';

      if (chatIncludeContext.checked && activeFilePath && openFiles.has(activeFilePath)) {
        const fileData = openFiles.get(activeFilePath);
        const fileName = getFileName(activeFilePath);
        systemContent += `\n\nThe user is currently editing a document named "${fileName}". Here is the document content:\n\n---\n${fileData.content}\n---\n\nYou can reference this document when answering questions.`;
      }

      // Build messages array for API
      const apiMessages = [
        {
          role: 'system',
          content: systemContent
        },
        ...chatHistory
      ];

      let fullResponse = '';
      let chunkHandlerRef, doneHandlerRef, errorHandlerRef;

      const cleanup = () => {
        if (chunkHandlerRef) window.pluginAPI.removeAIStreamListener('chunk', chunkHandlerRef);
        if (doneHandlerRef) window.pluginAPI.removeAIStreamListener('done', doneHandlerRef);
        if (errorHandlerRef) window.pluginAPI.removeAIStreamListener('error', errorHandlerRef);
        chatAbortFn = null;
      };

      // Start the stream and get streamId
      const { streamId } = await window.pluginAPI.makeAIRequestStream('ai-editor', 'chat/completions', {
        messages: apiMessages
      });

      // Set up handlers that check for matching streamId
      const chunkHandler = (data) => {
        if (data.streamId === streamId) {
          fullResponse += data.chunk;
          updateChatMessage(assistantDiv, fullResponse);
        }
      };

      const doneHandler = (data) => {
        if (data.streamId === streamId) {
          assistantDiv.classList.remove('streaming');
          chatHistory.push({ role: 'assistant', content: fullResponse });
          isChatStreaming = false;
          chatSendBtn.disabled = false;
          cleanup();
        }
      };

      const errorHandler = (data) => {
        if (data.streamId === streamId) {
          assistantDiv.classList.remove('streaming');
          updateChatMessage(assistantDiv, 'Error: ' + (data.error || 'Failed to get response'));
          isChatStreaming = false;
          chatSendBtn.disabled = false;
          cleanup();
        }
      };

      chunkHandlerRef = window.pluginAPI.onAIStreamChunk(chunkHandler);
      doneHandlerRef = window.pluginAPI.onAIStreamDone(doneHandler);
      errorHandlerRef = window.pluginAPI.onAIStreamError(errorHandler);

      chatAbortFn = () => {
        cleanup();
        window.pluginAPI.abortAIRequestStream(streamId);
      };

    } catch (error) {
      console.error('Chat error:', error);
      assistantDiv.classList.remove('streaming');
      updateChatMessage(assistantDiv, 'Error: ' + error.message);
      isChatStreaming = false;
      chatSendBtn.disabled = false;
    }
  }

  chatSendBtn.addEventListener('click', sendChatMessage);

  chatInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendChatMessage();
    }
  });

  // Auto-resize chat input
  chatInput.addEventListener('input', () => {
    chatInput.style.height = 'auto';
    chatInput.style.height = Math.min(chatInput.scrollHeight, 100) + 'px';
  });

  // Parse headings from markdown content
  function parseHeadings(content) {
    const headings = [];
    const lines = content.split('\n');
    let lineIndex = 0;
    let charIndex = 0;

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];
      const nextLine = lines[i + 1];

      // ATX-style headings: # Heading
      const atxMatch = line.match(/^(#{1,6})\s+(.+)$/);
      if (atxMatch) {
        headings.push({
          level: atxMatch[1].length,
          text: atxMatch[2].trim(),
          line: lineIndex,
          charIndex: charIndex
        });
      }
      // Setext-style headings: Heading followed by === or ---
      else if (nextLine && line.trim().length > 0) {
        if (/^=+\s*$/.test(nextLine)) {
          headings.push({
            level: 1,
            text: line.trim(),
            line: lineIndex,
            charIndex: charIndex
          });
        } else if (/^-+\s*$/.test(nextLine) && line.trim().length > 0) {
          headings.push({
            level: 2,
            text: line.trim(),
            line: lineIndex,
            charIndex: charIndex
          });
        }
      }

      charIndex += line.length + 1; // +1 for newline
      lineIndex++;
    }

    return headings;
  }

  // Build hierarchical tree from flat headings
  function buildHeadingTree(headings) {
    const root = { children: [], level: 0 };
    const stack = [root];

    headings.forEach((heading, index) => {
      const node = { ...heading, index, children: [] };

      // Pop stack until we find a parent with lower level
      while (stack.length > 1 && stack[stack.length - 1].level >= heading.level) {
        stack.pop();
      }

      // Add as child of current stack top
      stack[stack.length - 1].children.push(node);
      stack.push(node);
    });

    return root.children;
  }

  // Generate unique ID for a heading (for collapse state)
  function getHeadingId(heading) {
    return `${heading.level}-${heading.charIndex}`;
  }

  // Render a single outline item with its children
  function renderOutlineItem(heading, depth = 0) {
    const hasChildren = heading.children && heading.children.length > 0;
    const headingId = getHeadingId(heading);
    const isCollapsed = outlineCollapsedItems[activeFilePath]?.[headingId] === true;

    const chevronHtml = hasChildren ? `
      <svg class="outline-chevron ${isCollapsed ? 'collapsed' : ''}" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="6 9 12 15 18 9"></polyline>
      </svg>
    ` : '<span class="outline-chevron-placeholder"></span>';

    const childrenHtml = hasChildren ? `
      <div class="outline-children ${isCollapsed ? 'collapsed' : ''}">
        ${heading.children.map(child => renderOutlineItem(child, depth + 1)).join('')}
      </div>
    ` : '';

    return `
      <div class="outline-item-container">
        <div class="outline-item" data-level="${heading.level}" data-index="${heading.index}" data-char="${heading.charIndex}" data-id="${headingId}" title="${escapeHtml(heading.text)}">
          ${chevronHtml}
          <span class="outline-text">${escapeHtml(heading.text)}</span>
        </div>
        ${childrenHtml}
      </div>
    `;
  }

  // Toggle collapse state for an outline item
  function toggleOutlineCollapse(headingId) {
    if (!outlineCollapsedItems[activeFilePath]) {
      outlineCollapsedItems[activeFilePath] = {};
    }
    outlineCollapsedItems[activeFilePath][headingId] = !outlineCollapsedItems[activeFilePath][headingId];
    localStorage.setItem('outlineCollapsedItems', JSON.stringify(outlineCollapsedItems));
  }

  // Render the document outline
  function renderOutline() {
    if (!activeFilePath || !openFiles.has(activeFilePath)) {
      outlineList.innerHTML = '<div class="outline-empty">No document open</div>';
      return;
    }

    const fileData = openFiles.get(activeFilePath);
    // Strip frontmatter before parsing headings (same as preview)
    // But track the frontmatter length to adjust charIndex for editor navigation
    let content = fileData.content;
    const frontmatterMatch = content.match(frontmatterRegex);
    const frontmatterLength = frontmatterMatch ? frontmatterMatch[0].length : 0;
    content = content.replace(frontmatterRegex, '');

    const headings = parseHeadings(content);

    // Adjust charIndex to account for stripped frontmatter
    headings.forEach(h => {
      h.charIndex += frontmatterLength;
    });

    if (headings.length === 0) {
      outlineList.innerHTML = '<div class="outline-empty">No headings found</div>';
      return;
    }

    // Build hierarchical tree and render
    const tree = buildHeadingTree(headings);
    outlineList.innerHTML = tree.map(heading => renderOutlineItem(heading)).join('');

    // Add click handlers for navigation and collapse toggle
    outlineList.querySelectorAll('.outline-item').forEach((item) => {
      const chevron = item.querySelector('.outline-chevron');

      // Chevron click - toggle collapse
      if (chevron) {
        chevron.addEventListener('click', (e) => {
          e.stopPropagation();
          const headingId = item.dataset.id;
          toggleOutlineCollapse(headingId);

          // Update UI without full re-render
          chevron.classList.toggle('collapsed');
          const childrenContainer = item.parentElement.querySelector('.outline-children');
          if (childrenContainer) {
            childrenContainer.classList.toggle('collapsed');
          }
        });
      }

      // Item click - navigate to heading
      item.addEventListener('click', () => {
        const charIndex = parseInt(item.dataset.char, 10);
        const headingIndex = parseInt(item.dataset.index, 10);

        // Set cursor at the beginning of the heading line
        editor.focus();
        editor.setSelectionRange(charIndex, charIndex);

        // Calculate scroll position accounting for word wrap
        const scrollPosition = calculateScrollPositionForLine(charIndex);
        editor.scrollTop = scrollPosition;
        syncLineNumbersScroll();

        // Scroll preview to the corresponding heading (by index)
        scrollPreviewToHeading(headingIndex);

        // Update active state
        outlineList.querySelectorAll('.outline-item').forEach(el => el.classList.remove('active'));
        item.classList.add('active');

        updateCursorPosition();
      });
    });
  }

  // Calculate the scroll position needed to show a given character position at the top
  function calculateScrollPositionForLine(charIndex) {
    const lines = editor.value.substring(0, charIndex).split('\n');
    const targetLineIndex = lines.length - 1;
    const allLines = editor.value.split('\n');
    const lineHeight = getLineHeight();

    if (!wordWrap) {
      // Simple calculation without word wrap
      return targetLineIndex * lineHeight;
    }

    // With word wrap, measure actual heights of lines before target
    const measure = getMeasureElement();
    const editorWidth = editor.clientWidth - 40; // Subtract padding
    measure.style.width = editorWidth + 'px';

    let totalHeight = 0;
    for (let i = 0; i < targetLineIndex; i++) {
      measure.textContent = allLines[i] || ' ';
      const height = measure.offsetHeight;
      const visualLines = Math.max(1, Math.round(height / lineHeight));
      totalHeight += visualLines * lineHeight;
    }

    return totalHeight;
  }

  // Scroll preview pane to show the heading at the top
  function scrollPreviewToHeading(index) {
    // Get all headings in the preview in document order
    const allHeadings = contentDiv.querySelectorAll('h1, h2, h3, h4, h5, h6');

    if (index >= 0 && index < allHeadings.length) {
      const targetHeading = allHeadings[index];

      // Get positions using getBoundingClientRect for accuracy
      const paneRect = previewPane.getBoundingClientRect();
      const headingRect = targetHeading.getBoundingClientRect();

      // Calculate how far the heading is from the top of the visible pane area
      const offsetFromPaneTop = headingRect.top - paneRect.top;

      // Add that offset to current scroll position, minus a small margin
      previewPane.scrollTop = previewPane.scrollTop + offsetFromPaneTop - 16;
    }
  }

  // Update active outline item based on cursor position
  function updateActiveOutlineItem() {
    if (!activeFilePath || !openFiles.has(activeFilePath)) return;

    const cursorPos = editor.selectionStart;
    const items = outlineList.querySelectorAll('.outline-item');

    let activeItem = null;
    items.forEach(item => {
      item.classList.remove('active');
      const charIndex = parseInt(item.dataset.char, 10);
      if (charIndex <= cursorPos) {
        activeItem = item;
      }
    });

    if (activeItem) {
      activeItem.classList.add('active');
      // Scroll outline list to show active item
      const listRect = outlineList.getBoundingClientRect();
      const itemRect = activeItem.getBoundingClientRect();
      if (itemRect.top < listRect.top || itemRect.bottom > listRect.bottom) {
        activeItem.scrollIntoView({ block: 'nearest' });
      }
    }
  }

  initRightSidebar();
  toggleRightSidebarBtn.addEventListener('click', toggleRightSidebar);
  outlineToggleBtn.addEventListener('click', toggleRightSidebar);

  // Line numbers functionality
  function initLineNumbers() {
    if (showLineNumbers) {
      lineNumbers.classList.remove('hidden');
      toggleLineNumbersBtn.classList.add('active');
    } else {
      lineNumbers.classList.add('hidden');
      toggleLineNumbersBtn.classList.remove('active');
    }
  }

  // Measurement element for calculating wrapped line heights
  let measureElement = null;

  function getMeasureElement() {
    if (!measureElement) {
      measureElement = document.createElement('div');
      // Copy computed styles from editor for accurate measurement
      const editorStyles = getComputedStyle(editor);
      measureElement.style.cssText = `
        position: absolute;
        visibility: hidden;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: ${editorStyles.fontFamily};
        font-size: ${editorStyles.fontSize};
        line-height: ${editorStyles.lineHeight};
        letter-spacing: ${editorStyles.letterSpacing};
        padding: 0;
        border: none;
        box-sizing: border-box;
      `;
      document.body.appendChild(measureElement);
    }
    return measureElement;
  }

  function getLineHeight() {
    const computed = getComputedStyle(editor);
    const lineHeight = parseFloat(computed.lineHeight);
    // If lineHeight is NaN (e.g., "normal"), calculate from font size
    if (isNaN(lineHeight)) {
      return parseFloat(computed.fontSize) * 1.6;
    }
    return lineHeight;
  }

  function updateLineNumbers() {
    const lines = editor.value.split('\n');
    const lineHeight = getLineHeight();

    // If word wrap is disabled, use simple line numbers
    if (!wordWrap) {
      const lineNumbersHtml = lines.map((_, i) => `<span>${i + 1}</span>`).join('');
      lineNumbers.innerHTML = lineNumbersHtml;
      return;
    }

    // Calculate visual height for each line when word wrap is enabled
    const measure = getMeasureElement();
    const editorWidth = editor.clientWidth - 40; // Subtract padding (20px each side)
    measure.style.width = editorWidth + 'px';

    const lineNumbersHtml = lines.map((line, i) => {
      // Measure the height of this line when wrapped
      measure.textContent = line || ' '; // Use space for empty lines
      const height = measure.offsetHeight;
      const visualLines = Math.max(1, Math.round(height / lineHeight));
      const spanHeight = visualLines * lineHeight;

      return `<span style="height: ${spanHeight}px">${i + 1}</span>`;
    }).join('');

    lineNumbers.innerHTML = lineNumbersHtml;
  }

  function syncLineNumbersScroll() {
    lineNumbers.scrollTop = editor.scrollTop;
  }

  function toggleLineNumbersVisibility() {
    showLineNumbers = !showLineNumbers;
    localStorage.setItem('showLineNumbers', showLineNumbers);
    initLineNumbers();
  }

  // Word wrap functions
  function initWordWrap() {
    if (wordWrap) {
      editor.classList.remove('no-wrap');
      toggleWordWrapBtn.classList.add('active');
    } else {
      editor.classList.add('no-wrap');
      toggleWordWrapBtn.classList.remove('active');
    }
  }

  function toggleWordWrap() {
    wordWrap = !wordWrap;
    localStorage.setItem('wordWrap', wordWrap);
    initWordWrap();
    updateLineNumbers(); // Recalculate line heights
  }

  // Sync scrolling between editor and preview
  let isEditorScrolling = false;
  let isPreviewScrolling = false;

  function syncEditorToPreview() {
    if (isPreviewScrolling) return;
    isEditorScrolling = true;

    const editorScrollMax = editor.scrollHeight - editor.clientHeight;
    if (editorScrollMax <= 0) return;

    const editorScrollPercent = editor.scrollTop / editorScrollMax;
    const previewScrollMax = previewPane.scrollHeight - previewPane.clientHeight;
    previewPane.scrollTop = editorScrollPercent * previewScrollMax;

    setTimeout(() => { isEditorScrolling = false; }, 50);
  }

  function syncPreviewToEditor() {
    if (isEditorScrolling) return;
    isPreviewScrolling = true;

    const previewScrollMax = previewPane.scrollHeight - previewPane.clientHeight;
    if (previewScrollMax <= 0) return;

    const previewScrollPercent = previewPane.scrollTop / previewScrollMax;
    const editorScrollMax = editor.scrollHeight - editor.clientHeight;
    editor.scrollTop = previewScrollPercent * editorScrollMax;
    syncLineNumbersScroll();

    setTimeout(() => { isPreviewScrolling = false; }, 50);
  }

  // Initialize line numbers and word wrap
  initLineNumbers();
  initWordWrap();

  // Line numbers toggle button
  toggleLineNumbersBtn.addEventListener('click', toggleLineNumbersVisibility);

  // Word wrap toggle button
  toggleWordWrapBtn.addEventListener('click', toggleWordWrap);

  // Inline Formatting Toolbar in Header
  const formattingToolbarInline = document.getElementById('formatting-toolbar-inline');

  // Check if selected text has specific formatting
  function checkFormatting(text, before, after) {
    if (!text || text.length === 0) return false;
    return text.startsWith(before) && text.endsWith(after) && text.length >= before.length + after.length;
  }

  // Check if lines have a specific prefix
  function checkLinePrefix(text, prefix) {
    if (!text) return false;
    const lines = text.split('\n');
    return lines.every(line => line.startsWith(prefix) || line.trim() === '');
  }

  // Check if text is a numbered list
  function checkNumberedList(text) {
    if (!text) return false;
    const lines = text.split('\n');
    return lines.every((line, i) => {
      const match = line.match(/^(\d+)\.\s/);
      return match || line.trim() === '';
    });
  }

  // Update button active states based on selection
  function updateToolbarState() {
    const start = editor.selectionStart;
    const end = editor.selectionEnd;
    const value = editor.value;
    const selectedText = value.substring(start, end);

    // Get extended selection to check for surrounding markers
    const extStart = Math.max(0, start - 3);
    const extEnd = Math.min(value.length, end + 3);
    const extendedContext = value.substring(extStart, extEnd);

    // Check inline formatting by looking at what surrounds the selection
    const beforeSel = value.substring(Math.max(0, start - 2), start);
    const afterSel = value.substring(end, Math.min(value.length, end + 2));

    // Bold: check for ** around selection
    const isBold = (beforeSel.endsWith('**') && afterSel.startsWith('**')) ||
                   checkFormatting(selectedText, '**', '**');
    document.getElementById('fmt-bold').classList.toggle('active', isBold);

    // Italic: check for * around selection (but not **)
    const isItalic = (beforeSel.endsWith('*') && !beforeSel.endsWith('**') &&
                      afterSel.startsWith('*') && !afterSel.startsWith('**')) ||
                     (checkFormatting(selectedText, '*', '*') && !checkFormatting(selectedText, '**', '**'));
    document.getElementById('fmt-italic').classList.toggle('active', isItalic);

    // Strikethrough
    const isStrike = (beforeSel.endsWith('~~') && afterSel.startsWith('~~')) ||
                     checkFormatting(selectedText, '~~', '~~');
    document.getElementById('fmt-strikethrough').classList.toggle('active', isStrike);

    // Inline code
    const isCode = (beforeSel.endsWith('`') && !beforeSel.endsWith('``') &&
                    afterSel.startsWith('`') && !afterSel.startsWith('``')) ||
                   (checkFormatting(selectedText, '`', '`') && !checkFormatting(selectedText, '```', '```'));
    document.getElementById('fmt-code').classList.toggle('active', isCode);

    // Get full lines for line-based formatting
    let lineStart = value.lastIndexOf('\n', start - 1) + 1;
    let lineEnd = value.indexOf('\n', end);
    if (lineEnd === -1) lineEnd = value.length;
    const fullLines = value.substring(lineStart, lineEnd);

    // Heading - check specific levels
    const headingMatch = fullLines.match(/^(#{1,6})\s/);
    const headingLevel = headingMatch ? headingMatch[1].length : 0;
    document.getElementById('fmt-h1').classList.toggle('active', headingLevel === 1);
    document.getElementById('fmt-h2').classList.toggle('active', headingLevel === 2);
    document.getElementById('fmt-h3').classList.toggle('active', headingLevel === 3);
    document.getElementById('fmt-h4').classList.toggle('active', headingLevel === 4);
    document.getElementById('fmt-h5').classList.toggle('active', headingLevel === 5);
    document.getElementById('fmt-h6').classList.toggle('active', headingLevel === 6);

    // Bullet list
    const isBullet = checkLinePrefix(fullLines, '- ') || checkLinePrefix(fullLines, '* ');
    document.getElementById('fmt-ul').classList.toggle('active', isBullet);

    // Numbered list
    const isNumbered = checkNumberedList(fullLines);
    document.getElementById('fmt-ol').classList.toggle('active', isNumbered);

    // Quote
    const isQuote = checkLinePrefix(fullLines, '> ');
    document.getElementById('fmt-quote').classList.toggle('active', isQuote);

    // Link - check if selection or surrounding is a link
    const linkRegex = /\[([^\]]*)\]\([^)]*\)/;
    const isLink = linkRegex.test(selectedText) || linkRegex.test(extendedContext);
    document.getElementById('fmt-link').classList.toggle('active', isLink);

    // Code block
    const isCodeBlock = selectedText.startsWith('```') && selectedText.endsWith('```');
    document.getElementById('fmt-codeblock').classList.toggle('active', isCodeBlock);
  }


  // Toggle formatting (add or remove)
  function toggleWrapFormatting(before, after) {
    const start = editor.selectionStart;
    const end = editor.selectionEnd;
    const value = editor.value;
    const selectedText = value.substring(start, end);

    // Check if formatting already exists around selection
    const beforeSel = value.substring(Math.max(0, start - before.length), start);
    const afterSel = value.substring(end, Math.min(value.length, end + after.length));

    editor.focus();

    if (beforeSel === before && afterSel === after) {
      // Remove formatting from around selection
      editor.selectionStart = start - before.length;
      editor.selectionEnd = end + after.length;
      document.execCommand('insertText', false, selectedText);
      editor.selectionStart = start - before.length;
      editor.selectionEnd = end - before.length;
    } else if (checkFormatting(selectedText, before, after)) {
      // Remove formatting from within selection
      const inner = selectedText.substring(before.length, selectedText.length - after.length);
      document.execCommand('insertText', false, inner);
      editor.selectionStart = start;
      editor.selectionEnd = start + inner.length;
    } else {
      // Add formatting
      const replacement = before + selectedText + after;
      document.execCommand('insertText', false, replacement);
      editor.selectionStart = start;
      editor.selectionEnd = start + replacement.length;
    }

    editor.dispatchEvent(new Event('input', { bubbles: true }));
    updateToolbarState();
  }

  function toggleLinePrefix(prefix) {
    const start = editor.selectionStart;
    const end = editor.selectionEnd;
    const value = editor.value;

    // Find line boundaries
    let lineStart = value.lastIndexOf('\n', start - 1) + 1;
    let lineEnd = value.indexOf('\n', end);
    if (lineEnd === -1) lineEnd = value.length;

    const selectedLines = value.substring(lineStart, lineEnd);
    const lines = selectedLines.split('\n');

    // Check if all lines have the prefix
    const allHavePrefix = lines.every(line => line.startsWith(prefix) || line.trim() === '');

    let newLines;
    if (allHavePrefix) {
      // Remove prefix
      newLines = lines.map(line => {
        if (line.startsWith(prefix)) {
          return line.substring(prefix.length);
        }
        return line;
      }).join('\n');
    } else {
      // Add prefix
      newLines = lines.map(line => prefix + line).join('\n');
    }

    editor.focus();
    editor.selectionStart = lineStart;
    editor.selectionEnd = lineEnd;
    document.execCommand('insertText', false, newLines);

    editor.selectionStart = lineStart;
    editor.selectionEnd = lineStart + newLines.length;

    editor.dispatchEvent(new Event('input', { bubbles: true }));
    updateToolbarState();
  }

  function toggleNumberedList() {
    const start = editor.selectionStart;
    const end = editor.selectionEnd;
    const value = editor.value;

    let lineStart = value.lastIndexOf('\n', start - 1) + 1;
    let lineEnd = value.indexOf('\n', end);
    if (lineEnd === -1) lineEnd = value.length;

    const selectedLines = value.substring(lineStart, lineEnd);
    const lines = selectedLines.split('\n');

    const isNumbered = checkNumberedList(selectedLines);

    let newLines;
    if (isNumbered) {
      // Remove numbering
      newLines = lines.map(line => {
        return line.replace(/^\d+\.\s/, '');
      }).join('\n');
    } else {
      // Add numbering
      newLines = lines.map((line, i) => `${i + 1}. ${line}`).join('\n');
    }

    editor.focus();
    editor.selectionStart = lineStart;
    editor.selectionEnd = lineEnd;
    document.execCommand('insertText', false, newLines);

    editor.selectionStart = lineStart;
    editor.selectionEnd = lineStart + newLines.length;

    editor.dispatchEvent(new Event('input', { bubbles: true }));
    updateToolbarState();
  }

  function toggleHeading(targetLevel) {
    const start = editor.selectionStart;
    const end = editor.selectionEnd;
    const value = editor.value;

    let lineStart = value.lastIndexOf('\n', start - 1) + 1;
    let lineEnd = value.indexOf('\n', end);
    if (lineEnd === -1) lineEnd = value.length;

    const line = value.substring(lineStart, lineEnd);

    // Check current heading level
    const headingMatch = line.match(/^(#{1,6})\s/);
    const currentLevel = headingMatch ? headingMatch[1].length : 0;

    let newLine;
    if (currentLevel === targetLevel) {
      // Same level - remove heading
      newLine = line.replace(/^#{1,6}\s/, '');
    } else if (currentLevel > 0) {
      // Different level - replace with target level
      const hashes = '#'.repeat(targetLevel);
      newLine = line.replace(/^#{1,6}\s/, hashes + ' ');
    } else {
      // No heading - add target level
      const hashes = '#'.repeat(targetLevel);
      newLine = hashes + ' ' + line;
    }

    editor.focus();
    editor.selectionStart = lineStart;
    editor.selectionEnd = lineEnd;
    document.execCommand('insertText', false, newLine);

    editor.selectionStart = lineStart;
    editor.selectionEnd = lineStart + newLine.length;

    editor.dispatchEvent(new Event('input', { bubbles: true }));
    updateToolbarState();
  }
  function toggleLink() {
    const start = editor.selectionStart;
    const end = editor.selectionEnd;
    const value = editor.value;
    const selectedText = value.substring(start, end);

    // Check if it's already a link
    const linkMatch = selectedText.match(/^\[([^\]]*)\]\(([^)]*)\)$/);

    editor.focus();

    if (linkMatch) {
      // Remove link formatting, keep just the text
      document.execCommand('insertText', false, linkMatch[1]);
      editor.selectionStart = start;
      editor.selectionEnd = start + linkMatch[1].length;
    } else {
      // Add link formatting
      const replacement = `[${selectedText}](url)`;
      document.execCommand('insertText', false, replacement);
      // Select 'url' for easy replacement
      const urlStart = start + selectedText.length + 3;
      editor.selectionStart = urlStart;
      editor.selectionEnd = urlStart + 3;
    }

    editor.dispatchEvent(new Event('input', { bubbles: true }));
    updateToolbarState();
  }

  function toggleCodeBlock() {
    const start = editor.selectionStart;
    const end = editor.selectionEnd;
    const value = editor.value;
    const selectedText = value.substring(start, end);

    editor.focus();

    // Check if already a code block
    if (selectedText.startsWith('```') && selectedText.endsWith('```')) {
      // Remove code block
      let inner = selectedText.substring(3, selectedText.length - 3);
      // Remove first line if it's the language specifier
      if (inner.startsWith('\n')) {
        inner = inner.substring(1);
      } else {
        const firstNewline = inner.indexOf('\n');
        if (firstNewline !== -1) {
          inner = inner.substring(firstNewline + 1);
        }
      }
      if (inner.endsWith('\n')) {
        inner = inner.substring(0, inner.length - 1);
      }
      document.execCommand('insertText', false, inner);
      editor.selectionStart = start;
      editor.selectionEnd = start + inner.length;
    } else {
      // Add code block
      const replacement = '```\n' + selectedText + '\n```';
      document.execCommand('insertText', false, replacement);
      editor.selectionStart = start;
      editor.selectionEnd = start + replacement.length;
    }

    editor.dispatchEvent(new Event('input', { bubbles: true }));
    updateToolbarState();
  }

  // Formatting toolbar button event listeners
  document.getElementById('fmt-bold').addEventListener('click', () => toggleWrapFormatting('**', '**'));
  document.getElementById('fmt-italic').addEventListener('click', () => toggleWrapFormatting('*', '*'));
  document.getElementById('fmt-strikethrough').addEventListener('click', () => toggleWrapFormatting('~~', '~~'));
  document.getElementById('fmt-code').addEventListener('click', () => toggleWrapFormatting('`', '`'));
  document.getElementById('fmt-h1').addEventListener('click', () => toggleHeading(1));
  document.getElementById('fmt-h2').addEventListener('click', () => toggleHeading(2));
  document.getElementById('fmt-h3').addEventListener('click', () => toggleHeading(3));
  document.getElementById('fmt-h4').addEventListener('click', () => toggleHeading(4));
  document.getElementById('fmt-h5').addEventListener('click', () => toggleHeading(5));
  document.getElementById('fmt-h6').addEventListener('click', () => toggleHeading(6));
  document.getElementById('fmt-link').addEventListener('click', toggleLink);
  document.getElementById('fmt-ul').addEventListener('click', () => toggleLinePrefix('- '));
  document.getElementById('fmt-ol').addEventListener('click', toggleNumberedList);
  document.getElementById('fmt-quote').addEventListener('click', () => toggleLinePrefix('> '));
  document.getElementById('fmt-codeblock').addEventListener('click', toggleCodeBlock);

  // Update toolbar button active states on selection change
  editor.addEventListener('select', updateToolbarState);
  editor.addEventListener('click', updateToolbarState);
  editor.addEventListener('keyup', updateToolbarState);

  // Keyboard shortcuts for formatting
  editor.addEventListener('keydown', (e) => {
    if (e.ctrlKey || e.metaKey) {
      switch (e.key.toLowerCase()) {
        case 'b':
          e.preventDefault();
          toggleWrapFormatting('**', '**');
          break;
        case 'i':
          e.preventDefault();
          toggleWrapFormatting('*', '*');
          break;
      }
    }
  });

  // Update line numbers when editor is resized (affects word wrap)
  let resizeTimer;
  const resizeObserver = new ResizeObserver(() => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
      if (wordWrap) {
        updateLineNumbers();
      }
    }, 100);
  });
  resizeObserver.observe(editor);

  // Sync scroll - line numbers and preview
  editor.addEventListener('scroll', () => {
    syncLineNumbersScroll();
    syncEditorToPreview();
  });

  previewPane.addEventListener('scroll', syncPreviewToEditor);

  // Cursor position tracking
  function updateCursorPosition() {
    const text = editor.value.substring(0, editor.selectionStart);
    const lines = text.split('\n');
    const line = lines.length;
    const col = lines[lines.length - 1].length + 1;
    cursorPosition.textContent = `Ln ${line}, Col ${col}`;
  }

  // Word, character, and line count tracking
  function updateWordCount() {
    const text = editor.value;
    const trimmedText = text.trim();
    const words = trimmedText ? trimmedText.split(/\s+/).length : 0;
    const chars = text.length;
    const lines = text ? text.split('\n').length : 0;
    wordCountSpan.textContent = `${words} word${words !== 1 ? 's' : ''}`;
    charCountSpan.textContent = `${chars} char${chars !== 1 ? 's' : ''}`;
    lineCountSpan.textContent = `${lines} line${lines !== 1 ? 's' : ''}`;
  }

  // Update cursor position on various events
  editor.addEventListener('keyup', () => {
    updateCursorPosition();
    updateActiveOutlineItem();
  });
  editor.addEventListener('click', () => {
    updateCursorPosition();
    updateActiveOutlineItem();
  });
  editor.addEventListener('focus', updateCursorPosition);

  function setViewMode(mode, persist = true) {
    if (!VIEW_MODES.includes(mode)) {
      mode = 'preview';
    }

    // Remove active class from all toggle buttons
    editBtn.classList.remove('active');
    previewBtn.classList.remove('active');
    splitBtn.classList.remove('active');

    switch (mode) {
      case 'edit':
        editBtn.classList.add('active');
        editorPane.style.display = 'flex';
        previewPane.style.display = 'none';
        editorContainer.classList.remove('split-view');
        break;
      case 'preview':
        previewBtn.classList.add('active');
        editorPane.style.display = 'none';
        previewPane.style.display = 'flex';
        editorContainer.classList.remove('split-view');
        break;
      case 'split':
        splitBtn.classList.add('active');
        editorPane.style.display = 'flex';
        previewPane.style.display = 'flex';
        editorContainer.classList.add('split-view');
        break;
    }

    if (persist) {
      defaultViewMode = mode;
      localStorage.setItem('defaultViewMode', mode);
      document.dispatchEvent(new CustomEvent('view-mode-changed', { detail: { mode } }));
    }
  }

  // Initialize mermaid for diagram rendering
  if (typeof mermaid !== 'undefined') {
    mermaid.initialize({
      startOnLoad: false,
      theme: isDarkMode ? 'dark' : 'default',
      securityLevel: 'strict'
    });
  }

  function updatePreview() {
    const fileData = openFiles.get(activeFilePath);
    if (fileData) {
      // Strip frontmatter (YAML between --- markers at the start)
      let content = fileData.content;
      content = content.replace(frontmatterRegex, '');

      window.electronAPI.parseMarkdown(content).then((html) => {
        contentDiv.innerHTML = html;
        renderMermaidDiagrams();
      });
    }
  }

  function renderMermaidDiagrams() {
    if (typeof mermaid === 'undefined') return;
    // Mermaid code blocks are rendered as <pre><code class="hljs language-mermaid">...</code></pre>
    const mermaidCodes = contentDiv.querySelectorAll('code.language-mermaid');
    if (mermaidCodes.length === 0) return;

    const mermaidNodes = [];
    mermaidCodes.forEach((codeEl, i) => {
      const pre = codeEl.parentElement;
      // Replace <pre><code> with a <pre class="mermaid"> containing the raw diagram text
      const mermaidPre = document.createElement('pre');
      mermaidPre.className = 'mermaid';
      mermaidPre.id = `mermaid-${Date.now()}-${i}`;
      mermaidPre.textContent = codeEl.textContent;
      pre.replaceWith(mermaidPre);
      mermaidNodes.push(mermaidPre);
    });

    mermaid.run({ nodes: mermaidNodes }).then(() => {
      // Add click-to-zoom on rendered diagrams
      mermaidNodes.forEach((node) => {
        node.style.cursor = 'pointer';
        node.title = 'Click to enlarge';
        node.addEventListener('click', () => openMermaidLightbox(node));
      });
    }).catch((err) => {
      console.warn('Mermaid rendering error:', err);
    });
  }

  // Mermaid lightbox with pan & zoom
  const mermaidLightbox = document.getElementById('mermaid-lightbox');
  const mermaidLightboxBody = document.getElementById('mermaid-lightbox-body');
  const mermaidLightboxSvgWrap = document.getElementById('mermaid-lightbox-svg-wrap');
  const mermaidLightboxClose = document.getElementById('mermaid-lightbox-close');
  const mermaidLightboxOverlay = mermaidLightbox.querySelector('.mermaid-lightbox-overlay');
  const mermaidLbZoomIn = document.getElementById('mermaid-lb-zoom-in');
  const mermaidLbZoomOut = document.getElementById('mermaid-lb-zoom-out');
  const mermaidLbZoomLevel = document.getElementById('mermaid-lb-zoom-level');
  const mermaidLbFit = document.getElementById('mermaid-lb-fit');
  const mermaidLbActual = document.getElementById('mermaid-lb-actual');

  let lbZoom = 1;
  let lbNaturalW = 0;
  let lbNaturalH = 0;

  function lbSetZoom(z) {
    lbZoom = Math.max(0.1, Math.min(5, z));
    mermaidLbZoomLevel.textContent = Math.round(lbZoom * 100) + '%';
    mermaidLightboxSvgWrap.style.width = (lbNaturalW * lbZoom) + 'px';
    mermaidLightboxSvgWrap.style.height = (lbNaturalH * lbZoom) + 'px';
  }

  function lbGetSvgNaturalSize(svg) {
    // Prefer viewBox dimensions (the actual coordinate space) over width/height attributes
    const viewBox = svg.getAttribute('viewBox');
    if (viewBox) {
      const parts = viewBox.split(/[\s,]+/);
      const vbW = parseFloat(parts[2]);
      const vbH = parseFloat(parts[3]);
      if (vbW > 0 && vbH > 0) return { w: vbW, h: vbH };
    }
    // Fall back to explicit attributes then bounding rect
    const w = parseFloat(svg.getAttribute('width')) || svg.getBoundingClientRect().width;
    const h = parseFloat(svg.getAttribute('height')) || svg.getBoundingClientRect().height;
    return { w, h };
  }

  function lbFitToView() {
    const bodyRect = mermaidLightboxBody.getBoundingClientRect();
    const padX = 48, padY = 48;
    const scaleX = (bodyRect.width - padX) / lbNaturalW;
    const scaleY = (bodyRect.height - padY) / lbNaturalH;
    lbSetZoom(Math.min(scaleX, scaleY));
  }

  function openMermaidLightbox(sourceNode) {
    const svg = sourceNode.querySelector('svg');
    if (!svg) return;

    const cloned = svg.cloneNode(true);
    // Read natural dimensions from the SVG viewBox
    const size = lbGetSvgNaturalSize(svg);
    lbNaturalW = size.w;
    lbNaturalH = size.h;

    cloned.removeAttribute('width');
    cloned.removeAttribute('height');
    cloned.style.width = '100%';
    cloned.style.height = '100%';

    mermaidLightboxSvgWrap.innerHTML = '';
    mermaidLightboxSvgWrap.appendChild(cloned);
    mermaidLightbox.classList.remove('hidden');

    // Start at fit-to-view
    requestAnimationFrame(() => {
      lbFitToView();
      // Center scroll
      mermaidLightboxBody.scrollLeft = (mermaidLightboxBody.scrollWidth - mermaidLightboxBody.clientWidth) / 2;
      mermaidLightboxBody.scrollTop = (mermaidLightboxBody.scrollHeight - mermaidLightboxBody.clientHeight) / 2;
    });
  }

  function closeMermaidLightbox() {
    mermaidLightbox.classList.add('hidden');
    mermaidLightboxSvgWrap.innerHTML = '';
  }

  // Zoom controls
  mermaidLbZoomIn.addEventListener('click', () => {
    lbSetZoom(lbZoom * 1.25);
  });
  mermaidLbZoomOut.addEventListener('click', () => {
    lbSetZoom(lbZoom / 1.25);
  });
  mermaidLbFit.addEventListener('click', () => {
    lbFitToView();
    mermaidLightboxBody.scrollLeft = (mermaidLightboxBody.scrollWidth - mermaidLightboxBody.clientWidth) / 2;
    mermaidLightboxBody.scrollTop = (mermaidLightboxBody.scrollHeight - mermaidLightboxBody.clientHeight) / 2;
  });
  mermaidLbActual.addEventListener('click', () => {
    lbSetZoom(1);
  });

  // Mouse wheel zoom (zoom toward cursor)
  mermaidLightboxBody.addEventListener('wheel', (e) => {
    if (mermaidLightbox.classList.contains('hidden')) return;
    e.preventDefault();
    const oldZoom = lbZoom;
    const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
    lbSetZoom(lbZoom * factor);

    // Adjust scroll to zoom toward cursor position
    const rect = mermaidLightboxBody.getBoundingClientRect();
    const cursorX = e.clientX - rect.left + mermaidLightboxBody.scrollLeft;
    const cursorY = e.clientY - rect.top + mermaidLightboxBody.scrollTop;
    const ratio = lbZoom / oldZoom;
    mermaidLightboxBody.scrollLeft = cursorX * ratio - (e.clientX - rect.left);
    mermaidLightboxBody.scrollTop = cursorY * ratio - (e.clientY - rect.top);
  }, { passive: false });

  // Drag to pan
  let lbDragging = false;
  let lbDragStartX = 0, lbDragStartY = 0;
  let lbScrollStartX = 0, lbScrollStartY = 0;

  mermaidLightboxBody.addEventListener('mousedown', (e) => {
    if (e.button !== 0) return;
    lbDragging = true;
    lbDragStartX = e.clientX;
    lbDragStartY = e.clientY;
    lbScrollStartX = mermaidLightboxBody.scrollLeft;
    lbScrollStartY = mermaidLightboxBody.scrollTop;
    mermaidLightboxBody.style.cursor = 'grabbing';
    e.preventDefault();
  });

  window.addEventListener('mousemove', (e) => {
    if (!lbDragging) return;
    mermaidLightboxBody.scrollLeft = lbScrollStartX - (e.clientX - lbDragStartX);
    mermaidLightboxBody.scrollTop = lbScrollStartY - (e.clientY - lbDragStartY);
  });

  window.addEventListener('mouseup', () => {
    if (lbDragging) {
      lbDragging = false;
      mermaidLightboxBody.style.cursor = '';
    }
  });

  // Close handlers
  mermaidLightboxClose.addEventListener('click', closeMermaidLightbox);
  mermaidLightboxOverlay.addEventListener('click', closeMermaidLightbox);
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !mermaidLightbox.classList.contains('hidden')) {
      closeMermaidLightbox();
    }
  });

  function getFileName(filePath) {
    if (filePath.startsWith('untitled:')) {
      const fileData = openFiles.get(filePath);
      return fileData?.untitledName || 'Untitled.md';
    }
    return filePath.split(/[/\\]/).pop();
  }

  function getParentFolder(filePath) {
    if (filePath.startsWith('untitled:')) {
      return '';
    }
    const parts = filePath.split(/[/\\]/);
    if (parts.length >= 2) {
      // Return parent folder name
      return parts[parts.length - 2];
    }
    return '';
  }

  function updateCurrentFilePath() {
    if (!activeFilePath || activeFilePath.startsWith('untitled:')) {
      currentFilePathSpan.textContent = '';
      currentFilePathSpan.title = '';
      return;
    }
    currentFilePathSpan.textContent = activeFilePath;
    currentFilePathSpan.title = activeFilePath;
  }

  // Render the file list in sidebar
  function renderFileList() {
    fileList.innerHTML = '';
    openFiles.forEach((fileData, filePath) => {
      const li = document.createElement('li');
      li.className = filePath === activeFilePath ? 'active' : '';
      li.title = filePath;
      const parentFolder = getParentFolder(filePath);
      li.innerHTML = `
        <span class="file-icon">📄</span>
        <div class="file-info">
          <span class="file-name">${escapeHtml(getFileName(filePath))}</span>
          ${parentFolder ? `<span class="file-path">${escapeHtml(parentFolder)}</span>` : ''}
        </div>
        ${fileData.unsaved ? '<span class="unsaved-dot"></span>' : ''}
        <button class="close-file" title="Close file">×</button>
      `;
      li.addEventListener('click', (e) => {
        if (!e.target.classList.contains('close-file')) {
          switchToFile(filePath);
        }
      });
      li.addEventListener('contextmenu', (e) => {
        e.preventDefault();
        showFileContextMenu(filePath, e.clientX, e.clientY);
      });
      li.querySelector('.close-file').addEventListener('click', (e) => {
        e.stopPropagation();
        closeFile(filePath);
      });
      fileList.appendChild(li);
    });
    highlightFolderFiles();
  }

  // File context menu
  function showFileContextMenu(filePath, x, y) {
    // Remove existing context menu if any
    const existingMenu = document.querySelector('.file-context-menu');
    if (existingMenu) existingMenu.remove();

    // Don't show for untitled files
    if (filePath.startsWith('untitled:')) return;

    const menu = document.createElement('div');
    menu.className = 'file-context-menu';
    menu.style.left = x + 'px';
    menu.style.top = y + 'px';

    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
    const showInLabel = isMac ? 'Show in Finder' : 'Show in Explorer';

    menu.innerHTML = `
      <div class="file-context-menu-item" data-action="rename">Rename</div>
      <div class="file-context-menu-separator"></div>
      <div class="file-context-menu-item" data-action="show-in-folder">${showInLabel}</div>
      <div class="file-context-menu-item" data-action="copy-path">Copy Path</div>
    `;

    document.body.appendChild(menu);

    // Handle menu item clicks
    menu.addEventListener('click', async (e) => {
      const action = e.target.dataset.action;
      if (action === 'show-in-folder') {
        window.electronAPI.showItemInFolder(filePath);
      } else if (action === 'copy-path') {
        navigator.clipboard.writeText(filePath);
      } else if (action === 'rename') {
        menu.remove();
        showRenameDialog(filePath);
        return;
      }
      menu.remove();
    });

    // Close menu when clicking outside
    const closeMenu = (e) => {
      if (!menu.contains(e.target)) {
        menu.remove();
        document.removeEventListener('click', closeMenu);
      }
    };
    setTimeout(() => document.addEventListener('click', closeMenu), 0);
  }

  // Rename dialog
  function showRenameDialog(filePath) {
    const fileName = getFileName(filePath);
    const dirPath = filePath.substring(0, filePath.length - fileName.length);

    const dialog = document.createElement('div');
    dialog.className = 'rename-dialog';
    dialog.innerHTML = `
      <div class="rename-dialog-overlay"></div>
      <div class="rename-dialog-content">
        <h3>Rename File</h3>
        <input type="text" class="rename-input" value="${escapeHtml(fileName)}" />
        <div class="rename-dialog-buttons">
          <button class="rename-btn cancel">Cancel</button>
          <button class="rename-btn ok">Rename</button>
        </div>
      </div>
    `;

    document.body.appendChild(dialog);

    const input = dialog.querySelector('.rename-input');
    const cancelBtn = dialog.querySelector('.rename-btn.cancel');
    const okBtn = dialog.querySelector('.rename-btn.ok');

    // Select filename without extension
    const dotIndex = fileName.lastIndexOf('.');
    input.focus();
    input.setSelectionRange(0, dotIndex > 0 ? dotIndex : fileName.length);

    const closeDialog = () => dialog.remove();

    const doRename = async () => {
      const newName = input.value.trim();
      if (!newName || newName === fileName) {
        closeDialog();
        return;
      }

      const newPath = dirPath + newName;
      const result = await window.electronAPI.renameFile(filePath, newPath);

      if (result.success) {
        const destPath = result.newPath || newPath;
        // Update the open file entry
        const fileData = openFiles.get(filePath);
        if (fileData) {
          // Main already moved the watch and unsaved tracking to destPath.
          // Do not notifyFileClosed(old) — on Windows a case-only rename
          // would unwatch the new path (same path, different casing).
          if (fileData.unsaved) {
            window.electronAPI.notifyFileUnsaved(destPath, newName);
          }

          openFiles.delete(filePath);
          openFiles.set(destPath, fileData);

          if (activeFilePath === filePath) {
            activeFilePath = destPath;
          }

          renderFileList();
          renderTabs();
          updateCurrentFilePath();
          document.title = `${newName} - Markdown Editor`;
          fileNameSpan.textContent = fileData.unsaved ? `${newName} (unsaved)` : newName;

          if (currentFolder) {
            window.electronAPI.listFolderMarkdown(currentFolder.folderPath);
          }
        }
      } else {
        alert('Failed to rename: ' + result.error);
      }

      closeDialog();
    };

    cancelBtn.addEventListener('click', closeDialog);
    okBtn.addEventListener('click', doRename);
    dialog.querySelector('.rename-dialog-overlay').addEventListener('click', closeDialog);
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') doRename();
      if (e.key === 'Escape') closeDialog();
    });
  }

  // Render tabs
  function renderTabs() {
    tabsBar.innerHTML = '';
    openFiles.forEach((fileData, filePath) => {
      const tab = document.createElement('div');
      tab.className = `tab ${filePath === activeFilePath ? 'active' : ''}`;
      tab.title = filePath;
      const parentFolder = getParentFolder(filePath);
      tab.innerHTML = `
        <div class="tab-info">
          <span class="tab-name">${escapeHtml(getFileName(filePath))}</span>
          ${parentFolder ? `<span class="tab-path">${escapeHtml(parentFolder)}</span>` : ''}
        </div>
        ${fileData.unsaved ? '<span class="unsaved-indicator"></span>' : ''}
        <button class="close-tab" title="Close">×</button>
      `;
      tab.addEventListener('click', (e) => {
        if (!e.target.classList.contains('close-tab')) {
          switchToFile(filePath);
        }
      });
      tab.querySelector('.close-tab').addEventListener('click', (e) => {
        e.stopPropagation();
        closeFile(filePath);
      });
      tabsBar.appendChild(tab);
    });
  }

  // Save current file state before switching
  function saveCurrentFileState() {
    if (activeFilePath && openFiles.has(activeFilePath)) {
      const fileData = openFiles.get(activeFilePath);
      fileData.content = editor.value;
      fileData.cursorPos = editor.selectionStart;
      fileData.scrollPos = editor.scrollTop;
    }
  }

  function normalizePathKey(filePath) {
    return String(filePath || '').replace(/\\/g, '/').toLowerCase();
  }

  function findOpenPath(filePath) {
    if (!filePath) return null;
    if (openFiles.has(filePath)) return filePath;
    const target = normalizePathKey(filePath);
    for (const key of openFiles.keys()) {
      if (normalizePathKey(key) === target) return key;
    }
    return null;
  }

  function applyDiskContent(filePath, content) {
    const file = openFiles.get(filePath);
    if (!file || file.unsaved || isUntitledFile(filePath)) return false;
    if (file.content === content) return false;

    const isActive = filePath === activeFilePath;
    let cursor = file.cursorPos || 0;
    let scroll = file.scrollPos || 0;
    if (isActive) {
      cursor = editor.selectionStart;
      scroll = editor.scrollTop;
    }

    file.content = content;
    file.cursorPos = Math.min(cursor, content.length);
    file.scrollPos = scroll;

    if (isActive) {
      editor.value = content;
      editor.selectionStart = editor.selectionEnd = file.cursorPos;
      editor.scrollTop = scroll;
      updatePreview();
      updateLineNumbers();
      updateCursorPosition();
      updateWordCount();
      renderOutline();
      syncLineNumbersScroll();
    }

    return true;
  }

  function switchToFile(filePath) {
    if (!openFiles.has(filePath)) return;

    // Close any open AI panels to prevent inserting into wrong file
    document.dispatchEvent(new CustomEvent('plugin:close-inline-diff'));
    document.dispatchEvent(new CustomEvent('plugin:close-inline-prompt'));

    saveCurrentFileState();
    activeFilePath = filePath;

    const fileData = openFiles.get(filePath);
    editor.value = fileData.content;

    // Restore cursor and scroll position
    editor.selectionStart = fileData.cursorPos || 0;
    editor.selectionEnd = fileData.cursorPos || 0;
    editor.scrollTop = fileData.scrollPos || 0;

    const fileName = getFileName(filePath);
    fileNameSpan.textContent = fileData.unsaved ? `${fileName} (unsaved)` : fileName;
    document.title = `${fileName} - Markdown Editor`;

    saveBtn.disabled = !fileData.unsaved;

    updatePreview();
    updateLineNumbers();
    updateCursorPosition();
    updateWordCount();
    syncLineNumbersScroll();
    renderFileList();
    renderTabs();
    renderOutline();
    updateCurrentFilePath();
  }

  // Close a file
  async function closeFile(filePath) {
    if (!openFiles.has(filePath)) return;

    const fileData = openFiles.get(filePath);
    const fileName = getFileName(filePath);

    // Check for unsaved changes
    if (fileData.unsaved) {
      const result = await window.electronAPI.confirmCloseFile(fileName);

      if (result === 0) {
        // Save first, then close
        await window.electronAPI.saveFile(filePath, fileData.content);
      } else if (result === 2) {
        // Cancel - don't close
        return;
      }
      // result === 1 means Don't Save, continue to close
    }

    openFiles.delete(filePath);
    window.electronAPI.notifyFileClosed(filePath);

    if (openFiles.size === 0) {
      // No more files open
      activeFilePath = null;
      welcomeDiv.style.display = 'flex';
      editorContainer.style.display = 'none';
      toggleGroup.style.display = 'none';
      formattingToolbarInline.style.display = 'none';
      fileNameSpan.textContent = '';
      document.title = 'Markdown Editor';
      editor.value = '';
      contentDiv.innerHTML = '';
      renderOutline();
      updateCurrentFilePath();
    } else if (filePath === activeFilePath) {
      // Switch to another file
      const nextFile = openFiles.keys().next().value;
      switchToFile(nextFile);
    }

    renderFileList();
    renderTabs();
  }

  function markUnsaved() {
    if (!activeFilePath || !openFiles.has(activeFilePath)) return;

    const fileData = openFiles.get(activeFilePath);
    if (!fileData.unsaved) {
      fileData.unsaved = true;
      saveBtn.disabled = false;
      fileNameSpan.textContent = getFileName(activeFilePath) + ' (unsaved)';
      window.electronAPI.notifyFileUnsaved(activeFilePath, getFileName(activeFilePath));
      renderFileList();
      renderTabs();
    }
  }

  function markSaved() {
    if (!activeFilePath || !openFiles.has(activeFilePath)) return;

    const fileData = openFiles.get(activeFilePath);
    fileData.unsaved = false;
    saveBtn.disabled = true;
    fileNameSpan.textContent = getFileName(activeFilePath);
    window.electronAPI.notifyFileSaved(activeFilePath);
    renderFileList();
    renderTabs();
  }

  function openFile(filePath, content) {
    const existingPath = findOpenPath(filePath);
    if (existingPath) {
      applyDiskContent(existingPath, content);
      switchToFile(existingPath);
      return;
    }

    // Close any open AI panels to prevent inserting into wrong file
    document.dispatchEvent(new CustomEvent('plugin:close-inline-diff'));
    document.dispatchEvent(new CustomEvent('plugin:close-inline-prompt'));

    // Save current file state before opening new file
    saveCurrentFileState();

    // Add new file to open files
    openFiles.set(filePath, {
      content: content,
      unsaved: false,
      cursorPos: 0,
      scrollPos: 0
    });

    activeFilePath = filePath;

    const fileName = getFileName(filePath);
    fileNameSpan.textContent = fileName;
    document.title = `${fileName} - Markdown Editor`;

    const isFirstFile = openFiles.size === 1;
    welcomeDiv.style.display = 'none';
    editorContainer.style.display = 'flex';
    toggleGroup.style.display = 'flex';
    formattingToolbarInline.style.display = 'flex';
    if (isFirstFile) {
      setViewMode(defaultViewMode, false);
    }

    editor.value = content;
    editor.selectionStart = 0;
    editor.selectionEnd = 0;
    editor.scrollTop = 0;

    updatePreview();
    updateLineNumbers();
    updateCursorPosition();
    updateWordCount();
    renderFileList();
    renderTabs();
    renderOutline();
    updateCurrentFilePath();
  }

  function newFile() {
    // Close any open AI panels to prevent inserting into wrong file
    document.dispatchEvent(new CustomEvent('plugin:close-inline-diff'));
    document.dispatchEvent(new CustomEvent('plugin:close-inline-prompt'));

    // Save current file state before creating new file
    saveCurrentFileState();

    // Create untitled file path
    const untitledPath = `untitled:${untitledCounter}`;
    const fileName = `Untitled-${untitledCounter}.md`;
    untitledCounter++;

    // Add new file to open files
    openFiles.set(untitledPath, {
      content: '',
      unsaved: true,
      cursorPos: 0,
      scrollPos: 0,
      isUntitled: true,
      untitledName: fileName
    });

    activeFilePath = untitledPath;

    fileNameSpan.textContent = fileName + ' (unsaved)';
    document.title = `${fileName} - Markdown Editor`;

    const isFirstFile = openFiles.size === 1;
    welcomeDiv.style.display = 'none';
    editorContainer.style.display = 'flex';
    toggleGroup.style.display = 'flex';
    formattingToolbarInline.style.display = 'flex';
    if (isFirstFile) {
      setViewMode(defaultViewMode, false);
    }

    editor.value = '';
    editor.selectionStart = 0;
    editor.selectionEnd = 0;
    editor.scrollTop = 0;
    saveBtn.disabled = false;

    window.electronAPI.notifyFileUnsaved(untitledPath, fileName);

    updatePreview();
    updateLineNumbers();
    updateCursorPosition();
    updateWordCount();
    renderFileList();
    renderTabs();
    renderOutline();
    updateCurrentFilePath();

    editor.focus();
  }

  function isUntitledFile(filePath) {
    return filePath && filePath.startsWith('untitled:');
  }

  // Editor input handler with debounced preview update
  let debounceTimer;
  let outlineDebounceTimer;
  let isStreaming = false;
  let lastStreamUpdate = 0;
  const STREAM_THROTTLE = 50; // Update preview every 50ms during streaming

  editor.addEventListener('input', () => {
    if (activeFilePath && openFiles.has(activeFilePath)) {
      openFiles.get(activeFilePath).content = editor.value;
    }
    markUnsaved();
    updateLineNumbers();
    updateCursorPosition();
    updateWordCount();

    if (isStreaming) {
      // Throttle updates during streaming for smoother preview
      const now = Date.now();
      if (now - lastStreamUpdate > STREAM_THROTTLE) {
        lastStreamUpdate = now;
        updatePreview();
      }
    } else {
      // Normal debounce for regular typing
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(updatePreview, 150);
    }

    // Debounced outline update (longer delay since structure changes less frequently)
    clearTimeout(outlineDebounceTimer);
    outlineDebounceTimer = setTimeout(renderOutline, 300);
  });

  // Listen for streaming state changes from plugins
  document.addEventListener('plugin:streaming-start', () => {
    isStreaming = true;
    lastStreamUpdate = 0;
  });

  document.addEventListener('plugin:streaming-end', () => {
    isStreaming = false;
    updatePreview(); // Final update when streaming ends
    updateLineNumbers(); // Ensure line numbers are updated
    syncLineNumbersScroll(); // Sync scroll position
  });

  // Toggle buttons — also remember as the default for next session
  editBtn.addEventListener('click', () => setViewMode('edit'));
  previewBtn.addEventListener('click', () => setViewMode('preview'));
  splitBtn.addEventListener('click', () => setViewMode('split'));

  document.addEventListener('set-default-view-mode', (e) => {
    const mode = e.detail && e.detail.mode;
    if (VIEW_MODES.includes(mode)) {
      setViewMode(mode, true);
    }
  });

  // New button
  const newBtn = document.getElementById('new-btn');
  newBtn.addEventListener('click', () => {
    newFile();
  });

  // Donate link
  const donateLink = document.getElementById('donate-link');
  donateLink.addEventListener('click', (e) => {
    e.preventDefault();
    window.electronAPI.openExternal('https://buymeacoffee.com/donvitocodes');
  });

  // Open links in preview pane in external browser
  contentDiv.addEventListener('click', (e) => {
    const link = e.target.closest('a');
    if (link && link.href) {
      e.preventDefault();
      window.electronAPI.openExternal(link.href);
    }
  });

  // Open button
  openBtn.addEventListener('click', () => {
    window.electronAPI.openFile();
  });

  // Save button
  saveBtn.addEventListener('click', async () => {
    await saveCurrentFile();
  });

  async function saveCurrentFile() {
    if (!activeFilePath || !openFiles.has(activeFilePath)) return;

    const fileData = openFiles.get(activeFilePath);
    if (!fileData.unsaved) return;

    if (isUntitledFile(activeFilePath)) {
      await saveFileAs();
    } else {
      await window.electronAPI.saveFile(activeFilePath, fileData.content);
    }
  }

  async function saveFileAs() {
    if (!activeFilePath || !openFiles.has(activeFilePath)) return;

    const fileData = openFiles.get(activeFilePath);
    const defaultName = isUntitledFile(activeFilePath)
      ? fileData.untitledName
      : getFileName(activeFilePath);

    const result = await window.electronAPI.saveFileAs(fileData.content, defaultName);

    if (result.success && result.filePath) {
      // Remove old entry
      const oldPath = activeFilePath;
      window.electronAPI.notifyFileClosed(oldPath);
      openFiles.delete(oldPath);

      // Add with new path
      openFiles.set(result.filePath, {
        content: fileData.content,
        unsaved: false,
        cursorPos: fileData.cursorPos,
        scrollPos: fileData.scrollPos
      });

      activeFilePath = result.filePath;
      const fileName = getFileName(result.filePath);
      fileNameSpan.textContent = fileName;
      document.title = `${fileName} - Markdown Editor`;
      saveBtn.disabled = true;

      renderFileList();
      renderTabs();
    }
  }

  // IPC handlers
  window.electronAPI.onFileOpened((data) => {
    openFile(data.filePath, data.content);
  });

  window.electronAPI.onFileChanged((data) => {
    const existingPath = findOpenPath(data.filePath);
    if (!existingPath) return;
    applyDiskContent(existingPath, data.content);
  });

  window.electronAPI.onFileSaved(() => {
    markSaved();
  });

  window.electronAPI.onTriggerSave(async () => {
    await saveCurrentFile();
  });

  window.electronAPI.onTriggerSaveAs(async () => {
    await saveFileAs();
  });

  window.electronAPI.onNewFile(() => {
    newFile();
  });

  // Save all unsaved files and close
  window.electronAPI.onSaveAllAndClose(async () => {
    const savePromises = [];
    openFiles.forEach((fileData, filePath) => {
      if (fileData.unsaved && !isUntitledFile(filePath)) {
        savePromises.push(window.electronAPI.saveFile(filePath, fileData.content));
      }
    });
    await Promise.all(savePromises);
    window.electronAPI.sendAllSavedClose();
  });

  // Keyboard shortcuts
  document.addEventListener('keydown', (e) => {
    // Ctrl+S to save
    if (e.ctrlKey && e.key === 's') {
      e.preventDefault();
      saveCurrentFile();
    }
    // Ctrl+W to close current tab
    if (e.ctrlKey && e.key === 'w') {
      e.preventDefault();
      if (activeFilePath) {
        closeFile(activeFilePath);
      }
    }
  });

  // Handle right-click context menu
  editor.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    window.electronAPI.showContextMenu({
      selectedText: editor.value.substring(editor.selectionStart, editor.selectionEnd),
      selectionStart: editor.selectionStart,
      selectionEnd: editor.selectionEnd
    });
  });

  // Handle cut, copy, paste from context menu
  window.electronAPI.onEditorCut((data) => {
    const { selectedText, selectionStart, selectionEnd } = data || {};
    if (selectedText) {
      navigator.clipboard.writeText(selectedText);
      editor.focus();
      // Restore selection before cutting
      editor.setSelectionRange(selectionStart, selectionEnd);
      document.execCommand('insertText', false, '');
      editor.dispatchEvent(new Event('input', { bubbles: true }));
    }
  });

  window.electronAPI.onEditorCopy((data) => {
    const { selectedText } = data || {};
    if (selectedText) {
      navigator.clipboard.writeText(selectedText);
    }
  });

  window.electronAPI.onEditorPaste(async () => {
    try {
      const text = await navigator.clipboard.readText();
      if (text) {
        editor.focus();
        document.execCommand('insertText', false, text);
        editor.dispatchEvent(new Event('input', { bubbles: true }));
      }
    } catch (err) {
      console.error('Failed to paste:', err);
    }
  });

  // Handle plugin context menu actions
  window.pluginAPI.onContextMenuAction((data) => {
    // Dispatch event for plugin host to handle
    document.dispatchEvent(new CustomEvent('plugin:context-menu-action', { detail: data }));
  });

  // Handle AI actions from context menu
  window.electronAPI.onAIAction((data) => {
    const { actionId, selectedText, selectionStart, selectionEnd } = data;
    // Restore selection in editor
    editor.focus();
    editor.setSelectionRange(selectionStart, selectionEnd);
    // Dispatch to plugin
    document.dispatchEvent(new CustomEvent('plugin:context-menu-action', {
      detail: {
        pluginId: 'ai-editor',
        actionId,
        selectedText,
        selectionStart,
        selectionEnd
      }
    }));
  });

  // Cmd/Ctrl+K shortcut for AI Generate with prompt
  document.addEventListener('keydown', (e) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault();

      // Check if the AI plugin is loaded/enabled
      if (!window.pluginHost || !window.pluginHost.getPlugin('ai-editor')) {
        return;
      }

      const selectedText = editor.value.substring(editor.selectionStart, editor.selectionEnd);
      document.dispatchEvent(new CustomEvent('plugin:context-menu-action', {
        detail: {
          pluginId: 'ai-editor',
          actionId: 'generate',
          selectedText,
          selectionStart: editor.selectionStart,
          selectionEnd: editor.selectionEnd
        }
      }));
    }
  });

  // Handle open settings
  window.electronAPI.onOpenSettings(() => {
    document.dispatchEvent(new CustomEvent('open-settings'));
  });

  // Loading indicator handlers (small, non-blocking)
  const loadingIndicator = document.getElementById('loading-indicator');
  const loadingMessage = document.getElementById('loading-message');

  document.addEventListener('plugin:show-loading', (e) => {
    loadingMessage.textContent = e.detail.message || 'Processing...';
    loadingIndicator.classList.remove('hidden');
  });

  document.addEventListener('plugin:hide-loading', () => {
    loadingIndicator.classList.add('hidden');
  });

  // Prompt dialog handlers
  const promptDialog = document.getElementById('prompt-dialog');
  const promptDialogTitle = document.getElementById('prompt-dialog-title');
  const promptDialogInput = document.getElementById('prompt-dialog-input');
  const promptDialogCancel = document.getElementById('prompt-dialog-cancel');
  const promptDialogOk = document.getElementById('prompt-dialog-ok');
  let promptResolve = null;

  document.addEventListener('plugin:show-prompt', (e) => {
    const { title, placeholder, resolve } = e.detail;
    promptDialogTitle.textContent = title || 'Enter prompt';
    promptDialogInput.placeholder = placeholder || '';
    promptDialogInput.value = '';
    promptResolve = resolve;
    promptDialog.classList.remove('hidden');
    promptDialogInput.focus();
  });

  promptDialogCancel.addEventListener('click', () => {
    promptDialog.classList.add('hidden');
    if (promptResolve) {
      promptResolve(null);
      promptResolve = null;
    }
  });

  promptDialogOk.addEventListener('click', () => {
    promptDialog.classList.add('hidden');
    if (promptResolve) {
      promptResolve(promptDialogInput.value.trim() || null);
      promptResolve = null;
    }
  });

  // Allow Enter to submit (Shift+Enter for newline)
  promptDialogInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      promptDialogOk.click();
    } else if (e.key === 'Escape') {
      promptDialogCancel.click();
    }
  });

  // Close prompt on overlay click
  promptDialog.querySelector('.prompt-dialog-overlay').addEventListener('click', () => {
    promptDialogCancel.click();
  });

  // AI Review dialog handlers
  const aiReviewDialog = document.getElementById('ai-review-dialog');
  const aiReviewOriginal = document.getElementById('ai-review-original');
  const aiReviewGenerated = document.getElementById('ai-review-generated');
  const aiReviewClose = document.getElementById('ai-review-close');
  const aiReviewRegenerate = document.getElementById('ai-review-regenerate');
  const aiReviewReject = document.getElementById('ai-review-reject');
  const aiReviewAccept = document.getElementById('ai-review-accept');
  let aiReviewResolve = null;

  document.addEventListener('plugin:show-review', (e) => {
    const { original, generated, resolve } = e.detail;
    aiReviewOriginal.textContent = original || '(empty)';
    aiReviewGenerated.textContent = generated || '(empty)';
    aiReviewResolve = resolve;
    aiReviewDialog.classList.remove('hidden');
  });

  function closeAiReview(action) {
    aiReviewDialog.classList.add('hidden');
    if (aiReviewResolve) {
      aiReviewResolve(action);
      aiReviewResolve = null;
    }
  }

  aiReviewClose.addEventListener('click', () => closeAiReview('reject'));
  aiReviewReject.addEventListener('click', () => closeAiReview('reject'));
  aiReviewAccept.addEventListener('click', () => closeAiReview('accept'));
  aiReviewRegenerate.addEventListener('click', () => closeAiReview('regenerate'));

  aiReviewDialog.querySelector('.ai-review-overlay').addEventListener('click', () => {
    closeAiReview('reject');
  });

  // Escape key to close review dialog
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !aiReviewDialog.classList.contains('hidden')) {
      closeAiReview('reject');
    }
  });

  // Inline Diff Panel handlers
  const inlineDiffPanel = document.getElementById('inline-diff-panel');
  const inlineDiffAction = document.getElementById('inline-diff-action');
  const inlineDiffOriginal = document.getElementById('inline-diff-original');
  const inlineDiffGenerated = document.getElementById('inline-diff-generated');
  const inlineDiffReject = document.getElementById('inline-diff-reject');
  const inlineDiffAccept = document.getElementById('inline-diff-accept');

  let inlineDiffResolve = null;
  let inlineDiffOnAbort = null;
  let inlineDiffOriginalText = '';
  let inlineDiffGeneratedText = '';
  let inlineDiffSelectionStart = 0;
  let inlineDiffSelectionEnd = 0;

  function positionInlineDiffPanel() {
    // Get the editor's position
    const editorRect = editor.getBoundingClientRect();

    // Position panel width - wider, but constrained to editor width
    const panelWidth = Math.min(650, Math.max(500, editorRect.width - 60));
    inlineDiffPanel.style.width = panelWidth + 'px';

    // Center horizontally relative to editor
    let left = editorRect.left + (editorRect.width - panelWidth) / 2;
    // Keep within viewport
    left = Math.max(20, Math.min(left, window.innerWidth - panelWidth - 20));
    inlineDiffPanel.style.left = left + 'px';

    // Position vertically - try to show near top of editor area
    let top = editorRect.top + 60;

    // Keep within viewport with margin
    top = Math.max(60, Math.min(top, 100));
    inlineDiffPanel.style.top = top + 'px';
  }

  function closeInlineDiff(action) {
    inlineDiffPanel.classList.add('hidden');
    inlineDiffGenerated.classList.remove('streaming');
    inlineDiffAction.classList.remove('generating');

    // Re-enable editor and accept button for next use
    editor.readOnly = false;
    inlineDiffAccept.disabled = false;

    // Abort the stream if rejecting
    if (action === 'reject' && inlineDiffOnAbort) {
      inlineDiffOnAbort();
      inlineDiffOnAbort = null;
    }

    if (action === 'accept') {
      // Replace the selection with generated text
      editor.focus();
      editor.selectionStart = inlineDiffSelectionStart;
      editor.selectionEnd = inlineDiffSelectionEnd;
      document.execCommand('insertText', false, inlineDiffGeneratedText);
      editor.dispatchEvent(new Event('input', { bubbles: true }));
    }

    if (inlineDiffResolve) {
      inlineDiffResolve(action);
      inlineDiffResolve = null;
    }
  }

  document.addEventListener('plugin:start-inline-diff', (e) => {
    const { actionLabel, originalText, resolve, onAbort } = e.detail;

    // Reject any pending promise before opening new dialog
    if (inlineDiffResolve) {
      if (inlineDiffOnAbort) inlineDiffOnAbort();
      inlineDiffResolve('reject');
      inlineDiffResolve = null;
      inlineDiffOnAbort = null;
    }

    inlineDiffAction.textContent = actionLabel;
    inlineDiffAction.classList.add('generating');
    inlineDiffOriginal.textContent = originalText || '(empty)';
    inlineDiffGenerated.textContent = '';
    inlineDiffGenerated.classList.add('streaming');
    inlineDiffResolve = resolve;
    inlineDiffOnAbort = onAbort;
    inlineDiffOriginalText = originalText;
    inlineDiffGeneratedText = '';
    inlineDiffSelectionStart = editor.selectionStart;
    inlineDiffSelectionEnd = editor.selectionEnd;

    // Make editor read-only while diff panel is open to preserve selection positions
    editor.readOnly = true;

    // Disable Accept button until generation completes
    inlineDiffAccept.disabled = true;

    positionInlineDiffPanel();
    inlineDiffPanel.classList.remove('hidden');
  });

  document.addEventListener('plugin:update-inline-diff', (e) => {
    const { text } = e.detail;
    inlineDiffGeneratedText = text;
    inlineDiffGenerated.textContent = text;

    // Auto-scroll to show latest content
    const body = inlineDiffPanel.querySelector('.inline-diff-body');
    body.scrollTop = body.scrollHeight;
  });

  document.addEventListener('plugin:finish-inline-diff-streaming', () => {
    inlineDiffGenerated.classList.remove('streaming');
    inlineDiffAction.classList.remove('generating');
    // Enable Accept button now that generation is complete
    inlineDiffAccept.disabled = false;
  });

  document.addEventListener('plugin:close-inline-diff', () => {
    closeInlineDiff('reject');
  });

  document.addEventListener('plugin:set-inline-diff-abort', (e) => {
    inlineDiffOnAbort = e.detail.abort;
  });

  inlineDiffReject.addEventListener('click', () => closeInlineDiff('reject'));
  inlineDiffAccept.addEventListener('click', () => closeInlineDiff('accept'));

  // Close panel when clicking outside of it (allows clicking tabs, sidebar, etc.)
  document.addEventListener('mousedown', (e) => {
    if (inlineDiffPanel.classList.contains('hidden')) return;
    if (!inlineDiffPanel.contains(e.target)) {
      closeInlineDiff('reject');
    }
  });

  // Keyboard shortcuts for inline diff
  document.addEventListener('keydown', (e) => {
    if (inlineDiffPanel.classList.contains('hidden')) return;

    // Cmd/Ctrl + Enter to accept
    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
      e.preventDefault();
      closeInlineDiff('accept');
    }
    // Escape to reject/close
    if (e.key === 'Escape') {
      e.preventDefault();
      closeInlineDiff('reject');
    }
  });

  // Inline Prompt Input handlers
  const inlinePrompt = document.getElementById('inline-prompt');
  const inlinePromptInput = document.getElementById('inline-prompt-input');
  const inlinePromptSubmit = document.getElementById('inline-prompt-submit');
  const inlinePromptClose = document.getElementById('inline-prompt-close');
  let inlinePromptResolve = null;

  function positionInlinePrompt() {
    const editorRect = editor.getBoundingClientRect();

    // Width similar to inline diff
    const promptWidth = Math.min(550, Math.max(400, editorRect.width - 100));
    inlinePrompt.style.width = promptWidth + 'px';

    // Center horizontally relative to editor
    let left = editorRect.left + (editorRect.width - promptWidth) / 2;
    left = Math.max(20, Math.min(left, window.innerWidth - promptWidth - 20));
    inlinePrompt.style.left = left + 'px';

    // Position near top of editor
    let top = editorRect.top + 60;
    top = Math.max(60, Math.min(top, 100));
    inlinePrompt.style.top = top + 'px';
  }

  function closeInlinePrompt(value) {
    inlinePrompt.classList.add('hidden');
    inlinePromptInput.value = '';
    if (inlinePromptResolve) {
      inlinePromptResolve(value);
      inlinePromptResolve = null;
    }
  }

  document.addEventListener('plugin:show-inline-prompt', (e) => {
    const { placeholder, resolve } = e.detail;

    // Reject any pending promise before opening new dialog
    if (inlinePromptResolve) {
      inlinePromptResolve(null);
      inlinePromptResolve = null;
    }

    inlinePromptInput.placeholder = placeholder || 'Edit with AI...';
    inlinePromptResolve = resolve;
    positionInlinePrompt();
    inlinePrompt.classList.remove('hidden');
    inlinePromptInput.focus();
  });

  document.addEventListener('plugin:close-inline-prompt', () => {
    closeInlinePrompt(null);
  });

  inlinePromptSubmit.addEventListener('click', () => {
    const value = inlinePromptInput.value.trim();
    if (value) {
      closeInlinePrompt(value);
    }
  });

  inlinePromptClose.addEventListener('click', () => {
    closeInlinePrompt(null);
  });

  // Auto-resize textarea as user types
  inlinePromptInput.addEventListener('input', () => {
    inlinePromptInput.style.height = 'auto';
    inlinePromptInput.style.height = Math.min(inlinePromptInput.scrollHeight, 150) + 'px';
  });

  inlinePromptInput.addEventListener('keydown', (e) => {
    // Enter to submit (Shift+Enter for new line)
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      const value = inlinePromptInput.value.trim();
      if (value) {
        closeInlinePrompt(value);
      }
    }
    // Escape to cancel
    if (e.key === 'Escape') {
      e.preventDefault();
      closeInlinePrompt(null);
    }
  });

  // Notification handlers
  const notificationContainer = document.getElementById('notification-container');

  document.addEventListener('plugin:notification', (e) => {
    const { message, type } = e.detail;
    const notification = document.createElement('div');
    notification.className = `notification ${type || 'info'}`;
    notification.textContent = message;
    notificationContainer.appendChild(notification);

    // Auto-remove after 4 seconds
    setTimeout(() => {
      notification.style.opacity = '0';
      notification.style.transform = 'translateX(100%)';
      setTimeout(() => notification.remove(), 300);
    }, 4000);
  });

  // Initialize plugins
  if (window.initializePlugins) {
    window.initializePlugins(editor);
  }

  // Handle drag and drop
  document.body.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.stopPropagation();
    document.body.classList.add('drag-over');
  });

  document.body.addEventListener('dragleave', (e) => {
    e.preventDefault();
    e.stopPropagation();
    document.body.classList.remove('drag-over');
  });

  document.body.addEventListener('drop', (e) => {
    e.preventDefault();
    e.stopPropagation();
    document.body.classList.remove('drag-over');

    const files = e.dataTransfer.files;
    if (files.length > 0) {
      const validExtensions = ['.md', '.markdown', '.txt'];

      // Support dropping multiple files
      Array.from(files).forEach(file => {
        const filePath = window.electronAPI.getPathForFile(file);
        const ext = file.name.toLowerCase().substring(file.name.lastIndexOf('.'));
        if (validExtensions.includes(ext)) {
          window.electronAPI.openFilePath(filePath);
        } else if (filePath) {
          window.electronAPI.openFolderPath(filePath);
        }
      });
    }
  });
});