<template>
  <div class="activities-page">
    <!-- 页面头部 -->
    <div class="page-hero">
      <div class="hero-content">
        <h1>创作活动</h1>
        <p>发现精彩活动，展现创作才华</p>
      </div>
      <div class="hero-search">
        <a-input-search
          v-model:value="keyword"
          placeholder="搜索活动名称..."
          size="large"
          enter-button
          @search="handleSearch"
          class="search-input"
        />
      </div>
    </div>

    <!-- 活动列表 -->
    <div v-if="loading" class="loading-wrap">
      <a-spin size="large" />
    </div>

    <div v-else-if="activities.length === 0" class="empty-wrap">
      <a-empty description="暂无公开活动" />
    </div>

    <div v-else class="activities-grid">
      <div
        v-for="item in activities"
        :key="item.id"
        class="activity-card"
        @click="goDetail(item.id)"
      >
        <div class="card-cover">
          <img
            v-if="item.coverUrl"
            :src="item.coverUrl"
            :alt="item.contestName"
          />
          <div v-else class="cover-placeholder">
            <span>{{ item.contestName.charAt(0) }}</span>
          </div>
          <div class="card-badge">
            {{ getStageLabel(item) }}
          </div>
        </div>
        <div class="card-body">
          <h3 class="card-title">{{ item.contestName }}</h3>
          <div class="card-meta">
            <span class="meta-item">
              <calendar-outlined />
              {{ formatDate(item.startTime) }} - {{ formatDate(item.endTime) }}
            </span>
          </div>
          <div class="card-type">
            <a-tag color="purple">
              {{ item.contestType === "individual" ? "个人参与" : "团队参与" }}
            </a-tag>
            <a-tag v-if="item.ageMin || item.ageMax" color="cyan">
              {{ item.ageMin || 0 }}-{{ item.ageMax || '不限' }}岁
            </a-tag>
          </div>
        </div>
      </div>
    </div>

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

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"
import { CalendarOutlined } from "@ant-design/icons-vue"
import { publicActivitiesApi } from "@/api/public"
import type { PublicActivity } from "@/api/public"
import dayjs from "dayjs"

const router = useRouter()
const activities = ref<PublicActivity[]>([])
const loading = ref(true)
const keyword = ref("")
const page = ref(1)
const pageSize = ref(12)
const total = ref(0)

const formatDate = (date: string) => dayjs(date).format("YYYY-MM-DD")

const getStageLabel = (item: PublicActivity) => {
  const now = dayjs()
  if (now.isBefore(item.registerStartTime)) return "即将开始"
  if (now.isBefore(item.registerEndTime)) return "报名中"
  if (now.isBefore(item.submitEndTime)) return "提交中"
  if (item.status === "finished") return "已结束"
  return "进行中"
}

const fetchActivities = async () => {
  loading.value = true
  try {
    const res = await publicActivitiesApi.list({
      page: page.value,
      pageSize: pageSize.value,
      keyword: keyword.value || undefined,
    })
    activities.value = res.list
    total.value = res.total
  } catch {
    activities.value = []
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  page.value = 1
  fetchActivities()
}

const goDetail = (id: number) => router.push(`/p/activities/${id}`)

onMounted(fetchActivities)
</script>

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

.page-hero {
  background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 60%, #ecfdf5 100%);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba($primary, 0.08);
  }

  .hero-content {
    margin-bottom: 20px;

    h1 {
      font-size: 26px;
      font-weight: 800;
      color: #1e1b4b;
      margin: 0 0 6px;
    }

    p {
      font-size: 14px;
      color: #6b7280;
      margin: 0;
    }
  }

  .search-input {
    max-width: 480px;

    :deep(.ant-input) {
      height: 44px;
      border-radius: 22px 0 0 22px !important;
      border-color: #e5e1f5 !important;
    }

    :deep(.ant-input-search-button) {
      height: 44px;
      border-radius: 0 22px 22px 0 !important;
      background: $primary !important;
      border-color: $primary !important;
    }
  }
}

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

.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.activity-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba($primary, 0.06);
  box-shadow: 0 1px 4px rgba($primary, 0.04);

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

  .card-cover {
    height: 160px;
    position: relative;
    overflow: hidden;

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

    .cover-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #c7d2fe, #fbcfe8);
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        font-size: 40px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .card-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      background: linear-gradient(135deg, $primary, #ec4899);
      box-shadow: 0 2px 8px rgba($primary, 0.3);
    }
  }

  .card-body {
    padding: 16px 18px 18px;

    .card-title {
      font-size: 16px;
      font-weight: 700;
      color: #1e1b4b;
      margin: 0 0 10px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .card-meta {
      margin-bottom: 10px;

      .meta-item {
        font-size: 12px;
        color: #9ca3af;
        display: flex;
        align-items: center;
        gap: 6px;
      }
    }
  }
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 640px) {
  .page-hero {
    padding: 24px 20px;
    border-radius: 16px;

    .hero-content h1 {
      font-size: 22px;
    }
  }

  .activities-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
</style>
