ludikevent_crm/assets/reserve.js

import './reserve.scss';
import { UtmEvent, UtmAccount } from "./tools/UtmEvent.js";
import { CookieBanner } from "./tools/CookieBanner.js";
import * as Turbo from "@hotwired/turbo";

// --- DÉTECTION BOT / PERFORMANCE ---
const isLighthouse = () => {
    if (typeof navigator === 'undefined' || !navigator.userAgent) return false;
    const userAgent = navigator.userAgent.toLowerCase();
    const patterns = ['chrome-lighthouse', 'google/lighthouse', 'lighthouse', 'pagespeed', 'headless', 'webdriver'];
    return patterns.some(pattern => userAgent.includes(pattern));
};

// --- GESTION DYNAMIQUE DE SENTRY ---
const toggleSentry = async (status) => {
    if (isLighthouse()) return;

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

        if (status === 'accepted') {
            if (!window.SentryInitialized) {
                window.sentryClient = Sentry.init({
                    dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
                    tunnel: "/sentry-tunnel",
                    integrations: [Sentry.browserTracingIntegration()],
                    tracesSampleRate: 1.0,
                });
                window.SentryInitialized = true;
                console.log("✔️ Sentry initialisé et activé");
            } else {
                // Réactivation si déjà chargé
                if (window.sentryClient) window.sentryClient.getOptions().enabled = true;
                console.log("✔️ Sentry ré-activé");
            }
        }

        if (status === 'refused' && window.SentryInitialized) {
            // Désactivation sans décharger le script
            if (window.sentryClient) window.sentryClient.getOptions().enabled = false;
            console.log("🛑 Sentry désactivé (Client muet)");
        }
    } catch (e) {
        console.warn("Sentry toggle failed", e);
    }
};

const initImageLoader = () => {
    // On cible uniquement les images à l'intérieur de la balise <main>
    const mainContainer = document.querySelector('main');
    if (!mainContainer) return;

    const images = mainContainer.querySelectorAll('img:not(.loaded)');


    console.log(images);
    images.forEach(img => {
        // Sécurité : si l'image est déjà chargée (cache), on marque et on skip
        if (img.complete) {
            img.classList.add('loaded');
            img.style.opacity = '1';
            return;
        }

        // 1. Préparation du parent (doit être relatif pour le loader absolu)
        const parent = img.parentElement;
        if (!parent) return;
        parent.classList.add('relative', 'overflow-hidden', 'bg-gray-50');

        // 2. Création du Loader (Spinner Tailwind)
        const loader = document.createElement('div');
        loader.id = `loader-${Math.random().toString(36).substr(2, 9)}`;
        loader.className = 'absolute inset-0 flex items-center justify-center z-10 bg-gray-50 transition-opacity duration-500';
        loader.innerHTML = `
            <div class="flex flex-col items-center gap-2">
                <div class="w-7 h-7 border-3 border-slate-200 border-t-slate-800 rounded-full animate-spin"></div>
            </div>
        `;

        parent.insertBefore(loader, img);

        // 3. État initial de l'image (invisible)
        img.classList.add('opacity-0', 'transition-opacity', 'duration-700');

        // 4. Gestionnaire de fin de chargement
        img.onload = () => {
            img.classList.replace('opacity-0', 'opacity-100');
            img.classList.add('loaded');
            loader.classList.add('opacity-0');
            setTimeout(() => loader.remove(), 500);
        };

        // Gestion de l'erreur
        img.onerror = () => {
            loader.innerHTML = '<span class="text-[10px] text-gray-400 font-medium uppercase">Erreur</span>';
        };
    });
};
// --- LOGIQUE DU LOADER TURBO ---
const initLoader = () => {
    if (document.getElementById('turbo-loader')) return;

    const 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-[#f39e36] border-t-transparent rounded-full animate-spin"></div>
            <img src="/provider/images/favicon.webp" class="w-12 h-12 relative z-10 animate-pulse" alt="Logo">
        </div>
    `;
    document.body.appendChild(loaderEl);

    document.addEventListener("turbo:click", () => {
        loaderEl.classList.replace('opacity-0', 'opacity-100');
        loaderEl.classList.remove('pointer-events-none');
    });

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

    document.addEventListener("turbo:load", hideLoader);
    document.addEventListener("turbo:render", hideLoader);
};

// --- LOGIQUE INTERFACE (Menu, Filtres, Redirect, Register) ---
const initMobileMenu = () => {
    const btn = document.getElementById('menu-button');
    const menu = document.getElementById('mobile-menu');
    if (btn && menu) {
        btn.onclick = null;
        btn.addEventListener('click', () => {
            const isExpanded = btn.getAttribute('aria-expanded') === 'true';
            btn.setAttribute('aria-expanded', !isExpanded);
            menu.classList.toggle('hidden');
        });
    }
};

const initCatalogueSearch = () => {
    const filters = document.querySelectorAll('.filter-btn');
    const products = document.querySelectorAll('.product-item');
    const emptyMsg = document.getElementById('empty-msg');
    if (filters.length === 0) return;
    filters.forEach(btn => {
        btn.onclick = () => {
            const category = btn.getAttribute('data-filter').toLowerCase();
            let count = 0;
            filters.forEach(f => {
                f.classList.replace('bg-slate-900', 'bg-white');
                f.classList.replace('text-white', 'text-slate-500');
            });
            btn.classList.replace('bg-white', 'bg-slate-900');
            btn.classList.replace('text-slate-500', 'text-white');
            products.forEach(item => {
                const itemCat = (item.getAttribute('data-category') || '').toLowerCase();
                const isVisible = category === 'all' || itemCat.includes(category);
                item.style.display = isVisible ? 'block' : 'none';
                if (isVisible) count++;
            });
            if (emptyMsg) count === 0 ? emptyMsg.classList.remove('hidden') : emptyMsg.classList.add('hidden');
        };
    });
};

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);
    }
};

const initRegisterLogic = () => {
    const siretContainer = document.getElementById('siret-container');
    const typeRadios = document.querySelectorAll('input[name="type"]');
    if (!siretContainer || typeRadios.length === 0) return;
    const updateSiretVisibility = () => {
        const selectedType = document.querySelector('input[name="type"]:checked')?.value;
        if (selectedType === 'buisness') {
            siretContainer.classList.remove('hidden');
            siretContainer.querySelector('input')?.setAttribute('required', 'required');
        } else {
            siretContainer.classList.add('hidden');
            siretContainer.querySelector('input')?.removeAttribute('required');
        }
    };
    typeRadios.forEach(radio => radio.addEventListener('change', updateSiretVisibility));
    updateSiretVisibility();
};

// --- INITIALISATION GLOBALE ---
document.addEventListener('DOMContentLoaded', () => {
    initLoader();
    initImageLoader();
    // Enregistrement Custom Elements
    if (!customElements.get('utm-event')) customElements.define('utm-event', UtmEvent);
    if (!customElements.get('utm-account')) customElements.define('utm-account', UtmAccount);
    if (!customElements.get('cookie-banner')) customElements.define('cookie-banner', CookieBanner);

    // Initialisation Sentry basée sur le choix existant
    const currentConsent = sessionStorage.getItem('ldk_cookie');
    if (currentConsent) toggleSentry(currentConsent);

    // Écouteurs pour changements de choix cookies
    window.addEventListener('cookieAccepted', () => toggleSentry('accepted'));
    window.addEventListener('cookieRefused', () => toggleSentry('refused'));
});

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

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