<template>
  <div class="favorites-page">
    <div class="page-header">
      <h2>我的收藏</h2>
    </div>

    <div v-if="loading" class="loading-wrap"><a-spin /></div>

    <div v-else-if="list.length === 0" class="empty-wrap">
      <a-empty description="还没有收藏任何作品">
        <a-button type="primary" shape="round" @click="$router.push('/p/gallery')">
          去发现作品
        </a-button>
      </a-empty>
    </div>

    <div v-else class="works-grid">
      <div
        v-for="item in list"
        :key="item.favoriteId ?? item.workId"
        class="work-card"
        @click="$router.push(`/p/works/${item.workId}`)"
      >
        <div class="card-cover">
          <img v-if="item.coverUrl" :src="item.coverUrl" :alt="item.title" />
          <div v-else class="cover-placeholder">
            <picture-outlined />
          </div>
          <!-- 右下角 PIP：用户上传的原图 -->
          <div
            v-if="item.originalImageUrl && item.originalImageUrl !== item.coverUrl"
            class="cover-pip"
            title="原图"
          >
            <img :src="item.originalImageUrl" alt="原图" />
          </div>
        </div>
        <div class="card-body">
          <h3>{{ item.title }}</h3>
          <div v-if="item.favoriteTime" class="card-meta">
            {{ formatFavoriteTime(item.favoriteTime) }}
          </div>
          <div class="card-stats">
            <span><heart-outlined /> {{ item.likeCount ?? 0 }}</span>
            <span><eye-outlined /> {{ item.viewCount ?? 0 }}</span>
          </div>
        </div>
      </div>
    </div>

    <div v-if="total > pageSize" class="pagination-wrap">
      <a-pagination
        v-model:current="page"
        :total="total"
        :page-size="pageSize"
        simple
        @change="fetchList"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { PictureOutlined, HeartOutlined, EyeOutlined } from '@ant-design/icons-vue'
import { publicInteractionApi } from '@/api/public'

/** 与后端 /public/mine/favorites 返回结构一致（扁平字段，无嵌套 work） */
interface FavoriteListItem {
  favoriteId: number
  favoriteTime?: string
  workId: number
  title: string
  coverUrl?: string | null
  originalImageUrl?: string | null
  likeCount?: number
  viewCount?: number
}

const list = ref<FavoriteListItem[]>([])
const loading = ref(true)
const page = ref(1)
const pageSize = 12
const total = ref(0)

/** 收藏时间展示 */
const formatFavoriteTime = (iso: string) => {
  const d = new Date(iso)
  if (Number.isNaN(d.getTime())) return ''
  return `收藏于 ${d.toLocaleString('zh-CN', { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })}`
}

const fetchList = async () => {
  loading.value = true
  try {
    const res = await publicInteractionApi.myFavorites({ page: page.value, pageSize })
    list.value = res.list
    total.value = res.total
  } catch {
    message.error('获取收藏列表失败')
  } finally {
    loading.value = false
  }
}

onMounted(fetchList)
</script>

<style scoped lang="scss">
$primary: #6366f1;

.favorites-page { max-width: 700px; margin: 0 auto; }

.page-header {
  margin-bottom: 16px;
  h2 { font-size: 20px; font-weight: 700; color: #1e1b4b; margin: 0; }
}

.loading-wrap, .empty-wrap { padding: 60px 0; display: flex; justify-content: center; }

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;

  @media (min-width: 640px) { grid-template-columns: repeat(3, 1fr); }
}

.work-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba($primary, 0.04);

  &:hover { box-shadow: 0 4px 20px rgba($primary, 0.1); transform: translateY(-2px); }

  .card-cover {
    position: relative;
    aspect-ratio: 3/4;
    background: #f5f3ff;
    img { width: 100%; height: 100%; object-fit: cover; }
    .cover-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 28px; color: #d1d5db; }

    /* 右下角 PIP：用户原图 */
    .cover-pip {
      position: absolute;
      right: 6px;
      bottom: 6px;
      width: 34%;
      aspect-ratio: 1 / 1;
      border-radius: 7px;
      overflow: hidden;
      border: 2px solid #fff;
      background: #fff;
      box-shadow: 0 3px 10px rgba(15, 12, 41, 0.25);
      transition: transform 0.2s;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  &:hover .cover-pip {
    transform: scale(1.05);
  }

  .card-body {
    padding: 10px 12px;
    h3 { font-size: 13px; font-weight: 600; color: #1e1b4b; margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .card-meta {
      font-size: 11px; color: #9ca3af; margin-bottom: 6px;
    }
    .card-stats {
      display: flex; gap: 12px;
      span { font-size: 11px; color: #9ca3af; display: flex; align-items: center; gap: 3px; }
    }
  }
}

.pagination-wrap { display: flex; justify-content: center; padding: 24px 0; }
</style>
