<template>
    <view class="my-posts-page">
        <scroll-view scroll-y class="my-posts-list" style="height: 100vh" @scrolltolower="loadMore">
            <view v-if="loading && list.length === 0" class="my-posts-loading">
                <u-loading mode="circle" />
            </view>

            <view v-for="post in list" :key="post.id" class="post-card" @tap="goDetail(post.id)">
                <view class="post-card__content">
                    <text>{{ post.content_short || post.content }}</text>
                </view>
                <view v-if="post.tags && post.tags.length > 0" class="post-card__tags">
                    <text v-for="(t, i) in post.tags" :key="i" class="post-card__tag">#{{ t }}</text>
                </view>
                <view class="post-card__footer">
                    <text class="post-card__time">{{ formatTime(post.create_time) }}</text>
                    <view class="post-card__stats">
                        <text>浏览 {{ post.view_count || 0 }}</text>
                        <text>评论 {{ post.comment_count || 0 }}</text>
                        <text>点赞 {{ post.like_count || 0 }}</text>
                    </view>
                </view>
            </view>

            <view v-if="!loading && list.length === 0" class="my-posts-empty">
                <u-empty text="暂无帖子" mode="data" />
            </view>

            <view v-if="loadingMore" class="my-posts-loadmore">
                <u-loading mode="circle" size="28" />
                <text>加载中...</text>
            </view>
            <view v-if="finished && list.length > 0" class="my-posts-loadmore">
                <text>没有更多了</text>
            </view>
        </scroll-view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getCommunityPosts } from '@/api/community'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const { userInfo } = storeToRefs(useUserStore())
const list = ref<any[]>([])
const loading = ref(false)
const loadingMore = ref(false)
const finished = ref(false)
const page = ref(1)
const pageSize = 15

onShow(() => {
    page.value = 1
    finished.value = false
    fetchPosts(true)
})

const fetchPosts = async (reset = false) => {
    if (reset) { page.value = 1; finished.value = false }
    if (finished.value) return
    page.value === 1 ? (loading.value = true) : (loadingMore.value = true)

    try {
        const res = await getCommunityPosts({
            page_no: page.value,
            page_size: pageSize,
            user_id: userInfo.value?.id
        })
        const items = res?.lists || []
        if (reset || page.value === 1) {
            list.value = items
        } else {
            list.value.push(...items)
        }
        if (items.length < pageSize) finished.value = true
    } catch (e) {
        // ignore
    } finally {
        loading.value = false
        loadingMore.value = false
    }
}

const loadMore = () => {
    if (finished.value || loadingMore.value) return
    page.value++
    fetchPosts()
}

const goDetail = (id: number) => {
    uni.navigateTo({ url: `/packages_community/pages/post_detail?id=${id}` })
}

const formatTime = (ts: any) => {
    if (!ts) return ''
    let timestamp: number
    if (typeof ts === 'string') {
        timestamp = new Date(ts.replace(/-/g, '/')).getTime() / 1000
    } else {
        timestamp = ts
    }
    if (isNaN(timestamp)) return ''
    const now = Date.now() / 1000
    const diff = now - timestamp
    if (diff < 60) return '刚刚'
    if (diff < 3600) return Math.floor(diff / 60) + '分钟前'
    if (diff < 86400) return Math.floor(diff / 3600) + '小时前'
    if (diff < 2592000) return Math.floor(diff / 86400) + '天前'
    const d = new Date(timestamp * 1000)
    return `${d.getMonth() + 1}-${d.getDate()}`
}
</script>

<style lang="scss" scoped>
.my-posts-page {
    min-height: 100vh;
    background: #f5f5f5;
}

.my-posts-loading {
    display: flex;
    justify-content: center;
    padding: 120rpx 0;
}

.my-posts-empty {
    padding: 120rpx 0;
}

.my-posts-loadmore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    padding: 24rpx 0 48rpx;
    font-size: 24rpx;
    color: #999;
}

.my-posts-list {
    padding: 16rpx 24rpx;
}

.post-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 28rpx;
    margin-bottom: 20rpx;

    &__content {
        font-size: 28rpx;
        color: #333;
        line-height: 1.7;
        margin-bottom: 16rpx;
        word-break: break-word;
    }

    &__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
        margin-bottom: 16rpx;
    }

    &__tag {
        font-size: 22rpx;
        color: #2979ff;
        background: #e8f0fe;
        padding: 4rpx 14rpx;
        border-radius: 6rpx;
    }

    &__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 16rpx;
        border-top: 1rpx solid #f5f5f5;
    }

    &__time {
        font-size: 22rpx;
        color: #999;
    }

    &__stats {
        display: flex;
        gap: 24rpx;
        font-size: 22rpx;
        color: #999;
    }
}
</style>
