<template>
  <div class="works-list-page">
    <div class="page-header">
      <h2>我的作品库</h2>
      <a-button type="primary" shape="round" @click="$router.push('/p/create')">
        <plus-outlined /> 创作绘本
      </a-button>
    </div>

    <!-- 状态 Tab -->
    <div class="status-tabs">
      <span
        v-for="tab in tabs"
        :key="tab.key"
        :class="['tab-item', { active: activeTab === tab.key }]"
        @click="switchTab(tab.key)"
      >
        {{ tab.label }}
      </span>
    </div>

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

    <div v-else-if="works.length === 0" class="empty-wrap">
      <a-empty :description="activeTab === 'draft' ? '还没有草稿' : activeTab === 'published' ? '还没有发布的作品' : '还没有作品'">
        <a-button type="primary" shape="round" @click="$router.push('/p/create')">开始创作</a-button>
      </a-empty>
    </div>

    <div v-else class="works-grid">
      <div v-for="work in works" :key="work.id" class="work-card" @click="$router.push(`/p/works/${work.id}`)">
        <div class="work-cover">
          <img v-if="work.coverUrl" :src="work.coverUrl" :alt="work.title" />
          <div v-else class="cover-placeholder">
            <picture-outlined />
          </div>
          <div class="work-status-tag" :class="work.status">
            {{ statusTextMap[work.status] || work.status }}
          </div>
        </div>
        <div class="work-info">
          <h3>{{ work.title }}</h3>
          <div class="work-meta">
            <span>{{ work._count?.pages || 0 }}页</span>
            <span v-if="work.status === 'published'">
              {{ work.viewCount || 0 }}浏览 · {{ work.likeCount || 0 }}赞
            </span>
            <span v-else>{{ formatDate(work.createTime) }}</span>
          </div>
        </div>
      </div>
    </div>

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

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined, PictureOutlined } from '@ant-design/icons-vue'
import { publicUserWorksApi, type UserWork } from '@/api/public'
import dayjs from 'dayjs'

const works = ref<UserWork[]>([])
const loading = ref(true)
const currentPage = ref(1)
const pageSize = 12
const total = ref(0)
const activeTab = ref('')

const tabs = [
  { key: '', label: '全部' },
  { key: 'draft', label: '草稿' },
  { key: 'pending_review', label: '审核中' },
  { key: 'published', label: '已发布' },
  { key: 'rejected', label: '被拒绝' },
]

const statusTextMap: Record<string, string> = {
  draft: '草稿',
  pending_review: '审核中',
  published: '已发布',
  rejected: '被拒绝',
  taken_down: '已下架',
}

const formatDate = (d: string) => dayjs(d).format('MM-DD HH:mm')

const fetchWorks = async () => {
  loading.value = true
  try {
    const res = await publicUserWorksApi.list({
      page: currentPage.value,
      pageSize,
      status: activeTab.value || undefined,
    })
    works.value = res.list
    total.value = res.total
  } catch {
    message.error('获取作品列表失败')
  } finally {
    loading.value = false
  }
}

const switchTab = (key: string) => {
  activeTab.value = key
  currentPage.value = 1
  fetchWorks()
}

onMounted(fetchWorks)
</script>

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

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

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  h2 { font-size: 20px; font-weight: 700; color: #1e1b4b; margin: 0; }
}

.status-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;

  .tab-item {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: #6b7280;
    background: #f3f4f6;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;

    &.active { background: $primary; color: #fff; }
    &:hover:not(.active) { background: #e5e7eb; }
  }
}

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

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

  @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); }

  .work-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;
      width: 100%;
      height: 100%;
      font-size: 32px;
      color: #d1d5db;
    }

    .work-status-tag {
      position: absolute;
      top: 8px;
      left: 8px;
      padding: 2px 8px;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 600;

      &.draft { background: rgba(107,114,128,0.8); color: #fff; }
      &.pending_review { background: rgba(245,158,11,0.9); color: #fff; }
      &.published { background: rgba(16,185,129,0.9); color: #fff; }
      &.rejected { background: rgba(239,68,68,0.9); color: #fff; }
      &.taken_down { background: rgba(107,114,128,0.8); color: #fff; }
    }
  }

  .work-info {
    padding: 10px 12px;

    h3 { font-size: 13px; font-weight: 600; color: #1e1b4b; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .work-meta {
      display: flex;
      gap: 8px;
      span { font-size: 11px; color: #9ca3af; }
    }
  }
}

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