---
import Layout from '@layouts/Layout.astro';
import PostCard from '@components/blog/PostCard.astro';
import Tag from '@components/blog/Tag.astro';
import { authService } from '@/lib/authService';

const { slug } = Astro.params;
if (!slug) return Astro.redirect('/404');

// Подключаемся к PocketBase и получаем статью
const pb = authService.createClientFromRequest(Astro.request);

// Получаем конкретную статью по slug
const post = await pb.collection('posts').getFirstListItem(`slug = "${slug}"`, {
  expand: '',
});

// Ensure title does not exceed 70 characters
let adjustedTitle = post.title;
if (post.title.length > 70) {
  adjustedTitle = post.title.substring(0, 67) + '...';
}

// Получаем все опубликованные статьи для отображения похожих
const allPosts = await pb.collection('posts').getFullList({
  filter: 'isDraft = false',
  expand: '',
});

// Находим похожеие статьи по тегам
const relatedPosts = allPosts
  .filter(p => {
    if (p.id === post.id) return false;

    // Обрабатываем теги обеих статей
    let postTags = [];
    let pTags = [];

    // Обработка тегов текущей статьи
    if (Array.isArray(post.tags)) {
      postTags = post.tags;
    } else if (typeof post.tags === 'string') {
      try {
        postTags = JSON.parse(post.tags);
      } catch (e) {
        postTags = [];
      }
    }

    // Обработка тегов сравниваемой статьи
    if (Array.isArray(p.tags)) {
      pTags = p.tags;
    } else if (typeof p.tags === 'string') {
      try {
        pTags = JSON.parse(p.tags);
      } catch (e) {
        pTags = [];
      }
    }

    // Проверяем, есть ли совпадающие теги
    return pTags.some(tag => postTags.includes(tag));
  })
  .slice(0, 3);

// Подготовка контента для отображения
// В PocketBase поле типа 'editor' обычно возвращает уже обработанный HTML
let compiledContent = post.content;

const dateOptions: Intl.DateTimeFormatOptions = { day: '2-digit', month: 'long', year: 'numeric' };
---

<Layout
  title={adjustedTitle}
  description={post.description}
  skipSiteName={true}
  breadcrumbs={[
    { label: 'Startseite', href: '/' },
    { label: 'Blog', href: '/blog' },
    { label: post.title, current: true }
  ]}
>

    <!-- Прогресс бар чтения (опционально, простой CSS) -->
    <div class="fixed top-0 left-0 h-1 bg-indigo-600 z-50 w-full origin-left scale-x-0" id="reading-progress"></div>

    <div class="max-w-4xl mx-auto px-4 py-8 sm:py-12">

        <!-- HEADER СТАТЬИ -->
        <header class="mb-10 text-center">
            <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-900 tracking-tight leading-tight mb-6">
                {post.title}
            </h1>
        </header>

        <!-- MAIN IMAGE -->
        {post.image && (
                <div class="relative w-full aspect-video rounded-2xl overflow-hidden shadow-lg mb-6">
                    <img
                            src={`${import.meta.env.POCKETBASE_URL || import.meta.env.PUBLIC_POCKETBASE_URL}/api/files/${post.collectionId}/${post.id}/${post.image}`}
                            alt={post.title}
                            class="w-full h-full object-cover"
                            loading="eager"
                            width="1200"
                            height="675"
                    />
                </div>
        )}

        {/* Мета данные: Автор и Дата */}
        <div class="flex items-center justify-center gap-6 text-gray-500 text-sm sm:text-base border-y border-gray-100 py-4 max-w-2xl mx-auto mb-6">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">
                    {post.author ? post.author[0] : 'A'}
                </div>
                <span class="font-medium text-gray-900">{post.author}</span>
            </div>
            <div class="w-1 h-1 bg-gray-300 rounded-full"></div>
            <time datetime={new Date(post.date).toISOString()}>
                {new Date(post.date).toLocaleDateString('de-DE', dateOptions)}
            </time>
        </div>

        {/* Теги под изображением */}
        {post.tags && (
                <div class="flex flex-wrap justify-center gap-2 mb-12">
                    {Array.isArray(post.tags) ?
                        post.tags.map(tag => <Tag tag={tag} />)
                        :
                        (typeof post.tags === 'string' ?
                            (JSON.parse(post.tags) || []).map(tag => <Tag tag={tag} />)
                            :
                            []
                        )
                    }
                </div>
        )}

        <!-- ARTICLE CONTENT -->
        <article class="prose prose-lg prose-indigo max-w-none prose-headings:font-bold prose-headings:text-gray-900 prose-p:text-gray-600 prose-img:rounded-xl prose-img:shadow-md">
            {compiledContent ? (
                <div set:html={compiledContent} />
            ) : (
                <p>Kein Inhalt verfügbar</p>
            )}
        </article>

        <!-- AUTHOR BIO / SHARE / FOOTER (Optional placeholder) -->
        <div class="mt-16 pt-8 border-t border-gray-100">
            <div class="bg-gray-50 rounded-2xl p-6 sm:p-8 flex flex-col sm:flex-row items-center sm:items-start gap-6 text-center sm:text-left">
                <div class="shrink-0">
                    <div class="w-16 h-16 rounded-full bg-indigo-200 flex items-center justify-center text-indigo-700 text-2xl font-bold">
                        {post.author ? post.author[0] : 'A'}
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Über den Autor</h3>
                    <p class="text-gray-600 mt-2 text-sm leading-relaxed">
                        Dieser Artikel wurde von <strong>{post.author}</strong> verfasst.
                        Wir schreiben regelmäßig über Webentwicklung, Design und Technologie.
                    </p>
                    <div class="mt-4">
                        <a href="/blog" class="text-indigo-600 font-medium hover:underline text-sm">Alle Artikel ansehen &rarr;</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- RELATED POSTS -->
        {relatedPosts.length > 0 && (
                <div class="mt-20">
                    <div class="flex items-center justify-between mb-8">
                        <h2 class="text-2xl font-bold text-gray-900">Ähnliche Artikel</h2>
                        <a href="/blog" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">
                            Alle ansehen <span aria-hidden="true">&rarr;</span>
                        </a>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {relatedPosts.map((related) => <PostCard post={related} compact={true} />)}
                    </div>
                </div>
        )}
    </div>
</Layout>

<!-- Скрипт для прогресс-бара -->
<script>
    const progressBar = document.getElementById('reading-progress');
    window.addEventListener('scroll', () => {
        if (!progressBar) return;
        const scrollTop = window.scrollY;
        const docHeight = document.body.scrollHeight - window.innerHeight;
        const scrollPercent = scrollTop / docHeight;
        progressBar.style.transform = `scaleX(${scrollPercent})`;
    });
</script>