<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getFavoritesApi, cancelFavoriteApi } from '@/api/favorite'
import type { Favorite } from '@/types'
import { Star, Delete } from '@element-plus/icons-vue'

const router = useRouter()
const favorites = ref<Favorite[]>([])
const loading = ref(false)

async function load() {
  loading.value = true
  try {
    const page = await getFavoritesApi({ current: 1, size: 50 })
    favorites.value = page.records || []
  } finally { loading.value = false }
}

async function onRemove(id: number) {
  await ElMessageBox.confirm('确定取消收藏？', '提示', { type: 'warning' })
  await cancelFavoriteApi(id)
  ElMessage.success('已取消')
  await load()
}

onMounted(load)
</script>

<template>
  <div class="page container">
    <div class="page-header">
      <h2 class="page-title">
        <el-icon><Star /></el-icon>
        我的收藏
      </h2>
      <p class="page-subtitle">共 {{ favorites.length }} 件收藏商品</p>
    </div>

    <div v-loading="loading" class="fav-grid">
      <div
        v-for="f in favorites"
        :key="f.id"
        class="fav-card"
        @click="router.push({ name: 'product-detail', params: { id: f.productId } })"
      >
        <div class="card-img">
          <img :src="f.productMainImage || 'https://placehold.co/300x300?text=SNACK'" :alt="f.productName" />
          <div class="remove-btn" @click.stop="onRemove(f.id)">
            <el-icon><Delete /></el-icon>
          </div>
        </div>
        <div class="card-body">
          <h4>{{ f.productName }}</h4>
          <div class="card-footer">
            <span class="price-lg">¥{{ f.minPrice }}</span>
            <el-tag v-if="f.productStatus === 0" type="info" size="small">已下架</el-tag>
          </div>
        </div>
      </div>
    </div>

    <div v-if="!loading && favorites.length === 0" class="empty-state">
      <div class="empty-illustration">
        <el-icon :size="80" color="#E5E7EB"><Star /></el-icon>
      </div>
      <h3>暂无收藏</h3>
      <p>看到喜欢的商品，点击收藏随时查看</p>
      <el-button type="primary" size="large" class="empty-btn" @click="router.push('/')">去逛逛</el-button>
    </div>
  </div>
</template>

<style scoped>
.page {
  padding: 24px 0 60px;
}
.page-header {
  margin-bottom: 24px;
}
.page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}
.page-subtitle {
  color: var(--color-text-muted);
  font-size: 14px;
}

.fav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.fav-card {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: all var(--transition-base);
}
.fav-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.card-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.fav-card:hover .card-img img {
  transform: scale(1.08);
}
.remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.fav-card:hover .remove-btn {
  opacity: 1;
}
.remove-btn:hover {
  background: var(--color-danger);
  color: #fff;
}
.card-body {
  padding: 14px;
}
.card-body h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
}
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Empty State */
.empty-state {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 80px 40px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
}
.empty-illustration {
  margin-bottom: 20px;
}
.empty-state h3 {
  font-size: 20px;
  color: var(--color-text);
  margin-bottom: 8px;
}
.empty-state p {
  color: var(--color-text-muted);
  margin-bottom: 24px;
}
.empty-btn {
  padding: 0 40px;
  height: 44px;
  border-radius: var(--radius-full);
  font-size: 15px;
}

/* Responsive */
@media (max-width: 1280px) {
  .fav-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1024px) {
  .fav-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .fav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .remove-btn {
    opacity: 1;
  }
}
</style>
