<template>
  <div class="activity-history-page w-full min-h-screen bg-[#F7F8FA] relative pb-[140px]">
    <!-- Header Banner -->
    <div class="w-full relative h-[180px] overflow-hidden">
      <img :src="historyBg" class="w-full h-full object-cover" alt="History Banner" />
      <div class="absolute inset-0 flex flex-col justify-center items-center text-center px-4">
        <h1 class="text-[#FFDD01] text-3xl font-bold mb-2 tracking-wider drop-shadow-md mt-3">2020-2025</h1>
        <h2 class="text-white text-2xl font-bold mb-4 tracking-wider drop-shadow-md">您的活动历史</h2>

        <div class="w-full max-w-md rounded-lg px-4 py-2"
          style="background: linear-gradient(96deg, rgba(82,88,254,0) 0%, #5258FE 47%, rgba(92,106,241,0) 100%);">
          <p class="text-white text-xs leading-tight opacity-90">
            查看并确认您参与的星球活动记录，<br>
            如果有缺失，点击没找到我的星球活动，进行补充
          </p>
        </div>
      </div>
    </div>

    <!-- Filter Bar -->
    <div class="bg-white px-4 py-3 flex justify-between items-center sticky top-0 z-20 shadow-sm">
      <span class="text-[#333] font-medium text-sm">活动记录</span>
      <div class="flex items-center text-[#666] text-sm">
        <span>{{ activities.length }}条</span>
      </div>
    </div>

    <!-- List -->
    <div class="px-4 py-4 space-y-4">
      <div v-for="item in activities" :key="item.id" class="bg-white rounded-xl py-4 pr-4 pl-0 shadow-sm relative overflow-hidden flex">

        <!-- Blue Marker (Absolute or Flex) -->
        <!-- Based on image, it is sticking to the left edge but inside the card padding area potentially, or flush left -->
        <!-- Looking at image, it is flush left to the card container -->
        <div class="w-1 h-4 bg-[#0052D9] rounded-r-sm mt-1 shrink-0 self-start"></div>

        <div class="pl-3 flex-1">
          <h3 class="text-[#333] font-bold text-base leading-snug">
            {{ item.title }}
          </h3>

          <div class="border-t border-dashed border-gray-200 my-3"></div>

          <div class="flex justify-between items-center text-xs text-[#666] mb-2">
            <span>单价: ¥{{ item.price.toFixed(2) }}/人</span>
            <span>人数: {{ item.count }}</span>
          </div>

          <div class="flex justify-between items-center text-xs text-[#666] mb-4">
            <span>下单时间: {{ item.date }}</span>
            <span class="text-[#FF3B30] font-bold">实付金额: ¥{{ item.total.toFixed(0) }}</span>
          </div>

          <div class="flex justify-end">
            <van-button size="small" plain color="#0052D9" class="!rounded-full !px-4 !h-[28px] !text-xs"
              @click="handleGeneratePoster(item)">
              生成活动海报
            </van-button>
          </div>
        </div>
      </div>
    </div>

    <!-- Fixed Bottom Buttons -->
    <div
      class="fixed bottom-0 left-0 right-0 bg-white/60 backdrop-blur-md p-4 pb-8 z-30 shadow-[0_-2px_10px_rgba(0,0,0,0.05)]">
      <van-button block color="#0052D9" class="!rounded-lg !mb-3 !h-[44px] !text-base !font-bold"
        @click="handleCollectCoins">
        收集星球币
      </van-button>

      <van-button block plain color="#0052D9" class="!rounded-lg !h-[44px] !text-base !font-medium"
        @click="showMissingPopup = true">
        <template #icon>
          <van-icon name="question-o" class="mr-1" />
        </template>
        没找到我的星球活动
      </van-button>
    </div>

    <!-- Missing Activity Popup -->
    <van-popup v-model:show="showMissingPopup" round position="bottom" :style="{ height: '60%' }" class="flex flex-col">
      <div class="p-4 flex-1 flex flex-col">
        <h3 class="text-center font-bold text-lg mb-6 text-[#333]">补充活动信息</h3>

        <div class="flex-1 bg-[#F7F8FA] rounded-lg p-3 mb-6">
          <textarea v-model="missingInfo"
            class="w-full h-full bg-transparent border-none outline-none resize-none text-sm text-[#333] placeholder:text-[#999]"
            placeholder="请把缺失的星球活动，补充在这里，留下活动的名称、时间、地点、参加人数等信息"></textarea>
        </div>

        <van-button block color="#0052D9" class="!rounded-lg !h-[44px] !text-base !font-bold"
          @click="handleSubmitMissing">
          提交
        </van-button>
      </div>
    </van-popup>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { showToast } from 'vant'

// Assets
import historyBg from '@/assets/images/recall/history_bg@2x.png'

const router = useRouter()
useTitle('活动历史')

// Mock Data
const activities = ref([
  {
    id: 1,
    title: '2025.11月3日-10日江苏东台养生营，邀您一起进入童话世界！',
    price: 3200.00,
    count: 2,
    date: '2025-11-03',
    total: 6400
  },
  {
    id: 2,
    title: '【自然的恩典】青少年成长营-贵阳百花湖3(小学初中专场)',
    price: 3999.00,
    count: 2,
    date: '2025-10-03',
    total: 7998
  },
  {
    id: 3,
    title: '2024年4月22-25日浙江义乌【中华智慧商业应用论坛】',
    price: 3200.00,
    count: 1,
    date: '2024-04-03',
    total: 3200
  },
  {
    id: 4,
    title: '2023.7.6-7.11【自然的恩典】“爱我中华”优秀传统文化夏令营-天津场',
    price: 3990.00,
    count: 1,
    date: '2023-07-01',
    total: 3990
  }
])

// State
const showMissingPopup = ref(false)
const missingInfo = ref('')

// Actions
const handleGeneratePoster = (item) => {
  showToast('生成海报: ' + item.title)
}

const handleCollectCoins = () => {
  showToast('收集星球币成功')
  // Navigate to coins page or show animation
}

const handleSubmitMissing = () => {
  if (!missingInfo.value.trim()) {
    showToast('请输入活动信息')
    return
  }

  // TODO: Submit to API

  showToast({
    message: '感谢您为我们找回偏轨的星球活动',
    icon: 'success'
  })

  showMissingPopup.value = false
  missingInfo.value = ''
}

</script>

<style lang="less" scoped>
// Custom Scrollbar hide for cleaner look if needed
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
</style>