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

const title = 'Блог Redi | Статьи о веб-разработке';
const description = 'Читайте статьи о веб-разработке...';

const page = Number(Astro.url.searchParams.get('page')) || 1;
const perPage = 4;

// 2. ЯВНО УКАЗЫВАЕМ ТИП ПЕРЕМЕННОЙ
// Переменная может быть или Post, или null
let featuredPost: Post | null = null;
let excludedId = '';

// --- ШАГ 1: Ищем ОДИН избранный пост (только для 1-й страницы) ---
if (page === 1) {
  try {
    const rawPost = await pb.collection('posts').getFirstListItem('isActive = true && isFeatured = true', {
      sort: '-publishDate',
    });

    excludedId = rawPost.id;

    // Превращаем ответ PocketBase в наш тип Post
    featuredPost = {
      id: rawPost.id,
      title: rawPost.title,
      slug: rawPost.slug,
      description: rawPost.description,
      publishDate: rawPost.publishDate,
      tags: rawPost.tags || [],
      content: rawPost.content,
      image: rawPost.image || rawPost.coverImage,
      isFeatured: rawPost.isFeatured,
      isActive: rawPost.isActive
    };

  } catch (e) {
    featuredPost = null;
  }
}

// --- ШАГ 2: Основной список (исключая избранный) ---
const mainListFilter = `isActive = true ${excludedId ? `&& id != "${excludedId}"` : ''}`;

const result = await pb.collection('posts').getList(page, perPage, {
  filter: mainListFilter,
  sort: '-isFeatured,-publishDate',
  requestKey: 'blog_list'
});

// Маппинг для списка
const posts = result.items.map(post => ({
  id: post.id,
  title: post.title,
  slug: post.slug,
  description: post.description,
  publishDate: post.publishDate,
  tags: post.tags || [],
  content: post.content,
  image: post.image || post.coverImage,
  isFeatured: post.isFeatured,
  isActive: post.isActive
}));

// Данные для пагинации
const paginationData = {
  currentPage: result.page,
  lastPage: result.totalPages,
  url: {
    prev: result.page > 1 ? `/blog?page=${result.page - 1}` : undefined,
    next: result.page < result.totalPages ? `/blog?page=${result.page + 1}` : undefined,
  },
};
---

<Layout title={title} description={description} canonicalLink="/blog">
  <section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
    <PageHeading
      title="Статьи о веб-разработке"
      description="Коллекция постов о веб разработке и современных технологиях."
    />

    {/* ИЗБРАННЫЙ ПОСТ (Если найден) */}
    {featuredPost && (
      <div class="mb-10 mt-8">
        <FeaturedPostCard post={featuredPost} />
      </div>
    )}

    {/* ОСНОВНОЙ СПИСОК */}
    <div class="z-50 flex flex-col items-stretch w-full gap-5 my-8">
      <PostsLoop posts={posts} />
    </div>

    {result.totalPages > 1 && (
      <Pagination client:load page={paginationData} />
    )}
  </section>
</Layout>