---
import PageHeading from '@components/base/PageHeading.astro';
import ProjectGrid from '@components/projects/ProjectGrid.astro';
import Layout from '@layouts/Layout.astro';
import Pagination from 'src/components/base/Pagination.tsx';
import { pb } from '@lib/pocketbase';
import type { Project } from '@globalInterfaces';

interface PaginationData {
  currentPage: number;
  lastPage: number;
  url: {
    prev?: string;
    next?: string;
  };
}

const title = 'Мои проекты | Redi - Портфолио веб-разработчика';
const description =
  'Ознакомьтесь с моими лучшими работами в портфолио. Примеры веб-приложений, сайтов и других проектов, разработанных мной.';

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

// Получаем проекты из PocketBase
const result = await pb.collection('projects').getList(page, perPage, {
  sort: '-order,-created',
  requestKey: 'projects_list'
});

// Маппинг для списка
const projects = result.items.map(item => ({
  id: item.id,
  collectionId: item.collectionId,
  title: item.name,
  description: item.description,
  short_description: item.short_description,
  long_description: item.long_description,
  stack: item.stack || [],
  github_link: item.github,
  demo_link: item.url_site,
  image: `${import.meta.env.PUBLIC_POCKETBASE_URL}/api/files/projects/${item.id}/${item.image}`,
  alt_text: item.alt_text,
  order: item.order || 0,
  isActive: item.isActive
}));

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

<Layout title={title} description={description} canonicalLink="/projects">
  <section class="relative z-20 max-w-4xl mx-auto my-12 px-7 lg:px-0">
    <PageHeading
      title="Портфолио моих лучших веб-проектов"
      description="Здесь собраны все проекты, над которыми я работал."
    />
    <ProjectGrid projects={projects} />

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