---
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';

import { SITE_INFO } from '@constants/site';
import { PAGE_META } from '@constants/meta';
import Layout from '@layouts/Layout.astro';

import PartnersSponsors from '@components/blog/PartnersSponsors.astro';
import PostCard from '@components/blog/PostCard.astro';
import SocialFollow from '@components/blog/SocialFollow.astro';
import TagsCloud from '@components/blog/TagsCloud.astro';

// 1. Получаем текущий тег из URL (параметры маршрута)
const { tag } = Astro.params;

// Если тега нет в URL, перенаправляем на 404
if (!tag) {
    return Astro.redirect('/404');
}

const decodedTag = decodeURIComponent(tag);

// 2. Получаем ВСЕ посты (для фильтрации и для сайдбара)
const allPosts: CollectionEntry<'blog'>[] = await getCollection('blog', ({ data }) => {
    return import.meta.env.PROD ? !data.isDraft : true;
});

// 3. Собираем статистику по всем тегам (для облака тегов в сайдбаре)
const allTags = allPosts.reduce((acc: Record<string, number>, post: CollectionEntry<'blog'>) => {
    post.data.tags?.forEach((tag: string) => {
        acc[tag] = (acc[tag] || 0) + 1;
    });
    return acc;
}, {} as Record<string, number>);

// 4. Проверяем, существует ли текущий тег
const tagExists = Object.prototype.hasOwnProperty.call(allTags, decodedTag);

// 5. Фильтруем посты по текущему тегу
const postsWithTag = allPosts.filter(post =>
    post.data.tags?.includes(decodedTag)
);

// Сортируем по дате (новые сверху)
const sortedPosts = postsWithTag.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());

// Топ-3 популярных постов (для сайдбара)
const popularPosts = allPosts
    .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
    .slice(0, 3);

// --- Метаданные ---
const { title: baseTitle, description: baseDescription } = PAGE_META.blog;
const pageTitle = tagExists
    ? `${baseTitle} - ${decodedTag}`
    : `Schlagwort nicht gefunden - ${baseTitle}`;
const description = tagExists
    ? `Entdecken Sie alle Artikel zum Thema ${decodedTag} auf unserer Website.`
    : baseDescription;
const canonicalLink = `${SITE_INFO.url}/blog/tags/${decodedTag}`;
---

<Layout title={pageTitle} description={description} canonicalLink={canonicalLink}>
    <div class="max-w-7xl mx-auto px-4 py-8">
        <div class="text-center my-12">
            <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
                {tagExists ? `#${decodedTag}` : `Schlagwort "${decodedTag}" nicht gefunden`}
            </h1>
            {tagExists && (
                    <p class="mt-4 text-lg leading-8 text-gray-600">
                        {sortedPosts.length} Beitrag{sortedPosts.length !== 1 ? 'e' : ''} mit diesem Schlagwort
                    </p>
            )}
        </div>

        {popularPosts.length > 0 && (
                <section class="mb-16">
                    <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-2">
                        Beliebt
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {popularPosts.map((post) => (
                                <PostCard post={post} />
                        ))}
                    </div>
                </section>
        )}

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <main class="lg:col-span-8">
                <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-2">
                    {tagExists
                        ? `${sortedPosts.length} Beitrag${sortedPosts.length !== 1 ? 'e' : ''} mit diesem Schlagwort`
                        : `Schlagwort "${decodedTag}" nicht gefunden`}
                </h2>

                {tagExists ? (
                    sortedPosts.length > 0 ? (
                            <div id="blog-content" class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                {sortedPosts.map((post) => (
                                        <PostCard post={post} />
                                ))}
                            </div>
                    ) : (
                            <p class="text-center text-gray-500 py-10">
                                Noch keine Beiträge mit diesem Schlagwort vorhanden.
                            </p>
                    )
                ) : (
                        <div class="text-center py-16">
                            <div class="mx-auto max-w-2xl">
                                <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                                    Ungültiges Schlagwort
                                </h2>
                                <p class="mt-4 text-lg leading-6 text-gray-600">
                                    Das Schlagwort "{decodedTag}" existiert nicht. Bitte überprüfen Sie die URL.
                                </p>
                                <div class="mt-10">
                                    <a
                                            href="/blog"
                                            class="inline-flex items-center justify-center rounded-md bg-primary-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-primary-700"
                                    >
                                        Zurück zum Blog
                                    </a>
                                </div>
                            </div>
                        </div>
                )}
            </main>

            <aside class="lg:col-span-4">
                <div class="sticky top-24 space-y-8">
                    <div class="bg-white rounded-xl p-6 shadow-md">
                        <h3 class="text-lg font-semibold mb-4">Schlagwörter</h3>
                        <TagsCloud tags={allTags} />
                    </div>
                    <PartnersSponsors />
                    <SocialFollow />
                </div>
            </aside>
        </div>
    </div>
</Layout>