---
import Layout from '@layouts/Layout.astro';
import PageHeading from '@components/base/PageHeading.astro';
import PostsLoop from '@components/blog/PostsLoop.astro';
import { pb } from '@lib/pocketbase';
import type { Post } from '@globalInterfaces';

// Страницы тегов генерируются при запросе (не при сборке)
export const prerender = false;

const { tag } = Astro.params;

// Получаем посты для этого тега при запросе страницы
let posts: Post[] = [];
let displayTag = tag ?? '';

try {
  const allPosts: Post[] = await pb.collection('posts').getFullList({
    filter: 'isActive = true',
    sort: '-publishDate',
  });

  const tagToPostsMap = new Map<string, { displayTag: string; posts: Post[] }>();

  for (const post of allPosts) {
    if (!post.tags || post.tags.length === 0) continue;

    for (const originalTag of post.tags) {
      const lowerCaseTag = originalTag.toLowerCase();

      if (!tagToPostsMap.has(lowerCaseTag)) {
        tagToPostsMap.set(lowerCaseTag, {
          displayTag: originalTag,
          posts: []
        });
      }

      tagToPostsMap.get(lowerCaseTag)!.posts.push(post);
    }
  }

  const tagData = tagToPostsMap.get(tag ?? '');
  if (tagData) {
    posts = tagData.posts;
    displayTag = tagData.displayTag;
  }
} catch (error) {
  console.error('Ошибка при получении постов для тега:', error);
}

const title = `Статьи по тегу: ${displayTag} | Блог Redi`;
const description = `Все статьи и материалы по тегу '${displayTag}' в блоге Redi.`;
---

<Layout title={title} description={description} canonicalLink={`/blog/tags/${tag}`}>
  <section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
    <PageHeading
      title={`Тег: #${displayTag}`}
      description={`Найдено ${posts.length} статей по теме "${displayTag}".`}
    />

    <div class="z-50 flex flex-col items-stretch w-full gap-5 my-8">
      <PostsLoop posts={posts} />
    </div>

    <div class="flex justify-center mt-8">
      <a href="/blog" class="text-sm font-medium text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100 underline underline-offset-4 decoration-neutral-300 transition-colors">
        ← Вернуться ко всем статьям
      </a>
    </div>
  </section>
</Layout>