// composables/useMarkdownStream.js
import { ref, computed, nextTick } from 'vue'
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
// 引入 highlight.js 样式
import 'highlight.js/styles/github.css'
import mdKatex from '@traptitech/markdown-it-katex'

export function useMarkdownStream() {

  const rawContent = ref('')

  const createMd = () => {
    const md = new MarkdownIt(
      {
        html: true,
        breaks: true,  // 将换行符转换为 <br>
        linkify: true,   // 自动链接 URL
        typographer: true, // 启用排版扩展
        highlight: function (str, lang) {
          if (lang && hljs.getLanguage(lang)) {
            try {
              return '<pre class="hljs" style="fontSize:14px"><code class="language-' + lang + '">' +
                hljs.highlight(str, {
                  language: lang,
                  ignoreIllegals: true
                }).value +
                '</code></pre>'
            } catch (err) {
              console.warn(`代码高亮错误 (${lang}):`, err)
            }
          }

          // 默认处理
          return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
        }
      }

    )

    // 关键配置：自定义图片渲染规则
    md.renderer.rules.image = function (tokens, idx, options, env, self) {
      const token = tokens[idx];
      const src = token.attrs[token.attrIndex('src')][1];
      const alt = token.content;
      const title = token.attrs[token.attrIndex('title')] ? token.attrs[token.attrIndex('title')][1] : '';

      // 获取自定义样式参数
      const maxWidth = env.maxWidth || '100%';
      const height = env.height || 'auto';
      const objectFit = env.objectFit || 'cover';
      const borderRadius = env.borderRadius || '0px';
      const boxShadow = env.boxShadow || 'none';
      const display = env.display || 'block';
      const margin = env.margin || '0 auto';

      // 构建样式字符串
      const style = `
    max-width: ${maxWidth};
    height: ${height};
    object-fit: ${objectFit};
    border-radius: ${borderRadius};
    box-shadow: ${boxShadow};
    display: ${display};
    margin: ${margin};
  `.replace(/\s+/g, ' ').trim();

      return `<img src="${src}" alt="${alt}"${title ? ` title="${title}"` : ''} style="${style}" loading="lazy">`;
    };

    // 链接图片的特殊处理
    md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
      const token = tokens[idx];
      const href = token.attrs[token.attrIndex('href')][1];

      // 检查下一个token是否是图片
      const nextToken = tokens[idx + 1];
      if (nextToken && nextToken.type === 'image') {
        // 为包含图片的链接添加特殊样式
        const linkStyle = env.linkStyle || 'text-decoration: none; color: inherit;';
        return `<a href="${href}" style="${linkStyle}" target="_blank" rel="noopener">`;
      }

      return self.renderToken(tokens, idx, options);
    };

    // 自定义代码块渲染规则
    md.renderer.rules.fence = (tokens, idx, options, env, self) => {
      const token = tokens[idx]
      const lang = token.info.trim()
      const code = token.content

      // 使用 highlight.js 进行高亮
      if (lang && hljs.getLanguage(lang)) {
        try {
          const highlighted = hljs.highlight(code, {
            language: lang,
            ignoreIllegals: true
          })
          return `
          <div class="code-block-wrapper">
            <div class="code-header">
              <span class="code-lang">${lang}</span>
            </div>
            <pre class="hljs"><code class="language-${lang}">${highlighted.value}</code></pre>
          </div>
        `
        } catch (err) {
          console.warn(`代码高亮错误 (${lang}):`, err)
        }
      }

      // 默认代码块
      return `
      <div class="code-block-wrapper">
        <div class="code-header">
          <span class="code-lang">${lang || 'text'}</span>
          <button class="copy-btn" onclick="copyCode(this)">复制</button>
        </div>
        <pre class="hljs"><code>${md.utils.escapeHtml(code)}</code></pre>
      </div>
    `
    }

    // md.use(mila, { attrs: { target: '_blank', rel: 'noopener' } })
    // md.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })

    // // 自定义渲染规则 - 修复中文排版
    // md.renderer.rules.paragraph_open = (tokens, idx, options, env, self) => {
    //   return '<p style="margin: 1em 0; line-height: 1.6;">'
    // }

    // md.renderer.rules.heading_open = (tokens, idx, options, env, self) => {
    //   const token = tokens[idx]
    //   const level = token.tag.slice(1)
    //   const styles = {
    //     '1': 'font-size: 1.8em; margin: 1.2em 0 0.6em 0; font-weight: 700; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em;',
    //     '2': 'font-size: 1.5em; margin: 1.2em 0 0.6em 0; font-weight: 600; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em;',
    //     '3': 'font-size: 1.3em; margin: 1.2em 0 0.6em 0; font-weight: 600;',
    //     '4': 'font-size: 1.2em; margin: 1.2em 0 0.6em 0; font-weight: 600;',
    //     '5': 'font-size: 1.1em; margin: 1.2em 0 0.6em 0; font-weight: 600;',
    //     '6': 'font-size: 1em; margin: 1.2em 0 0.6em 0; font-weight: 600; color: #666;'
    //   }
    //   return `<${token.tag} style="${styles[level] || ''}">`
    // }

    // md.renderer.rules.list_item_open = (tokens, idx, options, env, self) => {
    //   return '<li style="margin: 0.5em 0; line-height: 1.6;">'
    // }

    // md.renderer.rules.table_open = (tokens, idx, options, env, self) => {
    //   return '<table style="border-collapse: collapse; width: 100%; margin: 1em 0; border: 1px solid #dfe2e5;">'
    // }

    // md.renderer.rules.th_open = (tokens, idx, options, env, self) => {
    //   return '<th style="border: 1px solid #dfe2e5; padding: 8px 12px; background: #f6f8fa; font-weight: 600; text-align: left;">'
    // }

    // md.renderer.rules.td_open = (tokens, idx, options, env, self) => {
    //   return '<td style="border: 1px solid #dfe2e5; padding: 8px 12px;">'
    // }

    // md.renderer.rules.blockquote_open = (tokens, idx, options, env, self) => {
    //   return '<blockquote style="border-left: 4px solid #dfe2e5; margin: 1em 0; padding-left: 1em; color: #666; background: #f8f9fa; padding: 12px 16px 12px 20px; border-radius: 4px;">'
    // }

    // md.renderer.rules.code_inline = (tokens, idx, options, env, self) => {
    //   const token = tokens[idx]
    //   return `<code style="background: #f6f8fa; padding: 2px 6px; border-radius: 3px; font-size: 0.9em; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; color: #e74c3c;">${md.utils.escapeHtml(token.content)}</code>`
    // }

    // // 链接处理
    // md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
    //   const token = tokens[idx]
    //   const hrefIndex = token.attrIndex('href')
    //   if (hrefIndex >= 0) {
    //     const href = token.attrs[hrefIndex][1]
    //     token.attrPush(['target', '_blank'])
    //     token.attrPush(['rel', 'noopener noreferrer'])
    //     token.attrPush(['style', 'color: #1890ff; text-decoration: none;'])
    //   }
    //   return self.renderToken(tokens, idx, options)
    // }

    // 预处理：修复带空格的强调符号
    // const originalParse = md.parse.bind(md)
    // md.parse = function (src, env) {
    //   // 预处理：修复 **文本 ** 这种带空格的粗体
    //   let processedSrc = src
    //     // 修复 **文本 ** -> **文本**
    //     .replace(/\*\*([^*]+?)\s+\*\*/g, '**$1**')
    //     // // 修复 __文本 __ -> __文本__
    //     // .replace(/__([^_]+?)\s+__/g, '__$1__')
    //     // // 修复 *文本 * -> *文本*
    //     // .replace(/\*([^*]+?)\s+\*/g, '*$1*')
    //     // // 修复 _文本 _ -> _文本_
    //     // .replace(/_([^_]+?)\s+_/g, '_$1_')

    //   return originalParse(processedSrc, env)
    // }

    // // 自定义渲染规则 - 支持所有 Markdown 格式
    // md.renderer.rules.strong_open = () => '<strong style="font-weight: 600;">'
    // md.renderer.rules.em_open = () => '<em style="font-style: italic;">'

    // md.renderer.rules.heading_open = (tokens, idx) => {
    //   const token = tokens[idx]
    //   const level = token.tag.slice(1)
    //   const styles = {
    //     '1': 'font-size: 2em; margin: 0.67em 0; font-weight: 700; border-bottom: 2px solid #eaecef; padding-bottom: 0.3em;',
    //     '2': 'font-size: 1.5em; margin: 0.83em 0; font-weight: 600; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em;',
    //     '3': 'font-size: 1.17em; margin: 1em 0; font-weight: 600;',
    //     '4': 'font-size: 1em; margin: 1.33em 0; font-weight: 600;',
    //     '5': 'font-size: 0.83em; margin: 1.67em 0; font-weight: 600;',
    //     '6': 'font-size: 0.67em; margin: 2.33em 0; font-weight: 600; color: #666;'
    //   }
    //   return `<${token.tag} style="${styles[level] || ''}">`
    // }

    // md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
    //   const token = tokens[idx]
    //   const hrefIndex = token.attrIndex('href')
    //   if (hrefIndex >= 0) {
    //     token.attrPush(['target', '_blank'])
    //     token.attrPush(['rel', 'noopener noreferrer'])
    //     token.attrPush(['style', 'color: #1890ff; text-decoration: none;'])
    //   }
    //   return self.renderToken(tokens, idx, options)
    // }

    // md.renderer.rules.blockquote_open = () =>
    //   '<blockquote style="border-left: 4px solid #dfe2e5; margin: 1em 0; padding: 0.5em 1em; background: #f8f9fa; border-radius: 4px;">'

    // md.renderer.rules.code_inline = (tokens, idx) => {
    //   const token = tokens[idx]
    //   return `<code style="background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 3px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.9em; color: #e53e3e;">${md.utils.escapeHtml(token.content)}</code>`
    // }


    // 自定义表格渲染规则
    md.renderer.rules.table_open = () =>
      '<div class="table-container"><table style="border-collapse: collapse; width: 100%; margin: 1em 0; border: 1px solid #dfe2e5;background: rgb(239 241 243); border-radius: 5px">'

    md.renderer.rules.table_close = () => '</table></div>'

    md.renderer.rules.thead_open = () => '<thead style="background: #e6e7e8">'

    md.renderer.rules.th_open = () =>
      '<th style="border: 1px solid #dfe2e5; padding: 12px; text-align: left; font-weight: 600;">'

    md.renderer.rules.td_open = () =>
      '<td style="border: 1px solid #dfe2e5; padding: 12px; text-align: left; vertical-align: top;">'

    md.renderer.rules.th_close = () => '</th>'
    md.renderer.rules.td_close = () => '</td>'
    md.renderer.rules.tr_open = () => '<tr>'
    md.renderer.rules.tr_close = () => '</tr>'
    md.renderer.rules.thead_close = () => '</thead>'
    md.renderer.rules.tbody_open = () => '<tbody>'
    md.renderer.rules.tbody_close = () => '</tbody>'

    return md
  }

  function preprocessMarkdown(content) {
    if (!content) return ''

    return content
      // 1. 修复带空格的强调符号
      .replace(/\*\*(\S.*?\S?)\s*\*\*/g, '**$1**')
      .replace(/\*(\S.*?\S?)\s*\*/g, '*$1*')
      .replace(/__(\S.*?\S?)\s*__/g, '__$1__')
      .replace(/_(\S.*?\S?)\s*_/g, '_$1_')

      // 2. 修复不配对的符号
      .replace(/(\S)\*\*(\S)/g, '$1 **$2')  // 文本**文本 -> 文本 **文本
      .replace(/(\S)\*(\S)/g, '$1 *$2')     // 文本*文本 -> 文本 *文本

      // 3. 处理流式输出中的不完整标记
      .replace(/\*\*([^*]*)$/, '**$1**')    // 补全未闭合的粗体
      .replace(/\*([^*]*)$/, '*$1*')        // 补全未闭合的斜体
      .replace(/__([^_]*)$/, '__$1__')      // 补全未闭合的粗体（下划线）
      .replace(/_([^_]*)$/, '_$1_')         // 补全未闭合的斜体（下划线）

      // 4. 统一换行符
      .replace(/\\n/g, '\n')
      .replace(/\r\n/g, '\n')
  }


  // 渲染 markdown
  const renderedContent = computed(() => {

    const md = createMd()
    // 预处理内容
    // const processedContent = preprocessMarkdown(rawContent.value)
    let content = rawContent.value || ''
    // 将 ==n== 转换为按钮样式的 HTML
    // 使用正向预读和反向预读确保只匹配被 == 包裹的数字
    // content = content.replace(/==(\d+)、==/g, (match, p1) => {
    //   return `<button class="clause-ref-btn" data-clause="${p1}">${p1}</button>`
    // })
  console.log(content,11223)
    content = content.replace(/==\s*(\d+)、.*?==/g, (match, p1) => {
      return `<button class="clause-ref-btn" data-clause="${match.replace(/==/g, '') }">${p1}</button>`;
    });
    
    return md.render(content)
  })

  // 自动滚动
  const scrollToBottom = async (scrollContainer) => {
    await nextTick()
    if (scrollContainer) {
      scrollContainer.scrollTop = scrollContainer.scrollHeight
    }
  }

  // 更新内容并滚动
  const updateContent = async (newContent, scrollContainer) => {
    rawContent.value = newContent
    await scrollToBottom(scrollContainer)
  }

  // 清空内容
  const clearContent = () => {
    rawContent.value = ''
  }

  return {
    rawContent,
    renderedContent,
    updateContent,
    clearContent
  }
}