<template>
  <view :id="containerId" class="rich-text-renderer" v-html="processedContent"></view>
</template>

<script setup>
import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
import Taro from '@tarojs/taro'
import { $ } from '@tarojs/extend'

const props = defineProps({
  content: {
    type: String,
    default: '',
  },
  enableTransform: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['image-preview', 'file-click', 'link-copy'])

const processedContent = ref('')
const containerId = `rich-text-renderer-${Math.random().toString(36).slice(-8)}`
const containerSelector = `#${containerId}`
const previousTransformElement = Taro.options.html?.transformElement

const decodeHtmlEntities = html => {
  if (!html) {
    return ''
  }

  if (process.env.TARO_ENV === 'h5' && typeof document !== 'undefined') {
    try {
      const textArea = document.createElement('textarea')
      textArea.innerHTML = html
      const decoded = textArea.value
      if (decoded !== html) {
        return decoded
      }
    } catch (error) {
      console.warn('[RichTextRenderer] DOM 解码失败，改用映射表', error)
    }
  }

  const entityMap = {
    '&nbsp;': '\u00A0',
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
    '&quot;': '"',
    '&apos;': "'",
    '&copy;': '©',
    '&reg;': '®',
    '&trade;': '™',
    '&mdash;': '—',
    '&ndash;': '–',
    '&hellip;': '…',
    '&laquo;': '«',
    '&raquo;': '»',
    '&lsquo;': '\u2018',
    '&rsquo;': '\u2019',
    '&ldquo;': '"',
    '&rdquo;': '"',
  }

  let result = html

  result = result.replace(/&#(\d+);/g, (_match, dec) => String.fromCharCode(dec))
  result = result.replace(/&#x([0-9a-fA-F]+);/g, (_match, hex) =>
    String.fromCharCode(parseInt(hex, 16))
  )

  Object.entries(entityMap).forEach(([entity, char]) => {
    result = result.split(entity).join(char)
  })

  return result
}

const replaceAnchorTags = html => {
  let content = html
  // 小程序 rich-text 对原生 a 标签交互能力有限，统一替换成可绑定事件的块级节点。
  content = content.replace(/<a\s+/g, '<div class="rich-text-link" ')
  content = content.replace(/href=/g, 'data-href=')
  content = content.replace(/<\/a>/g, '</div>')
  return content
}

const processContent = raw => {
  if (!raw) {
    processedContent.value = ''
    return
  }

  let processed = raw
  processed = decodeHtmlEntities(processed)
  processed = replaceAnchorTags(processed)
  processedContent.value = processed
}

const isImageUrl = (url = '') => /\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i.test(url)

const getFileNameFromUrl = (url = '') => {
  const cleanUrl = url.split('?')[0]
  const segments = cleanUrl.split('/')
  return segments[segments.length - 1] || 'document.pdf'
}

const copyLink = (url, fileName = '链接') => {
  Taro.setClipboardData({
    data: url,
    success: () => {
      Taro.showToast({
        title: '链接已复制',
        icon: 'success',
        duration: 2000,
      })
      emit('link-copy', { url, fileName })
    },
    fail: error => {
      console.error('[RichTextRenderer] 复制链接失败:', error)
      Taro.showToast({
        title: '复制失败',
        icon: 'none',
      })
    },
  })
}

const openFileLink = async (url, fileName) => {
  emit('file-click', { url, fileName })

  if (isImageUrl(url)) {
    Taro.previewImage({
      urls: [url],
      current: url,
      indicator: 'default',
      loop: false,
    })
    return
  }

  Taro.showLoading({ title: '文件打开中...' })

  try {
    const downloadResult = await Taro.downloadFile({
      url,
    })

    if (downloadResult.statusCode !== 200 || !downloadResult.tempFilePath) {
      throw new Error(`下载失败: ${downloadResult.statusCode}`)
    }

    await Taro.openDocument({
      filePath: downloadResult.tempFilePath,
      showMenu: true,
    })
  } catch (error) {
    console.error('[RichTextRenderer] 文件打开失败:', error)
    Taro.showModal({
      title: '打开失败',
      content: '当前文件无法直接预览，是否复制链接后用其他应用打开？',
      confirmText: '复制链接',
      cancelText: '取消',
      success: res => {
        if (res.confirm) {
          copyLink(url, fileName)
        }
      },
    })
  } finally {
    Taro.hideLoading()
  }
}

const setupTransformElement = () => {
  if (!props.enableTransform) {
    Taro.options.html.transformElement = previousTransformElement
    return
  }

  Taro.options.html.transformElement = element => {
    const transformed = previousTransformElement ? previousTransformElement(element) : element
    const nodeName = transformed?.nodeName?.toLowerCase() || ''
    const tagName = transformed?.tagName?.toLowerCase() || ''
    const isImg =
      nodeName === 'img' || tagName === 'img' || nodeName === 'image' || tagName === 'image'

    if (!isImg) {
      return transformed
    }

    // 统一兜底图片样式，避免后端富文本里的宽高写死后撑坏小程序布局。
    if (transformed?.setAttribute) {
      transformed.setAttribute('mode', 'widthFix')
      transformed.setAttribute('data-rich-image', 'true')
      transformed.setAttribute(
        'style',
        'width:100%!important;max-width:100%!important;height:auto!important;display:block;margin:24rpx 0;border-radius:16rpx;'
      )
    }

    return transformed
  }
}

const bindImageEvents = () => {
  nextTick(() => {
    const container = $(containerSelector)
    const imgs = container.find('.h5-img')

    imgs.forEach(img => {
      const $img = $(img)
      $img.off('longpress')
      $img.on('longpress', () => {
        const src = $img.attr('src')

        if (!src) {
          return
        }

        Taro.previewImage({
          urls: [src],
          current: src,
          indicator: 'default',
          loop: false,
          success: () => {
            emit('image-preview', { src })
          },
        })
      })
    })
  })
}

const bindFileLinkEvents = () => {
  nextTick(() => {
    const container = $(containerSelector)
    const richTextLinks = container.find('.rich-text-link')
    const fileLinks = container.find('._file_list')

    let allLinks = []
    if (richTextLinks.length > 0) {
      allLinks = allLinks.concat(richTextLinks.toArray())
    }
    if (fileLinks.length > 0) {
      allLinks = allLinks.concat(fileLinks.toArray())
    }

    allLinks.forEach(el => {
      const $el = $(el)
      const dataHref = $el.attr('data-href') || $el.attr('href')

      if (!dataHref) {
        return
      }

      $el.off('tap')
      $el.on('tap', async () => {
        const fileName =
          $el.find('span span span').first().text() ||
          $el.text().trim().substring(0, 50) ||
          getFileNameFromUrl(dataHref)

        await openFileLink(dataHref, fileName)
      })
    })
  })
}

const bindLinkLongPressEvents = () => {
  nextTick(() => {
    const container = $(containerSelector)
    const richTextLinks = container.find('.rich-text-link')
    const anchorLinks = container.find('a[href]')
    const fileLinks = container.find('._file_list')

    let allLinks = []
    if (richTextLinks.length > 0) {
      allLinks = allLinks.concat(richTextLinks.toArray())
    }
    if (anchorLinks.length > 0) {
      allLinks = allLinks.concat(anchorLinks.toArray())
    }
    if (fileLinks.length > 0) {
      allLinks = allLinks.concat(fileLinks.toArray())
    }

    allLinks.forEach(el => {
      const $el = $(el)
      const dataHref = $el.attr('data-href') || $el.attr('href')

      if (!dataHref) {
        return
      }

      $el.off('longpress')
      $el.on('longpress', () => {
        const fileName =
          $el.find('span span span').first().text() ||
          $el.text().trim().substring(0, 30) ||
          getFileNameFromUrl(dataHref)

        copyLink(dataHref, fileName)
      })
    })
  })
}

const handleContentChange = () => {
  processContent(props.content)

  nextTick(() => {
    // 富文本每次重渲染都会替换节点，需要重新挂载图片预览和链接交互事件。
    bindImageEvents()
    bindFileLinkEvents()
    bindLinkLongPressEvents()
  })
}

watch(() => props.content, handleContentChange, { immediate: true })
watch(() => props.enableTransform, setupTransformElement, { immediate: true })

onBeforeUnmount(() => {
  Taro.options.html.transformElement = previousTransformElement
})
</script>

<style lang="less">
#rich-text-renderer,
.rich-text-renderer {
  color: #4b5563;
  font-size: 30rpx;
  line-height: 1.8;
  word-break: break-word;

  .h5-html,
  .h5-address,
  .h5-blockquote,
  .h5-body,
  .h5-dd,
  .h5-div,
  .h5-dl,
  .h5-dt,
  .h5-fieldset,
  .h5-form,
  .h5-frame,
  .h5-frameset,
  .h5-h1,
  .h5-h2,
  .h5-h3,
  .h5-h4,
  .h5-h5,
  .h5-h6,
  .h5-noframes,
  .h5-ol,
  .h5-p,
  .h5-ul,
  .h5-center,
  .h5-dir,
  .h5-hr,
  .h5-menu,
  .h5-pre {
    display: block;
    unicode-bidi: embed;
  }

  .h5-li {
    display: list-item;
    margin-bottom: 12rpx;
  }

  .h5-head {
    display: none;
  }

  .h5-p,
  .h5-div,
  .h5-blockquote,
  .h5-ul,
  .h5-ol {
    margin: 0 0 20rpx;
  }

  .h5-ul,
  .h5-ol {
    padding-left: 36rpx;
  }

  .h5-img,
  img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 24rpx 0;
    border-radius: 16rpx;
  }

  .rich-text-link,
  .h5-a,
  a,
  ._file_list {
    color: #2563eb;
    text-decoration: underline;
    word-break: break-all;
  }

  .rich-text-link *,
  ._file_list * {
    pointer-events: none;
  }

  .h5-b,
  .h5-strong {
    font-weight: bolder;
  }

  .h5-i,
  .h5-em {
    font-style: italic;
  }

  .h5-table {
    display: table;
    width: 100%;
    border-spacing: 2px;
    margin: 20rpx 0;
  }

  .h5-tr {
    display: table-row;
  }

  .h5-td,
  .h5-th {
    display: table-cell;
    padding: 12rpx;
    border: 1rpx solid #d1d5db;
    vertical-align: top;
  }

  .h5-th {
    font-weight: bolder;
    background: #f9fafb;
  }
}
</style>