<template>
  <div class="detail-page" v-if="activity">
    <!-- 活动头部 -->
    <div class="detail-hero">
      <img v-if="activity.coverUrl" :src="activity.coverUrl" class="hero-cover" />
      <div v-else class="hero-placeholder">
        <span>{{ activity.contestName?.charAt(0) }}</span>
      </div>
      <div class="hero-overlay">
        <a-button shape="round" size="small" @click="$router.back()" class="back-btn">
          <arrow-left-outlined /> 返回
        </a-button>
        <div class="hero-badge">{{ stageLabel }}</div>
      </div>
    </div>

    <!-- 活动信息 -->
    <div class="detail-card">
      <h1 class="detail-title">{{ activity.contestName }}</h1>
      <div class="detail-meta">
        <div class="meta-row">
          <calendar-outlined />
          <span>{{ formatDate(activity.startTime) }} - {{ formatDate(activity.endTime) }}</span>
        </div>
        <div class="meta-row">
          <tag-outlined />
          <span>{{ activity.contestType === 'individual' ? '个人参与' : '团队参与' }}</span>
        </div>
        <div class="meta-row" v-if="activity.registerStartTime">
          <clock-circle-outlined />
          <span>报名：{{ formatDate(activity.registerStartTime) }} - {{ formatDate(activity.registerEndTime) }}</span>
        </div>
        <div class="meta-row" v-if="activity.ageMin || activity.ageMax">
          <team-outlined />
          <span>年龄要求：{{ activity.ageMin || 0 }} - {{ activity.ageMax || '不限' }} 岁</span>
        </div>
        <div class="meta-row" v-if="activity.targetCities?.length">
          <environment-outlined />
          <span>面向城市：{{ (activity.targetCities as string[]).join('、') }}</span>
        </div>
      </div>

      <!-- 操作按钮（根据阶段动态展示） -->
      <div class="action-area">
        <!-- 报名阶段 -->
        <template v-if="currentStage === 'register'">
          <a-button v-if="!isLoggedIn" type="primary" size="large" block class="action-btn" @click="goLogin">
            登录后报名
          </a-button>
          <a-button v-else-if="!hasRegistered" type="primary" size="large" block class="action-btn" @click="showRegisterModal = true">
            立即报名
          </a-button>
          <a-button v-else size="large" block class="action-btn-done">
            <check-circle-outlined /> 已报名，等待提交阶段
          </a-button>
        </template>

        <!-- 提交阶段 -->
        <template v-else-if="currentStage === 'submit'">
          <a-button v-if="hasRegistered && !hasSubmittedWork" type="primary" size="large" block class="action-btn" @click="openSubmitWork">
            <upload-outlined /> 提交作品
          </a-button>
          <a-button v-else-if="hasSubmittedWork" size="large" block class="action-btn-done">
            <check-circle-outlined /> 作品已提交
          </a-button>
          <a-button v-else size="large" block disabled>
            需先报名才能提交作品
          </a-button>
        </template>

        <!-- 评审阶段 -->
        <template v-else-if="currentStage === 'review'">
          <a-button size="large" block class="action-btn-info">
            <hourglass-outlined /> 评审中，请耐心等待
          </a-button>
        </template>

        <!-- 已结束 -->
        <template v-else-if="currentStage === 'finished'">
          <a-button type="primary" size="large" block class="action-btn" @click="activeTab = 'results'">
            查看成果
          </a-button>
        </template>

        <!-- 未开始 -->
        <template v-else>
          <a-button size="large" block disabled>
            活动即将开始
          </a-button>
        </template>
      </div>
    </div>

    <!-- Tab 内容 -->
    <div class="detail-card">
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="info" tab="活动详情">
          <div class="rich-content" v-html="activity.description"></div>
          <!-- 附件 -->
          <div v-if="activity.attachments?.length" class="attachments">
            <h4>相关附件</h4>
            <div v-for="att in activity.attachments" :key="att.id" class="att-item">
              <a :href="att.fileUrl" target="_blank">
                <paper-clip-outlined /> {{ att.fileName }}
              </a>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="results" tab="活动成果" v-if="activity.resultState === 'published'">
          <div class="results-hint">
            <trophy-outlined class="results-icon" />
            <p>活动成果已发布，敬请查看！</p>
          </div>
        </a-tab-pane>
        <a-tab-pane key="notices" tab="活动公告">
          <div v-if="!activity.notices?.length" class="empty-tab">
            <a-empty description="暂无公告" />
          </div>
          <div v-else>
            <div v-for="notice in activity.notices" :key="notice.id" class="notice-item">
              <h4>{{ notice.title }}</h4>
              <div class="notice-content" v-html="notice.content"></div>
              <span class="notice-time">{{ formatDate(notice.createTime) }}</span>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 报名弹窗 -->
    <a-modal
      v-model:open="showRegisterModal"
      title="活动报名"
      :footer="null"
      :width="420"
    >
      <div class="register-modal">
        <p class="modal-desc">请选择参与者：</p>
        <a-radio-group v-model:value="participantForm.participantType" class="participant-options">
          <div class="participant-option">
            <a-radio value="self">我自己</a-radio>
          </div>
          <template v-if="children.length">
            <div v-for="child in children" :key="child.id" class="participant-option">
              <a-radio :value="'child_' + child.id">
                子女：{{ child.name }}
                <span class="child-detail" v-if="child.grade">（{{ child.grade }}）</span>
              </a-radio>
            </div>
          </template>
        </a-radio-group>
        <a-button type="link" @click="$router.push('/p/mine/children')" class="add-child-link">
          + 添加新的子女
        </a-button>
        <a-button
          type="primary"
          block
          size="large"
          :loading="registering"
          @click="handleRegister"
          class="confirm-btn"
        >
          确认报名
        </a-button>
      </div>
    </a-modal>

    <!-- 作品提交弹窗 -->
    <a-modal
      v-model:open="showSubmitModal"
      title="提交作品"
      :footer="null"
      :width="520"
    >
      <a-form :model="workForm" layout="vertical" @finish="handleSubmitWork" class="work-form">
        <a-form-item label="作品名称" name="title" :rules="[{ required: true, message: '请输入作品名称' }]">
          <a-input v-model:value="workForm.title" placeholder="给你的作品取个名字吧" :maxlength="200" />
        </a-form-item>
        <a-form-item label="作品描述" name="description">
          <a-textarea v-model:value="workForm.description" placeholder="描述一下你的创作思路" :rows="3" :maxlength="2000" />
        </a-form-item>
        <a-form-item label="上传作品文件" name="files">
          <a-upload
            :before-upload="handleFileUpload"
            :file-list="workFileList"
            :max-count="5"
            @remove="handleFileRemove"
          >
            <a-button><upload-outlined /> 选择文件</a-button>
          </a-upload>
          <div class="upload-hint">支持图片（JPG/PNG）和 PDF，最多 5 个文件</div>
        </a-form-item>
        <a-button type="primary" html-type="submit" block size="large" :loading="submittingWork" class="confirm-btn">
          确认提交
        </a-button>
      </a-form>
    </a-modal>
  </div>

  <div v-else class="loading-page">
    <a-spin size="large" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  ArrowLeftOutlined, CalendarOutlined, TagOutlined,
  ClockCircleOutlined, PaperClipOutlined, CheckCircleOutlined,
  UploadOutlined, HourglassOutlined, TrophyOutlined,
  TeamOutlined, EnvironmentOutlined,
} from '@ant-design/icons-vue'
import { publicActivitiesApi, publicChildrenApi } from '@/api/public'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()
const activity = ref<any>(null)
const activeTab = ref('info')
const children = ref<any[]>([])
const showRegisterModal = ref(false)
const registering = ref(false)
const hasRegistered = ref(false)
const myRegistration = ref<any>(null)
const hasSubmittedWork = ref(false)

// 作品提交
const showSubmitModal = ref(false)
const submittingWork = ref(false)
const workFileList = ref<any[]>([])
const workForm = ref({ title: '', description: '' })

const participantForm = ref({
  participantType: 'self',
})

const formatDate = (d: string) => dayjs(d).format('YYYY-MM-DD')

const isLoggedIn = computed(() => !!localStorage.getItem('public_token'))

// 活动当前阶段
const currentStage = computed(() => {
  if (!activity.value) return 'pending'
  const now = dayjs()
  const a = activity.value
  if (now.isBefore(a.registerStartTime)) return 'pending'
  if (now.isBefore(a.registerEndTime)) return 'register'
  if (a.submitStartTime && now.isBefore(a.submitEndTime)) return 'submit'
  if (a.reviewStartTime && now.isBefore(a.reviewEndTime)) return 'review'
  if (a.status === 'finished' || a.resultState === 'published') return 'finished'
  return 'review'
})

const stageLabel = computed(() => {
  const map: Record<string, string> = {
    pending: '即将开始', register: '报名中', submit: '提交中',
    review: '评审中', finished: '已结束',
  }
  return map[currentStage.value] || '进行中'
})

const goLogin = () => router.push({ path: '/p/login', query: { redirect: route.fullPath } })

const fetchDetail = async () => {
  const id = Number(route.params.id)
  try {
    activity.value = await publicActivitiesApi.detail(id)
  } catch {
    message.error('活动不存在')
    router.push('/p/activities')
  }
}

const fetchChildren = async () => {
  if (!isLoggedIn.value) return
  try {
    children.value = await publicChildrenApi.list()
  } catch { /* ignore */ }
}

// 检查报名状态和作品提交状态
const checkRegistrationStatus = async () => {
  if (!isLoggedIn.value || !activity.value) return
  try {
    const reg = await publicActivitiesApi.getMyRegistration(activity.value.id)
    if (reg) {
      hasRegistered.value = true
      myRegistration.value = reg
      // 检查是否已提交作品
      const worksRes = await import('@/api/public').then(m => m.publicMineApi.works({ page: 1, pageSize: 100 }))
      if (worksRes?.list) {
        hasSubmittedWork.value = worksRes.list.some((w: any) => w.contest?.id === activity.value.id)
      }
    }
  } catch { /* not registered */ }
}

// 打开作品提交
const openSubmitWork = () => {
  if (!isLoggedIn.value) { goLogin(); return }
  workForm.value = { title: '', description: '' }
  workFileList.value = []
  showSubmitModal.value = true
}

// 文件上传（暂时存到 fileList，提交时一起处理）
const handleFileUpload = (file: any) => {
  workFileList.value = [...workFileList.value, file]
  return false // 阻止自动上传
}

const handleFileRemove = (file: any) => {
  workFileList.value = workFileList.value.filter((f: any) => f.uid !== file.uid)
}

// 提交作品
const handleSubmitWork = async () => {
  if (!myRegistration.value) {
    message.error('请先报名活动')
    return
  }
  submittingWork.value = true
  try {
    await publicActivitiesApi.submitWork(activity.value.id, {
      registrationId: myRegistration.value.id,
      title: workForm.value.title,
      description: workForm.value.description || undefined,
      // 文件上传需要先上传到 COS，此处简化为记录文件名
      files: workFileList.value.map((f: any) => f.name),
    })
    message.success('作品提交成功！')
    showSubmitModal.value = false
    hasSubmittedWork.value = true
  } catch (err: any) {
    message.error(err?.response?.data?.message || '提交失败')
  } finally {
    submittingWork.value = false
  }
}

const handleRegister = async () => {
  if (!isLoggedIn.value) {
    router.push({ path: '/p/login', query: { redirect: route.fullPath } })
    return
  }

  registering.value = true
  try {
    const val = participantForm.value.participantType
    const isChild = val.startsWith('child_')
    await publicActivitiesApi.register(activity.value.id, {
      participantType: isChild ? 'child' : 'self',
      childId: isChild ? parseInt(val.replace('child_', '')) : undefined,
    })
    message.success('报名成功！')
    showRegisterModal.value = false
    hasRegistered.value = true
  } catch (err: any) {
    message.error(err?.response?.data?.message || '报名失败')
  } finally {
    registering.value = false
  }
}

onMounted(async () => {
  await fetchDetail()
  fetchChildren()
  checkRegistrationStatus()
})
</script>

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

.loading-page {
  display: flex;
  justify-content: center;
  padding: 100px 0;
}

.detail-hero {
  position: relative;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 16px;

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

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

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

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.3) 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
  }

  .back-btn {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
  }

  .hero-badge {
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, $primary, #ec4899);
  }
}

.detail-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid rgba($primary, 0.06);
}

.detail-title {
  font-size: 22px;
  font-weight: 800;
  color: #1e1b4b;
  margin: 0 0 16px;
  line-height: 1.4;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;

  .meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
  }
}

.action-area {
  .action-btn {
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, $primary, #ec4899) !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba($primary, 0.3);
  }

  .action-btn-done {
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
  }

  .action-btn-info {
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: #eef2ff !important;
    color: $primary !important;
    border: 1px solid #c7d2fe !important;
  }
}

.results-hint {
  text-align: center;
  padding: 40px 0;

  .results-icon {
    font-size: 48px;
    color: #f59e0b;
    margin-bottom: 12px;
    display: block;
  }

  p {
    font-size: 15px;
    color: #6b7280;
  }
}

.work-form {
  .upload-hint {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
  }
}

.rich-content {
  font-size: 14px;
  line-height: 1.8;
  color: #374151;

  :deep(img) {
    max-width: 100%;
    border-radius: 8px;
  }
}

.attachments {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f0ecf9;

  h4 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 10px;
  }

  .att-item a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: $primary;
    padding: 6px 0;
  }
}

.notice-item {
  padding: 16px;
  background: #faf9fe;
  border-radius: 12px;
  margin-bottom: 12px;

  h4 {
    font-size: 15px;
    font-weight: 600;
    color: #1e1b4b;
    margin: 0 0 8px;
  }

  .notice-content {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
  }

  .notice-time {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 8px;
    display: block;
  }
}

.empty-tab {
  padding: 40px 0;
}

// 报名弹窗
.register-modal {
  .modal-desc {
    font-size: 14px;
    color: #374151;
    margin: 0 0 16px;
    font-weight: 500;
  }

  .participant-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .participant-option {
    padding: 12px 16px;
    background: #faf9fe;
    border-radius: 12px;
    transition: background 0.2s;

    &:hover {
      background: #eef2ff;
    }

    .child-detail {
      color: #9ca3af;
      font-size: 12px;
    }
  }

  .add-child-link {
    margin: 12px 0;
    padding: 0;
    font-size: 13px;
  }

  .confirm-btn {
    margin-top: 8px;
    height: 44px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 640px) {
  .detail-hero {
    height: 180px;
    border-radius: 16px;
  }

  .detail-card {
    padding: 18px;
    border-radius: 14px;
  }

  .detail-title {
    font-size: 18px;
  }
}
</style>
