<script setup lang="ts">
import type { ActivityNode } from '../types'

defineProps<{
  title: string
  nodes: ActivityNode[]
}>()

defineEmits(['start'])
</script>

<template>
  <div class="h-full w-full flex flex-col items-center pt-24">
    <!-- 标题卷轴 -->
    <div class="relative mb-20">
      <!-- 卷轴主体 -->
      <div class="relative z-10 h-24 min-w-[400px] flex items-center justify-center border-2 border-orange-200 rounded-lg from-orange-100 to-orange-50 bg-gradient-to-b px-12 shadow-lg">
        <div class="absolute top-1/2 h-28 w-8 border-r-4 border-yellow-600 rounded-l-md bg-teal-700 shadow-md -left-4 -translate-y-1/2">
          <!-- 卷轴轴头 -->
          <div class="absolute left-1 top-2 h-2 w-full rounded-full bg-teal-600/50" />
          <div class="absolute bottom-2 left-1 h-2 w-full rounded-full bg-teal-600/50" />
        </div>
        <div class="absolute top-1/2 h-28 w-8 border-l-4 border-yellow-600 rounded-r-md bg-teal-700 shadow-md -right-4 -translate-y-1/2">
          <!-- 卷轴轴头 -->
          <div class="absolute right-1 top-2 h-2 w-full rounded-full bg-teal-600/50" />
          <div class="absolute bottom-2 right-1 h-2 w-full rounded-full bg-teal-600/50" />
        </div>

        <!-- 飘带装饰 -->
        <div class="absolute h-12 w-24 rotate-12 transform rounded-full bg-green-200/50 blur-xl -right-12 -top-6 -z-10" />
        <div class="absolute h-12 w-24 transform rounded-full bg-green-200/50 blur-xl -bottom-6 -left-12 -z-10 -rotate-12" />

        <h1 class="text-4xl text-gray-800 font-bold tracking-widest font-serif">
          {{ title }}
        </h1>
      </div>
    </div>

    <!-- 卡片列表 -->
    <div class="grid grid-cols-4 max-w-7xl w-full gap-8 px-12">
      <div
        v-for="(node) in nodes.slice(0, 4)"
        :key="node.nodeId"
        class="group relative cursor-default"
      >
        <!-- 卡片背景 (仿古风) -->
        <div class="relative aspect-[3/4] w-full flex flex-col items-center justify-center overflow-hidden border-4 border-orange-200 rounded-2xl bg-orange-50/80 shadow-lg transition-transform hover:-translate-y-2">
          <!-- 内部装饰圈 -->
          <div class="absolute inset-4 flex items-center justify-center border-2 border-orange-300/50 rounded-xl border-dashed">
            <!-- 云纹装饰 (CSS模拟) -->
            <div class="absolute h-12 w-12 rounded-full bg-teal-100/30 blur-md -left-4 -top-4" />
            <div class="absolute h-12 w-12 rounded-full bg-teal-100/30 blur-md -bottom-4 -right-4" />
          </div>

          <!-- 文字内容 -->
          <div class="relative z-10 transform text-center -rotate-2">
            <div class="text-3xl text-gray-800 font-bold leading-tight font-serif drop-shadow-sm">
              <!-- 强制换行处理，每两个字换行或根据长度 -->
              <span class="block">{{ node.moduleName.slice(0, 2) }}</span>
              <span class="block">{{ node.moduleName.slice(2) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 准备开始按钮 -->
    <div class="fixed bottom-12 right-12">
      <button
        class="border-2 border-red-200 rounded-full from-red-400 to-red-500 bg-gradient-to-r px-10 py-3 text-xl text-white font-bold shadow-lg transition active:scale-95 hover:from-red-500 hover:to-red-600"
        @click="$emit('start')"
      >
        准备开始
      </button>
    </div>
  </div>
</template>

<style scoped>
/* 可以添加一些古风字体或特定样式 */
</style>
