<template>
  <view class="markdown-container">
    <view v-for="(block, index) in parsedBlocks" :key="index" :class="block.type">
      <!-- 分割线 -->
      <view v-if="block.type === 'hr'" class="markdown-hr"></view>

      <!-- 三级标题 -->
      <text v-else-if="block.type === 'h3'" class="markdown-h3">{{ block.content }}</text>

      <!-- 四级标题 -->
      <text v-else-if="block.type === 'h4'" class="markdown-h4">{{ block.content }}</text>

      <!-- 列表项 -->
      <view v-else-if="block.type === 'li'" class="markdown-li">
        <text class="li-bullet">• </text>
        <text class="li-content">{{ block.content }}</text>
      </view>

      <!-- 普通段落（处理粗体） -->
      <text v-else class="markdown-p">
        <text v-for="(segment, segIndex) in block.segments" :key="segIndex" :class="segment.bold ? 'bold' : ''">{{ segment.text }}</text>
      </text>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

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

// 解析 Markdown 内容
const parsedBlocks = computed(() => {
  if (!props.content) return []

  const lines = props.content.split('\n')
  const blocks = []

  for (const line of lines) {
    const trimmed = line.trim()

    // 跳过空行
    if (trimmed === '') continue

    // 分割线
    if (trimmed === '---' || trimmed === '***' || trimmed === '___') {
      blocks.push({ type: 'hr', content: '' })
      continue
    }

    // 三级标题 ###
    const h3Match = trimmed.match(/^###\s+(.+)/)
    if (h3Match) {
      blocks.push({ type: 'h3', content: h3Match[1] })
      continue
    }

    // 四级标题 ####
    const h4Match = trimmed.match(/^####\s+(.+)/)
    if (h4Match) {
      blocks.push({ type: 'h4', content: h4Match[1] })
      continue
    }

    // 列表项 * 或 -
    const liMatch = trimmed.match(/^[*\-]\s+(.+)/)
    if (liMatch) {
      blocks.push({ type: 'li', content: liMatch[1] })
      continue
    }

    // 普通段落（处理粗体 **text**）
    const segments = parseBoldText(trimmed)
    blocks.push({ type: 'p', content: trimmed, segments })
  }

  return blocks
})

// 解析粗体文本 **text**
const parseBoldText = (text) => {
  const segments = []
  const boldRegex = /\*\*(.+?)\*\*/g
  let lastIndex = 0
  let match

  while ((match = boldRegex.exec(text)) !== null) {
    // 添加粗体前的普通文本
    if (match.index > lastIndex) {
      segments.push({ text: text.slice(lastIndex, match.index), bold: false })
    }
    // 添加粗体文本（去掉 ** 标记）
    segments.push({ text: match[1], bold: true })
    lastIndex = match.index + match[0].length
  }

  // 添加剩余的普通文本
  if (lastIndex < text.length) {
    segments.push({ text: text.slice(lastIndex), bold: false })
  }

  // 如果没有粗体，返回单个段落
  if (segments.length === 0) {
    segments.push({ text, bold: false })
  }

  return segments
}
</script>

<style scoped>
.markdown-container {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

/* 分割线 */
.markdown-hr {
  height: 2rpx;
  background: linear-gradient(to right,
    rgba(168, 85, 247, 0.1) 0%,
    rgba(168, 85, 247, 0.4) 50%,
    rgba(168, 85, 247, 0.1) 100%
  );
  margin: 24rpx 0;
  border-radius: 2rpx;
}

/* 标题 */
.markdown-h3 {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: rgba(243, 232, 255, 0.95);
  margin: 20rpx 0 12rpx 0;
  line-height: 1.4;
}

.markdown-h4 {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: rgba(243, 232, 255, 0.95);
  margin: 16rpx 0 8rpx 0;
  line-height: 1.4;
}

/* 列表项 */
.markdown-li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12rpx;
  padding: 8rpx 0;
}

.li-bullet {
  color: #C084FC;
  font-size: 24rpx;
  line-height: 1.5;
  flex-shrink: 0;
}

.li-content {
  flex: 1;
  color: rgba(243, 232, 255, 0.8);
  font-size: 24rpx;
  line-height: 1.6;
  word-break: break-all;
}

/* 普通段落 */
.markdown-p {
  display: block;
  color: rgba(243, 232, 255, 0.75);
  font-size: 24rpx;
  line-height: 1.6;
  word-break: break-all;
}

/* 粗体文本 */
.bold {
  font-weight: 600;
  color: rgba(243, 232, 255, 0.9);
}
</style>
