<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { siteConfig } from '~/config/site'
import { formatPostDate, getSeriesSummaries, isVisiblePost } from '~/utils/posts'

useSeoMeta({
  title: `文章系列 - ${siteConfig.siteName}`,
  description: `${siteConfig.siteName} 的系列文章合集`,
})

const { data: posts } = await useAsyncData('series-list-posts', () =>
  queryCollection('posts')
    .order('published', 'DESC')
    .all()
)

const seriesList = computed(() => getSeriesSummaries((posts.value || []).filter(isVisiblePost)))
</script>

<template>
  <div class="container mx-auto max-w-5xl px-4 py-12">
    <header class="mb-12 text-center anim-fade-in-up">
      <h1 class="mb-4 text-4xl font-bold">文章系列</h1>
      <p class="text-muted-foreground">把同一个主题的文章串起来，读起来更连贯</p>
      <p class="mt-2 text-sm text-muted-foreground">共 {{ seriesList.length }} 个系列</p>
    </header>

    <div v-if="seriesList.length" class="grid gap-5 md:grid-cols-2 anim-fade-in-up anim-delay-1">
      <NuxtLink
        v-for="series in seriesList"
        :key="series.name"
        :to="series.path"
        class="group rounded-xl border p-5 transition-all hover:-translate-y-0.5 hover:shadow-lg"
        style="border-color: var(--color-border); background-color: var(--color-bg-card);"
      >
        <div class="mb-4 flex items-start justify-between gap-4">
          <div class="min-w-0">
            <h2 class="truncate text-xl font-semibold transition-opacity group-hover:opacity-70">
              {{ series.name }}
            </h2>
            <p class="mt-1 text-sm text-muted-foreground">
              {{ series.count }} 篇文章 · 最近更新 {{ formatPostDate(series.latestPost.updated || series.latestPost.published) }}
            </p>
          </div>
          <Icon icon="mdi:chevron-right" class="mt-1 h-5 w-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-1" />
        </div>

        <p v-if="series.latestPost.description" class="mb-4 line-clamp-2 text-sm text-muted-foreground">
          {{ series.latestPost.description }}
        </p>

        <div v-if="series.tags.length" class="flex flex-wrap gap-1.5">
          <span v-for="tag in series.tags" :key="tag" class="tag-pill">
            {{ tag }}
          </span>
        </div>
      </NuxtLink>
    </div>

    <div v-else class="rounded-xl border p-8 text-center text-muted-foreground anim-fade-in-up anim-delay-1" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
      <Icon icon="mdi:playlist-remove" class="mx-auto mb-3 h-8 w-8" />
      还没有系列。给文章 frontmatter 添加 series 字段后会自动出现。
    </div>
  </div>
</template>
