---
import { Icon } from 'astro-icon/components';
import Logo from './Logo.astro';
import TopHeader from './TopHeader.astro';
import UserAvatar from './UserAvatar.astro';
import AuthButton from './AuthButton.astro';
import Link from '@components/base/Link.astro';
import { authService } from '@/lib/authService';

// Получение пропсов компонента
const {
    isActionActive = false,
    session = null,
    status = 'unauthenticated',
    currentPath = '/'
} = Astro.props;

// Получаем элементы навигации из PocketBase
const pb = authService.createClientFromRequest(Astro.request);
let navItems = [];

try {
    const records = await pb.collection('t_navbar').getList(1, 100, {
        sort: 'order',
        filter: 'is_active = true'
    });

    navItems = records.items.map(item => ({
        id: item.id,
        label: item.label,
        href: item.href,
        order: item.order,
        targetBlank: item.target_blank || false,
        cssClass: item.css_class || ''
    }));
} catch (e) {
    console.error("Error loading navbar:", e);
    // Фолбэк на случай ошибки базы данных
    navItems = [
        { label: 'Startseite', href: '/', order: 1, targetBlank: false, cssClass: '' }
    ];
}

// Фильтрация элемента "Startseite" на главной странице
const filteredNavItems = currentPath === '/'
    ? navItems.filter(item => item.label !== 'Startseite')
    : navItems;

const userName = session?.user?.name || session?.user?.email?.split('@')[0] || 'Gast';

// Определение страниц авторизации для правильного отображения элементов
const isAuthPage = currentPath.startsWith('/auth/login') || currentPath.startsWith('/auth/register');

// Определение страниц, на которых должна отображаться иконка аутентификации
const showAuthIcon = currentPath.startsWith('/bewertungen') || currentPath.startsWith('/kontakt');
---

<!-- Верхний заголовок сайта -->
<div id="top-header-wrapper" class="transition-all duration-300 ease-in-out z-60 relative bg-white">
    <TopHeader isActionActive={isActionActive} />
</div>

<!-- Основной заголовок (шапка) сайта -->
<header id="main-header" class="border-b border-gray-200 bg-[#ECF2F5] transition-all duration-300 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-6 py-3">
        <div class="flex justify-between items-center h-12">

            <!-- Логотип сайта -->
            <Logo width={50} height={30} className="shrink-0" />

            <!-- Десктопное меню навигации -->
            <nav class="hidden lg:flex items-center space-x-6 xl:space-x-8">
                {filteredNavItems.map((item) => {
                    const target = item.targetBlank ? '_blank' : '_self';
                    const rel = target === '_blank' ? 'noopener noreferrer' : undefined;

                    return (
                            <Link
                                    href={item.href}
                                    target={target}
                                    rel={rel}
                                    variant="default"
                                    class={`text-base font-medium transition-colors hover:text-blue-600 ${currentPath === item.href ? 'text-blue-600 font-bold' : 'text-gray-700'} ${item.cssClass}`}
                            >
                                {item.label}
                            </Link>
                    );
                })}
            </nav>

            <!-- Правый блок (аутентификация и профиль) -->
            <div class="hidden lg:flex items-center space-x-4">
                {status === 'authenticated' && session?.user ? (
                        <div class="flex items-center gap-4 relative">
                            <div class="flex items-center gap-3 relative">
                                <UserAvatar user={session.user} />
                                <div class="absolute top-0 right-0 w-3 h-3 rounded-full bg-green-500 border-2 border-white blinking-dot-online"></div>
                            </div>

                            <!-- Кнопка выхода из системы -->
                            <AuthButton
                                    status={status}
                                    session={session}
                                    size="md"
                                    variant="ghost"
                                    hideText={true}
                                    class="w-12 h-12 p-0 rounded-full !flex items-center justify-center text-red-600 hover:text-red-700 hover:bg-red-100 transition-all duration-200"
                            />
                        </div>
                ) : (
                    !isAuthPage && showAuthIcon && (
                            <div class="flex items-center gap-2 relative">
                                <!-- Кнопка входа в систему -->
                                <AuthButton
                                        status={status}
                                        session={session}
                                        size="md"
                                        variant="ghost"
                                        hideText={true}
                                        class="w-12 h-12 p-0 rounded-full !flex items-center justify-center text-gray-500 hover:text-blue-600 hover:bg-blue-100 transition-all duration-200"
                                />
                            </div>
                    )
                )}
            </div>

            <!-- Мобильная кнопка меню (Гамбургер) -->
            <div class="lg:hidden relative z-[102]">
                <button
                        id="mobile-menu-button"
                        class="w-10 h-10 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-700 hover:bg-gray-50 hover:text-blue-600 transition-all shadow-sm cursor-pointer"
                        aria-label="Menü öffnen"
                >
                    <Icon name="burgerIcon" id="burger-icon" width="28" height="28" class="transition-opacity duration-300" />
                </button>
            </div>

        </div>
    </div>

    <!-- Индикатор прокрутки страницы -->
    <div id="scroll-progress-line" class="absolute bottom-0 left-0 h-[3px] bg-blue-600 z-50 transition-all duration-100 ease-linear" style="width: 0; opacity: 0;"></div>
</header>

<!-- Overlay для мобильного меню -->
<div id="mobile-menu-overlay" class="fixed inset-0 bg-black/50 backdrop-blur-[2px] z-90 opacity-0 pointer-events-none transition-opacity duration-300"></div>

<!-- Мобильное меню (СЛЕВА) -->
<div
        id="mobile-menu"
        class="fixed top-0 left-0 bottom-0 w-[85%] max-w-[320px] z-[100] bg-white shadow-2xl flex flex-col transform -translate-x-full transition-transform duration-300 ease-in-out"
>
    <!-- Заголовок мобильного меню -->
    <!-- ИЗМЕНЕНИЯ:
         1. px-6 py-3 (как на десктопе)
         2. bg-[#ECF2F5] (фон как на десктопе)
         3. border-gray-200 (как на десктопе)
    -->
    <div class="px-6 py-3 flex items-center justify-between border-b border-gray-200 bg-[#ECF2F5]">
        <!-- Обертка h-12 для точного совпадения высоты с десктопом -->
        <div class="h-12 flex items-center">
            <Logo width={50} height={30} className="shrink-0" />
        </div>

        <button id="mobile-menu-close-button" class="p-2 -mr-2 rounded-full hover:bg-black/5 text-gray-500 transition-colors cursor-pointer">
            <Icon name="closeIcon" width="28" height="28" />
        </button>
    </div>

    {status === 'authenticated' && session?.user && (
        <!-- Информация о пользователе в мобильном меню -->
            <div class="px-5 py-6 bg-blue-50 border-b border-blue-100 flex flex-col items-center text-center">
                <div class="mb-3 transform scale-125 relative">
                    <UserAvatar user={session.user} />
                    <div class="absolute top-0 right-0 w-3 h-3 rounded-full bg-green-500 border-2 border-white blinking-dot-online"></div>
                </div>
            </div>
    )}

    <div class="grow overflow-y-auto p-5">
        <!-- Мобильное меню навигации -->
        <nav class="flex flex-col space-y-1">
            {filteredNavItems.map((item) => {
                const target = item.targetBlank ? '_blank' : '_self';
                const rel = target === '_blank' ? 'noopener noreferrer' : undefined;

                return (
                        <Link
                                href={item.href}
                                target={target}
                                rel={rel}
                                variant="default"
                                class={`block px-4 py-3 rounded-lg text-lg font-medium transition-colors ${
                                    currentPath === item.href
                                        ? 'bg-blue-50 text-blue-600 font-bold'
                                        : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
                                } ${item.cssClass}`}
                        >
                            {item.label}
                        </Link>
                );
            })}
        </nav>

        <!-- Разделитель в мобильном меню -->
        <div class="my-6 border-t border-gray-100"></div>

        <!-- Кнопка аутентификации в мобильном меню -->
        <div class="space-y-3">
            {showAuthIcon && (
                    <AuthButton
                            status={status}
                            session={session}
                            size="md"
                            variant={status === 'authenticated' ? 'danger' : 'primary'}
                            hideText={false}
                            class="w-full justify-center"
                    />
            )}
        </div>
    </div>
</div>

<style>
    /* Стили для скрытия верхнего заголовка при прокрутке */
    .top-header-hidden {
        margin-top: -42px;
        opacity: 0;
        pointer-events: none;
    }

    /* Стили для анимации точки онлайн-статуса пользователя */
    .blinking-dot-online {
        animation: blink-online 2s ease-in-out infinite;
    }

    @keyframes blink-online {
        0%, 100% {
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
        }
        50% {
            opacity: 0.7;
            box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
        }
        70% {
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
        }
    }
</style>

<script is:inline>
    // Функция инициализации всех обработчиков событий
    function initHeaderLogic() {
        // --- Логика скролла ---
        const topHeaderWrapper = document.getElementById('top-header-wrapper');
        const progressLine = document.getElementById('scroll-progress-line');
        let lastScrollY = window.scrollY;

        const handleScroll = () => {
            const currentScrollY = window.scrollY;
            const winHeight = window.innerHeight;
            const docHeight = document.documentElement.scrollHeight;
            const maxScroll = docHeight - winHeight;

            if (progressLine && maxScroll > 0) {
                const percent = Math.min((currentScrollY / maxScroll) * 100, 100);
                progressLine.style.width = `${percent}%`;
                progressLine.style.opacity = currentScrollY > 5 ? '1' : '0';
            }

            if (topHeaderWrapper) {
                if (currentScrollY > 50 && currentScrollY > lastScrollY) {
                    topHeaderWrapper.classList.add('top-header-hidden');
                } else {
                    topHeaderWrapper.classList.remove('top-header-hidden');
                }
            }
            lastScrollY = currentScrollY;
        };

        window.removeEventListener('scroll', handleScroll);
        window.addEventListener('scroll', handleScroll, { passive: true });
        handleScroll();

        // --- Логика мобильного меню ---
        const menuBtn = document.getElementById('mobile-menu-button');
        const closeBtn = document.getElementById('mobile-menu-close-button');
        const menu = document.getElementById('mobile-menu');
        const overlay = document.getElementById('mobile-menu-overlay');

        if (!menuBtn || !menu || !overlay) return;

        const toggleMenu = (show) => {
            if (show) {
                menu.classList.remove('-translate-x-full');
                overlay.classList.remove('opacity-0', 'pointer-events-none');
                document.body.style.overflow = 'hidden';
            } else {
                menu.classList.add('-translate-x-full');
                overlay.classList.add('opacity-0', 'pointer-events-none');
                document.body.style.overflow = '';
            }
        };

        menuBtn.onclick = (e) => {
            e.preventDefault();
            const isClosed = menu.classList.contains('-translate-x-full');
            toggleMenu(isClosed);
        };

        if (closeBtn) {
            closeBtn.onclick = (e) => {
                e.preventDefault();
                toggleMenu(false);
            };
        }

        overlay.onclick = () => {
            toggleMenu(false);
        };

        const menuLinks = menu.querySelectorAll('a');
        menuLinks.forEach(link => {
            link.addEventListener('click', () => toggleMenu(false));
        });
    }

    document.addEventListener('DOMContentLoaded', initHeaderLogic);
    document.addEventListener('astro:page-load', initHeaderLogic);
</script>