---
import Tag from '@components/blog/Tag.astro';
// Если у вас нет компонента Icon, можно использовать SVG напрямую, как показано ниже
import { Icon } from 'astro-icon/components';

interface Props {
    tags: Record<string, number>;
    className?: string;
    initialVisibleCount?: number;
    incrementCount?: number;
    title?: string;
}

const {
    tags,
    className = '',
    initialVisibleCount = 10, // Чуть увеличил дефолтное значение для компактности
    incrementCount = 10,
    title = 'Beliebte Themen'
} = Astro.props;

if (!tags) return null;

// Проверяем, что tags - это объект, а не что-то другое
if (!tags || typeof tags !== 'object') {
    console.error('Tags is not an object:', tags);
    return null;
}

// Сортируем теги по популярности (количеству), чтобы самые важные были первыми
const allTags = Object.entries(tags).sort(([, countA], [, countB]) => countB - countA);

if (allTags.length === 0) return null;

// Генерируем уникальные ID для изоляции логики этого конкретного компонента
const uniqueId = Math.random().toString(36).substr(2, 9);
const containerId = `tag-container-${uniqueId}`;
const btnId = `show-more-btn-${uniqueId}`;
---

<div class={`bg-white rounded-2xl p-6 shadow-sm border border-gray-100 ${className}`}>
    <!-- Заголовок в стиле компонента партнеров -->
    <div class="flex items-center justify-between mb-5">
        <h3 class="text-lg font-bold text-gray-800">{title}</h3>
        <span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
    </div>

    <!-- Контейнер тегов -->
    <div id={containerId} class="flex flex-wrap gap-2 mb-2">
        {allTags.map(([tag, count], index) => (
                <div
                        class={`transition-all duration-500 ease-out ${index >= initialVisibleCount ? 'hidden opacity-0 translate-y-2 tag-hidden' : 'opacity-100 translate-y-0'}`}
                >
                    {/* Обертка для Tag, чтобы передать классы или стили, если сам Tag их не принимает */}
                    <Tag tag={tag} count={count} />
                </div>
        ))}
    </div>

    <!-- Кнопка "Показать еще" -->
    {allTags.length > initialVisibleCount && (
            <div class="mt-4 pt-2 border-t border-gray-50 flex justify-center">
                <button
                        id={btnId}
                        data-increment={incrementCount}
                        class="group flex items-center gap-1 text-xs font-semibold text-gray-500 hover:text-blue-600 transition-colors uppercase tracking-wide py-2 px-4 rounded-lg hover:bg-blue-50"
                >
                    <span>Mehr anzeigen</span>
                    <!-- SVG Chevron Down -->
                    <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="w-4 h-4 transition-transform duration-300 group-hover:translate-y-0.5"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                    >
                        <polyline points="6 9 12 15 18 9"></polyline>
                    </svg>
                </button>
            </div>
    )}
</div>

<script define:vars={{ containerId, btnId }}>
    const container = document.getElementById(containerId);
    const btn = document.getElementById(btnId);

    if (container && btn) {
        btn.addEventListener('click', () => {
            // Находим все скрытые теги внутри ЭТОГО контейнера
            const hiddenTags = container.querySelectorAll('.tag-hidden');
            const increment = parseInt(btn.dataset.increment || '6');

            let count = 0;
            // Используем Array.from, чтобы можно было прервать цикл или использовать обычный for
            for (const tagWrapper of hiddenTags) {
                if (count >= increment) break;

                // Убираем класс hidden (display: none)
                tagWrapper.classList.remove('hidden');

                // Небольшая задержка перед снятием прозрачности для запуска CSS transition
                // requestAnimationFrame гарантирует, что браузер отрисовал удаление hidden
                requestAnimationFrame(() => {
                    tagWrapper.classList.remove('opacity-0', 'translate-y-2', 'tag-hidden');
                    tagWrapper.classList.add('opacity-100', 'translate-y-0');
                });

                count++;
            }

            // Если скрытых тегов больше нет, прячем кнопку
            const remainingHidden = container.querySelectorAll('.tag-hidden').length;
            if (remainingHidden === 0) {
                btn.style.display = 'none';
                // Опционально: можно убрать отступы родительского контейнера кнопки
                btn.parentElement.style.display = 'none';
            }
        });
    }
</script>