---
import PostCard from "./PostCard.astro";
import Pagination from "../base/Pagination.astro";
import SidebarSearch from "./SidebarSearch.astro";
import SidebarPopular from "./SidebarPopular.astro";
import SidebarCategories from "./SidebarCategories.astro";
import TagCloud from "./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[];
  totalItems?: number;
  totalPages?: number;
  page?: number;
  perPage?: number;
}

// Параметры пагинации
const page = parseInt(Astro.url.searchParams.get("page") || "1");
const perPage = 44; // 22 ряда по 2 карточки

// Загружаем посты из PocketBase с пагинацией
let posts: Array<{
  id: string;
  image: string;
  category: string;
  title: string;
  excerpt: string;
  date: string;
  slug: string;
}> = [];

let totalPages = 1;
let currentPage = page;

try {
  const response = await fetch(
    `${POCKETBASE_URL}/api/collections/posts/records?page=${page}&perPage=${perPage}&sort=-created`,
  );
  const data: PocketBaseResponse = await response.json();

  if (data.items) {
    posts = data.items.map((post) => {
      const date = new Date(post.created);
      const formattedDate = `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()} года`;

      // Формируем URL изображения
      const imageUrl = post.image
        ? `${POCKETBASE_URL}/api/files/posts/${post.id}/${post.image}`
        : "https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80";

      // Берём категорию из нового поля category
      const category =
        post.category && post.category.trim() !== ""
          ? post.category
          : "НОВОСТИ";

      return {
        id: post.id,
        image: imageUrl,
        category,
        title: post.title,
        excerpt: post.excerpt,
        date: formattedDate,
        slug: `/blog/${post.slug}`,
      };
    });

    totalPages = data.totalPages || 1;
  }
} catch (error) {
  console.error("Error fetching posts from PocketBase:", error);
}

const popularPosts = [
  {
    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 просмотров",
  },
];

// Загружаем категории из PocketBase динамически
interface CategoryItem {
  name: string;
  count: number;
}

let categories: CategoryItem[] = [];

try {
  // Получаем все посты для подсчёта категорий
  const allPostsResponse = await fetch(
    `${POCKETBASE_URL}/api/collections/posts/records?perPage=500`,
  );
  const allPostsData: PocketBaseResponse = await allPostsResponse.json();

  if (allPostsData.items) {
    const categoryMap = new Map<string, number>();

    allPostsData.items.forEach((post) => {
      const category =
        post.category && post.category.trim() !== ""
          ? post.category
          : "НОВОСТИ";
      const currentCount = categoryMap.get(category) || 0;
      categoryMap.set(category, currentCount + 1);
    });

    // Преобразуем в массив и сортируем по количеству (убывание)
    categories = Array.from(categoryMap.entries())
      .map(([name, count]) => ({ name, count }))
      .sort((a, b) => b.count - a.count)
      .slice(0, 6); // Берём максимум 6 категорий
  }
} catch (error) {
  console.error("Error fetching categories from PocketBase:", error);
  // Fallback на пустой массив
  categories = [];
}
---

<div class="relative w-full py-12 md:py-16 overflow-hidden">
  <!-- Контейнер с правильными отступами -->
  <div class="relative z-10 w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl">
    <!-- Заголовок секции -->
    <div class="flex flex-col items-center text-center mb-8 md:mb-12">
      <div class="flex flex-col items-center mb-4 md:mb-6">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
          Все публикации
        </h2>
        <div
          class="w-20 h-1 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-full"
        >
        </div>
      </div>
      <a
        href="/blog/archive"
        class="inline-flex items-center gap-2 text-[var(--color-blue-primary)] font-semibold hover:text-[var(--color-gold)] transition-colors group"
      >
        Архив статей
        <svg
          class="w-4 h-4 transform group-hover:translate-x-1 transition-transform"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 5l7 7-7 7"></path>
        </svg>
      </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 w-full">
      <!-- Основной контент -->
      <main class="lg:col-span-8 w-full min-w-0">
        {
          posts.length > 0 ? (
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 w-full">
              {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 w-full">
              <p class="text-gray-600">Пока нет публикаций</p>
            </div>
          )
        }
        <Pagination />
      </main>

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