/* ----------------------------------------------------------------
   Le Shed — Objets v5-bach
   Charge les SVGs de assets/shapes/v5-bach, les inline dans le DOM,
   et répartit leurs formes unitaires entre deux layers (under/over)
   pour que chaque objet traverse le contenu.

   Horizontaux → côtés gauche et droit
   Verticaux   → centre (entre les colonnes)

   Chaque objet a 5 formes unitaires (index 0..4).
   Formes 0,1,2 → layer under (z-index:-1)
   Formes 3,4   → layer over  (z-index:20)
   ---------------------------------------------------------------- */

(function () {

    /* ----------------------------------------------------------------
       Catalogue de placement
       side   : 'left' | 'right' | 'center'
       x      : décalage depuis le bord (px, peut être négatif pour déborder)
       y      : position verticale depuis le haut du layout (px)
       size   : largeur cible en px (hauteur proportionnelle)
       splitAt: index de la première forme qui passe en "over" (défaut: 3)
    ---------------------------------------------------------------- */
    var CATALOGUE = [
        // --- Horizontaux gauche ---
        { file: 'horizontaux/Group.svg',    side: 'left',   x: -100, y: 180,  size: 255, speed: -1   },
        { file: 'horizontaux/Group-3.svg',  side: 'left',   x: -90,  y: 550,  size: 225, speed:  1.5 },
        { file: 'horizontaux/Group-6.svg',  side: 'left',   x: -110, y: 950,  size: 270, speed: -1.5 },
        { file: 'horizontaux/Group-9.svg',  side: 'left',   x: -95,  y: 1380, size: 240, speed:  1   },
        { file: 'horizontaux/Group-7.svg',  side: 'left',   x: -100, y: 1780, size: 245, speed: -1.5 },

        // --- Horizontaux droite ---
        { file: 'horizontaux/Group-2.svg',  side: 'right',  x: -90,  y: 350,  size: 270, speed:  1.5 },
        { file: 'horizontaux/Group-5.svg',  side: 'right',  x: -105, y: 750,  size: 245, speed: -1   },
        { file: 'horizontaux/Group-8.svg',  side: 'right',  x: -95,  y: 1150, size: 255, speed:  1   },
        { file: 'horizontaux/Group-10.svg', side: 'right',  x: -100, y: 1580, size: 285, speed: -1.5 },
        { file: 'horizontaux/Group-4.svg',  side: 'right',  x: -90,  y: 1950, size: 240, speed:  1.5 },

        // --- Verticaux centre ---
        { file: 'verticaux/Group.svg',      side: 'center', x: -30,  y: 280,  size: 120, speed:  1   },
        { file: 'verticaux/Group-3.svg',    side: 'center', x:  40,  y: 650,  size: 115, speed: -1.5 },
        { file: 'verticaux/Group-6.svg',    side: 'center', x: -20,  y: 1050, size: 125, speed:  1.5 },
        { file: 'verticaux/Group-9.svg',    side: 'center', x:  35,  y: 1450, size: 118, speed: -1   },
        { file: 'verticaux/Group-12.svg',   side: 'center', x: -35,  y: 1850, size: 120, speed:  1   },
        { file: 'verticaux/Group-4.svg',    side: 'center', x:  25,  y: 2200, size: 115, speed: -1.5 },
    ];

    /* ----------------------------------------------------------------
       Parse un SVG depuis le dictionnaire inline (pas de fetch)
    ---------------------------------------------------------------- */
    function loadSVG(key) {
        var data = window.LeShedObjets2Data;
        if (!data || !data[key]) {
            console.warn('LeShedObjets2: SVG non trouvé:', key);
            return Promise.resolve(null);
        }
        var parser = new DOMParser();
        var doc = parser.parseFromString(data[key], 'image/svg+xml');
        var svgEl = doc.querySelector('svg');
        if (!svgEl) return Promise.resolve(null);
        var topG = svgEl.querySelector('svg > g');
        if (!topG) return Promise.resolve(null);
        var shapes = Array.from(topG.children).filter(function (c) {
            return c.tagName === 'g';
        });
        return Promise.resolve({ svgEl: svgEl, shapes: shapes });
    }

    /* ----------------------------------------------------------------
       Crée un <svg> clone avec les formes données, positionné en absolute
    ---------------------------------------------------------------- */
    function makeSVGFragment(sourceSVG, shapes, spec, naturalW, naturalH) {
        var targetW = spec.size;
        var targetH = Math.round(naturalH * (targetW / naturalW));

        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('viewBox', '0 0 ' + naturalW + ' ' + naturalH);
        svg.setAttribute('width', targetW);
        svg.setAttribute('height', targetH);
        svg.setAttribute('fill', 'none');
        if (spec.speed !== undefined) svg.setAttribute('data-rellax-speed', spec.speed);
        svg.style.cssText = 'position:absolute;pointer-events:none;';

        // Position horizontale
        if (spec.side === 'left') {
            svg.style.left = spec.x + 'px';
        } else if (spec.side === 'right') {
            svg.style.right = spec.x + 'px';
        } else {
            // center : centré entre les colonnes (centre de la page)
            svg.style.left = '50%';
            svg.style.marginLeft = (spec.x - targetW / 2) + 'px';
        }
        svg.style.top = spec.y + 'px';

        // Copie les defs si présents
        var defs = sourceSVG.querySelector('defs');
        if (defs) svg.appendChild(defs.cloneNode(true));

        shapes.forEach(function (g) {
            svg.appendChild(g.cloneNode(true));
        });

        return svg;
    }

    /* ----------------------------------------------------------------
       Inject principal
    ---------------------------------------------------------------- */
    function injectObjets2() {
        var layout = document.querySelector('.layout');
        if (!layout) return Promise.resolve();

        // Layer under : position absolute dans le layout, z-index négatif
        var layerUnder = document.createElement('div');
        layerUnder.className = 'objets2-layer objets2-layer--under';
        layerUnder.style.cssText =
            'position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:-1';

        // Layer over : position absolute dans le layout, z-index positif
        var layerOver = document.createElement('div');
        layerOver.className = 'objets2-layer objets2-layer--over';
        layerOver.style.cssText =
            'position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:20';

        // Insérer avant le contenu pour que le z-index fonctionne
        layout.insertBefore(layerUnder, layout.firstChild);
        layout.appendChild(layerOver);

        var promises = CATALOGUE.map(function (spec) {
            return loadSVG(spec.file).then(function (result) {
                if (!result) return;
                var shapes = result.shapes;
                var svgEl = result.svgEl;
                var naturalW = parseFloat(svgEl.getAttribute('width'));
                var naturalH = parseFloat(svgEl.getAttribute('height'));
                var splitAt = spec.splitAt !== undefined ? spec.splitAt : 3;

                var shapesUnder = shapes.slice(0, splitAt);
                var shapesOver  = shapes.slice(splitAt);

                if (shapesUnder.length) {
                    layerUnder.appendChild(
                        makeSVGFragment(svgEl, shapesUnder, spec, naturalW, naturalH)
                    );
                }
                if (shapesOver.length) {
                    layerOver.appendChild(
                        makeSVGFragment(svgEl, shapesOver, spec, naturalW, naturalH)
                    );
                }
            });
        });

        return Promise.all(promises);
    }

    window.LeShedObjets2 = { inject: injectObjets2 };

}());