<template>
  <view class="welfare-detail-page" v-if="detail">
    <image v-if="detail.cover_image" class="detail-cover" :src="detail.cover_image" mode="aspectFill" />
    <view v-else class="detail-cover empty">暂无活动图片</view>

    <view class="detail-panel hero-panel">
      <view class="hero-head">
        <text class="detail-title">{{ detail.title }}</text>
        <text class="detail-type" :class="typeClass(detail.type)">{{ typeLabel(detail.type) }}</text>
      </view>
      <text class="detail-status">{{ statusText(detail.status) }}</text>
      <text class="detail-time">开奖时间：{{ formatTime(detail.draw_time) }}</text>
      <text class="detail-desc" v-if="detail.description">{{ detail.description }}</text>
    </view>

    <view class="detail-panel join-panel">
      <view class="panel-head">
        <text class="panel-title">我的参与进度</text>
        <text class="panel-side">{{ progressText }}</text>
      </view>
      <view class="progress-bar">
        <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
      </view>
      <view class="progress-foot">
        <text class="progress-hint">{{ progressHint }}</text>
        <view
          class="join-btn"
          :class="joinButtonClass"
          @tap="handleJoin"
        >
          {{ joinButtonText }}
        </view>
      </view>
    </view>

    <view class="detail-panel">
      <view class="panel-head">
        <text class="panel-title">奖品</text>
        <text v-if="sortedPrizes.length > 1" class="panel-side">按价格从高到低</text>
      </view>
      <scroll-view v-if="sortedPrizes.length" scroll-x class="prize-scroll" show-scrollbar="false">
        <view class="prize-track">
          <view v-for="prize in sortedPrizes" :key="prize.id" class="prize-item">
            <image v-if="prize.image" class="prize-image" :src="prize.image" mode="aspectFill" />
            <view v-else class="prize-image empty">{{ prizePlaceholderText(prize) }}</view>
            <text class="prize-name">{{ prize.name }}</text>
            <text class="prize-price">参考价 ¥{{ formatAmount(prizePrice(prize)) }}</text>
            <text class="prize-count">x{{ prize.quantity }}</text>
          </view>
        </view>
      </scroll-view>
      <view v-else class="empty-text">暂无奖品</view>
    </view>

    <view class="detail-panel">
      <view class="panel-head participant-head">
        <text class="panel-title">参与玩家</text>
        <view class="participant-head-actions">
          <view class="head-action-btn overview" @tap="openWinnerOverview">中奖概览</view>
          <view v-if="showMoreParticipants" class="head-action-btn" @tap="openParticipantsPopup">查看更多</view>
        </view>
      </view>
      <view class="participant-meta-row">
        <text class="panel-side">共 {{ participantCount }} 人</text>
      </view>
      <view class="avatar-row" v-if="previewParticipants.length">
        <view
          v-for="player in previewParticipants"
          :key="player.user_id"
          class="avatar-item"
          :class="{ mine: isSelfParticipant(player) }"
        >
          <image class="participant-avatar" :src="player.avatar || '/static/logo.png'" mode="aspectFill" />
        </view>
      </view>
      <view v-else class="empty-text">暂无参与玩家</view>
    </view>

    <view class="detail-panel history-entry" @tap="goHistory">
      <view>
        <text class="panel-title">查看往期活动</text>
        <text class="history-subtitle">浏览已结束的福利活动与中奖信息</text>
      </view>
    </view>

    <view v-if="winnerPopupVisible" class="winner-popup-overlay" @touchmove.stop.prevent>
      <view class="winner-popup-mask" @tap="winnerPopupVisible = false"></view>
      <view class="winner-popup-panel" @tap.stop>
        <view class="winner-popup-head">
          <text class="winner-popup-title">当前活动中奖概览</text>
          <text class="winner-popup-close" @tap="winnerPopupVisible = false">×</text>
        </view>
        <scroll-view scroll-y class="winner-popup-list">
          <view v-if="winnerOverviewList.length">
            <view v-for="item in winnerOverviewList" :key="item.id" class="winner-popup-item">
              <image v-if="item.prize_image" class="winner-popup-image" :src="item.prize_image" mode="aspectFill" />
              <view v-else class="winner-popup-image empty">{{ rewardPlaceholderText(item) }}</view>
              <view class="winner-popup-info">
                <text class="winner-popup-name">{{ item.nickname || ('用户' + item.user_id) }} · {{ item.prize_name }}</text>
                <text class="winner-popup-price">参考价 ¥{{ formatAmount(winnerPrice(item)) }}</text>
                <text class="winner-popup-time">{{ formatTime(item.created_at) }}</text>
              </view>
            </view>
          </view>
          <view v-else class="empty-text">还未开奖</view>
        </scroll-view>
      </view>
    </view>

    <view v-if="participantsPopupVisible" class="winner-popup-overlay" @touchmove.stop.prevent>
      <view class="winner-popup-mask" @tap="participantsPopupVisible = false"></view>
      <view class="winner-popup-panel" @tap.stop>
        <view class="winner-popup-head">
          <text class="winner-popup-title">全部参与玩家</text>
          <text class="winner-popup-close" @tap="participantsPopupVisible = false">×</text>
        </view>
        <scroll-view scroll-y class="winner-popup-list">
          <view v-if="allParticipants.length">
            <view v-for="player in allParticipants" :key="player.user_id" class="winner-popup-item participant-popup-item">
              <image class="winner-popup-image participant-popup-avatar" :src="player.avatar || '/static/logo.png'" mode="aspectFill" />
              <view class="winner-popup-info">
                <text class="winner-popup-name">{{ player.nickname || ('用户' + player.user_id) }}</text>
                <text class="winner-popup-time" :class="{ 'self-tag': isSelfParticipant(player) }">
                  {{ isSelfParticipant(player) ? '我已参与' : '活动参与玩家' }}
                </text>
              </view>
            </view>
          </view>
          <view v-else class="empty-text">暂无参与玩家</view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { request, authRequest } from '@/utils/request.js'

export default {
  data() {
    return {
      detail: null,
      winners: [],
      participants: [],
      participantsPage: 1,
      participantsPageSize: 20,
      participantsLoading: false,
      winnerPopupVisible: false,
      participantsPopupVisible: false,
      currentUserId: 0
    }
  },
  computed: {
    sortedPrizes() {
      const prizes = Array.isArray(this.detail?.prizes) ? [...this.detail.prizes] : []
      return prizes.sort((a, b) => {
        const aPrice = this.prizePrice(a)
        const bPrice = this.prizePrice(b)
        if (aPrice !== bPrice) return bPrice - aPrice
        return Number(a.sort || 0) - Number(b.sort || 0)
      })
    },
    progressPercent() {
      const current = Number(this.detail?.current_paid || 0)
      const target = Number(this.detail?.threshold_amount || 0)
      if (target <= 0) return this.detail?.joined ? 100 : 0
      return Math.max(0, Math.min(100, Math.round((current / target) * 100)))
    },
    progressText() {
      const current = this.formatAmount(this.detail?.current_paid || 0)
      const target = this.formatAmount(this.detail?.threshold_amount || 0)
      return `${this.windowLabel(this.detail?.type)}消费 ${current}/${target}`
    },
    progressHint() {
      if (this.detail?.joined) return '您已成功参加本期活动'
      if (this.detail?.can_join) return '已达参与门槛，可立即参加活动'
      const target = Number(this.detail?.threshold_amount || 0)
      const current = Number(this.detail?.current_paid || 0)
      if (target > current) {
        return `还差 ¥${this.formatAmount(target - current)} 即可参加`
      }
      return '当前未满足参加条件'
    },
    joinButtonText() {
      if (this.detail?.joined) return '已参加'
      if (this.detail?.can_join) return '参加活动'
      return '未达门槛'
    },
    joinButtonClass() {
      if (this.detail?.joined) return 'disabled'
      if (this.detail?.can_join) return 'primary'
      return 'muted'
    },
    participantCount() {
      return Number(this.detail?.participant_count || this.participants.length || 0)
    },
    previewParticipants() {
      return this.sortedParticipants.slice(0, 6)
    },
    sortedParticipants() {
      const list = Array.isArray(this.participants) ? [...this.participants] : []
      if (!this.currentUserId) return list
      return list.sort((a, b) => {
        const aSelf = Number(a?.user_id || 0) === this.currentUserId ? 1 : 0
        const bSelf = Number(b?.user_id || 0) === this.currentUserId ? 1 : 0
        return bSelf - aSelf
      })
    },
    showMoreParticipants() {
      return this.participantCount > this.previewParticipants.length
    },
    allParticipants() {
      return this.sortedParticipants
    },
    winnerOverviewList() {
      return Array.isArray(this.winners) ? this.winners : []
    },
  },
  onLoad(options) {
    this.id = Number(options?.id || 0)
    this.loadData()
  },
  methods: {
    async loadData() {
      if (!this.id) return
      try {
        try {
          this.detail = await authRequest({ url: `/api/app/welfare-activities/${this.id}/my`, suppressAuthModal: true })
        } catch (_) {
          this.detail = await request({ url: `/api/app/welfare-activities/${this.id}` })
        }
        if (!this.detail.cover_image && this.detail.prizes && this.detail.prizes.length) {
          this.detail.cover_image = this.detail.prizes.find((item) => item.image)?.image || ''
        }
        this.participants = Array.isArray(this.detail?.participants) ? this.detail.participants : []
        this.currentUserId = Number(uni.getStorageSync('user_id') || 0)
        this.participantsPage = 1
        const winnersRes = await request({ url: `/api/app/welfare-activities/${this.id}/winners?page=1&page_size=100` })
        this.winners = winnersRes?.list || []
      } catch (e) {
        uni.showToast({ title: e.message || '加载失败', icon: 'none' })
      }
    },
    async handleJoin() {
      if (this.detail?.joined || !this.detail?.can_join) return
      try {
        await authRequest({ url: `/api/app/welfare-activities/${this.id}/join`, method: 'POST' })
        uni.showToast({ title: '参加成功', icon: 'success' })
        await this.loadData()
      } catch (e) {
        uni.showToast({ title: e.message || '参加失败', icon: 'none' })
      }
    },
    async loadMoreParticipants() {
      if (this.participantsLoading) return
      if (this.participants.length >= this.participantCount) return
      this.participantsLoading = true
      try {
        const nextPage = this.participantsPage + 1
        const res = await request({
          url: `/api/app/welfare-activities/${this.id}/participants?page=${nextPage}&page_size=${this.participantsPageSize}`
        })
        const list = Array.isArray(res?.list) ? res.list : []
        const seen = new Set(this.participants.map(item => String(item.user_id)))
        list.forEach(item => {
          const key = String(item.user_id)
          if (!seen.has(key)) {
            seen.add(key)
            this.participants.push(item)
          }
        })
        this.participantsPage = nextPage
      } catch (e) {
        uni.showToast({ title: e.message || '加载参与玩家失败', icon: 'none' })
      } finally {
        this.participantsLoading = false
      }
    },
    async openParticipantsPopup() {
      this.participantsPopupVisible = true
      await this.loadAllParticipants()
    },
    async loadAllParticipants() {
      if (this.participantsLoading) return
      while (this.participants.length < this.participantCount) {
        const prevLength = this.participants.length
        await this.loadMoreParticipants()
        if (this.participants.length === prevLength) break
      }
    },
    openWinnerOverview() {
      this.winnerPopupVisible = true
    },
    goHistory() {
      uni.navigateTo({ url: '/pages-activity/activity/welfare/index?mode=finished' })
    },
    statusText(status) {
      return { active: '进行中', finished: '已结束' }[status] || status || '-'
    },
    typeLabel(type) {
      return { daily: '每日福利', weekly: '每周福利', monthly: '每月福利' }[type] || '福利活动'
    },
    typeClass(type) {
      return {
        daily: 'type-daily',
        weekly: 'type-weekly',
        monthly: 'type-monthly'
      }[type] || 'type-default'
    },
    windowLabel(type) {
      return { daily: '每日', weekly: '每周', monthly: '每月' }[type] || '活动'
    },
    formatTime(v) {
      if (!v) return '-'
      return String(v).replace('T', ' ').slice(0, 16)
    },
    formatAmount(cents) {
      return (Number(cents || 0) / 100).toFixed(2)
    },
    prizePrice(prize) {
      return Number(prize?.price_cents ?? prize?.price ?? prize?.product_price ?? prize?.price_snapshot_cents ?? 0)
    },
    winnerPrice(item) {
      return Number(item?.price_cents ?? item?.price ?? item?.product_price ?? item?.price_snapshot_cents ?? 0)
    },
    rewardPlaceholderText(item) {
      const type = String(item?.reward_type || '').toLowerCase()
      if (type === 'coupon') return '优惠券'
      if (type === 'item_card') return '道具卡'
      return '奖品'
    },
    prizePlaceholderText(prize) {
      return this.rewardPlaceholderText(prize)
    },
    isSelfParticipant(player) {
      return Number(player?.user_id || 0) > 0 && Number(player?.user_id || 0) === this.currentUserId
    }
  }
}
</script>

<style lang="scss">
.welfare-detail-page { min-height: 100vh; padding-bottom: 40rpx; background: #fff7ed; }
.detail-cover { width: 100%; height: 420rpx; display: block; background: #f3f4f6; }
.detail-cover.empty { display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.detail-panel { margin: 24rpx 28rpx 0; padding: 28rpx; border-radius: 28rpx; background: #fff; box-shadow: 0 12rpx 30rpx rgba(0,0,0,.06); }
.hero-head { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; }
.detail-title { display: block; font-size: 38rpx; font-weight: 900; color: #1f2937; flex: 1; }
.detail-type { display: inline-flex; align-items: center; padding: 10rpx 20rpx; border-radius: 999rpx; font-size: 22rpx; font-weight: 800; }
.type-daily { background: rgba(249, 115, 22, .12); color: #f97316; }
.type-weekly { background: rgba(239, 68, 68, .12); color: #ef4444; }
.type-monthly { background: linear-gradient(135deg, #a855f7, #ec4899, #f59e0b); color: #fff; }
.type-default { background: rgba(148, 163, 184, .12); color: #64748b; }
.detail-status { display: inline-block; margin-top: 16rpx; padding: 8rpx 20rpx; border-radius: 999rpx; background: #fef3c7; color: #b45309; font-size: 22rpx; font-weight: 800; }
.detail-time, .detail-desc { display: block; margin-top: 16rpx; font-size: 24rpx; color: #4b5563; }
.panel-head { margin-bottom: 18rpx; display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
.panel-head.compact { margin-bottom: 10rpx; }
.panel-title { font-size: 28rpx; font-weight: 900; color: #1f2937; }
.panel-side { font-size: 22rpx; color: #9ca3af; }
.progress-bar { height: 18rpx; border-radius: 999rpx; background: #fed7aa; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999rpx; background: linear-gradient(90deg, #f97316, #fb7185); }
.progress-foot { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; margin-top: 20rpx; }
.progress-hint { flex: 1; font-size: 22rpx; color: #6b7280; }
.join-btn { min-width: 180rpx; padding: 18rpx 28rpx; text-align: center; border-radius: 999rpx; font-size: 24rpx; font-weight: 800; }
.join-btn.primary { background: linear-gradient(135deg, #fb923c, #f97316); color: #fff; }
.join-btn.disabled { background: #dcfce7; color: #16a34a; }
.join-btn.muted { background: #f3f4f6; color: #9ca3af; }
.prize-scroll { white-space: nowrap; }
.prize-track { display: inline-flex; gap: 20rpx; }
.prize-item { width: 260rpx; flex-shrink: 0; }
.prize-image { width: 260rpx; height: 180rpx; border-radius: 20rpx; background: #f3f4f6; }
.prize-image.empty { display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.prize-name { display: -webkit-box; margin-top: 12rpx; min-height: 68rpx; font-size: 24rpx; font-weight: 700; color: #1f2937; white-space: normal; word-break: break-all; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.prize-price { display: block; margin-top: 8rpx; font-size: 22rpx; color: #f97316; line-height: 1.4; }
.prize-count { display: block; margin-top: 6rpx; font-size: 22rpx; color: #6b7280; line-height: 1.4; }
.participant-preview { display: flex; align-items: center; gap: 12rpx; overflow: hidden; }
.participant-head { align-items: flex-start; }
.participant-head-actions { display: flex; align-items: center; gap: 12rpx; flex-shrink: 0; }
.participant-meta-row { margin-bottom: 16rpx; }
.avatar-row { display: flex; align-items: center; gap: 12rpx; overflow-x: auto; padding-bottom: 4rpx; }
.avatar-item { position: relative; flex-shrink: 0; }
.avatar-item.mine .participant-avatar { border-color: #fb923c; box-shadow: 0 0 0 4rpx rgba(251, 146, 60, 0.16); }
.participant-avatar { width: 68rpx; height: 68rpx; border-radius: 50%; background: #f3f4f6; border: 4rpx solid #fff; box-shadow: 0 8rpx 18rpx rgba(0,0,0,.08); }
.head-action-btn { flex-shrink: 0; padding: 14rpx 20rpx; border-radius: 999rpx; background: #fff7ed; color: #f97316; font-size: 22rpx; font-weight: 800; border: 2rpx solid rgba(249,115,22,.18); }
.head-action-btn.overview { background: linear-gradient(135deg, #fff7ed, #ffedd5); }
.more-count { min-width: 68rpx; height: 68rpx; padding: 0 16rpx; border-radius: 34rpx; background: #fff7ed; color: #f97316; display: flex; align-items: center; justify-content: center; font-size: 22rpx; font-weight: 800; }
.participant-list { display: none; }
.participant-overview-card, .participant-card { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; padding: 20rpx; border-radius: 22rpx; background: #fff7ed; }
.overview-icon { width: 76rpx; height: 76rpx; border-radius: 50%; background: linear-gradient(135deg, #fde68a, #fb7185); display: flex; align-items: center; justify-content: center; font-size: 34rpx; flex-shrink: 0; }
.participant-main { display: flex; align-items: center; gap: 14rpx; flex: 1; min-width: 0; }
.participant-card-avatar { width: 76rpx; height: 76rpx; border-radius: 50%; background: #f3f4f6; }
.participant-card-info { flex: 1; min-width: 0; }
.participant-name { display: block; font-size: 26rpx; font-weight: 800; color: #1f2937; }
.participant-sub { display: block; margin-top: 8rpx; font-size: 22rpx; color: #6b7280; }
.winner-btn { padding: 14rpx 20rpx; border-radius: 999rpx; background: #fff; color: #f97316; font-size: 22rpx; font-weight: 800; flex-shrink: 0; }
.overview-btn { min-width: 112rpx; text-align: center; }
.expand-btn { display: none; }
.empty-text { font-size: 24rpx; color: #9ca3af; }
.history-entry { display: flex; justify-content: space-between; align-items: center; }
.history-subtitle { display: block; margin-top: 10rpx; font-size: 22rpx; color: #9ca3af; }
.winner-popup-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.winner-popup-mask { position: absolute; inset: 0; background: rgba(0,0,0,.48); }
.winner-popup-panel { position: relative; width: 88%; max-height: 72vh; background: #fff; border-radius: 28rpx; overflow: hidden; box-shadow: 0 18rpx 50rpx rgba(0,0,0,.18); }
.winner-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; padding: 26rpx 28rpx; border-bottom: 2rpx solid #f3f4f6; }
.winner-popup-title { flex: 1; font-size: 28rpx; font-weight: 900; color: #1f2937; }
.winner-popup-close { font-size: 42rpx; color: #9ca3af; line-height: 1; }
.winner-popup-list { max-height: 54vh; padding: 24rpx 28rpx; }
.winner-popup-item { display: flex; gap: 16rpx; align-items: center; padding: 18rpx 0; }
.participant-popup-item { align-items: center; }
.participant-popup-avatar { border-radius: 50%; }
.self-tag { color: #f97316; font-weight: 800; }
.winner-popup-image { width: 96rpx; height: 96rpx; border-radius: 20rpx; background: #f3f4f6; flex-shrink: 0; }
.winner-popup-image.empty { display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.winner-popup-info { flex: 1; min-width: 0; }
.winner-popup-name { display: block; font-size: 26rpx; font-weight: 800; color: #1f2937; }
.winner-popup-price, .winner-popup-time { display: block; margin-top: 8rpx; font-size: 22rpx; color: #6b7280; }
</style>
