<template>
  <section class="space-y-6">
    <header class="space-y-2">
      <div class="flex items-center gap-3">
        <RouterLink to="/activities" class="text-mosquito-brand hover:underline">← 返回活动列表</RouterLink>
        <h1 class="mos-title text-2xl font-semibold">活动参与者</h1>
      </div>
      <p class="mos-muted text-sm">查看活动 "{{ currentActivityName }}" 的邀请参与者列表。</p>
    </header>

    <div class="mos-card p-5 space-y-4">
      <div class="flex flex-wrap items-center gap-3">
        <label class="text-xs font-semibold text-mosquito-ink/70">选择活动</label>
        <select class="mos-input !py-1 !px-2 !text-xs" v-model.number="selectedActivityId" @change="loadParticipants">
          <option :value="0">请选择活动</option>
          <option v-for="activity in activities" :key="activity.id" :value="activity.id">
            {{ activity.name }}
          </option>
        </select>
        <input class="mos-input !py-1 !px-2 !text-xs" v-model="query" placeholder="搜索邮箱" />
        <button class="mos-btn mos-btn-secondary !py-1 !px-2 !text-xs" @click="loadParticipants">搜索</button>
      </div>

      <div v-if="selectedActivityId && participants.length" class="space-y-3">
        <div
          v-for="participant in participants"
          :key="participant.id"
          class="flex items-center justify-between rounded-xl border border-mosquito-line px-4 py-3"
        >
          <div>
            <div class="text-sm font-semibold text-mosquito-ink">{{ participant.email || '未填写邮箱' }}</div>
            <div class="mos-muted text-xs">
              邀请人ID: {{ participant.inviterUserId }} |
              被邀请人ID: {{ participant.inviteeUserId }} |
              状态: {{ participant.status }} |
              邀请时间: {{ formatDate(participant.invitedAt) }}
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="selectedActivityId && !loading" class="py-8 text-center text-mosquito-ink/60">
        暂无参与者数据
      </div>

      <!-- 分页 -->
      <div v-if="totalPages > 1" class="flex items-center justify-center gap-2">
        <button
          class="mos-btn mos-btn-secondary !py-1 !px-2 !text-xs"
          :disabled="currentPage === 0"
          @click="prevPage"
        >
          上一页
        </button>
        <span class="text-xs text-mosquito-ink/70">
          {{ currentPage + 1 }} / {{ totalPages }}
        </span>
        <button
          class="mos-btn mos-btn-secondary !py-1 !px-2 !text-xs"
          :disabled="currentPage >= totalPages - 1"
          @click="nextPage"
        >
          下一页
        </button>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { activityService } from '../services/activity'

const route = useRoute()
const activities = ref<Array<{ id: number; name: string }>>([])
const selectedActivityId = ref<number>(0)
const currentActivityName = ref<string>('')
const participants = ref<any[]>([])
const query = ref('')
const loading = ref(false)
const currentPage = ref(0)
const totalElements = ref(0)
const totalPages = ref(0)
const pageSize = ref(20)

const formatDate = (dateStr: string | null) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString('zh-CN')
}

const loadActivities = async () => {
  try {
    const list = await activityService.getActivities({ page: 0, size: 100 })
    activities.value = list.map((a: any) => ({ id: a.id, name: a.name }))
    // 如果有路由参数中的activityId，自动选中
    const activityId = route.query.activityId
    if (activityId) {
      selectedActivityId.value = Number(activityId)
      loadParticipants()
    }
  } catch (error) {
    console.error('加载活动列表失败:', error)
  }
}

const loadParticipants = async () => {
  if (!selectedActivityId.value) return

  loading.value = true
  try {
    const activity = activities.value.find(a => a.id === selectedActivityId.value)
    currentActivityName.value = activity?.name || ''

    const result = await activityService.getParticipants(selectedActivityId.value, currentPage.value, pageSize.value, query.value)
    participants.value = result.content || []
    totalElements.value = result.totalElements || 0
    totalPages.value = result.totalPages || 0
  } catch (error) {
    console.error('加载参与者失败:', error)
  } finally {
    loading.value = false
  }
}

const prevPage = () => {
  if (currentPage.value > 0) {
    currentPage.value--
    loadParticipants()
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value - 1) {
    currentPage.value++
    loadParticipants()
  }
}

onMounted(() => {
  loadActivities()
})
</script>
