<!DOCTYPE html>
<html>
<head>
<!-- fixed cannot preview local image problem -->
  <base href="{0}/" />
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <style>{1}</style>
  <link href="{3}monokai.min.css" rel="stylesheet">
  <link href="{3}katex.min.css" type="text/css" rel="stylesheet" />
  <script>
    // 语言包
    var i18n = {
      zh: {
        layoutCentered: '📐 居中',
        layoutFull: '📐 宽屏',
        themeDark: '🌙 深色',
        themeLight: '☀️ 浅色',
        outline: '📑 大纲',
        outlineClose: '✕ 关闭',
        pdf: '📄 PDF',
        tableOfContents: '📑 目录',
        exportPdf: '导出 PDF',
        exportingPdf: '正在导出 PDF...',
        pdfExportSuccess: 'PDF 导出成功',
        pdfExportFailed: 'PDF 导出失败',
        exportPng: '📥 导出 PNG',
        noMermaidFound: '未找到流程图',
        mermaidRendering: '流程图正在渲染中，请稍后',
        exportingMermaid: '正在导出流程图...',
        mermaidExportSuccess: '流程图导出成功',
        mermaidExportFailed: '导出失败',
        copied: '已复制!',
        copyFailed: '复制失败',
        copy: '复制',
        vimNavigation: '📍 Vim 导航',
        featureToggle: '🎨 功能切换',
        quickJump: '📑 快速跳转',
        other: '🖼️ 其他',
        shortcutsHelp: '⌨️ 快捷键帮助',
        pressToShowHelp: '按 ? 随时打开此帮助',
        switchLayout: '切换布局',
        switchTheme: '切换主题',
        switchOutline: '切换大纲',
        exportPdfShortcut: '导出 PDF',
        jumpToHeading: '跳转到 H1-H6',
        showHelp: '显示帮助',
        closeViewer: '关闭查看器/预览',
        clickToZoom: '点击图片放大',
        down: '向下逐行',
        up: '向上逐行',
        downHalf: '向下半屏',
        upHalf: '向上半屏',
        downFull: '向下整屏',
        upFull: '向上整屏',
        top: '顶部',
        bottom: '底部',
        left: '向左',
        right: '向右'
      },
      en: {
        layoutCentered: '📐 Centered',
        layoutFull: '📐 Full Width',
        themeDark: '🌙 Dark',
        themeLight: '☀️ Light',
        outline: '📑 Outline',
        outlineClose: '✕ Close',
        pdf: '📄 PDF',
        tableOfContents: '📑 Contents',
        exportPdf: 'Export PDF',
        exportingPdf: 'Exporting PDF...',
        pdfExportSuccess: 'PDF exported successfully',
        pdfExportFailed: 'PDF export failed',
        exportPng: '📥 Export PNG',
        noMermaidFound: 'No diagram found',
        mermaidRendering: 'Diagram is rendering, please wait',
        exportingMermaid: 'Exporting diagram...',
        mermaidExportSuccess: 'Diagram exported successfully',
        mermaidExportFailed: 'Export failed',
        copied: 'Copied!',
        copyFailed: 'Copy failed',
        copy: 'Copy',
        vimNavigation: '📍 Vim Navigation',
        featureToggle: '🎨 Feature Toggle',
        quickJump: '📑 Quick Jump',
        other: '🖼️ Other',
        shortcutsHelp: '⌨️ Keyboard Shortcuts',
        pressToShowHelp: 'Press ? to show this help',
        switchLayout: 'Switch Layout',
        switchTheme: 'Switch Theme',
        switchOutline: 'Switch Outline',
        exportPdfShortcut: 'Export PDF',
        jumpToHeading: 'Jump to H1-H6',
        showHelp: 'Show Help',
        closeViewer: 'Close Viewer/Preview',
        clickToZoom: 'Click to zoom image',
        down: 'Scroll Down',
        up: 'Scroll Up',
        downHalf: 'Page Down',
        upHalf: 'Page Up',
        downFull: 'Screen Down',
        upFull: 'Screen Up',
        top: 'Top',
        bottom: 'Bottom',
        left: 'Left',
        right: 'Right'
      }
    };
    
    // 检测系统语言
    var lang = 'zh';
    try {
      var systemLang = navigator.language || navigator.userLanguage;
      if (systemLang && systemLang.toLowerCase().startsWith('en')) {
        lang = 'en';
      }
    } catch (e) {}
    
    // 获取翻译文本
    function t(key) {
      return i18n[lang][key] || i18n['zh'][key] || key;
    }
    
    // 应用语言到页面（除工具栏按钮外的所有 data-i18n 元素）
    function applyLang() {
      // 应用 data-i18n 属性（工具栏按钮已由 initToolbarText() 处理）
      document.querySelectorAll('[data-i18n]').forEach(function(el) {
        // 跳过工具栏按钮，它们已在 initToolbarText() 中设置
        if (el.classList.contains('layout-toggle') || 
            el.classList.contains('theme-toggle') || 
            el.classList.contains('outline-toggle') || 
            el.classList.contains('export-pdf')) {
          return;
        }
        var key = el.getAttribute('data-i18n');
        el.textContent = t(key);
      });
    }
    
    // 主题和布局状态
    var currentTheme = 'light';
    var currentLayout = 'centered';
    
    // 布局相关函数
    function toggleLayout() {
      var layoutToggle = document.querySelector('.layout-toggle');
      var body = document.getElementById('markdownBody');
      
      if (currentLayout === 'centered') {
        currentLayout = 'full';
        body.classList.remove('layout-centered');
        body.classList.add('layout-full');
        layoutToggle.textContent = t('layoutCentered');
      } else {
        currentLayout = 'centered';
        body.classList.remove('layout-full');
        body.classList.add('layout-centered');
        layoutToggle.textContent = t('layoutFull');
      }
      
      try {
        localStorage.setItem('markdownViewerLayout', currentLayout);
      } catch (e) {}
    }
    
    function loadLayout() {
      try {
        var savedLayout = localStorage.getItem('markdownViewerLayout');
        if (savedLayout === 'full') {
          currentLayout = 'full';
          var body = document.getElementById('markdownBody');
          if (body) {
            body.classList.remove('layout-centered');
            body.classList.add('layout-full');
          }
          var layoutToggle = document.querySelector('.layout-toggle');
          if (layoutToggle) layoutToggle.textContent = t('layoutCentered');
        } else {
          var layoutToggle = document.querySelector('.layout-toggle');
          if (layoutToggle) layoutToggle.textContent = t('layoutFull');
        }
      } catch (e) {}
    }
    
    // 主题相关函数
    function toggleTheme() {
      var themeToggle = document.querySelector('.theme-toggle');
      
      if (currentTheme === 'light') {
        currentTheme = 'dark';
        document.documentElement.setAttribute('data-theme', 'dark');
        themeToggle.textContent = t('themeLight');
      } else {
        currentTheme = 'light';
        document.documentElement.removeAttribute('data-theme');
        themeToggle.textContent = t('themeDark');
      }
      
      try {
        localStorage.setItem('markdownViewerTheme', currentTheme);
      } catch (e) {}
    }
    
    function loadTheme() {
      try {
        var savedTheme = localStorage.getItem('markdownViewerTheme');
        if (savedTheme === 'dark') {
          currentTheme = 'dark';
          document.documentElement.setAttribute('data-theme', 'dark');
          var themeToggle = document.querySelector('.theme-toggle');
          if (themeToggle) themeToggle.textContent = t('themeLight');
        } else {
          var themeToggle = document.querySelector('.theme-toggle');
          if (themeToggle) themeToggle.textContent = t('themeDark');
        }
      } catch (e) {}
    }
    
    // 页面加载前应用保存的主题和布局
    loadTheme();
    loadLayout();
  </script>
</head>
<body>
<div class="reading-progress-bar" id="readingProgressBar"></div>
<div class="toolbar">
  <button class="layout-toggle" onclick="toggleLayout()" data-i18n="layoutFull"></button>
  <button class="theme-toggle" onclick="toggleTheme()" data-i18n="themeDark"></button>
  <button class="outline-toggle" onclick="toggleOutline()" data-i18n="outline"></button>
  <button class="export-pdf" onclick="exportPdf()" data-i18n="pdf"></button>
</div>
<script>
// 立即设置工具栏按钮文字和 title，避免延迟显示
(function initToolbarText() {
  var layoutBtn = document.querySelector('.layout-toggle');
  var themeBtn = document.querySelector('.theme-toggle');
  var outlineBtn = document.querySelector('.outline-toggle');
  var pdfBtn = document.querySelector('.export-pdf');
  
  if (layoutBtn) {
    layoutBtn.textContent = currentLayout === 'full' ? t('layoutCentered') : t('layoutFull');
    layoutBtn.title = t('switchLayout') + ' (M)';
  }
  if (themeBtn) {
    themeBtn.textContent = currentTheme === 'dark' ? t('themeLight') : t('themeDark');
    themeBtn.title = t('switchTheme') + ' (T)';
  }
  if (outlineBtn) {
    outlineBtn.textContent = t('outline');
    outlineBtn.title = t('switchOutline') + ' (O)';
  }
  if (pdfBtn) {
    pdfBtn.textContent = t('pdf');
    pdfBtn.title = t('exportPdfShortcut') + ' (P)';
  }
})();
</script>
<!-- 大纲面板移到 markdown-body 外部 -->
<div class="outline-panel" id="outlinePanel">
  <h3 data-i18n="tableOfContents"></h3>
  <ul class="outline-tree" id="outlineTree"></ul>
</div>
<!-- 图片放大查看器 -->
<div class="image-viewer-overlay" id="imageViewer" onclick="closeImageViewer()">
  <span class="image-viewer-close" onclick="closeImageViewer()">&times;</span>
  <img id="imageViewerImg" src="" alt="">
  <div class="image-viewer-caption" id="imageViewerCaption"></div>
</div>
<!-- 快捷键帮助面板 -->
<div class="shortcut-help-overlay" id="shortcutHelp" onclick="closeShortcutHelp(event)">
  <div class="shortcut-help-panel">
    <span class="shortcut-help-close" onclick="closeShortcutHelp(event)">&times;</span>
    <h2 data-i18n="shortcutsHelp"></h2>
    
    <div class="shortcut-help-section">
      <h3 data-i18n="vimNavigation"></h3>
      <div class="shortcut-grid">
        <div class="shortcut-item"><span class="shortcut-key">j</span><span class="shortcut-desc" data-i18n="down"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">k</span><span class="shortcut-desc" data-i18n="up"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">d</span><span class="shortcut-desc" data-i18n="downHalf"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">u</span><span class="shortcut-desc" data-i18n="upHalf"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">f</span><span class="shortcut-desc" data-i18n="downFull"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">b</span><span class="shortcut-desc" data-i18n="upFull"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">gg</span><span class="shortcut-desc" data-i18n="top"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">G</span><span class="shortcut-desc" data-i18n="bottom"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">h</span><span class="shortcut-desc" data-i18n="left"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">l</span><span class="shortcut-desc" data-i18n="right"></span></div>
      </div>
    </div>
    
    <div class="shortcut-help-section">
      <h3 data-i18n="featureToggle"></h3>
      <div class="shortcut-grid">
        <div class="shortcut-item"><span class="shortcut-key">M</span><span class="shortcut-desc" data-i18n="switchLayout"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">T</span><span class="shortcut-desc" data-i18n="switchTheme"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">O</span><span class="shortcut-desc" data-i18n="switchOutline"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">P</span><span class="shortcut-desc" data-i18n="exportPdfShortcut"></span></div>
      </div>
    </div>
    
    <div class="shortcut-help-section">
      <h3 data-i18n="quickJump"></h3>
      <div class="shortcut-grid">
        <div class="shortcut-item"><span class="shortcut-key">1-6</span><span class="shortcut-desc" data-i18n="jumpToHeading"></span></div>
      </div>
    </div>
    
    <div class="shortcut-help-section">
      <h3 data-i18n="other"></h3>
      <div class="shortcut-grid">
        <div class="shortcut-item"><span class="shortcut-key">?</span><span class="shortcut-desc" data-i18n="showHelp"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">ESC</span><span class="shortcut-desc" data-i18n="closeViewer"></span></div>
        <div class="shortcut-item"><span class="shortcut-key">🖱️</span><span class="shortcut-desc" data-i18n="clickToZoom"></span></div>
      </div>
    </div>
    
    <div class="shortcut-help-tip" data-i18n="pressToShowHelp"></div>
  </div>
</div>
<article class="markdown-body" id="markdownBody">
{2}
</article>                                                                  
<script src="{3}highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script defer src="{3}katex.min.js"></script>
<script defer src="{3}auto-render.min.js"
    onload="renderMathInElement(document.body);"></script>
<script defer src="{3}mermaid.min.js"
                                                                         onload="mermaid.initialize({startOnLoad:true,flowchart:{useMaxWidth:false,htmlLabels:false},sequenceDiagram:{useMaxWidth:false,htmlLabels:false}});"></script>
<script src="{3}html2canvas.min.js"></script>
<script>
// 阅读进度条功能
function updateReadingProgress() {
  var progressBar = document.getElementById('readingProgressBar');
  if (!progressBar) return;
  
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
  
  progressBar.style.width = scrollPercent + '%';
}

// 监听滚动更新进度
window.addEventListener('scroll', function() {
  updateReadingProgress();
});

// 快捷键帮助功能
function showShortcutHelp() {
  var help = document.getElementById('shortcutHelp');
  help.classList.add('visible');
  document.body.style.overflow = 'hidden';
}

function closeShortcutHelp(event) {
  if (event && event.target !== event.currentTarget) {
    return;
  }
  var help = document.getElementById('shortcutHelp');
  help.classList.remove('visible');
  document.body.style.overflow = '';
}

// 图片放大查看功能
var currentImageSrc = '';

// 打开图片查看器
function openImageViewer(img) {
  var viewer = document.getElementById('imageViewer');
  var viewerImg = document.getElementById('imageViewerImg');
  var caption = document.getElementById('imageViewerCaption');
  
  currentImageSrc = img.src;
  viewerImg.src = currentImageSrc;
  
  // 如果有 alt 文本，显示为标题
  if (img.alt) {
    caption.textContent = img.alt;
    caption.style.display = 'block';
  } else {
    caption.style.display = 'none';
  }
  
  viewer.classList.add('visible');
  document.body.style.overflow = 'hidden'; // 禁止背景滚动
}

// 关闭图片查看器
function closeImageViewer() {
  var viewer = document.getElementById('imageViewer');
  viewer.classList.remove('visible');
  document.body.style.overflow = ''; // 恢复滚动
  currentImageSrc = '';
}

// 为所有图片添加点击事件
function initImageClick() {
  var images = document.querySelectorAll('.markdown-body img');
  images.forEach(function(img) {
    img.onclick = function(e) {
      e.preventDefault();
      e.stopPropagation();
      openImageViewer(img);
    };
  });
}

// Vim 风格快捷键支持
var vimMode = false;
var pendingKey = null;

// Vim 滚动功能
function vimScroll(key) {
  var scrollAmount = 0;
  
  switch(key) {
    case 'j': // 向下逐行
      window.scrollBy(0, 40);
      break;
    case 'k': // 向上逐行
      window.scrollBy(0, -40);
      break;
    case 'd': // 向下半屏
      window.scrollBy(0, window.innerHeight / 2);
      break;
    case 'u': // 向上半屏
      window.scrollBy(0, -window.innerHeight / 2);
      break;
    case 'f': // 向下整屏
      window.scrollBy(0, window.innerHeight);
      break;
    case 'b': // 向上整屏
      window.scrollBy(0, -window.innerHeight);
      break;
    case 'g': // 顶部（需要 gg）
      pendingKey = 'g';
      return;
    case 'G': // 底部
      window.scrollTo(0, document.body.scrollHeight);
      break;
    case 'h': // 向左
      window.scrollBy(-50, 0);
      break;
    case 'l': // 向右
      window.scrollBy(50, 0);
      break;
  }
  
  pendingKey = null;
}

// 大纲视图功能
var outlineVisible = false;
var outlineHeadings = [];
var activeHeadingIndex = -1;

// 生成大纲
function generateOutline() {
  var article = document.getElementById('markdownBody');
  var headings = article.querySelectorAll('h1, h2, h3, h4, h5, h6');
  var outlineTree = document.getElementById('outlineTree');
  
  outlineTree.innerHTML = '';
  outlineHeadings = [];
  
  headings.forEach(function(heading, index) {
    // 为没有 id 的标题生成 id
    if (!heading.id) {
      heading.id = 'heading-' + index;
    }
    
    outlineHeadings.push(heading);
    
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.className = 'h' + heading.tagName.charAt(1);
    a.textContent = heading.textContent || heading.innerText;
    a.href = '#' + heading.id;
    a.onclick = function(e) {
      e.preventDefault();
      scrollToHeading(heading);
      highlightActiveHeading(index);
    };
    
    li.appendChild(a);
    outlineTree.appendChild(li);
  });
}

// 滚动到标题
function scrollToHeading(heading) {
  var offset = 80; // 顶部留白
  var elementPosition = heading.getBoundingClientRect().top + window.pageYOffset;
  window.scrollTo({
    top: elementPosition - offset,
    behavior: 'smooth'
  });
}

// 高亮当前激活的标题
function highlightActiveHeading(index) {
  var links = document.querySelectorAll('.outline-tree a');
  links.forEach(function(link, i) {
    link.classList.toggle('active', i === index);
  });
  activeHeadingIndex = index;
}

// 监听滚动，自动高亮大纲
function onScroll() {
  if (!outlineVisible || outlineHeadings.length === 0) return;
  
  var scrollPosition = window.pageYOffset + 100;
  
  for (var i = outlineHeadings.length - 1; i >= 0; i--) {
    var heading = outlineHeadings[i];
    if (heading.offsetTop <= scrollPosition) {
      if (activeHeadingIndex !== i) {
        highlightActiveHeading(i);
      }
      break;
    }
  }
}

// 切换大纲显示
function toggleOutline() {
  var panel = document.getElementById('outlinePanel');
  var body = document.getElementById('markdownBody');
  var toggleBtn = document.querySelector('.outline-toggle');
  
  outlineVisible = !outlineVisible;
  panel.classList.toggle('visible', outlineVisible);
  body.classList.toggle('with-outline', outlineVisible);
  toggleBtn.textContent = outlineVisible ? t('outlineClose') : t('outline');
  
  if (outlineVisible && outlineHeadings.length === 0) {
    generateOutline();
  }
  
  window.addEventListener('scroll', onScroll);
}

// 键盘快捷键支持
document.addEventListener('keydown', function(e) {
  // ? 键显示快捷键帮助
  if (e.key === '?' || e.keyCode === 191) {
    e.preventDefault();
    showShortcutHelp();
    return;
  }
  
  // 特殊处理 Shift+G（跳到底部）
  if (e.shiftKey && e.key === 'G') {
    e.preventDefault();
    vimScroll('G');
    return;
  }
  
  // 忽略其他带修饰键的组合
  if (e.ctrlKey || e.altKey || e.metaKey) {
    return;
  }
  
  // 忽略单独的 Shift 键
  if (e.shiftKey) {
    return;
  }
  
  // Vim 风格快捷键（小写字母）
  var vimKeys = ['j', 'k', 'd', 'u', 'f', 'b', 'g', 'h', 'l'];
  if (vimKeys.indexOf(e.key) !== -1) {
    e.preventDefault();
    
    // 处理 gg 组合（先按 g 再按 g）
    if (e.key === 'g') {
      if (pendingKey === 'g') {
        window.scrollTo(0, 0);
        pendingKey = null;
      } else {
        vimScroll('g');
      }
    } else {
      vimScroll(e.key);
    }
    return;
  }
  
  // Vim 风格快捷键（大写字母 G）
  if (e.key === 'G') {
    e.preventDefault();
    vimScroll('G');
    return;
  }
  
  // M 键切换布局
  if (e.keyCode === 77) {
    e.preventDefault();
    toggleLayout();
    return;
  }
  
  // T 键切换主题
  if (e.keyCode === 84) {
    e.preventDefault();
    toggleTheme();
    return;
  }
  
  // O 键切换大纲
  if (e.keyCode === 79) {
    e.preventDefault();
    toggleOutline();
    return;
  }
  
  // P 键导出 PDF
  if (e.keyCode === 80) {
    e.preventDefault();
    exportPdf();
    return;
  }
  
  // 数字键 1-6 快速跳转到对应级别的标题
  if (e.keyCode >= 49 && e.keyCode <= 54) {
    var level = e.keyCode - 48;
    var headings = document.querySelectorAll('h' + level);
    if (headings.length > 0) {
      e.preventDefault();
      scrollToHeading(headings[0]);
      // 找到对应的大纲项并高亮
      var index = outlineHeadings.indexOf(headings[0]);
      if (index >= 0) {
        highlightActiveHeading(index);
      }
    }
    return;
  }
  
  // ESC 键关闭图片查看器、快捷键帮助或预览
  if (e.keyCode === 27) {
    e.preventDefault();
    // 如果快捷键帮助打开，先关闭它
    var help = document.getElementById('shortcutHelp');
    if (help.classList.contains('visible')) {
      closeShortcutHelp({ target: help, currentTarget: help });
      return;
    }
    // 如果图片查看器打开，关闭它
    var viewer = document.getElementById('imageViewer');
    if (viewer.classList.contains('visible')) {
      closeImageViewer();
      return;
    }
    // 否则关闭预览
    window.chrome.webview.hostObjects.callback.OnKeyPressed(27);
    return;
  }
});

// Store the base directory for the original markdown file
var markdownBaseDir = "{0}";

// Support clicking on links to navigate
document.addEventListener('click', function(e) {
    var link = e.target.closest('a');
    if (!link) return;
    
    var href = link.getAttribute('href');
    if (!href) return;
    
    // Check if it's an external http/https link
    if (href.startsWith('http://') || href.startsWith('https://')) {
        e.preventDefault();
        
        // Notify host application to open in external browser
        window.chrome.webview.postMessage({
            type: 'externalLink',
            url: href
        });
        return;
    }
    
    // Check if it's a markdown file link
    if (href.match(/\.(md|markdown|mk)(\?.*)?$/i)) {
        e.preventDefault();
        
        // Resolve relative path using the original file's directory
        var resolvedPath;
        if (href.startsWith('file://')) {
            // Absolute file URL, use as-is
            resolvedPath = href;
        } else if (href.startsWith('/')) {
            // Absolute path
            resolvedPath = href.substring(1).replace(/\//g, '\\');
        } else {
            // Relative path - resolve against markdownBaseDir
            // Ensure baseDir ends with backslash
            var baseDir = markdownBaseDir;
            if (!baseDir.endsWith('\\')) {
                baseDir = baseDir + '\\';
            }
            
            // Normalize href: replace / with \ and resolve . and ..
            var normalizedHref = href.replace(/\//g, '\\');
            
            // Combine paths
            var combined = baseDir + normalizedHref;
            
            // Resolve .. by splitting and processing
            var parts = combined.split('\\');
            var result = [];
            
            // Handle drive letter (e.g., "d:")
            var driveLetter = null;
            if (parts.length > 0 && parts[0].match(/^[a-zA-Z]:$/)) {
                driveLetter = parts[0];
                parts.shift();
            }
            
            for (var i = 0; i < parts.length; i++) {
                var part = parts[i];
                if (part === '.' || part === '') {
                    continue;
                } else if (part === '..') {
                    if (result.length > 0) {
                        result.pop();
                    }
                } else {
                    result.push(part);
                }
            }
            
            resolvedPath = driveLetter ? driveLetter + '\\' + result.join('\\') : result.join('\\');
        }
        
        // Notify host application
        window.chrome.webview.postMessage({
            type: 'markdownLink',
            path: decodeURIComponent(resolvedPath)
        });
    }
});

// 显示 Toast 提示
function showToast(message, duration) {
  duration = duration || 3000;
  
  var toast = document.createElement('div');
  toast.className = 'toast-notification';
  toast.textContent = message;
  document.body.appendChild(toast);
  
  // 触发动画
  setTimeout(function() {
    toast.classList.add('visible');
  }, 10);
  
  // 自动消失
  setTimeout(function() {
    toast.classList.remove('visible');
    setTimeout(function() {
      document.body.removeChild(toast);
    }, 300);
  }, duration);
}

// 导出 PDF 功能
function exportPdf() {
  // 通知 C# 宿主应用程序导出 PDF
  window.chrome.webview.postMessage({
    type: 'exportPdf',
    outputPath: ''  // 空路径表示使用默认保存对话框
  });
  
  // 显示"正在导出"提示，持续时间较长，等待完成消息
  showToast(t('exportingPdf'), 5000);
}

// Mermaid 流程图导出功能
function initMermaidExport() {
  var mermaidDivs = document.querySelectorAll('.mermaid');
  
  mermaidDivs.forEach(function(div, index) {
    // 避免重复添加
    if (div.querySelector('.mermaid-export-btn')) return;
    
    var btn = document.createElement('button');
    btn.className = 'mermaid-export-btn';
    btn.textContent = t('exportPng');
    btn.title = t('exportPng');
    btn.onclick = function(e) {
      e.preventDefault();
      e.stopPropagation();
      exportSingleMermaid(div);
    };
    
    div.appendChild(btn);
  });
}

// 导出单个流程图
function exportSingleMermaid(mermaidDiv) {
  // 创建临时容器
  var container = document.createElement('div');
  container.style.position = 'absolute';
  container.style.left = '-9999px';
  container.style.top = '-9999px';
  container.style.background = getComputedStyle(document.body).backgroundColor || '#ffffff';
  document.body.appendChild(container);
  
  // 获取 SVG
  var svg = mermaidDiv.querySelector('svg');
  
  if (!svg) {
    showToast(t('mermaidRendering'), 3000);
    document.body.removeChild(container);
    return;
  }
  
  // 克隆 SVG 并添加到临时容器
  var svgClone = svg.cloneNode(true);
  svgClone.style.maxWidth = 'none';
  container.appendChild(svgClone);
  
  // 使用 html2canvas 导出为图片
  showToast(t('exportingMermaid'), 5000);
  
  html2canvas(container, {
    backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff',
    scale: 2,
    useCORS: true,
    allowTaint: true
  }).then(function(canvas) {
    // 转换为 PNG 数据 URL
    var pngDataUrl = canvas.toDataURL('image/png');
    
    // 创建下载链接
    var link = document.createElement('a');
    link.download = 'flowchart.png';
    link.href = pngDataUrl;
    link.click();
    
    document.body.removeChild(container);
    showToast(t('mermaidExportSuccess'), 3000);
  }).catch(function(error) {
    document.body.removeChild(container);
    showToast(t('mermaidExportFailed') + ': ' + error.message, 3000);
  });
}

// 代码复制功能
function initCodeCopy() {
  var codeBlocks = document.querySelectorAll('.markdown-body pre');
  
  codeBlocks.forEach(function(pre) {
    // 避免重复添加
    if (pre.querySelector('.code-copy-btn')) return;
    
    var btn = document.createElement('button');
    btn.className = 'code-copy-btn';
    btn.textContent = t('copy');
    btn.onclick = function(e) {
      e.preventDefault();
      e.stopPropagation();
      
      var code = pre.querySelector('code');
      if (!code) {
        code = pre;
      }
      
      var text = code.textContent || code.innerText;
      
      navigator.clipboard.writeText(text).then(function() {
        btn.textContent = t('copied');
        btn.classList.add('copied');
        
        setTimeout(function() {
          btn.textContent = t('copy');
          btn.classList.remove('copied');
        }, 2000);
      }).catch(function(err) {
        btn.textContent = t('copyFailed');
        setTimeout(function() {
          btn.textContent = t('copy');
        }, 2000);
      });
    };
    
    pre.appendChild(btn);
  });
}

// 监听来自 C# 的消息
window.chrome.webview.addEventListener('message', function(arg) {
  console.log('Received message:', arg.data);
  
  // arg.data 已经是对象，不需要 JSON.parse
  var data = arg.data;
  
  if (data && data.type === 'pdfExportSuccess') {
    showToast(t('pdfExportSuccess'), 4000);
  } else if (data && data.type === 'pdfExportFailed') {
    showToast(t('pdfExportFailed'), 4000);
  }
});

// 页面加载完成后生成大纲和初始化功能
document.addEventListener('DOMContentLoaded', function() {
  applyLang();
  generateOutline();
  initImageClick();
  initCodeCopy();
  // Mermaid 异步渲染，延迟初始化导出按钮
  setTimeout(function() {
    initMermaidExport();
  }, 1000);
  updateReadingProgress(); // 初始化进度条
});
</script>
</body>
</html>
