<template>
  <div class="my-wishes-page with-bottom-nav">
    <van-nav-bar title="我的愿望" />

    <div v-if="!userStore.isLoggedIn" class="no-login">
      <van-empty description="请先登录查看你的愿望">
        <van-button type="primary" round to="/login">去登录</van-button>
      </van-empty>
    </div>

    <template v-else>
      <van-tabs v-model:active="activeTab" sticky>
        <van-tab title="全部愿望">
          <van-pull-refresh v-model="refreshing" @refresh="loadWishes">
            <wish-card
              v-for="wish in wishes"
              :key="wish.id"
              :wish="wish"
              @click="goWish(wish.id)"
            />
            <van-empty v-if="wishes.length === 0" description="你还没有许过愿望哦">
              <van-button type="primary" round to="/">去许愿</van-button>
            </van-empty>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { fetchMyWishes } from '@/api/wish'
import WishCard from '@/components/WishCard.vue'
import type { Wish } from '@/mock/data'

const router = useRouter()
const userStore = useUserStore()

const wishes = ref<Wish[]>([])
const activeTab = ref(0)
const refreshing = ref(false)

async function loadWishes() {
  if (!userStore.phone) return
  const result = await fetchMyWishes(userStore.phone)
  wishes.value = result.list
  refreshing.value = false
}

function goWish(id: number) {
  router.push(`/wish/${id}`)
}

onMounted(loadWishes)
</script>

<style scoped>
.my-wishes-page {
  min-height: 100vh;
  background: #f7f8fa;
}
.no-login {
  padding-top: 60px;
}
</style>
