<!--
 * @Date: 2026-02-27
 * @Description: 文章详情页
-->
<template>
  <view class="article-detail-page">
    <!-- 导航栏 -->
    <NavHeader title="文章详情" />

    <!-- 滚动容器 -->
    <view class="flex-1 pb-safe">
      <!-- 加载状态 - 自定义 Tailwind CSS 加载动画 -->
      <view v-if="loading" class="flex items-center justify-center h-screen">
        <view class="flex flex-col items-center">
          <view class="w-[64rpx] h-[64rpx] border-4 border-gray-200 border-t-blue-600 rounded-full animate-spin mb-[24rpx]"></view>
          <text class="text-gray-600 text-[28rpx]">加载中...</text>
        </view>
      </view>

      <!-- 文章内容 -->
      <view v-else-if="article" class="article-content">
        <!-- 封面图 -->
        <view v-if="article.coverUrl" class="cover-image-wrapper">
          <image :src="article.coverUrl" mode="widthFix" class="cover-image" />
        </view>

        <!-- 文章信息 -->
        <view class="article-info px-[32rpx]">
          <!-- 标题 -->
          <view class="article-title">{{ article.title }}</view>

          <!-- 作者和日期 -->
          <view class="article-meta">
            <text v-if="article.authorName" class="meta-item">{{ article.authorName }}</text>
            <text v-if="article.authorName && article.date" class="meta-separator">·</text>
            <text v-if="article.date" class="meta-item">{{ formattedDate }}</text>
          </view>
        </view>

        <!-- 分割线 -->
        <view class="divider"></view>

        <!-- 富文本内容 -->
        <view class="article-body px-[32rpx]">
          <rich-text :nodes="article.content" class="rich-text-content" />
        </view>

        <!-- 文章图片列表（点击可预览） -->
        <view v-if="imageUrls.length > 0" class="article-images-section px-[32rpx] pb-[32rpx]">
          <view class="section-title">文章图片</view>
          <view class="image-grid">
            <view
              v-for="(url, index) in imageUrls"
              :key="index"
              class="image-item"
              @tap="previewImage(url)"
            >
              <image :src="url" mode="aspectFill" class="thumbnail-image" />
            </view>
          </view>
        </view>
      </view>

      <!-- 加载失败 - 自定义空状态 -->
      <view v-else-if="error" class="error-state">
        <view class="flex flex-col items-center justify-center h-screen">
          <view class="text-[#9CA3AF] text-[120rpx] mb-[24rpx]">⚠️</view>
          <text class="text-gray-600 text-[28rpx] mb-[32rpx]">加载失败</text>
          <view
            class="px-[48rpx] py-[20rpx] bg-blue-600 text-white rounded-full"
            @tap="fetchArticleDetail"
          >
            <text class="text-[28rpx]">重试</text>
          </view>
        </view>
      </view>

      <!-- 底部安全区域 -->
      <view class="safe-area-bottom"></view>
    </view>

    <!-- 底部收藏按钮 -->
    <view class="footer-bar">
      <view class="footer-content">
        <view
          v-if="article"
          :class="['collect-button', article.is_favorite ? 'collected' : '']"
          @tap="toggleCollect"
        >
          <text class="collect-icon">{{ article.is_favorite ? '★' : '☆' }}</text>
          <text class="collect-text">{{ article.is_favorite ? '已收藏' : '收藏' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useLoad } from '@tarojs/taro'
import NavHeader from '@/components/navigation/NavHeader.vue'
import { articleDetailAPI } from '@/api/article'
import { addAPI, delAPI } from '@/api/favorite'
import { mockArticleDetailAPI } from '@/utils/mockData'
import eventBus, { Events } from '@/utils/eventBus'
import dayjs from 'dayjs'
import Taro from '@tarojs/taro'
import { USE_MOCK_DATA } from '@/config/app'

/**
 * 文章数据
 */
const article = ref(null)

/**
 * 加载状态
 */
const loading = ref(true)

/**
 * 错误状态
 */
const error = ref(false)

/**
 * 文章 ID
 */
const articleId = ref(null)

/**
 * 格式化日期显示
 */
const formattedDate = computed(() => {
  if (!article.value?.post_date) return ''
  try {
    return dayjs(article.value.post_date).format('YYYY年MM月DD日')
  } catch {
    return article.value.post_date
  }
})

/**
 * 图片 URL 列表（用于预览）
 */
const imageUrls = ref([])

/**
 * 预览图片
 */
const previewImage = (current) => {
  if (imageUrls.value.length > 0) {
    Taro.previewImage({
      current: current,
      urls: imageUrls.value
    })
  }
}

/**
 * 提取所有图片 URL
 */
const extractImageUrls = (content) => {
  if (!content) return []
  const urls = []
  const imgRegex = /<img[^>]+src=["']([^"']+)["']/gi
  let match
  while ((match = imgRegex.exec(content)) !== null) {
    urls.push(match[1])
  }
  return urls
}

/**
 * 格式化富文本内容，处理图片样式
 * 解决移动端图片宽度溢出问题
 */
const formatRichText = (html) => {
  if (!html) return ''
  return html.replace(/<img[^>]*>/gi, (match) => {
    // 移除原有的 width 和 height 属性，防止干扰
    match = match.replace(/\s(width|height)=["'][^"']*["']/gi, '')

    // 处理 style 属性
    if (match.includes('style=')) {
      return match.replace(/style=(["'])(.*?)\1/gi, 'style=$1$2;max-width:100%!important;height:auto!important;display:block;margin:24rpx auto;border-radius:12rpx;$1')
    } else {
      return match.replace(/<img/gi, '<img style="max-width:100%!important;height:auto!important;display:block;margin:24rpx auto;border-radius:12rpx;"')
    }
  })
}

/**
 * 获取文章详情
 */
const fetchArticleDetail = async () => {
  if (!articleId.value) return

  loading.value = true
  error.value = false

  try {
    console.log('[Article Detail] 获取文章详情:', articleId.value)
    console.log('[Article Detail] 使用 Mock 数据:', USE_MOCK_DATA)

    const res = USE_MOCK_DATA
      ? await mockArticleDetailAPI({ i: articleId.value })
      : await articleDetailAPI({ i: articleId.value })

    if (res.code === 1 && res.data) {
      console.log('[Article Detail] 数据:', res.data)

      // 格式化富文本内容，处理图片样式
      const content = formatRichText(res.data.post_content || '')

      article.value = {
        id: res.data.id,
        title: res.data.post_title || '未命名文章',
        content: content,
        excerpt: res.data.post_excerpt || '',
        coverUrl: res.data.cover_url || res.data.post_thumbnail || '',
        date: res.data.post_date || '',
        authorName: res.data.author_name || '',
        is_favorite: res.data.is_favorite === 1 || res.data.is_favorite === '1'
      }

      // 提取图片 URL 列表
      imageUrls.value = extractImageUrls(content)
    } else {
      error.value = true
      Taro.showToast({
        title: res.msg || '获取文章详情失败',
        icon: 'none'
      })
    }
  } catch (err) {
    console.error('[Article Detail] 获取文章详情失败:', err)
    error.value = true
    Taro.showToast({
      title: '加载失败',
      icon: 'error'
    })
  } finally {
    loading.value = false
  }
}

/**
 * 切换收藏状态
 */
const toggleCollect = async () => {
  if (!article.value) return

  try {
    const newCollectStatus = !article.value.is_favorite

    // 调用收藏 API（使用与文件相同的收藏 API）
    const res = newCollectStatus
      ? await addAPI({ meta_id: article.value.id })
      : await delAPI({ meta_id: article.value.id })

    if (res.code === 1) {
      // 更新本地状态
      article.value.is_favorite = newCollectStatus

      Taro.showToast({
        title: newCollectStatus ? '已收藏' : '已取消收藏',
        icon: 'success',
        duration: 1000
      })

      // 发送收藏更新事件
      eventBus.emit(Events.FAVORITES_UPDATE, {
        metaId: article.value.id,
        collected: newCollectStatus,
        timestamp: Date.now()
      })
    } else {
      Taro.showToast({
        title: res.msg || '操作失败',
        icon: 'none',
        duration: 2000
      })
    }
  } catch (err) {
    console.error('[Article Detail] 收藏操作失败:', err)
    Taro.showToast({
      title: '网络错误，请重试',
      icon: 'none',
      duration: 2000
    })
  }
}

/**
 * 页面加载时获取文章详情
 */
useLoad((options) => {
  console.log('[Article Detail] 页面参数:', options)

  if (options.id) {
    articleId.value = options.id
    fetchArticleDetail()
  } else {
    error.value = true
    loading.value = false
    Taro.showToast({
      title: '文章ID不存在',
      icon: 'none'
    })
  }
})
</script>

<style lang="less">
.article-detail-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #F9FAFB;
}

.cover-image-wrapper {
  width: 100%;
  background-color: #F3F4F6;
}

.cover-image {
  width: 100%;
  display: block;
}

.article-info {
  padding-top: 32rpx;
  padding-bottom: 24rpx;
}

.article-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #1F2937;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.article-meta {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #9CA3AF;
}

.meta-item {
  margin-right: 8rpx;
}

.meta-separator {
  margin-right: 8rpx;
}

.divider {
  height: 1rpx;
  background-color: #E5E7EB;
  margin: 0 0 32rpx 0;
}

.article-body {
  padding-bottom: 32rpx;
}

.rich-text-content {
  font-size: 30rpx;
  color: #374151;
  line-height: 1.8;
  word-wrap: break-word;
  overflow: hidden;

  /* 富文本图片样式：确保宽度适配移动端 */
  :deep(img) {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 24rpx auto !important;
    border-radius: 12rpx;
  }

  /* 标题样式优化 */
  :deep(h1),
  :deep(h2),
  :deep(h3),
  :deep(h4),
  :deep(h5),
  :deep(h6) {
    margin: 24rpx 0 16rpx;
    font-weight: bold;
    color: #1F2937;
  }

  :deep(h1) {
    font-size: 40rpx;
  }

  :deep(h2) {
    font-size: 36rpx;
  }

  :deep(h3) {
    font-size: 32rpx;
  }

  /* 段落样式 */
  :deep(p) {
    margin: 16rpx 0;
  }

  /* 列表样式 */
  :deep(ul),
  :deep(ol) {
    padding-left: 32rpx;
    margin: 16rpx 0;
  }

  :deep(li) {
    margin: 8rpx 0;
  }

  /* 引用样式 */
  :deep(blockquote) {
    padding: 16rpx 24rpx;
    margin: 16rpx 0;
    background-color: #F3F4F6;
    border-left: 4rpx solid #D1D5DB;
    color: #6B7280;
  }

  /* 链接样式 */
  :deep(a) {
    color: #2563EB;
    text-decoration: underline;
  }
}

.safe-area-bottom {
  height: 120rpx;
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1rpx solid #E5E7EB;
  padding-bottom: env(safe-area-inset-bottom);
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 32rpx;
}

.collect-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 48rpx;
  border-radius: 999rpx;
  background-color: #F3F4F6;
  transition: all 0.2s ease;

  &.collected {
    background-color: #FEF3C7;

    .collect-icon {
      color: #F59E0B;
    }

    .collect-text {
      color: #F59E0B;
    }
  }
}

.collect-icon {
  font-size: 32rpx;
  color: #9CA3AF;
  margin-right: 8rpx;
}

.collect-text {
  font-size: 28rpx;
  color: #6B7280;
}

.error-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400rpx;
}

/* 文章图片列表区域 - 网格布局 */
.article-images-section {
  margin-top: 24rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1F2937;
  margin-bottom: 16rpx;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  /* 每行3个图片：计算公式：(750rpx - 64rpx padding - 32rpx gaps) / 3 ≈ 218rpx */
}

.image-item {
  /* 每行3个，宽度约占 1/3 */
  width: calc((100% - 32rpx) / 3);
  /* 保持正方形 */
  aspect-ratio: 1;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #F3F4F6;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
}
</style>