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

const route = useRoute()
const rawName = Array.isArray(route.params.name) ? route.params.name[0] : route.params.name
const seriesName = decodeRouteParam(String(rawName || ''))

const { data: posts } = await useAsyncData(`series-${seriesName}`, () =>
  queryCollection('posts')
    .order('published', 'ASC')
    .all()
)

const seriesPosts = computed(() =>
  sortPostsForSeries(
    (posts.value || [])
      .filter(isVisiblePost)
      .filter(post => normalizeSeriesName(post.series) === seriesName)
  )
)

if (!seriesPosts.value.length) {
  throw createError({ statusCode: 404, message: '系列不存在' })
}

useSeoMeta({
  title: `${seriesName} - ${siteConfig.siteName}`,
  description: `${siteConfig.siteName} 的「${seriesName}」系列文章`,
})
</script>

<template>
  <div class="container mx-auto max-w-4xl px-4 py-12">
    <header class="mb-12 anim-fade-in-up">
      <NuxtLink to="/series" class="mb-5 inline-flex items-center gap-1 text-sm hover:underline" style="color: var(--color-primary)">
        <Icon icon="mdi:arrow-left" class="h-4 w-4" />
        返回系列
      </NuxtLink>

      <h1 class="mb-4 text-4xl font-bold">{{ seriesName }}</h1>
      <p class="text-muted-foreground">
        共 {{ seriesPosts.length }} 篇文章，按阅读顺序排列。
      </p>
    </header>

    <div class="space-y-4 anim-fade-in-up anim-delay-1">
      <NuxtLink
        v-for="(post, index) in seriesPosts"
        :key="post.path || post.id"
        :to="post.path || '/posts'"
        class="group grid gap-4 rounded-xl border p-5 transition-all hover:-translate-y-0.5 hover:shadow-lg md:grid-cols-[3.5rem_1fr]"
        style="border-color: var(--color-border); background-color: var(--color-bg-card);"
      >
        <div class="flex h-12 w-12 items-center justify-center rounded-full text-lg font-bold" style="background-color: var(--color-bg-hover); color: var(--color-primary);">
          {{ post.seriesOrder || index + 1 }}
        </div>

        <div class="min-w-0">
          <div class="mb-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
            <time v-if="post.published">{{ formatPostDate(post.published) }}</time>
            <span>· 约 {{ getReadTime(post) }} 分钟</span>
            <span v-if="post.difficulty">· {{ post.difficulty }}</span>
          </div>

          <h2 class="text-xl font-semibold transition-opacity group-hover:opacity-70">
            {{ post.title }}
          </h2>
          <p v-if="post.description" class="mt-2 text-sm text-muted-foreground">
            {{ post.description }}
          </p>

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