<template>
  <view class="community">
    <view class="tabs">
      <text class="tab" :class="{ active: currentTab === 'latest' }" @tap="currentTab = 'latest'">最新</text>
      <text class="tab" :class="{ active: currentTab === 'hot' }" @tap="currentTab = 'hot'">热门</text>
    </view>
    <view class="post-list">
      <view class="post-card" v-for="item in posts" :key="item.id" @tap="goDetail(item.id)">
        <view class="post-header">
          <text class="author">{{ item.user?.nickname || '匿名' }}</text>
          <text class="time">{{ item.createdAt?.slice(0, 10) }}</text>
        </view>
        <text class="post-title">{{ item.title }}</text>
        <view class="post-footer">
          <text class="stat">❤ {{ item.likeCount }}</text>
          <text class="stat">💬 {{ item.commentCount }}</text>
          <text class="stat">👁 {{ item.viewCount }}</text>
        </view>
      </view>
    </view>
    <view class="fab" @tap="goCreate">
      <text class="fab-icon">+</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { api } from '../../api/index'
import { useUserStore } from '../../store/user'

const userStore = useUserStore()
const posts = ref<any[]>([])
const currentTab = ref('latest')

async function loadPosts() {
  try {
    const params: any = { pageSize: 20 }
    if (currentTab.value === 'hot') params.sort = 'likes'
    const res: any = await api.community.posts(params)
    posts.value = res.items || []
  } catch (e) {
    console.error(e)
  }
}

watch(currentTab, loadPosts)
onMounted(loadPosts)

const goDetail = (id: number) => uni.navigateTo({ url: `/pages/post-detail/index?id=${id}` })
const goCreate = () => {
  if (!userStore.isLoggedIn) {
    uni.navigateTo({ url: '/pages/login/index' })
    return
  }
  uni.navigateTo({ url: '/pages/create-post/index' })
}
</script>

<style scoped>
.community { }
.tabs { display: flex; background: var(--card); padding: 20rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.tab { font-size: 28rpx; padding: 8rpx 24rpx; margin-right: 16rpx; color: var(--muted-foreground); border-radius: 6rpx; }
.tab.active { color: var(--brand); font-weight: bold; background: #eef3ff; }
.post-list { padding: 20rpx 30rpx; }
.post-card {
  background: var(--card); border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.post-header { display: flex; justify-content: space-between; margin-bottom: 12rpx; }
.author { font-size: 24rpx; color: var(--brand); }
.time { font-size: 22rpx; color: var(--muted-foreground); }
.post-title { font-size: 30rpx; font-weight: 500; display: block; margin-bottom: 16rpx; }
.post-footer { display: flex; gap: 24rpx; }
.stat { font-size: 22rpx; color: var(--muted-foreground); }
.fab {
  position: fixed; right: 40rpx; bottom: 100rpx;
  width: 100rpx; height: 100rpx; background: var(--brand); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 20rpx rgba(79,140,255,0.4);
}
.fab-icon { font-size: 48rpx; color: var(--card); }
</style>
