---
import VehicleCard from './VehicleCard.astro';
import Modal from '@components/base/Modal.astro';
import FleetBookingWrapper from './FleetBookingWrapper.tsx';
import { heroContent } from '@components/home/hero/HeroContent';
import { COLOR_CLASSES } from '@constants/colors';
import { authService } from '@/lib/authService';

// Получаем автомобили для премиум-флота из PocketBase
const pb = authService.createClientFromRequest(Astro.request);
let premiumFleet = [];

try {
    const fleetRecords = await pb.collection('premium_fleet').getFullList({
        sort: 'order',
        filter: 'is_active = true'
    });

    // Преобразуем данные под нужный формат
    premiumFleet = fleetRecords.map(vehicle => {
        // Формируем URL изображения только если есть все необходимые данные
        let imageUrl = '/images/fleet/cards/car01.avif'; // Заглушка на случай отсутствия изображения

        if (vehicle.image && vehicle.collectionId && vehicle.id) {
            imageUrl = `${import.meta.env.POCKETBASE_URL}/api/files/${vehicle.collectionId}/${vehicle.id}/${vehicle.image}`;
        }

        // Исправляем возможную проблему с лишней кавычкой в начале поля price
        let price = vehicle.price || "Auf Anfrage";
        if (typeof price === 'string' && price.startsWith('"')) {
            price = price.substring(1); // Убираем первую кавычку, если она есть
        }

        return {
            id: vehicle.id,
            name: vehicle.name || 'Unbenanntes Fahrzeug',
            tagline: vehicle.tagline || 'Kein Slogan',
            description: vehicle.description || 'Keine Beschreibung verfügbar',
            capacity: vehicle.capacity || 'N/A',
            imageUrl,
            features: Array.isArray(vehicle.features) ? vehicle.features : (typeof vehicle.features === 'string' ? JSON.parse(vehicle.features) : []),
            brand: vehicle.brand || vehicle.name || 'Unbekannt',
            model: vehicle.model || vehicle.tagline || 'Unbekannt',
            year: vehicle.year || 2024,
            price,
            seats: [vehicle.capacity || 'N/A'],
            doors_count: vehicle.doors_count,
            horsepower: vehicle.horsepower,
            trunk_capacity: vehicle.trunk_capacity
        };
    });
} catch (error) {
    console.error('Error fetching fleet data from PocketBase:', error);
    // Заглушка для карточек автомобилей
    premiumFleet = [
        {
            id: 'fallback-1',
            name: 'Mercedes-Benz V-Klasse',
            tagline: 'Das Flaggschiff des Komforts',
            description: 'Die V-Klasse definiert Luxus im Großraumformat. Perfekt für Geschäftsreisen, VIP-Transfers oder anspruchsvolle Familienausflüge.',
            capacity: 'Bis zu 7 Fahrgäste',
            imageUrl: '/images/fleet/cards/car01.avif',
            features: ['Ledersitze', 'WLAN an Bord', 'Getönte Scheiben', 'Ambientebeleuchtung'],
            make: 'Mercedes-Benz',
            model: 'V-Klasse',
            year: '2024',
            price: 'Auf Anfrage',
            seats: ['Bis zu 7 Fahrgäste']
        },
        {
            id: 'fallback-2',
            name: 'VW T7 Multivan',
            tagline: 'Der flexible Alleskönner',
            description: 'Der neue Multivan verbindet modernstes Design mit unerreichter Flexibilität. Ideal für Sightseeing-Touren oder als mobiles Büro.',
            capacity: 'Bis zu 6 Fahrgäste',
            imageUrl: '/images/fleet/cards/car02.avif',
            features: ['Panorama-Glasdach', 'Digital Cockpit', 'USB-C an jedem Platz', 'Klapptisch'],
            make: 'VW',
            model: 'Multivan',
            year: '2024',
            price: 'Auf Anfrage',
            seats: ['Bis zu 6 Fahrgäste']
        }
    ];
}

// Используем тексты из heroContent для формы
const bookingContent = heroContent;
---

<section class="py-20 bg-gray-50" id="flotte">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                Unsere Premium-Flotte
            </h2>
            <p class="mt-4 max-w-2xl mx-auto text-xl text-gray-600">
                Wählen Sie das perfekte Fahrzeug für Ihre Ansprüche.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {premiumFleet.map((vehicle) => (
                    <VehicleCard vehicle={vehicle} />
            ))}
        </div>
    </div>

    <!-- Скрытая кнопка-триггер для модального окна -->
    <button id="fleet-modal-trigger" class="hidden" aria-hidden="true"></button>

    <!-- Модальное окно -->
    <Modal
            modalId="fleet-booking-modal"
            triggerId="fleet-modal-trigger"
            title="Premium Fahrzeug buchen"
            maxWidth="md"
            modalBgClass={COLOR_CLASSES.cardBackground}
    >
        <div class="pb-8">
            <!-- Враппер, который ждет данные о машине -->
            <FleetBookingWrapper
                    content={JSON.stringify(bookingContent)}
                    client:only="solid"
            />
        </div>
    </Modal>
</section>

<script>
    // Скрипт для связки кнопок "Details & Buchung" с модальным окном
    document.addEventListener('DOMContentLoaded', () => {
        const buttons = document.querySelectorAll('.js-fleet-book-btn');
        const modalTrigger = document.getElementById('fleet-modal-trigger');

        buttons.forEach(btn => {
            btn.addEventListener('click', (e) => {
                const target = e.currentTarget;
                const vehicleData = target.dataset.vehicle;

                if (vehicleData && modalTrigger) {
                    try {
                        const parsedData = JSON.parse(vehicleData);

                        // Сохраняем данные автомобиля в глобальном хранилище до открытия модального окна
                        window.currentSelectedCar = parsedData;

                        // Отправляем данные в Solid компонент
                        window.dispatchEvent(new CustomEvent('set-fleet-car', {
                            detail: parsedData
                        }));

                        // Открываем модальное окно (имитируя клик по триггеру)
                        modalTrigger.click();

                    } catch (err) {
                        console.error('Error parsing vehicle data:', err);
                    }
                }
            });
        });
    });
</script>