<template>
  <section class="page-section block animate-slide-down">
    <div class="max-w-6xl mx-auto pt-32 px-6 pb-20">
      <div class="mb-16 text-center">
        <h2 class="font-serif text-5xl italic text-white mb-6">专栏</h2>
        <p class="text-art-muted max-w-lg mx-auto mb-8">系列文章集合，系统性地学习。</p>
      </div>

      <!-- Loading state -->
      <div v-if="loading" class="flex justify-center items-center h-64">
        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
      </div>

      <!-- Columns Grid -->
      <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div 
          v-for="column in columns" 
          :key="column.id"
          class="group relative overflow-hidden rounded-xl border border-white/5 bg-white/5 aspect-[16/9] cursor-pointer"
          @click="router.push(`/columns/${column.id}`)"
        >
          <!-- Cover Image -->
          <div 
            v-if="column.cover"
            class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105"
            :style="{ backgroundImage: `url(${column.cover})` }"
          >
            <div class="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-500"></div>
          </div>
          <div v-else class="absolute inset-0 bg-gradient-to-br from-white/5 to-white/10 group-hover:from-white/10 group-hover:to-white/20 transition-colors"></div>

          <!-- Content -->
          <div class="absolute inset-0 p-8 flex flex-col justify-end">
            <h3 class="text-3xl font-serif text-white mb-3 group-hover:text-art-accent transition-colors">{{ column.name }}</h3>
            <p class="text-art-muted leading-relaxed line-clamp-2">{{ column.description || '暂无描述' }}</p>
            <div class="mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-y-2 group-hover:translate-y-0">
              <span class="text-xs font-bold tracking-widest uppercase text-white border-b border-art-accent pb-1">查看详情</span>
            </div>
          </div>
        </div>
      </div>
      
      <div v-if="!loading && columns.length === 0" class="text-center py-20 text-art-muted">
        暂无专栏
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { fetchColumns, Column } from '../services/api'
import { useScrollAnimation } from '../composables/useScrollAnimation'

const router = useRouter()
const columns = ref<Column[]>([])
const loading = ref(true)
const { initObserver } = useScrollAnimation()

onMounted(async () => {
  try {
    const data = await fetchColumns()
    // Filter active columns
    columns.value = data.filter(c => c.isActive === 1)
    
    // 初始化动画观察者
    await nextTick()
    initObserver()
  } catch (error) {
    console.error('Failed to fetch columns:', error)
  } finally {
    loading.value = false
    // 确保在加载完成后也初始化动画
    await nextTick()
    initObserver()
  }
})
</script>
