{% extends 'base.html.twig' %}

{% block title %}{{ gallery.title }}{% endblock %}

{% block stylesheets %}
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
    />
    <link rel="stylesheet" href="{{ asset('css/leftSide.css') }}">
    <link rel="stylesheet" href="{{ asset('css/gallery-v2.css') }}">

    <style>
        /* Styles pour le loader */
        .gallery-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            backdrop-filter: blur(5px);
        }

        .loader-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #000000;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .loader-text {
            margin-top: 20px;
            font-size: 16px;
            color: #666;
            text-align: center;
        }

        .loader-progress {
            margin-top: 10px;
            width: 200px;
            height: 4px;
            background: #f3f3f3;
            border-radius: 2px;
            overflow: hidden;
        }

        .loader-progress-bar {
            height: 100%;
            background: #000000;
            width: 0;
            transition: width 0.3s ease;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Masquer la galerie pendant le chargement */
        .gallery-section {
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .gallery-section.loaded {
            opacity: 1;
        }

        /* Animation d'apparition des images */
        .img-cont {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .img-cont.fade-in {
            opacity: 1;
            transform: translateY(0);
        }

        /* Délai d'animation pour chaque colonne */
        .img-cont:nth-child(1) { transition-delay: 0.1s; }
        .img-cont:nth-child(2) { transition-delay: 0.2s; }
        .img-cont:nth-child(3) { transition-delay: 0.3s; }
    </style>
{% endblock %}

{% block body %}
    <!-- Loader -->
    <div class="gallery-loader" id="galleryLoader">
        <div class="loader-spinner"></div>
        <div class="loader-text">
            <div>Chargement des images...</div>
            <div id="loadingProgress">0 / {{ gallery.images|length }}</div>
        </div>
        <div class="loader-progress">
            <div class="loader-progress-bar" id="progressBar"></div>
        </div>
    </div>

    <div class="main-content">
        <div class="project-info">
            <h1 class="project-title">{{ gallery.title|upper }}</h1>
            {% if gallery.subtitle is defined and gallery.subtitle is not empty %}
                <h2 class="project-subtitle">{{ gallery.subtitle }}</h2>
            {% endif %}
            <p class="project-description">{{ gallery.description|raw|nl2br }}</p>
        </div>

        {# Créer des liens invisibles pour Fancybox dans l'ordre original #}
        <div style="display: none;">
            {% for image in gallery.images %}
                <a
                        href="{{ asset('uploads/images/' ~ image.filename) | imagine_filter('gallery_large') }}"
                        data-fancybox="gallery"
                        id="fancybox-image-{{ loop.index0 }}"
                        data-caption="{{ image.altText ?? gallery.title }}"
                ></a>
            {% endfor %}
        </div>

        <div class="gallery-section" id="gallerySection">
            <div class="album">
                <div class="responsive-container-block bg" id="galleryContainer">
                    {% if gallery.images %}
                        {# Stocker les données des images pour JavaScript #}
                        <div id="galleryData" style="display: none;"
                             data-images="{{ gallery.images|length }}">
                            {% for image in gallery.images %}
                                <div class="image-data"
                                     data-index="{{ loop.index0 }}"
                                     data-position="{{ loop.index }}"
                                     data-filename="{{ image.filename }}"
                                     data-alt="{{ image.altText ?? gallery.title }}"
                                     data-thumb="{{ asset('uploads/images/' ~ image.filename) | imagine_filter('gallery_thumb') }}"
                                     data-medium="{{ asset('uploads/images/' ~ image.filename) | imagine_filter('gallery_medium') }}">
                                </div>
                            {% endfor %}
                        </div>

                        {# Les colonnes seront générées par JavaScript #}
                        <div class="responsive-container-block img-cont" id="column1"></div>
                        <div class="responsive-container-block img-cont" id="column2"></div>
                        <div class="responsive-container-block img-cont" id="column3"></div>
                    {% else %}
                        <div class="responsive-container-block img-cont">
                            <p>Aucune image disponible pour cette galerie.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const loader = document.getElementById('galleryLoader');
            const gallerySection = document.getElementById('gallerySection');
            const progressBar = document.getElementById('progressBar');
            const loadingProgress = document.getElementById('loadingProgress');
            const galleryData = document.getElementById('galleryData');

            // Si aucune donnée de galerie, sortir
            if (!galleryData) {
                if (loader) loader.style.display = 'none';
                if (gallerySection) gallerySection.classList.add('loaded');
                return;
            }

            // Récupérer les données des images
            const imageDataElements = galleryData.querySelectorAll('.image-data');
            const imagesData = Array.from(imageDataElements).map(el => ({
                index: parseInt(el.getAttribute('data-index')),
                position: parseInt(el.getAttribute('data-position')),
                filename: el.getAttribute('data-filename'),
                alt: el.getAttribute('data-alt'),
                thumb: el.getAttribute('data-thumb'),
                medium: el.getAttribute('data-medium')
            }));

            const totalImages = imagesData.length;

            // Colonnes
            const column1 = document.getElementById('column1');
            const column2 = document.getElementById('column2');
            const column3 = document.getElementById('column3');

            // Fonction pour distribuer les images dans les colonnes
            function distributeImages() {
                // Vider les colonnes
                column1.innerHTML = '';
                column2.innerHTML = '';
                column3.innerHTML = '';

                // Afficher toutes les colonnes
                column1.style.display = 'flex';
                column2.style.display = 'flex';
                column3.style.display = 'flex';

                // Distribuer les images selon leur position
                imagesData.forEach(imageData => {
                    const position = imageData.position;
                    const isBig = position % 3 === 2; // Position 2, 5, 8, etc.

                    // Créer le lien et l'image
                    const link = document.createElement('a');
                    link.href = 'javascript:void(0);';
                    link.onclick = function() {
                        document.getElementById(`fancybox-image-${imageData.index}`).click();
                        return false;
                    };
                    link.setAttribute('data-position', position);
                    link.className = 'image-link';

                    const img = document.createElement('img');
                    img.className = `img${isBig ? ' img-big' : ''}`;
                    img.src = imageData.thumb;
                    img.alt = imageData.alt;
                    img.setAttribute('srcset', `${imageData.thumb} 400w, ${imageData.medium} 800w`);
                    img.setAttribute('sizes', '(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw');
                    img.setAttribute('loading', 'lazy');
                    img.setAttribute('data-gallery-image', '');

                    link.appendChild(img);

                    // Ajouter à la colonne appropriée
                    if (position % 3 === 1) { // Position 1, 4, 7, etc.
                        column1.appendChild(link);
                    } else if (position % 3 === 2) { // Position 2, 5, 8, etc.
                        column2.appendChild(link);
                    } else { // Position 3, 6, 9, etc.
                        column3.appendChild(link);
                    }
                });
            }

            // Fonction pour afficher en une seule colonne sur mobile
            function displayAsSingleColumn() {
                // Vider les colonnes
                column1.innerHTML = '';
                column2.innerHTML = '';
                column3.innerHTML = '';

                // Masquer les colonnes 2 et 3
                column1.style.display = 'flex';
                column2.style.display = 'none';
                column3.style.display = 'none';

                // Trier les images par position
                const sortedImages = [...imagesData].sort((a, b) => a.position - b.position);

                // Ajouter toutes les images à la première colonne
                sortedImages.forEach(imageData => {
                    const isBig = imageData.position % 3 === 2; // Position 2, 5, 8, etc.

                    const link = document.createElement('a');
                    link.href = 'javascript:void(0);';
                    link.onclick = function() {
                        document.getElementById(`fancybox-image-${imageData.index}`).click();
                        return false;
                    };
                    link.setAttribute('data-position', imageData.position);
                    link.className = 'image-link';

                    const img = document.createElement('img');
                    img.className = 'img'; // Toutes les images ont la même taille sur mobile
                    img.src = imageData.thumb;
                    img.alt = imageData.alt;
                    img.setAttribute('srcset', `${imageData.thumb} 400w, ${imageData.medium} 800w`);
                    img.setAttribute('sizes', '(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw');
                    img.setAttribute('loading', 'lazy');
                    img.setAttribute('data-gallery-image', '');

                    link.appendChild(img);
                    column1.appendChild(link);
                });
            }

            // Fonction pour gérer la disposition selon la taille de l'écran
            function handleLayout() {
                if (window.innerWidth <= 768) {
                    displayAsSingleColumn();
                } else {
                    distributeImages();
                }
            }

            // Initialiser la disposition
            handleLayout();

            // Écouter les changements de taille d'écran
            window.addEventListener('resize', handleLayout);

            // Gestion du chargement des images
            let loadedImages = 0;
            let allImagesLoaded = false;

            // Fonction pour mettre à jour la barre de progression
            function updateProgress() {
                const percentage = (loadedImages / totalImages) * 100;
                progressBar.style.width = percentage + '%';
                loadingProgress.textContent = `${loadedImages} / ${totalImages}`;
            }

            // Fonction pour masquer le loader et afficher la galerie
            function hideLoader() {
                if (allImagesLoaded) {
                    // Petite animation de finalisation
                    progressBar.style.width = '100%';
                    loadingProgress.textContent = `${totalImages} / ${totalImages}`;

                    setTimeout(() => {
                        loader.style.opacity = '0';
                        gallerySection.classList.add('loaded');

                        setTimeout(() => {
                            loader.style.display = 'none';

                            // Animer l'apparition des colonnes
                            const columns = document.querySelectorAll('.img-cont');
                            columns.forEach(column => {
                                if (column.style.display !== 'none') {
                                    column.classList.add('fade-in');
                                }
                            });
                        }, 300);
                    }, 500);
                }
            }

            // Fonction pour vérifier si une image est chargée
            function checkImagesLoaded() {
                const images = document.querySelectorAll('[data-gallery-image]');

                if (images.length === 0) {
                    allImagesLoaded = true;
                    hideLoader();
                    return;
                }

                let loaded = 0;

                function imageLoaded() {
                    loaded++;
                    loadedImages = loaded;
                    updateProgress();

                    if (loaded === images.length) {
                        allImagesLoaded = true;
                        hideLoader();
                    }
                }

                images.forEach(img => {
                    if (img.complete) {
                        imageLoaded();
                    } else {
                        img.addEventListener('load', imageLoaded);
                        img.addEventListener('error', imageLoaded);
                    }
                });
            }

            // Initialiser la barre de progression
            updateProgress();

            // Vérifier le chargement des images après leur création
            setTimeout(checkImagesLoaded, 100);

            // Timeout de sécurité (masquer le loader après 10 secondes max)
            setTimeout(() => {
                if (!allImagesLoaded) {
                    console.warn('Timeout du loader - certaines images n\'ont pas pu être chargées');
                    allImagesLoaded = true;
                    hideLoader();
                }
            }, 10000);

            // Initialisation de Fancybox
            Fancybox.bind('[data-fancybox="gallery"]', {});
        });
    </script>
{% endblock %}