---
import { COLOR_CLASSES } from '@constants/colors';
import LetterIcon from '@icons/letterIcon.svg';
import WhatsAppIcon from '@icons/whatsApp.svg';
import StatsBlock from './StatsBlock.astro';
import Modal from '@components/base/Modal.astro';
import UniversalBookingForm from '../../booking/UniversalBookingForm.tsx';
import Toast from './Toast.astro';
import Button from '@components/base/Button.astro';
import { authService } from '@/lib/authService';

// 1. Инициализация клиента PocketBase
const pb = authService.createClientFromRequest(Astro.request);

// 2. Параллельный запрос данных (Promise.all)
// Это быстрее, чем ждать сначала одну запись, потом другую.
const [heroRecord, settingsRecord] = await Promise.all([
    pb.collection('hero_content').getFirstListItem(''),
    pb.collection('site_settings').getFirstListItem('')
]);

// 3. Генерация прямой ссылки на изображение героя
const heroImageUrl = pb.files.getURL(heroRecord, heroRecord.hero_image);

// 4. Подготовка объекта контента для шаблона
const content = {
    title: heroRecord.title,
    description: heroRecord.description,
    bookByEmail: heroRecord.book_btn_text,
    // Текст на кнопке (из hero_content)
    contactWhatsApp: heroRecord.whatsapp_btn_text?.trim(),
    // Текст сообщения (из hero_content)
    whatsappDirectMessage: heroRecord.whatsapp_direct_msg,
    stats: heroRecord.stats,
    ...heroRecord.form_texts
};

// 5. Получаем номер WhatsApp из глобальных настроек (из site_settings)
const whatsappNumber = settingsRecord.whatsapp_number;
---

<section class="relative text-white overflow-hidden min-h-screen flex flex-col">
    <!-- Фоновое изображение -->
    <div class="absolute inset-0 z-0">
        <img
            src={heroImageUrl}
            alt="Hero Background"
            width="1920"
            height="1080"
            class="object-cover object-center h-full w-full"
        />
        <div class="absolute inset-0 bg-black/60"></div>
    </div>

    <!-- Основной контент -->
    <div class="relative z-10 max-w-7xl mx-auto w-full px-6 flex-grow flex flex-col justify-center">
        <div class="max-w-3xl mx-auto text-center py-16">
            <h1 class="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl animate-fade-in-up">
                {content.title}
            </h1>
            <p class="mt-6 text-lg leading-8 text-gray-200 animate-fade-in-up" style="--animation-delay: 200ms;">
                {content.description}
            </p>

            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 animate-fade-in-up" style="--animation-delay: 400ms;">

                <!-- Кнопка Email -->
                <Button
                        id="open-email-modal-btn"
                        variant="primary"
                        size="md"
                        fullWidth={false}
                        class="w-full sm:w-auto"
                >
                    <span class="flex items-center gap-2">
                        <LetterIcon width="20" height="20" class="h-5 w-5" />
                        {content.bookByEmail}
                    </span>
                </Button>

                <!-- Кнопка WhatsApp -->
                <!-- Ссылка формируется динамически: wa.me/НОМЕР_ИЗ_БАЗЫ?text=ТЕКСТ_ИЗ_БАЗЫ -->
                <Button
                        href={`https://wa.me/${whatsappNumber}?text=${encodeURIComponent(content.whatsappDirectMessage)}`}
                        variant="success"
                        size="md"
                        fullWidth={false}
                        class="w-full sm:w-auto"
                        target="_blank"
                        rel="noopener noreferrer"
                >
                    <span class="flex items-center gap-2">
                        <WhatsAppIcon width="20" height="20" class="h-5 w-5" />
                        {content.contactWhatsApp}
                    </span>
                </Button>
            </div>
        </div>
    </div>

    <!-- Блок статистики -->
    <div class="absolute bottom-0 left-0 right-0 z-10">
        <StatsBlock stats={content.stats} />
    </div>
</section>

<!-- Модальное окно -->
<Modal
        modalId="email-modal"
        triggerId="open-email-modal-btn"
        title={content.emailModalTitle}
        maxWidth="md"
        modalBgClass={COLOR_CLASSES.cardBackground}
>
    <div class="pb-8">
        <UniversalBookingForm
                content={content}
                formType="main"
                client:only="solid"
        />
    </div>
</Modal>

<Toast />

<script>
    // Закрытие модального окна
    window.addEventListener('booking-close-modal', () => {
        // @ts-ignore
        if (typeof window.closeModal === 'function') {
            // @ts-ignore
            window.closeModal('email-modal');
        } else {
            const modal = document.getElementById('email-modal');
            if (modal) {
                modal.classList.remove('is-open');
                modal.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = '';
            }
        }
    });

    // Обработка ошибок (Toast)
    window.addEventListener('booking-error', (e) => {
        document.dispatchEvent(new CustomEvent('show-toast', {
            detail: {
                // @ts-ignore
                message: e.detail.message,
                type: 'error'
            }
        }));
    });
</script>

<style>
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards;
        opacity: 0;
        animation-delay: var(--animation-delay, 0s);
    }
</style>