<template>
  <view class="favorites">
    <view class="tabs">
      <text class="tab" :class="{ active: tab === 'prompts' }" @tap="tab = 'prompts'">提示词</text>
      <text class="tab" :class="{ active: tab === 'posts' }" @tap="tab = 'posts'">帖子</text>
    </view>
    <view class="list">
      <view class="item" v-for="item in list" :key="item.id" @tap="goDetail(item)">
        <text class="item-title">{{ item.prompt?.title || item.post?.title }}</text>
      </view>
    </view>
    <view class="empty" v-if="list.length === 0 && loaded">
      <text>暂无收藏</text>
    </view>
  </view>
</template>

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

const tab = ref('prompts')
const list = ref<any[]>([])
const loaded = ref(false)

async function loadData() {
  loaded.value = false
  try {
    if (tab.value === 'prompts') {
      const res: any = await api.prompts.favorites()
      list.value = res.items || []
    } else {
      list.value = []
    }
  } catch (e) {
    console.error(e)
  } finally {
    loaded.value = true
  }
}

watch(tab, loadData)
onMounted(loadData)

function goDetail(item: any) {
  if (tab.value === 'prompts' && item.prompt) {
    uni.navigateTo({ url: `/pages/prompt-detail/index?id=${item.prompt.id}` })
  }
}
</script>

<style scoped>
.favorites { }
.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); }
.tab.active { color: var(--brand); font-weight: bold; border-bottom: 3rpx solid var(--brand); }
.list { padding: 20rpx 30rpx; }
.item { background: var(--card); border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; }
.item-title { font-size: 28rpx; }
.empty { text-align: center; padding: 100rpx; font-size: 28rpx; color: var(--muted-foreground); }
</style>
