<template>
  <div class="activity-detail-page">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <div class="container">
        <nav class="breadcrumb">
          <router-link to="/" class="breadcrumb-item">首页</router-link>
          <span class="breadcrumb-separator">></span>
          <router-link to="/activities" class="breadcrumb-item">活动</router-link>
          <span class="breadcrumb-separator">></span>
          <span class="breadcrumb-current">全国青少年人工智能创新实践活动</span>
        </nav>
      </div>
    </div>

    <!-- 活动横幅区域 -->
    <div class="hero-banner">
      <div class="banner-container">
        <div class="banner-content">
          <div class="banner-text">
            <h1 class="main-title">{{ activity?.title || '"与AI共创未来"' }}</h1>
            <h2 class="sub-title">{{ activity?.subtitle || '2025年全国青少年人工智能创新实践活动' }}</h2>
            <div class="activity-description">
              <p>【活动简介】中国科协青少年科技中心、中国青少年科技辅导员协会主办，上海人工智能实验室协办，上海科技馆</p>
              <p>【支持单位】中国科协青少年科技中心承办的活动</p>
              <p>【协办单位】全国青少年科技创新大赛组委会办公室，上海科技馆青少年科学创新中心</p>
            </div>
          </div>
          <div class="banner-illustration">
            <div class="illustration-placeholder">
              <!-- 3D插画占位 -->
              <div class="ai-characters">
                <div class="character-1"></div>
                <div class="character-2"></div>
                <div class="tech-elements"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="container">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>

        <!-- 错误状态 -->
        <div v-else-if="error" class="error-container">
          <p class="error-message">{{ error }}</p>
          <button @click="loadActivityDetail" class="retry-btn">重试</button>
        </div>

        <!-- 活动内容 -->
        <template v-else-if="activity">
          <!-- 活动介绍 -->
          <section class="activity-intro">
            <h3 class="section-title">活动介绍</h3>
            <div class="intro-content">
              <p>本活动是由中国科协青少年科技中心主办的全国性青少年人工智能创新实践活动，旨在通过AI技术学习和实践，培养青少年的创新思维和实践能力。活动将围绕人工智能技术的应用和创新，为青少年提供一个展示才华、交流学习的平台。通过本次活动，参与者将深入了解AI技术的发展趋势，掌握相关技能，为未来的科技创新奠定基础。</p>
            </div>

            <!-- 活动图片展示 - 三张图片横向排列 -->
            <div class="activity-images">
              <div class="image-item">
                <img src="/images/activity/活动图1.png" alt="活动场景1" class="activity-image" />
              </div>
              <div class="image-item">
                <img src="/images/activity/活动图1.png" alt="活动场景2" class="activity-image" />
              </div>
              <div class="image-item">
                <img src="/images/activity/活动图1.png" alt="活动场景3" class="activity-image" />
              </div>
            </div>
          </section>

          <!-- 活动信息卡片 -->
          <section class="activity-info">
            <div class="info-card">
              <div class="info-left">
                <div class="status-info">
                  <span class="status-icon">📅</span>
                  <span class="status-text">活动时间</span>
                  <span class="status-badge">{{ getStatusText(activity.status) }}</span>
                </div>
                <div class="time-info">{{ activity.startDate }}-{{ activity.endDate }}</div>
              </div>
              <div class="info-right">
                <div class="stat-item">
                  <span class="stat-icon">👥</span>
                  <span class="stat-number">{{ activity.registrationCount }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-icon">👍</span>
                  <span class="stat-number">{{ activity.likeCount }}</span>
                </div>
              </div>
            </div>
          </section>

        <!-- 活动分组 -->
        <section class="activity-groups">
          <h3 class="section-title">活动分组</h3>
          <div class="groups-container">
            <button
              class="group-item"
              :class="{ active: selectedGroup === 0 }"
              @click="selectedGroup = 0"
            >
              AI艺术创作营
            </button>
            <button
              class="group-item"
              :class="{ active: selectedGroup === 1 }"
              @click="selectedGroup = 1"
            >
              AI交互设计营
            </button>
            <button
              class="group-item"
              :class="{ active: selectedGroup === 2 }"
              @click="selectedGroup = 2"
            >
              人工智能实践营
            </button>
            <button
              class="group-item"
              :class="{ active: selectedGroup === 3 }"
              @click="selectedGroup = 3"
            >
              AI算法挑战营
            </button>
            <button
              class="group-item"
              :class="{ active: selectedGroup === 4 }"
              @click="selectedGroup = 4"
            >
              AI创新数字素养证书
            </button>
          </div>
        </section>

        <!-- 活动流程 -->
        <section class="activity-timeline">
          <h3 class="section-title">活动流程</h3>
          <div class="timeline-container">
            <div class="timeline-item">
              <div class="timeline-marker">
                <div class="marker-circle active"></div>
                <div class="marker-line"></div>
              </div>
              <div class="timeline-content">
                <div class="timeline-date">7月1日-7月24日</div>
                <div class="timeline-title">青少年机器人在线学习</div>
                <div class="timeline-description">指导课程</div>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-marker">
                <div class="marker-circle active"></div>
                <div class="marker-line"></div>
              </div>
              <div class="timeline-content">
                <div class="timeline-date">7月25日-8月1日</div>
                <div class="timeline-title">青少年机器人竞赛参与</div>
                <div class="timeline-description">活动，开展文件选</div>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-marker">
                <div class="marker-circle active"></div>
                <div class="marker-line"></div>
              </div>
              <div class="timeline-content">
                <div class="timeline-date">8月1日-8月20日</div>
                <div class="timeline-title">专家评审组织优秀作品选</div>
                <div class="timeline-description">拔行清选</div>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-marker">
                <div class="marker-circle active"></div>
                <div class="marker-line"></div>
              </div>
              <div class="timeline-content">
                <div class="timeline-date">8月20日-9月20日</div>
                <div class="timeline-title">优秀作品公示</div>
                <div class="timeline-description"></div>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-marker">
                <div class="marker-circle active"></div>
              </div>
              <div class="timeline-content">
                <div class="timeline-date">9月21日-9月22日</div>
                <div class="timeline-title">人工智能文艺展示会</div>
                <div class="timeline-description">智能颁奖典礼</div>
              </div>
            </div>
          </div>
        </section>

        <!-- 活动附件 -->
        <section class="activity-attachments">
          <h3 class="section-title">活动附件</h3>
          <div class="attachments-list">
            <div class="attachment-item">
              <div class="attachment-icon">📄</div>
              <div class="attachment-text">2023年全国青少年人工智能创新挑战赛活动通知.docx</div>
              <div class="attachment-action">
                <a href="#" class="download-link">下载</a>
              </div>
            </div>
            <div class="attachment-item">
              <div class="attachment-icon">📄</div>
              <div class="attachment-text">作品提交指导意见.docx</div>
              <div class="attachment-action">
                <a href="#" class="download-link">下载</a>
              </div>
            </div>
            <div class="attachment-item">
              <div class="attachment-icon">📄</div>
              <div class="attachment-text">第十届青少年人工智能创新挑战赛学习资料汇总.pdf</div>
              <div class="attachment-action">
                <a href="#" class="download-link">下载</a>
              </div>
            </div>
            <div class="attachment-item">
              <div class="attachment-icon">📄</div>
              <div class="attachment-text">作品提交-模板.pptx</div>
              <div class="attachment-action">
                <a href="#" class="download-link">下载</a>
              </div>
            </div>
          </div>
        </section>

          <!-- 操作按钮 -->
          <section class="action-buttons">
            <button class="btn btn-primary register-btn" @click="handleRegister">前往报名 >></button>
            <button class="btn btn-secondary submit-btn" @click="handleSubmit">提交作品</button>
          </section>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ActivityApi, type Activity } from '@/api/modules/activity'

const route = useRoute()
const router = useRouter()

// 活动ID
const activityId = ref(Number(route.params.id))

// 活动数据
const activity = ref<Activity | null>(null)
const loading = ref(true)
const error = ref('')

// 当前选中的分类
// const activeCategory = ref(1)

// 当前选中的分组
const selectedGroup = ref(0)

// 计算属性 - 从活动数据中获取信息
// const categories = computed(() => {
//   if (!activity.value) return []
//   return activity.value.categories.map((name, index) => ({
//     id: index + 1,
//     name
//   }))
// })

// const timeline = computed(() => activity.value?.timeline || [])
// const activityContent = computed(() => activity.value?.content || [])

// 设置活动分类
// const setActiveCategory = (categoryId: number) => {
//   activeCategory.value = categoryId
// }

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap = {
    'upcoming': '即将开始',
    'ongoing': '报名中',
    'ended': '已结束'
  }
  return statusMap[status as keyof typeof statusMap] || '未知状态'
}

// 加载活动详情
const loadActivityDetail = async () => {
  if (!activityId.value || isNaN(activityId.value)) {
    error.value = '活动ID无效'
    return
  }

  try {
    loading.value = true
    error.value = ''

    const response = await ActivityApi.getActivityById(activityId.value)

    if (response.code === 0) {
      activity.value = response.data
    } else {
      error.value = response.message || '获取活动详情失败'
    }
  } catch (err) {
    console.error('加载活动详情失败:', err)
    error.value = '网络错误，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 处理报名 - 跳转到报名页面
const handleRegister = () => {
  if (!activityId.value) return

  // 跳转到活动报名页面
  router.push(`/activity/${activityId.value}/register`)
}

// 处理作品提交
const handleSubmit = async () => {
  if (!activityId.value) return

  try {
    const response = await ActivityApi.submitWork(activityId.value, {})
    if (response.code === 0) {
      alert('作品提交成功！')
    } else {
      alert(response.message || '作品提交失败')
    }
  } catch (error) {
    console.error('作品提交失败:', error)
    alert('作品提交失败，请稍后重试')
  }
}

onMounted(() => {
  console.log('活动详情页加载，活动ID:', activityId.value)
  loadActivityDetail()
})
</script>

<style scoped>
.activity-detail-page {
  min-height: 100vh;
  background: #f8f9fa;
}



/* 面包屑导航 */
.breadcrumb-container {
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  padding: 12px 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #6c757d;
}

.breadcrumb-item {
  color: #007bff;
  text-decoration: none;
}

.breadcrumb-item:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #6c757d;
}

.breadcrumb-current {
  color: #495057;
  font-weight: 500;
}

/* 活动横幅 */
.hero-banner {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: white;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.banner-text {
  flex: 1;
  max-width: 600px;
}

.main-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 16px;
  line-height: 1.2;
}

.sub-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 24px;
  opacity: 0.95;
}

.activity-description {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.9;
}

.activity-description p {
  margin-bottom: 8px;
}

.banner-illustration {
  flex: 1;
  max-width: 500px;
  height: 400px;
  position: relative;
}

.illustration-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ai-characters {
  position: relative;
  width: 80%;
  height: 80%;
}

.character-1,
.character-2 {
  position: absolute;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.character-1 {
  top: 20%;
  left: 20%;
  animation: float 3s ease-in-out infinite;
}

.character-2 {
  bottom: 20%;
  right: 20%;
  animation: float 3s ease-in-out infinite 1.5s;
}

.tech-elements {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

/* 主要内容 */
.main-content {
  padding: 40px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 主内容区域的容器 - 居中显示，左右边距相等 */
.main-content .container {
  max-width: calc(100vw - 680px); /* 总宽度减去左右各340px */
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 40px;
}

/* 活动介绍 */
.activity-intro {
  margin-bottom: 60px;
}

.intro-content {
  max-width: 800px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  text-align: justify;
}

.activity-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.image-item {
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

/* 活动信息卡片 */
.activity-info {
  margin-bottom: 60px;
}

.info-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-icon {
  font-size: 16px;
}

.status-text {
  font-size: 14px;
  color: #666;
}

.status-badge {
  background: #ff4d4f;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.time-info {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-left: 24px;
}

.info-right {
  display: flex;
  gap: 24px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #666;
}

.stat-icon {
  font-size: 18px;
}

.stat-number {
  font-weight: 600;
  color: #333;
}

/* 活动分组 */
.activity-groups {
  margin-bottom: 60px;
}

.groups-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
}

.group-item {
  padding: 12px 24px;
  border: 2px solid #e9ecef;
  border-radius: 25px;
  background: white;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.group-item:hover {
  border-color: #4A90E2;
  color: #4A90E2;
}

.group-item.active {
  background: #4A90E2;
  border-color: #4A90E2;
  color: white;
}

/* 活动时间线 */
.activity-timeline {
  margin-bottom: 60px;
}

.timeline-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0;
}

.timeline-container::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #4A90E2;
  z-index: 1;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  max-width: 180px;
}

.timeline-marker {
  position: relative;
  z-index: 2;
  margin-bottom: 16px;
}

.marker-circle {
  width: 16px;
  height: 16px;
  background: #4A90E2;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #4A90E2;
}

.marker-circle.active {
  background: #4A90E2;
}

.marker-line {
  display: none;
}

.timeline-content {
  text-align: center;
}

.timeline-date {
  color: #4A90E2;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.timeline-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.timeline-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 活动附件 */
.activity-attachments {
  margin-bottom: 60px;
}

.attachments-list {
  max-width: 800px;
  margin: 0 auto;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.attachment-item:last-child {
  border-bottom: none;
}

.attachment-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.attachment-text {
  flex: 1;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}

.attachment-action {
  flex-shrink: 0;
}

.download-link {
  color: #4A90E2;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid #4A90E2;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.download-link:hover {
  background: #4A90E2;
  color: white;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.register-btn {
  background: #1890ff !important;
  border-radius: 6px !important;
  padding: 12px 40px !important;
  font-size: 16px !important;
}

.submit-btn {
  background: #1890ff !important;
  border-radius: 6px !important;
  padding: 12px 40px !important;
  font-size: 16px !important;
}

.btn {
  padding: 16px 40px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: #4A90E2;
  color: white;
}

.btn-primary:hover {
  background: #357ABD;
  transform: translateY(-2px);
}

.btn-secondary {
  background: #4A90E2;
  color: white;
}

.btn-secondary:hover {
  background: #357ABD;
  transform: translateY(-2px);
}

/* 加载和错误状态 */
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4A90E2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  color: #dc3545;
  font-size: 16px;
  margin-bottom: 16px;
}

.retry-btn {
  padding: 8px 16px;
  background: #4A90E2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.retry-btn:hover {
  background: #357ABD;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  /* 在较小屏幕上减少边距，保持居中 */
  .main-content .container {
    max-width: calc(100vw - 400px); /* 总宽度减去左右各200px */
    margin: 0 auto;
  }
}

@media (max-width: 1200px) {
  /* 在中等屏幕上进一步减少边距，保持居中 */
  .main-content .container {
    max-width: calc(100vw - 200px); /* 总宽度减去左右各100px */
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  /* 在移动端恢复正常边距 */
  .main-content .container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 20px;
  }

  .banner-content {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .main-title {
    font-size: 36px;
  }

  .sub-title {
    font-size: 20px;
  }

  .activity-images {
    grid-template-columns: 1fr;
  }

  .info-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .category-tabs {
    justify-content: flex-start;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 300px;
  }
}


</style>
