<template>
  <view class="prompts">
    <view class="filter-bar">
      <scroll-view scroll-x class="category-scroll">
        <view class="category-list">
          <text class="tag" :class="{ active: currentCat === 0 }" @tap="currentCat = 0">全部</text>
          <text class="tag" v-for="cat in categories" :key="cat.id" :class="{ active: currentCat === cat.id }"
            @tap="currentCat = cat.id">{{ cat.name }}</text>
        </view>
      </scroll-view>
    </view>
    <view class="prompt-list">
      <view class="prompt-card" v-for="item in list" :key="item.id" @tap="goDetail(item.id)">
        <text class="title">{{ item.title }}</text>
        <text class="desc">{{ item.description }}</text>
        <view class="meta">
          <text class="tag-label">{{ item.tags }}</text>
          <text class="views">👁 {{ item.viewCount }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

const list = ref<any[]>([])
const categories = ref<any[]>([])
const currentCat = ref(0)

async function loadData() {
  try {
    const params: any = { pageSize: 20 }
    if (currentCat.value) params.categoryId = currentCat.value
    const res: any = await api.prompts.list(params)
    list.value = res.items || []
  } catch (e) { console.error(e) }
}

watch(currentCat, loadData)

onMounted(async () => {
  try { categories.value = (await api.categories.list()) as any[] || [] } catch (e) { /* ignore */ }
  loadData()
})

const goDetail = (id: number) => uni.navigateTo({ url: `/pages/prompt-detail/index?id=${id}` })
</script>

<style scoped>
.prompts { }
.filter-bar { background: var(--card); padding: 20rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.category-scroll { white-space: nowrap; }
.category-list { display: flex; gap: 16rpx; }
.tag {
  display: inline-block; padding: 12rpx 28rpx; border-radius: 30rpx; font-size: 26rpx;
  background: var(--muted); color: var(--muted-foreground);
}
.tag.active { background: var(--brand); color: var(--card); }
.prompt-list { padding: 20rpx 30rpx; }
.prompt-card {
  background: var(--card); border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}
.title { font-size: 28rpx; font-weight: 500; display: block; }
.desc { font-size: 24rpx; color: var(--muted-foreground); margin-top: 12rpx; display: block; }
.meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16rpx; }
.tag-label { font-size: 22rpx; color: var(--brand); background: #eef3ff; padding: 4rpx 16rpx; border-radius: 20rpx; }
.views { font-size: 22rpx; color: var(--muted-foreground); }
</style>
