<script setup lang="ts">
/**
 * 限时抢购活动列表
 *
 * 展示进行中 / 即将开始的活动场次，含状态与倒计时
 */
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowRight, Clock, Lightning } from '@element-plus/icons-vue'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppFooter from '@/components/layout/AppFooter.vue'
import EmptyState from '@/components/common/EmptyState.vue'
import Countdown from '@/components/seckill/Countdown.vue'
import { getSeckillActivitiesApi } from '@/api/seckill'
import type { SeckillActivity } from '@/types/seckill'

const router = useRouter()

const activities = ref<SeckillActivity[]>([])
const loading = ref(true)

async function loadActivities() {
  loading.value = true
  try {
    activities.value = (await getSeckillActivitiesApi()) || []
  } catch {
    activities.value = []
  } finally {
    loading.value = false
  }
}

function handleExpire() {
  loadActivities()
}

function formatTime(value?: string) {
  return value ? value.slice(0, 16) : ''
}

function enterButtonText(status: number) {
  if (status === 0) return '提前查看'
  if (status === 1) return '立即进入'
  return '查看回顾'
}

onMounted(loadActivities)
</script>

<template>
  <div class="seckill-page">
    <AppHeader />

    <main class="seckill-main">
      <div class="container">
        <div class="page-head">
          <h1 class="page-title">
            <span class="title-badge">
              <el-icon :size="20"><Lightning /></el-icon>
            </span>
            限时抢购
          </h1>
        </div>

        <el-skeleton v-if="loading" :rows="5" animated class="seckill-skeleton" />

        <EmptyState
          v-else-if="activities.length === 0"
          description="暂无进行中的抢购活动，稍后再来看看吧"
        />

        <div v-else class="activity-grid">
          <div
            v-for="activity in activities"
            :key="activity.id"
            class="activity-card"
            :class="`status-${activity.status}`"
          >
            <div class="card-top">
              <span class="status-badge" :class="`badge-${activity.status}`">
                {{ activity.statusText }}
              </span>

              <div class="countdown-wrap">
                <span class="countdown-label">
                  {{ activity.status === 0 ? '距开始' : activity.status === 1 ? '距结束' : '已结束' }}
                </span>
                <Countdown
                  v-if="activity.status !== 2"
                  :seconds="activity.countdownSeconds"
                  @expire="handleExpire"
                />
                <span v-else class="ended-text">已结束</span>
              </div>
            </div>

            <div class="cover">
              <el-image
                v-if="activity.cover"
                :src="activity.cover"
                fit="cover"
                class="cover-img"
                lazy
              >
                <template #error>
                  <div class="cover-placeholder">
                    <el-icon :size="44"><Lightning /></el-icon>
                  </div>
                </template>
              </el-image>
              <div v-else class="cover-placeholder">
                <el-icon :size="44"><Lightning /></el-icon>
              </div>
            </div>

            <div class="card-body">
              <h2 class="activity-name">{{ activity.name }}</h2>
              <p class="time-range">
                <el-icon :size="15"><Clock /></el-icon>
                {{ formatTime(activity.startTime) }} ~ {{ formatTime(activity.endTime) }}
              </p>
              <p v-if="activity.description" class="description">{{ activity.description }}</p>

              <button
                type="button"
                class="enter-btn"
                @click="router.push(`/seckill/${activity.id}`)"
              >
                {{ enterButtonText(activity.status) }}
                <el-icon :size="15"><ArrowRight /></el-icon>
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>

    <AppFooter />
  </div>
</template>

<style lang="scss" scoped>
.seckill-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $bg-page;
}

.seckill-main {
  flex: 1;
  padding: 28px 0 48px;
}

.container {
  max-width: $container-max;
  margin: 0 auto;
  padding: 0 24px;
}

// ==================== 页头 ====================
.page-head {
  margin-bottom: 24px;
}

.page-title {
  margin: 0;
  font-family: 'Fredoka', 'PingFang SC', sans-serif;
  font-size: $font-size-xxl;
  font-weight: 700;
  color: $color-text-primary;
  display: flex;
  align-items: center;
  gap: 10px;

  .title-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: $color-primary-light;
    color: $color-primary;
  }
}

// ==================== 加载与空状态 ====================
.seckill-skeleton {
  padding: 20px;
  border: 2px solid $color-border;
  border-radius: $radius-lg;
  background: $bg-surface;
  box-shadow: $clay-shadow-sm;
}

// ==================== 活动卡片 ====================
.activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.activity-card {
  display: flex;
  flex-direction: column;
  background: $bg-surface;
  border: 2px solid $color-border;
  border-radius: $radius-lg;
  box-shadow: $clay-shadow-sm;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: $clay-shadow-md;
  }
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 2px solid $color-border;
}

.status-badge {
  padding: 4px 14px;
  border-radius: $radius-full;
  font-size: $font-size-sm;
  font-weight: 700;
  line-height: 1.5;

  &.badge-0 {
    background: #FEF3C7;
    color: $color-warning;
  }

  &.badge-1 {
    background: $color-primary-light;
    color: $color-primary;
  }

  &.badge-2 {
    background: $bg-hover;
    color: $color-text-secondary;
  }
}

.countdown-wrap {
  display: flex;
  align-items: center;
  gap: 10px;

  .countdown-label {
    font-size: $font-size-sm;
    color: $color-text-secondary;
  }
}

.ended-text {
  font-size: $font-size-md;
  font-weight: 600;
  color: $color-text-placeholder;
}

.cover {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: linear-gradient(135deg, $color-primary-light, #FFE4D9);

  .cover-img {
    width: 100%;
    height: 100%;
  }
}

.cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $color-primary;
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
}

.activity-name {
  margin: 0;
  font-size: $font-size-xl;
  font-weight: 700;
  color: $color-text-primary;
  line-height: 1.4;
}

.time-range {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: $font-size-sm;
  color: $color-text-secondary;
}

.description {
  margin: 0;
  font-size: $font-size-sm;
  color: $color-text-secondary;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.enter-btn {
  min-height: 42px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  border: 2px solid $color-border-dark;
  border-radius: $radius-full;
  background: linear-gradient(135deg, $color-primary, $color-cta);
  color: #fff;
  font-size: $font-size-md;
  font-weight: 600;
  box-shadow: 0 4px 0 0 $color-primary-dark;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;

  &:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
  }

  &:active {
    box-shadow: 0 1px 0 0 $color-primary-dark;
    transform: translateY(3px);
  }
}

// ==================== 响应式 ====================
@media (max-width: 900px) {
  .activity-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }

  .page-title {
    font-size: $font-size-xl;
  }

  .card-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .activity-name {
    font-size: $font-size-lg;
  }
}
</style>
