---
import Button from '@components/base/Button.astro';
import type { FeaturedProject } from '@globalInterfaces';
import { pb } from '@lib/pocketbase';

// Получаем избранные проекты из PocketBase
const result = await pb.collection('featured_projects').getFullList({
  filter: 'featured = true && isActive = true',
  sort: 'order'
});

const featuredProjects: FeaturedProject[] = result.map((item: any) => ({
  id: item.id,
  collectionId: item.collectionId,
  name: item.name,
  description: item.description,
  image: item.image,
  url: item.url,
  github: item.github,
  stack: typeof item.stack === 'string' ? JSON.parse(item.stack) : item.stack,
  featured: item.featured,
  forSale: item.forSale,
  order: item.order,
  isActive: item.isActive
}));

// Если нет featured проектов, выходим
if (featuredProjects.length === 0) {
  console.log('Нет доступных избранных проектов');
  return null;
}

const today = new Date();
const startOfYear = new Date(today.getFullYear(), 0, 0);
const diff = today.getTime() - startOfYear.getTime();
const dayOfYear = Math.floor(diff / (1000 * 60 * 60 * 24));

// Логика выбора проекта остается прежней
const projectIndex = Math.floor(dayOfYear / 3) % featuredProjects.length;
const featuredProject = featuredProjects[projectIndex];

// Путь к изображению из PocketBase
const imageUrl = `${import.meta.env.PUBLIC_POCKETBASE_URL}/api/files/featured_projects/${featuredProject.id}/${featuredProject.image}`;
---

{
  featuredProject && (
  <section class="max-w-4xl mx-auto px-7 lg:px-0 animate-on-scroll">
    <h2 class="text-2xl text-center font-bold leading-10 tracking-tight text-neutral-900 dark:text-neutral-100">
      Избранный проект
    </h2>
    <p class="mb-10 text-center text-base text-neutral-600 dark:text-neutral-400">
      Это один из проектов, которым я особенно горжусь. Больше работ можно
      найти на странице проектов.
    </p>

    <div class="grid items-center gap-8 md:grid-cols-2 md:items-start md:gap-12">
      <a
        href={featuredProject.url}
        target="_blank"
        rel="noopener noreferrer"
        class="block group"
        aria-label={`Перейти на сайт проекта ${featuredProject.name}`}
      >
        <img
          src={imageUrl}
          alt={`Скриншот проекта ${featuredProject.name}`}
          class="rounded-lg shadow-xl aspect-video object-cover object-top transition-transform duration-300 group-hover:scale-105"
        />
      </a>

      <div class="flex flex-col justify-center h-full items-center text-center md:items-start md:text-left">
        <div class="flex items-center gap-x-4">
          <h3 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100">
            {featuredProject.name}
          </h3>
          {featuredProject.forSale && (
            <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-white bg-green-600 rounded-full">
              Продается
            </span>
          )}
        </div>
          <p class="mt-2 text-neutral-600 dark:text-neutral-400">
            {featuredProject.description}
          </p>

          {featuredProject.stack && featuredProject.stack.length > 0 && (
            <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-4">
              {(typeof featuredProject.stack === 'string' ? JSON.parse(featuredProject.stack) : featuredProject.stack).map((tech: string) => (
                <span class="px-2 py-1 text-xs font-medium rounded-full bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-200">
                  {tech}
                </span>
              ))}
            </div>
          )}

          <div class="flex items-center gap-4 mt-6">
            <Button text="Посмотреть сайт" link={featuredProject.url} />
            {featuredProject.github && (
              <Button text="GitHub" link={featuredProject.github} />
            )}
          </div>
      </div>
    </div>

    <div class="flex items-center justify-center w-full pt-5 mt-10 border-t border-neutral-200 dark:border-neutral-800">
      <Button text="Посмотреть все проекты" link="/projects" />
    </div>
  </section>
    )
  }