<template>
  <view class="min-h-screen bg-[#F9FAFB] pb-safe">
    <NavHeader title="我的消息" />

    <!-- 列表区域 -->
    <view class="p-4">
      <template v-if="messageList.length > 0">
        <view
          v-for="item in messageList"
          :key="item.id"
          class="bg-white rounded-xl p-4 mb-3 shadow-sm active:opacity-70 transition-opacity"
          @tap="handleItemClick(item)"
        >
          <view class="flex justify-between items-start mb-2">
            <view class="flex-1 mr-2">
              <view class="text-base font-bold text-gray-900 line-clamp-1">
                {{ item.title }}
              </view>
            </view>
            <text class="text-xs text-gray-400 shrink-0 mt-1">
              {{ item.create_time }}
            </text>
          </view>

          <view class="text-sm text-gray-600 line-clamp-2 leading-relaxed">
            {{ item.intro || item.content || '暂无简介' }}
          </view>
        </view>

        <!-- 加载更多/没有更多 -->
        <view class="py-4 text-center text-[24rpx] text-gray-400">
          <text v-if="loading">加载中...</text>
          <text v-else-if="!hasMore">没有更多了</text>
          <text v-else>上拉加载更多</text>
        </view>
      </template>

      <!-- 空状态 -->
      <nut-empty
        v-else-if="!loading && messageList.length === 0"
        description="暂无消息"
        image="empty"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useLoad, usePullDownRefresh, useReachBottom, stopPullDownRefresh } from '@tarojs/taro'
import { useGo } from '@/hooks/useGo'
import NavHeader from '@/components/NavHeader.vue'
import { myListAPI } from '@/api/news'
import { mockMessageListAPI } from '@/utils/mockData'

// ⚠️ MOCK 数据开关 - 开发环境使用 mock 数据，生产环境使用真实 API
const USE_MOCK_DATA = process.env.NODE_ENV === 'development'

const go = useGo()

const messageList = ref([])
const page = ref(1)
const limit = ref(10)
const hasMore = ref(true)
const loading = ref(false)

/**
 * @description 加载消息列表
 * @param {boolean} refresh 是否刷新
 */
const fetchMessageList = async (refresh = false) => {
  if (loading.value) return

  if (refresh) {
    page.value = 1
    hasMore.value = true
  } else if (!hasMore.value) {
    return
  }

  loading.value = true

  try {
    console.log('[Message] 使用 Mock 数据:', USE_MOCK_DATA)

    // 根据开关选择使用真实 API 或 Mock 数据
    const res = USE_MOCK_DATA
      ? await mockMessageListAPI({
          page: page.value,
          limit: limit.value
        })
      : await myListAPI({
          page: page.value,
          limit: limit.value
        })

    if (res.code === 1) {
      const list = res.data?.list || []

      if (refresh) {
        messageList.value = list
      } else {
        messageList.value = [...messageList.value, ...list]
      }

      if (list.length < limit.value) {
        hasMore.value = false
      } else {
        page.value++
      }
    }
  } catch (err) {
    console.error('获取消息列表失败:', err)
  } finally {
    loading.value = false
    if (refresh) {
      stopPullDownRefresh()
    }
  }
}

/**
 * @description 跳转到详情页
 * @param {Object} item 消息对象
 */
const handleItemClick = (item) => {
  go('/pages/message-detail/index', { id: item.id })
}

// 页面加载
useLoad(() => {
  fetchMessageList(true)
})

// 下拉刷新
usePullDownRefresh(() => {
  fetchMessageList(true)
})

// 上拉加载更多
useReachBottom(() => {
  fetchMessageList()
})
</script>

<style lang="less">
/* Scoped styles if needed */
</style>