<script setup>
import { postApi } from '@/api/postApi'
import ArticleListItem from '@/components/ArticleListItem.vue'
import { useIntersectionObserver } from '@vueuse/core'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const purchasedArticles = ref([])
const loadingTrigger = ref(null)
const loading = ref(false)
const hasMore = ref(true)
const currentPage = ref(1)
const limit = 10

const fetchArticles = async () => {
    if (loading.value) return
    loading.value = true
    try {
        const { data } = await postApi.mine({
            page: currentPage.value,
            limit
        })
        if (data.items?.length === 0) {
            hasMore.value = false
        } else {
            purchasedArticles.value.push(...data.items)
            currentPage.value += 1
        }
    } catch (error) {
        console.error('Failed to fetch purchased articles:', error)
    } finally {
        loading.value = false
    }
}

useIntersectionObserver(
    loadingTrigger,
    ([{ isIntersecting }]) => {
        if (isIntersecting && !loading.value && hasMore.value) {
            fetchArticles()
        }
    },
    {
        threshold: 0,
        rootMargin: '100px'
    }
)

onMounted(() => {
    fetchArticles()
})
</script>

<template>
    <div class="h-full flex flex-col">
        <div class="flex-none bg-white border-b border-gray-200 z-50 shadow">
            <div class="p-4">
                <h2 class="text-lg font-medium text-gray-800">已购买</h2>
            </div>
        </div>

        <div class="flex-1 overflow-y-auto">
            <div class="p-4">
                <div v-if="purchasedArticles.length === 0 && !loading" class="text-center text-gray-500 py-8">
                    暂无已购买
                </div>

                <div v-for="article in purchasedArticles" :key="article.id" class="mb-4">
                    <ArticleListItem :article="{ ...article, bought: true }" />
                </div>

                <div ref="loadingTrigger" class="py-4 text-center" v-show="hasMore || loading">
                    <div v-if="loading"
                        class="animate-spin rounded-full h-8 w-8 border-4 border-gray-200 border-t-blue-600 mx-auto">
                    </div>
                    <div v-else class="h-8">
                        <!-- 空白占位，保持触发器可见 -->
                    </div>
                </div>

                <div v-if="!hasMore && purchasedArticles.length > 0" class="text-center text-gray-500 py-4">
                    没有更多了
                </div>
            </div>
        </div>
    </div>
</template>
