---
import Layout from '@layouts/Layout.astro';
import PostCard from '@components/blog/PostCard.astro';
import Pagination from '@components/base/Pagination.astro';
import SidebarSearch from '@components/blog/SidebarSearch.astro';
import SidebarPopular from '@components/blog/SidebarPopular.astro';
import SidebarCategories from '@components/blog/SidebarCategories.astro';
import TagCloud from '@components/blog/TagCloud.astro';
import { MONTHS } from '@lib/constants';

// Конфигурация
const POCKETBASE_URL = import.meta.env.POCKETBASE_URL || "http://localhost:8090";

// Типы
interface PostRecord {
    id: string;
    title: string;
    slug: string;
    excerpt: string;
    image?: string;
    category?: string;
    created: string;
}

interface PocketBaseResponse {
    items: PostRecord[];
}

interface CategoryItem {
    name: string;
    count: number;
}

interface Post {
    id: string;
    image: string;
    category: string;
    title: string;
    excerpt: string;
    date: string;
    slug: string;
}

interface PopularPost {
    image: string;
    title: string;
    views: string;
}

// Получаем параметр из URL
const { category } = Astro.params;

// Декодируем slug в название категории
function decodeCategory(slug: string | undefined): string {
    if (!slug) return "";
    return slug
        .replace(/-/g, ' ')
        .replace(/\b\w/g, (char) => char.toUpperCase());
}

const categoryName = decodeCategory(category);

// Форматирование даты
function formatDate(dateString: string): string {
    const date = new Date(dateString);
    return `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()} года`;
}

// Получение URL изображения
function getImageUrl(post: PostRecord): string {
    if (post.image) {
        return `${POCKETBASE_URL}/api/files/posts/${post.id}/${post.image}`;
    }
    return "https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80";
}

// Получение категории поста
function getPostCategory(post: PostRecord): string {
    return post.category?.trim() || "НОВОСТИ";
}

// Загрузка постов по категории
async function fetchPostsByCategory(category: string): Promise<Post[]> {
    if (!category) return [];

    try {
        const filter = encodeURIComponent(`category="${category}"`);
        const url = `${POCKETBASE_URL}/api/collections/posts/records?filter=${filter}&perPage=20&sort=-created`;

        const response = await fetch(url);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data: PocketBaseResponse = await response.json();

        if (!data.items) return [];

        return data.items.map((post) => ({
            id: post.id,
            image: getImageUrl(post),
            category: getPostCategory(post),
            title: post.title,
            excerpt: post.excerpt,
            date: formatDate(post.created),
            slug: `/blog/${post.slug}`
        }));
    } catch (error) {
        console.error("[CategoryPage] Error fetching posts:", error);
        return [];
    }
}

// Загрузка всех категорий
async function fetchCategories(): Promise<CategoryItem[]> {
    try {
        const response = await fetch(`${POCKETBASE_URL}/api/collections/posts/records?perPage=500`);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data: PocketBaseResponse = await response.json();

        if (!data.items) return [];

        const categoryMap = new Map<string, number>();

        data.items.forEach((post) => {
            const cat = getPostCategory(post);
            categoryMap.set(cat, (categoryMap.get(cat) || 0) + 1);
        });

        return Array.from(categoryMap.entries())
            .map(([name, count]) => ({ name, count }))
            .sort((a, b) => b.count - a.count)
            .slice(0, 6);
    } catch (error) {
        console.error("[CategoryPage] Error fetching categories:", error);
        return [];
    }
}

// Склонение слова "статья"
function getArticlesCountText(count: number): string {
    const lastDigit = count % 10;
    const lastTwoDigits = count % 100;

    if (lastTwoDigits >= 11 && lastTwoDigits <= 19) {
        return `${count} статей`;
    }

    if (lastDigit === 1) {
        return `${count} статья`;
    }

    if (lastDigit >= 2 && lastDigit <= 4) {
        return `${count} статьи`;
    }

    return `${count} статей`;
}

// Данные страницы
const posts = await fetchPostsByCategory(categoryName);
const categories = await fetchCategories();

const popularPosts: PopularPost[] = [
    {
        image: "https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=200&h=200&fit=crop&q=80",
        title: "Как обжаловать решение суда первой инстанции",
        views: "2.4K просмотров"
    },
    {
        image: "https://images.unsplash.com/photo-1589829085413-56de8ae18c73?w=200&h=200&fit=crop&q=80",
        title: "Снижение кадастровой стоимости в Сургуте",
        views: "1.8K просмотров"
    },
    {
        image: "https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?w=200&h=200&fit=crop&q=80",
        title: "Защита прав потребителей при покупке авто",
        views: "1.5K просмотров"
    }
];

// SEO
const pageTitle = categoryName ? `${categoryName} — Статьи и публикации` : "Категории — Блог";
const pageDescription = categoryName
    ? `Все статьи категории "${categoryName}" на сайте адвоката`
    : "Все категории статей на сайте адвоката";
---

<Layout
    title={pageTitle}
    description={pageDescription}
    pagePath={`/blog/category/${category}`}
>
    <div class="relative min-h-screen py-16 mb-6 overflow-hidden">
        <!-- Декоративный фон -->
        <div class="absolute inset-0 bg-gradient-to-b from-gray-50 to-white pointer-events-none"></div>
        <div class="absolute top-0 left-1/4 w-96 h-96 bg-[var(--color-blue-primary)] opacity-5 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-[var(--color-gold)] opacity-5 rounded-full blur-3xl pointer-events-none"></div>

        <div class="relative z-10 w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl">
            <!-- Заголовок секции -->
            <div class="flex items-center justify-between mb-12">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <a href="/blog" class="text-sm font-semibold text-gray-500 hover:text-[var(--color-blue-primary)] transition-colors flex items-center gap-1">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                            </svg>
                            Все статьи
                        </a>
                        <span class="text-gray-300">/</span>
                        <span class="text-sm font-semibold text-[var(--color-blue-primary)]">{categoryName}</span>
                    </div>
                    <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
                        {categoryName}
                    </h1>
                    <div class="flex items-center gap-3">
                        <div class="w-20 h-1 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-full"></div>
                        <span class="text-sm text-gray-500 font-medium">
                            {`${posts.length} ${posts.length === 1 ? 'статья' : posts.length >= 2 && posts.length <= 4 ? 'статьи' : 'статей'}`}
                        </span>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
                <!-- Основной контент -->
                <main class="lg:col-span-8">
                    {posts.length > 0 ? (
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
                            {posts.map((post) => (
                                <PostCard post={post} />
                            ))}
                        </div>
                    ) : (
                        <div class="bg-white/80 backdrop-blur-xl rounded-2xl p-12 text-center border border-white/50 shadow-lg">
                            <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                            </svg>
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Нет статей в этой категории</h3>
                            <p class="text-gray-600 mb-6">
                                К сожалению, в категории "{categoryName}" пока нет публикаций.
                            </p>
                            <a 
                                href="/blog" 
                                class="inline-flex items-center gap-2 px-6 py-3 bg-[var(--color-blue-primary)] text-white rounded-xl font-semibold hover:bg-[var(--color-gold)] transition-all duration-300 hover:shadow-lg hover:shadow-[var(--color-gold)]/30 hover:-translate-y-0.5"
                            >
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                                </svg>
                                Вернуться ко всем статьям
                            </a>
                        </div>
                    )}
                    <Pagination />
                </main>

                <!-- Сайдбар -->
                <aside class="lg:col-span-4 space-y-6">
                    <SidebarSearch />
                    <SidebarPopular posts={popularPosts} />
                    <SidebarCategories categories={categories} />
                    <TagCloud />
                </aside>
            </div>
        </div>
    </div>
</Layout>
