ludikevent_crm/assets/reserve.js

import './reserve.scss';
// On ne fait plus d'import statique de Sentry ici
import {UtmEvent, UtmAccount} from "./tools/UtmEvent.js";
import * as Turbo from "@hotwired/turbo";

// --- INITIALISATION SENTRY (OPTIMISÉE BOT/LIGHTHOUSE) ---
const initSentry = async () => {
    // On vérifie si on n'est pas un bot (la variable est passée par le PHP/Twig ou détectée en JS)
    const isBot = /bot|googlebot|crawler|spider|robot|crawling|lighthouse/i.test(navigator.userAgent);

    if (!isBot) {
        try {
            const Sentry = await import("@sentry/browser");

            Sentry.init({
                dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
                tunnel: "/sentry-tunnel",
                integrations: [Sentry.browserTracingIntegration()],
                tracesSampleRate: 1.0,
            });
        } catch (e) {

        }
    }
};

// --- LOGIQUE DU REDIRECT ---
const initAutoRedirect = () => {
    const container = document.getElementById('payment-check-container');
    if (container && container.dataset.autoRedirect) {
        const url = container.dataset.autoRedirect;
        setTimeout(() => {
            if (document.getElementById('payment-check-container')) {
                Turbo.visit(url);
            }
        }, 10000);
    }
}

// --- LOGIQUE DU LOADER TURBO ---
const initLoader = () => {
    let loaderEl = document.getElementById('turbo-loader');
    if (!loaderEl) {
        loaderEl = document.createElement('div');
        loaderEl.id = 'turbo-loader';
        loaderEl.className = 'fixed inset-0 z-[9999] flex items-center justify-center bg-white transition-opacity duration-300 opacity-0 pointer-events-none';
        loaderEl.innerHTML = `
            <div class="relative flex items-center justify-center">
                <div class="absolute w-24 h-24 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
                <img src="/provider/images/favicon.png" class="w-12 h-12 relative z-10 animate-pulse" alt="Logo">
            </div>
        `;
        document.body.appendChild(loaderEl);
    }

    const showLoader = () => {
        loaderEl.classList.remove('opacity-0', 'pointer-events-none');
        loaderEl.classList.add('opacity-100');
    };

    const hideLoader = () => {
        setTimeout(() => {
            loaderEl.classList.remove('opacity-100');
            loaderEl.classList.add('opacity-0', 'pointer-events-none');
        }, 300);
    };

    document.addEventListener("turbo:click", showLoader);
    document.addEventListener("turbo:submit-start", showLoader);
    document.addEventListener("turbo:load", hideLoader);
    document.addEventListener("turbo:render", hideLoader);
};

// --- LOGIQUE DU MENU MOBILE ---
const initMobileMenu = () => {
    const btn = document.getElementById('menu-button');
    const menu = document.getElementById('mobile-menu');
    if (btn && menu) {
        btn.onclick = () => {
            const isExpanded = btn.getAttribute('aria-expanded') === 'true';
            btn.setAttribute('aria-expanded', !isExpanded);
            menu.classList.toggle('hidden');
        };
    }
};

// --- LOGIQUE FILTRE CATALOGUE ---
const initCatalogueSearch = () => {
    const filters = document.querySelectorAll('.filter-btn');
    const products = document.querySelectorAll('.product-item');
    const emptyMsg = document.getElementById('empty-msg');

    if (!filters.length) return;

    filters.forEach(btn => {
        btn.onclick = () => {
            const category = btn.getAttribute('data-filter').toLowerCase();
            let count = 0;

            filters.forEach(f => {
                f.classList.remove('bg-slate-900', 'text-white');
                f.classList.add('bg-white', 'text-slate-500');
            });
            btn.classList.add('bg-slate-900', 'text-white');
            btn.classList.remove('bg-white', 'text-slate-500');

            products.forEach(item => {
                const itemCat = item.getAttribute('data-category').toLowerCase();
                if (category === 'all' || itemCat.includes(category)) {
                    item.style.display = 'block';
                    count++;
                } else {
                    item.style.display = 'none';
                }
            });

            if (emptyMsg) {
                count === 0 ? emptyMsg.classList.remove('hidden') : emptyMsg.classList.add('hidden');
            }
        };
    });
};

// --- INITIALISATION ---
document.addEventListener('DOMContentLoaded', () => {
    initSentry(); // Appel asynchrone de Sentry
    initLoader();
    initMobileMenu();
    initCatalogueSearch();
    initAutoRedirect();

    if (!customElements.get('utm-event')) customElements.define('utm-event', UtmEvent);
    if (!customElements.get('utm-account')) customElements.define('utm-account', UtmAccount);
});

document.addEventListener('turbo:load', () => {
    initMobileMenu();
    initCatalogueSearch();
    initAutoRedirect();
});

document.addEventListener("turbo:before-cache", () => {
    document.querySelectorAll('.product-item').forEach(i => i.style.display = 'block');
    if (document.getElementById('empty-msg')) document.getElementById('empty-msg').classList.add('hidden');
});