<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getSeckillActivitiesApi, getSeckillResultApi, seckillBuyApi } from '@/api/seckill'
import { useUserStore } from '@/stores/user'
import type { SeckillActivity, SeckillProduct } from '@/types'
import {
  AlarmClock,
  ArrowRight,
  Calendar,
  Clock,
  Goods,
  HotWater,
  Lightning,
  Medal,
  Present,
  Timer
} from '@element-plus/icons-vue'

type ActivityFilter = 'all' | 'ongoing' | 'upcoming' | 'history'

const router = useRouter()
const userStore = useUserStore()

const activities = ref<SeckillActivity[]>([])
const loading = ref(false)
const nowTimestamp = ref(Date.now())
const activityFilter = ref<ActivityFilter>('all')
const selectedActivityId = ref<number | null>(null)
const submittingMap = ref<Record<string, boolean>>({})

let timer: number | null = null

const filterOptions: Array<{ label: string; value: ActivityFilter }> = [
  { label: '全部场次', value: 'all' },
  { label: '抢购中', value: 'ongoing' },
  { label: '即将开始', value: 'upcoming' },
  { label: '历史场次', value: 'history' }
]

const enrichedActivities = computed(() => {
  return activities.value.map((activity) => {
    const status = resolveActivityStatus(activity)
    const countdownSeconds = getCountdownSeconds(activity, status)
    return { ...activity, liveStatus: status, liveCountdown: countdownSeconds }
  })
})

const highlightedActivity = computed(() => {
  if (!enrichedActivities.value.length) return null
  const selected = enrichedActivities.value.find((activity) => activity.id === selectedActivityId.value)
  if (selected) return selected
  return (
    enrichedActivities.value.find((activity) => activity.liveStatus === 1) ||
    enrichedActivities.value.find((activity) => activity.liveStatus === 0) ||
    enrichedActivities.value[0]
  )
})

const filteredActivities = computed(() => {
  return enrichedActivities.value.filter((activity) => {
    if (activityFilter.value === 'all') return true
    if (activityFilter.value === 'ongoing') return activity.liveStatus === 1
    if (activityFilter.value === 'upcoming') return activity.liveStatus === 0
    return activity.liveStatus === 2
  })
})

const seckillStats = computed(() => {
  const ongoing = enrichedActivities.value.filter((activity) => activity.liveStatus === 1).length
  const upcoming = enrichedActivities.value.filter((activity) => activity.liveStatus === 0).length
  const totalProducts = enrichedActivities.value.reduce((sum, activity) => sum + activity.products.length, 0)
  const soldOut = enrichedActivities.value.reduce((sum, activity) => {
    return sum + activity.products.filter((product) => product.remainStock <= 0).length
  }, 0)
  return { ongoing, upcoming, totalProducts, soldOut }
})

const heroCountdown = computed(() => {
  const activity = highlightedActivity.value
  if (!activity) {
    return {
      label: '暂无活动',
      h: '00',
      m: '00',
      s: '00'
    }
  }
  const parts = formatDuration(activity.liveCountdown)
  return {
    label: activity.liveStatus === 1 ? '距结束' : activity.liveStatus === 0 ? '距开始' : '已结束',
    ...parts
  }
})

onMounted(async () => {
  await loadActivities()
  timer = window.setInterval(() => {
    nowTimestamp.value = Date.now()
  }, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

async function loadActivities() {
  loading.value = true
  try {
    activities.value = (await getSeckillActivitiesApi()) || []
    const preferred =
      activities.value.find((activity) => resolveActivityStatus(activity) === 1)?.id ||
      activities.value.find((activity) => resolveActivityStatus(activity) === 0)?.id ||
      activities.value[0]?.id ||
      null
    selectedActivityId.value = preferred
  } finally {
    loading.value = false
  }
}

function resolveActivityStatus(activity: SeckillActivity) {
  const start = parseTime(activity.startTime)
  const end = parseTime(activity.endTime)
  if (!start || !end) {
    return activity.status
  }
  if (nowTimestamp.value < start) return 0
  if (nowTimestamp.value > end) return 2
  return 1
}

function getCountdownSeconds(activity: SeckillActivity, status: number) {
  const start = parseTime(activity.startTime)
  const end = parseTime(activity.endTime)
  if (!start || !end) {
    return Math.max(0, activity.countdownSeconds || 0)
  }
  if (status === 0) {
    return Math.max(0, Math.floor((start - nowTimestamp.value) / 1000))
  }
  if (status === 1) {
    return Math.max(0, Math.floor((end - nowTimestamp.value) / 1000))
  }
  return 0
}

function parseTime(value?: string) {
  if (!value) return 0
  const timestamp = new Date(value.replace(/-/g, '/')).getTime()
  return Number.isNaN(timestamp) ? 0 : timestamp
}

function formatDuration(seconds: number) {
  const safe = Math.max(0, seconds)
  return {
    h: String(Math.floor(safe / 3600)).padStart(2, '0'),
    m: String(Math.floor((safe % 3600) / 60)).padStart(2, '0'),
    s: String(safe % 60).padStart(2, '0')
  }
}

function formatDisplayTime(value: string) {
  const date = new Date(value.replace(/-/g, '/'))
  if (Number.isNaN(date.getTime())) {
    return value
  }
  return new Intl.DateTimeFormat('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).format(date)
}

function formatTimeSlot(activity: SeckillActivity) {
  const start = formatDisplayTime(activity.startTime)
  const end = formatDisplayTime(activity.endTime)
  return `${start} - ${end}`
}

function formatPrice(price: number) {
  const numeric = Number(price)
  if (Number.isNaN(numeric)) return String(price)
  return numeric % 1 === 0 ? String(numeric) : numeric.toFixed(1).replace(/\.0$/, '')
}

function getDiscountPercent(product: SeckillProduct) {
  if (!product.originPrice || product.originPrice <= 0) {
    return 0
  }
  return Math.max(0, Math.round((1 - product.seckillPrice / product.originPrice) * 100))
}

function getSavedAmount(product: SeckillProduct) {
  return Math.max(0, product.originPrice - product.seckillPrice)
}

function getProgressPercent(product: SeckillProduct) {
  if (typeof product.soldPercent === 'number' && product.soldPercent >= 0) {
    return Math.max(0, Math.min(100, product.soldPercent))
  }
  if (!product.seckillStock) {
    return 0
  }
  const sold = product.seckillStock - product.remainStock
  return Math.max(0, Math.min(100, Math.round((sold / product.seckillStock) * 100)))
}

function getStatusText(status: number) {
  return {
    0: '即将开始',
    1: '抢购中',
    2: '已结束'
  }[status] || '已结束'
}

function getStatusTone(status: number) {
  return {
    0: 'upcoming',
    1: 'ongoing',
    2: 'history'
  }[status] || 'history'
}

function getButtonText(product: SeckillProduct, status: number) {
  if (status === 0) return '等待开抢'
  if (status === 2) return '活动结束'
  if (product.remainStock <= 0) return '已抢光'
  return '立即抢购'
}

function canBuy(product: SeckillProduct, status: number) {
  return status === 1 && product.remainStock > 0
}

function goProduct(productId: number) {
  router.push({ name: 'product-detail', params: { id: productId } })
}

async function startSeckill(activity: SeckillActivity, product: SeckillProduct) {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录后再参与抢购')
    router.push('/login')
    return
  }
  if (!canBuy(product, resolveActivityStatus(activity))) {
    return
  }

  const key = `${activity.id}-${product.skuId}`
  if (submittingMap.value[key]) {
    return
  }

  submittingMap.value = { ...submittingMap.value, [key]: true }
  try {
    const { orderNo } = await seckillBuyApi({
      activityId: activity.id,
      skuId: product.skuId,
      quantity: 1
    })
    ElMessage.success('已进入抢购队列，正在为你确认结果')
    await pollSeckillResult(orderNo)
  } catch (error: any) {
    ElMessage.error(error?.message || '抢购失败，请稍后再试')
  } finally {
    submittingMap.value = { ...submittingMap.value, [key]: false }
  }
}

async function pollSeckillResult(orderNo: string) {
  for (let attempt = 0; attempt < 20; attempt += 1) {
    await new Promise((resolve) => setTimeout(resolve, 1500))
    try {
      const result = await getSeckillResultApi(orderNo)
      if (result.status === 1) {
        ElMessage.success('抢购成功，请尽快前往订单页完成支付')
        router.push('/orders')
        return
      }
      if (result.status === 2) {
        ElMessage.error(result.message || '很遗憾，本次抢购未成功')
        return
      }
    } catch {
      // Ignore transient polling failures and continue polling.
    }
  }
  ElMessage.warning('排队结果确认超时，可稍后去订单页查看')
}
</script>

<template>
  <div class="seckill-page">
    <section class="hero-section container">
      <div class="hero-main">
        <div class="hero-kicker">
          <el-icon><HotWater /></el-icon>
          <span>Flash Sale Schedule</span>
        </div>
        <h1>秒杀要快，信息也要足够清楚</h1>
        <p>
          这里把当前场次、即将开始场次和活动商品集中展示。
          你可以先看倒计时，再看库存进度和限购规则，抢购节奏会更稳。
        </p>

        <div class="hero-countdown" v-if="highlightedActivity">
          <div class="countdown-label">{{ heroCountdown.label }}</div>
          <div class="countdown-group" :class="getStatusTone(highlightedActivity.liveStatus)">
            <div class="countdown-box"><strong>{{ heroCountdown.h }}</strong><span>时</span></div>
            <div class="countdown-box"><strong>{{ heroCountdown.m }}</strong><span>分</span></div>
            <div class="countdown-box"><strong>{{ heroCountdown.s }}</strong><span>秒</span></div>
          </div>
          <div class="hero-summary">
            <span>{{ highlightedActivity.name }}</span>
            <span>{{ formatTimeSlot(highlightedActivity) }}</span>
          </div>
        </div>

        <div class="hero-actions">
          <button class="hero-btn primary" type="button" @click="selectedActivityId = highlightedActivity?.id ?? null">
            <el-icon><Lightning /></el-icon>
            锁定当前场次
          </button>
          <button class="hero-btn secondary" type="button" @click="router.push('/orders')">
            <el-icon><ArrowRight /></el-icon>
            查看我的订单
          </button>
        </div>
      </div>

      <div class="hero-side">
        <div class="metric-card accent">
          <span>抢购中</span>
          <strong>{{ seckillStats.ongoing }}</strong>
          <small>当前正在进行的场次</small>
        </div>
        <div class="metric-grid">
          <div class="metric-card">
            <span>即将开始</span>
            <strong>{{ seckillStats.upcoming }}</strong>
            <small>可以提前蹲点的场次</small>
          </div>
          <div class="metric-card">
            <span>活动商品</span>
            <strong>{{ seckillStats.totalProducts }}</strong>
            <small>全部场次合计商品数</small>
          </div>
          <div class="metric-card">
            <span>售罄商品</span>
            <strong>{{ seckillStats.soldOut }}</strong>
            <small>已抢光的热门单品</small>
          </div>
          <div class="metric-card">
            <span>参与建议</span>
            <strong>1 件</strong>
            <small>默认下单数量，尽量快进快出</small>
          </div>
        </div>
      </div>
    </section>

    <section class="container schedule-section">
      <div class="section-head">
        <div>
          <h2>场次时间轴</h2>
          <p>先选场次，再看商品。当前页会优先聚焦正在进行中的活动。</p>
        </div>
        <div class="filter-bar" role="tablist" aria-label="秒杀活动筛选">
          <button
            v-for="item in filterOptions"
            :key="item.value"
            class="filter-chip"
            :class="{ active: activityFilter === item.value }"
            type="button"
            @click="activityFilter = item.value"
          >
            {{ item.label }}
          </button>
        </div>
      </div>

      <div v-loading="loading" class="schedule-track">
        <button
          v-for="activity in filteredActivities"
          :key="activity.id"
          class="schedule-card"
          :class="[getStatusTone(activity.liveStatus), { selected: selectedActivityId === activity.id }]"
          type="button"
          @click="selectedActivityId = activity.id"
        >
          <div class="schedule-top">
            <span class="schedule-status">{{ getStatusText(activity.liveStatus) }}</span>
            <span class="schedule-countdown">
              <template v-if="activity.liveStatus !== 2">
                {{ activity.liveStatus === 1 ? '剩余' : '开抢' }} {{ formatDuration(activity.liveCountdown).h }}:{{ formatDuration(activity.liveCountdown).m }}:{{ formatDuration(activity.liveCountdown).s }}
              </template>
              <template v-else>
                已结束
              </template>
            </span>
          </div>
          <h3>{{ activity.name }}</h3>
          <div class="schedule-meta">
            <span>
              <el-icon><Calendar /></el-icon>
              {{ formatTimeSlot(activity) }}
            </span>
            <span>
              <el-icon><Goods /></el-icon>
              {{ activity.products.length }} 件商品
            </span>
          </div>
        </button>

        <el-empty v-if="!loading && filteredActivities.length === 0" description="当前筛选下暂无活动" />
      </div>
    </section>

    <section v-if="highlightedActivity" class="container spotlight-section">
      <div class="section-head">
        <div>
          <h2>主推场次</h2>
          <p>围绕一个场次展开，减少来回跳转，适合抢购前快速决策。</p>
        </div>
        <button class="text-link" type="button" @click="router.push('/orders')">
          查看订单进度
          <el-icon><ArrowRight /></el-icon>
        </button>
      </div>

      <div class="spotlight-shell" :class="getStatusTone(highlightedActivity.liveStatus)">
        <div class="spotlight-hero">
          <div class="spotlight-copy">
            <div class="spotlight-badge">
              <el-icon><Medal /></el-icon>
              <span>{{ getStatusText(highlightedActivity.liveStatus) }}</span>
            </div>
            <h3>{{ highlightedActivity.name }}</h3>
            <p class="spotlight-time">{{ formatTimeSlot(highlightedActivity) }}</p>
            <p class="spotlight-desc">
              {{ highlightedActivity.description || '精选爆款零食集中上新，库存实时变化，建议提前进入页面并保持刷新节奏。' }}
            </p>
            <div class="spotlight-points">
              <span><el-icon><Clock /></el-icon> 倒计时实时更新</span>
              <span><el-icon><Present /></el-icon> 支持直接查看库存进度</span>
              <span><el-icon><AlarmClock /></el-icon> 抢购成功后跳转订单页付款</span>
            </div>
          </div>

          <div class="spotlight-summary">
            <div class="summary-card">
              <span>场次状态</span>
              <strong>{{ getStatusText(highlightedActivity.liveStatus) }}</strong>
            </div>
            <div class="summary-card">
              <span>商品数量</span>
              <strong>{{ highlightedActivity.products.length }}</strong>
            </div>
            <div class="summary-card">
              <span>当前倒计时</span>
              <strong>{{ heroCountdown.h }}:{{ heroCountdown.m }}:{{ heroCountdown.s }}</strong>
            </div>
            <div class="summary-card">
              <span>参与方式</span>
              <strong>登录后直接抢</strong>
            </div>
          </div>
        </div>

        <div class="spotlight-grid">
          <article
            v-for="product in highlightedActivity.products"
            :key="product.id"
            class="product-card"
          >
            <div class="product-cover" @click="goProduct(product.productId)">
              <img
                :src="product.productImage || 'https://placehold.co/640x640?text=SNACK'"
                :alt="product.productName"
              />
              <span class="discount-badge">省 {{ formatPrice(getSavedAmount(product)) }}</span>
              <span class="percent-badge">-{{ getDiscountPercent(product) }}%</span>
            </div>

            <div class="product-body">
              <div class="product-title-row">
                <div>
                  <h4 @click="goProduct(product.productId)">{{ product.productName }}</h4>
                  <p class="sku-name">{{ product.skuName }}</p>
                </div>
                <span class="limit-pill">限购 {{ product.perLimit }} 件</span>
              </div>

              <div class="price-row">
                <div class="price-main">
                  <span class="current-price">¥{{ formatPrice(product.seckillPrice) }}</span>
                  <span class="origin-price">¥{{ formatPrice(product.originPrice) }}</span>
                </div>
                <span class="stock-pill">剩余 {{ product.remainStock }} 件</span>
              </div>

              <div class="progress-block">
                <div class="progress-label-row">
                  <span>抢购进度</span>
                  <strong>{{ getProgressPercent(product) }}%</strong>
                </div>
                <div class="progress-track" aria-hidden="true">
                  <div class="progress-fill" :style="{ width: `${getProgressPercent(product)}%` }"></div>
                </div>
              </div>

              <div class="product-meta">
                <span><el-icon><Timer /></el-icon> 原库存 {{ product.seckillStock }} 件</span>
                <span><el-icon><Lightning /></el-icon> 默认每次下单 1 件</span>
              </div>

              <el-button
                class="buy-button"
                :type="highlightedActivity.liveStatus === 1 ? 'danger' : 'info'"
                size="large"
                :disabled="!canBuy(product, highlightedActivity.liveStatus)"
                :loading="submittingMap[`${highlightedActivity.id}-${product.skuId}`]"
                @click="startSeckill(highlightedActivity, product)"
              >
                {{ getButtonText(product, highlightedActivity.liveStatus) }}
              </el-button>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="container guide-section">
      <div class="guide-card">
        <div class="guide-head">
          <h2>参与提示</h2>
          <p>把最容易影响成功率的几个动作放在页尾，方便临门一脚前快速过一遍。</p>
        </div>
        <div class="guide-grid">
          <div class="guide-item">
            <el-icon><Lightning /></el-icon>
            <h3>提前登录</h3>
            <p>活动开始前先确认登录态，避免进入抢购后被迫跳转登录页。</p>
          </div>
          <div class="guide-item">
            <el-icon><Goods /></el-icon>
            <h3>先选规格</h3>
            <p>本页已经按 SKU 展示，看到想要的规格后直接参与，不必二次确认。</p>
          </div>
          <div class="guide-item">
            <el-icon><Timer /></el-icon>
            <h3>关注倒计时</h3>
            <p>倒计时基于当前时间实时计算，比静态接口值更接近真实开抢节奏。</p>
          </div>
          <div class="guide-item">
            <el-icon><ArrowRight /></el-icon>
            <h3>及时付款</h3>
            <p>抢购成功后尽快去订单页完成支付，避免超时释放库存。</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.seckill-page {
  padding: 28px 0 72px;
  background:
    radial-gradient(circle at top left, rgba(244, 63, 94, 0.16), transparent 26%),
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 24%),
    linear-gradient(180deg, #fff5f5 0%, #fffaf0 14%, #f8fafc 42%, #f8fafc 100%);
}

.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.92fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 26px;
}

.hero-main,
.hero-side,
.schedule-section,
.spotlight-shell,
.guide-card {
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
}

.hero-main {
  padding: 34px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.14), transparent 26%),
    linear-gradient(135deg, #7f1d1d 0%, #b91c1c 30%, #ef4444 76%, #fb7185 100%);
  color: #fff7ed;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fee2e2;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero-main h1 {
  margin-top: 20px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  color: #ffffff;
}

.hero-main p {
  max-width: 620px;
  margin-top: 16px;
  color: rgba(255, 247, 237, 0.92);
  font-size: 1.02rem;
}

.hero-countdown {
  margin-top: 26px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(10px);
}

.countdown-label {
  font-size: 0.94rem;
  color: #fecaca;
}

.countdown-group {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.countdown-box {
  min-width: 82px;
  padding: 14px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  text-align: center;
}

.countdown-box strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: #ffffff;
}

.countdown-box span {
  display: block;
  margin-top: 6px;
  color: #fecaca;
  font-size: 0.82rem;
}

.hero-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 14px;
  color: #ffe4e6;
  font-size: 0.92rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.hero-btn,
.filter-chip,
.schedule-card,
.text-link,
.product-cover,
.product-body h4 {
  cursor: pointer;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 16px;
  font-weight: 800;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.hero-btn:focus-visible,
.filter-chip:focus-visible,
.schedule-card:focus-visible,
.text-link:focus-visible {
  outline: 3px solid rgba(239, 68, 68, 0.28);
  outline-offset: 3px;
}

.hero-btn.primary {
  background: #fff7ed;
  color: #9a3412;
  box-shadow: 0 16px 30px rgba(120, 53, 15, 0.18);
}

.hero-btn.secondary {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-btn:hover {
  transform: translateY(-2px);
}

.hero-side {
  padding: 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.metric-card {
  padding: 18px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.06);
}

.metric-card.accent {
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

.metric-card span,
.metric-card small {
  display: block;
}

.metric-card span {
  color: #64748b;
  font-size: 0.92rem;
}

.metric-card strong {
  display: block;
  margin-top: 8px;
  font-size: 2rem;
  line-height: 1;
  color: #0f172a;
}

.metric-card small {
  margin-top: 10px;
  color: #64748b;
}

.metric-card.accent span,
.metric-card.accent strong,
.metric-card.accent small {
  color: #f8fafc;
}

.schedule-section,
.guide-card {
  padding: 22px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-head h2 {
  font-size: 1.7rem;
}

.section-head p {
  margin-top: 6px;
  color: #64748b;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chip {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: #fff1f2;
  color: #881337;
  font-weight: 700;
  transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.filter-chip.active {
  background: #111827;
  color: #ffffff;
  box-shadow: 0 14px 24px rgba(17, 24, 39, 0.18);
}

.schedule-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.schedule-card {
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 24px;
  background: #ffffff;
  text-align: left;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.schedule-card.selected,
.schedule-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.schedule-card.ongoing {
  border-color: rgba(239, 68, 68, 0.26);
  background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
}

.schedule-card.upcoming {
  border-color: rgba(245, 158, 11, 0.24);
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
}

.schedule-card.history {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.schedule-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.schedule-status {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
}

.schedule-card.upcoming .schedule-status {
  background: #f59e0b;
}

.schedule-card.history .schedule-status {
  background: #94a3b8;
}

.schedule-countdown {
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 700;
}

.schedule-card h3 {
  margin-top: 16px;
  font-size: 1.2rem;
  color: #0f172a;
}

.schedule-meta {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  color: #64748b;
  font-size: 0.92rem;
}

.schedule-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.spotlight-section {
  margin-top: 24px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ef4444;
  font-weight: 700;
}

.spotlight-shell {
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.92);
}

.spotlight-shell.ongoing {
  background:
    radial-gradient(circle at top right, rgba(251, 113, 133, 0.18), transparent 22%),
    linear-gradient(180deg, #fff1f2 0%, #ffffff 22%);
}

.spotlight-shell.upcoming {
  background:
    radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 24%),
    linear-gradient(180deg, #fffbeb 0%, #ffffff 22%);
}

.spotlight-shell.history {
  background:
    radial-gradient(circle at top right, rgba(148, 163, 184, 0.14), transparent 24%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 22%);
}

.spotlight-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.8fr);
  gap: 18px;
  margin-bottom: 20px;
}

.spotlight-copy,
.summary-card,
.product-card {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.spotlight-copy {
  padding: 24px;
}

.spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-weight: 700;
}

.spotlight-copy h3 {
  margin-top: 18px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.spotlight-time {
  margin-top: 8px;
  color: #ef4444;
  font-weight: 700;
}

.spotlight-desc {
  margin-top: 14px;
  color: #475569;
}

.spotlight-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.spotlight-points span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.9rem;
  font-weight: 700;
}

.spotlight-summary {
  display: grid;
  gap: 14px;
}

.summary-card {
  padding: 18px;
}

.summary-card span {
  display: block;
  color: #64748b;
  font-size: 0.9rem;
}

.summary-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.25rem;
  color: #0f172a;
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.product-card {
  overflow: hidden;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06);
}

.product-cover {
  position: relative;
  padding: 16px;
  background: linear-gradient(180deg, #fff7ed 0%, #fff1f2 100%);
}

.product-cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
}

.discount-badge,
.percent-badge,
.limit-pill,
.stock-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.discount-badge {
  position: absolute;
  top: 28px;
  left: 28px;
  background: #111827;
  color: #ffffff;
}

.percent-badge {
  position: absolute;
  top: 28px;
  right: 28px;
  background: #ef4444;
  color: #ffffff;
}

.product-body {
  padding: 18px;
}

.product-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.product-body h4 {
  font-size: 1.2rem;
  color: #0f172a;
  transition: color var(--transition-fast);
}

.product-body h4:hover {
  color: #ef4444;
}

.sku-name {
  margin-top: 8px;
  color: #64748b;
}

.limit-pill {
  background: #fff7ed;
  color: #9a3412;
  white-space: nowrap;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.current-price {
  font-size: 1.8rem;
  line-height: 1;
  color: #ef4444;
  font-weight: 800;
}

.origin-price {
  color: #94a3b8;
  text-decoration: line-through;
}

.stock-pill {
  background: #ecfdf5;
  color: #047857;
}

.progress-block {
  margin-top: 16px;
}

.progress-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 0.92rem;
}

.progress-label-row strong {
  color: #0f172a;
}

.progress-track {
  height: 10px;
  margin-top: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef4444 0%, #fb7185 100%);
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 14px;
  color: #64748b;
  font-size: 0.92rem;
}

.product-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.buy-button {
  width: 100%;
  margin-top: 18px;
  min-height: 48px;
  font-weight: 800;
}

.guide-section {
  margin-top: 24px;
}

.guide-head h2 {
  font-size: 1.7rem;
}

.guide-head p {
  margin-top: 8px;
  color: #64748b;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.guide-item {
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.guide-item .el-icon {
  font-size: 1.4rem;
  color: #ef4444;
}

.guide-item h3 {
  margin-top: 14px;
  font-size: 1.1rem;
}

.guide-item p {
  margin-top: 8px;
  color: #64748b;
}

@media (max-width: 1100px) {
  .hero-section,
  .spotlight-hero {
    grid-template-columns: 1fr;
  }

  .guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .seckill-page {
    padding-top: 16px;
  }

  .hero-main,
  .hero-side,
  .schedule-section,
  .spotlight-shell,
  .guide-card {
    border-radius: 24px;
  }

  .hero-main {
    padding: 24px;
  }

  .hero-main h1 {
    font-size: 2.2rem;
  }

  .hero-actions,
  .hero-summary,
  .filter-bar,
  .spotlight-points,
  .product-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .countdown-group,
  .metric-grid,
  .guide-grid {
    grid-template-columns: 1fr;
  }

  .countdown-group {
    display: grid;
  }

  .section-head,
  .product-title-row,
  .price-row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .schedule-track,
  .spotlight-grid {
    grid-template-columns: 1fr;
  }

  .hero-btn,
  .filter-chip {
    width: 100%;
    justify-content: center;
  }

  .countdown-box {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-btn,
  .filter-chip,
  .schedule-card,
  .product-body h4 {
    transition: none;
  }

  .hero-btn:hover,
  .schedule-card:hover {
    transform: none;
  }
}
</style>
