@extends('layouts.public')

@section('title', 'Catalogues')

@section('content')

{{-- Factory pour éviter "catalogSlider is not defined" --}}
<script>
window.catalogSlider = function(total, trackId) {
    return {
        total: Number(total) || 0,
        trackId: String(trackId || ''),
        currentIndex: 0,
        itemWidth: 0,
        maxIndex: 0,
        init() {
            const self = this;
            setTimeout(() => this.updateDimensions(), 40);
            window.addEventListener('resize', () => this.updateDimensions());
        },
        updateDimensions() {
            const track = document.getElementById(this.trackId);
            if (!track || !track.children.length) {
                this.itemWidth = 0;
                this.maxIndex = 0;
                this.currentIndex = 0;
                return;
            }
            const first = track.children[0];
            const style = getComputedStyle(track);
            const gap = parseFloat(style.columnGap || style.gap) || 0;
            const rect = first.getBoundingClientRect();
            this.itemWidth = rect.width + gap;
            const container = track.parentElement || track;
            const containerWidth = container.getBoundingClientRect().width || window.innerWidth;
            const visible = Math.max(1, Math.floor(containerWidth / this.itemWidth));
            this.maxIndex = Math.max(0, this.total - visible);
            if (this.currentIndex > this.maxIndex) this.currentIndex = this.maxIndex;
            if (this.currentIndex < 0) this.currentIndex = 0;
        },
        prevSlide() {
            if (this.itemWidth === 0) this.updateDimensions();
            this.currentIndex = Math.max(0, this.currentIndex - 1);
        },
        nextSlide() {
            if (this.itemWidth === 0) this.updateDimensions();
            this.currentIndex = Math.min(this.maxIndex, this.currentIndex + 1);
        }
    };
};
</script>

<div class="mt-10 space-y-16">
    @foreach($categories as $category)
        <div
            x-data="catalogSlider({{ $category->catalogs->count() }}, 'cat-track-{{ $category->id }}')"
            x-init="init()"
            cmass=""
        >
            <div class="relative flex items-center justify-between md:px-10 px-5 mb-10">
                <h2 class="md:text-2xl tracking-wider flex items-center gap-5">
                    <div>
                        <svg class="w-7" viewBox="0 0 32 43" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M22 22.907L4 9V35L22 22.907Z" fill="#ED1D24" stroke="#ED1D24" stroke-width="4"/>
                        </svg>
                    </div>
                    <span>{{ $category->name }}</span>
                    @if(!$loop->first)
                    @include('backgrounds.bg-7')
                    @endif
                </h2>
                @if($category->catalogs->count() > 0)
                <div class="md:flex hidden gap-2">
                    <button
                        x-on:click="prevSlide"
                        class="p-5 rounded-full bg-white/5 hover:bg-white/10 border border-white/20 transition-colors"
                        type="button"
                    >
                        @include('icons.naked-arrow-left', ['classes' => 'h-4'])
                    </button>
                    <button
                        x-on:click="nextSlide"
                        class="p-5 rounded-full bg-white/5 hover:bg-white/10 border border-white/20  transition-colors"
                        type="button"
                    >
                        @include('icons.naked-arrow-right', ['classes' => 'h-4'])
                    </button>
                </div>
                @endif
            </div>
            <div class="overflow-hidden md:mx-10 mx-5 relative">
                <div class="absolute hidden md:block top-0 right-0 h-full w-50 pointer-events-none bg-gradient-to-l from-black to-transparent z-10"></div>
                <div
                    id="cat-track-{{ $category->id }}"
                    class="flex transition-transform duration-500 ease-in-out gap-x-10"
                    :style="`transform: translateX(-${currentIndex * itemWidth}px)`"
                >
                    @forelse($category->catalogs as $catalog)
                        <div class="flex-shrink-0 md:w-[350px] w-full max-w-full bg-[image:var(--brand-gradient-2)] overflow-hidden  flex flex-col">
                            <div class="relative">
                                <img src="{{ $catalog->banner }}" alt="{{ $catalog->title }}" class="w-full h-40 object-cover bg-black">
                                <div class="absolute inset-0 bg-gradient-to-t from-brand-dark to-transparent"></div>
                            </div>
                            <div class="flex-1 flex flex-col justify-between gap-5 md:p-10 p-5">
                                <div class="text-center tracking-wider md:text-lg">{{ $catalog->title }}</div>
                                <div class="md:flex justify-center gap-2">
                                    <a
                                        href="#"
                                        x-on:click.prevent="$dispatch('open-book', { pdf: '{{ $catalog->pdf }}' })"
                                        class="p-4 mb-2 md:mb-0 text-sm flex items-center tracking-wider justify-center gap-4 flex-1 border transition-colors hover:bg-white/10 border-white"
                                    >
                                        @include('icons.open-pdf')
                                        Ouvrir
                                    </a>
                                    <a href="{{ $catalog->pdf }}" download target="_blank" class="p-4 tracking-wider text-sm flex items-center justify-center gap-4 flex-1 border transition-colors hover:bg-white/10 border-white">
                                       @include('icons.download-pdf')
                                        Télécharger
                                    </a>
                                </div>
                            </div>
                        </div>
                    @empty
                    <div class="text-gray-400 font-open-sans">Aucun catalogue dans cette catégorie.</div>
                    @endforelse
                </div>
                
                @if($category->catalogs->count() > 0)
                    <div class="flex md:hidden mt-10 justify-center gap-2">
                        <button
                            x-on:click="prevSlide"
                            class="p-5 rounded-full bg-white/5 hover:bg-white/10 border border-white/20 transition-colors"
                            type="button"
                        >
                            @include('icons.naked-arrow-left', ['classes' => 'h-4'])
                        </button>
                        <button
                            x-on:click="nextSlide"
                            class="p-5 rounded-full bg-white/5 hover:bg-white/10 border border-white/20  transition-colors"
                            type="button"
                        >
                            @include('icons.naked-arrow-right', ['classes' => 'h-4'])
                        </button>
                    </div>
                @endif
            </div>
        </div>
    @endforeach
</div>

<!-- ======= Desktop modal (BOOK FLIP) : EXACT ORIGINAL LOGIC (no changes) ======= -->
<div
    x-data="{
        show: false,
        pdfUrl: null,
        loading: false,
        open(e) {
            // ONLY open desktop modal on desktop-width (preserve original logic otherwise)
            if (window.innerWidth < 768) return;
            this.pdfUrl = e.detail.pdf;
            this.show = true;
            this.loading = true;
            this.$nextTick(() => loadPdfBook(this.pdfUrl, () => { this.loading = false; }));
        },
        close() {
            this.show = false;
            document.getElementById('book').innerHTML = '';
            this.loading = false;
        }
    }"
    x-init="
        window.addEventListener('open-book', e => open(e));
    "
    x-show="show"
    x-transition.opacity
    class="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
    style="display: none;"
>
    <button
        x-on:click="close"
        class="absolute top-5 right-5 text-white text-3xl bg-black/60 rounded-full w-12 h-12 flex items-center justify-center"
        aria-label="Fermer"
        type="button"
    >&#10005;</button>
    <div class="w-full h-full flex items-center justify-center">
        <template x-if="loading">
            <div class="flex flex-col items-center justify-center">
                <svg class="animate-spin h-12 w-12 text-white mb-4" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="white" stroke-width="4" fill="none"/>
                    <path class="opacity-75" fill="white" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
                </svg>
                <span class="tracking-wider text-lg">Chargement du livre...</span>
            </div>
        </template>
        <div class="bookWrapper transition-all duration-500" id="book" x-show="!loading"></div>
    </div>
</div>

<!-- ======= Mobile modal (SLIDER) - separate, arrows visible + swipe ======= -->
<div
    x-data="{
        show: false,
        pdfUrl: null,
        loading: false,
        sliderIndex: 0,
        sliderCount: 0,
        open(e) {
            // ONLY open mobile modal on small screens
            if (window.innerWidth >= 768) return;
            this.pdfUrl = e.detail.pdf;
            this.show = true;
            this.loading = true;
            this.$nextTick(() => {
                loadPdfSlider(this.pdfUrl, (count) => {
                    this.sliderCount = count;
                    this.sliderIndex = 0;
                    this.loading = false;
                    // show first slide
                    showSliderIndex(0);
                });
            });
        },
        close() {
            this.show = false;
            document.getElementById('book-mobile').innerHTML = '';
            this.loading = false;
            this.sliderIndex = 0;
            this.sliderCount = 0;
            window._mobileSliderImgs = undefined;
        },
        prev() {
            if (this.sliderCount === 0) return;
            this.sliderIndex = (this.sliderIndex - 1 + this.sliderCount) % this.sliderCount;
            showSliderIndex(this.sliderIndex);
        },
        next() {
            if (this.sliderCount === 0) return;
            this.sliderIndex = (this.sliderIndex + 1) % this.sliderCount;
            showSliderIndex(this.sliderIndex);
        }
    }"
    x-init="
        window.addEventListener('open-book', e => open(e));
    "
    x-show="show"
    x-transition.opacity
    class="fixed inset-0 z-50 bg-black/95 flex items-center justify-center md:hidden"
    style="display: none;"
>
    <button
        x-on:click="close"
        class="absolute top-5 right-5 text-white text-3xl bg-black/60 rounded-full w-12 h-12 flex items-center justify-center z-[10050]"
        aria-label="Fermer"
        type="button"
    >&#10005;</button>

    <!-- mobile arrows (au-dessus, pointer-events auto, visible) -->
    <div class="absolute inset-0 z-[10000] pointer-events-none">
        <div class="flex items-center justify-between h-full px-4 pointer-events-auto">
            <button x-on:click="prev()" class="p-4 rounded-full bg-black/60 text-white z-[10010] pointer-events-auto" aria-label="Précédent">
                @include('icons.naked-arrow-left', ['classes' => 'h-5'])
            </button>
            <button x-on:click="next()" class="p-4 rounded-full bg-black/60 text-white z-[10010] pointer-events-auto" aria-label="Suivant">
                @include('icons.naked-arrow-right', ['classes' => 'h-5'])
            </button>
        </div>

        <!-- pagination mobile -->
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 pointer-events-auto z-[10010]">
            <div class="bg-black/60 text-white px-4 py-2 rounded-full text-sm" x-text="sliderCount ? `${sliderIndex + 1} / ${sliderCount}` : ''"></div>
        </div>
    </div>

    <div class="w-full h-full flex items-center justify-center px-4">
        <template x-if="loading">
            <div class="flex flex-col items-center justify-center">
                <svg class="animate-spin h-12 w-12 text-white mb-4" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="white" stroke-width="4" fill="none"/>
                    <path class="opacity-75" fill="white" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
                </svg>
                <span class="tracking-wider text-lg">Chargement du livre...</span>
            </div>
        </template>
        <div class="bookWrapper transition-all duration-500 w-full max-w-3xl" id="book-mobile" x-show="!loading"></div>
    </div>
</div>

<style>
    .bookWrapper {
        height: 85vh;
        aspect-ratio: 7 / 5;
        max-width: 100%;
        perspective: 2000px;
        position: relative;
    }
    .page {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform-style: preserve-3d;
        transform-origin: left center;
        cursor: pointer;
    }
    .pageFace {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2em;
        border: 1px solid #ccc;
        background: #fff;
        background-size: cover;
        background-position: center;
    }
    .back {
        transform: rotateY(180deg);
    }

    /* mobile slider */
    .mobile-slider {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .mobile-slider img {
        max-height: 80vh;
        max-width: 100%;
        object-fit: contain;
        display: none;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>

<!-- ===== Desktop loadPdfBook: EXACTLY like your original (background-image approach) ===== -->
<script>
async function loadPdfBook(pdfUrl, onReady) {
    const book = document.getElementById("book");
    if (!book) return;
    book.innerHTML = "";
    book.style.transform = "translateX(0)";
    book.style.marginLeft = "auto";
    book.style.marginRight = "auto";
    book.style.justifyContent = "center";
    const response = await fetch(pdfUrl);
    const arrayBuffer = await response.arrayBuffer();
    const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

    const pages = [];
    let currentPageIdx = 0;

    let numPages = pdf.numPages;
    let isOdd = numPages % 2 === 1;

    for (let i = 1; i <= numPages; i += 2) {
        const pageNumFront = i;
        const pageNumBack = i + 1;

        const pageDiv = document.createElement("div");
        pageDiv.classList.add("page");
        book.appendChild(pageDiv);

        const front = document.createElement("div");
        front.classList.add("pageFace", "front");
        pageDiv.appendChild(front);

        const back = document.createElement("div");
        back.classList.add("pageFace", "back");
        pageDiv.appendChild(back);

        // Page front
        const pageFront = await pdf.getPage(pageNumFront);
        const viewportF = pageFront.getViewport({ scale: 2 });
        const canvasF = document.createElement("canvas");
        canvasF.width = viewportF.width;
        canvasF.height = viewportF.height;
        await pageFront.render({
            canvasContext: canvasF.getContext("2d"),
            viewport: viewportF,
        }).promise;
        front.style.backgroundImage = `url(${canvasF.toDataURL()})`;

        // Page back
        if (pageNumBack <= pdf.numPages) {
            const pageBack = await pdf.getPage(pageNumBack);
            const viewportB = pageBack.getViewport({ scale: 2 });
            const canvasB = document.createElement("canvas");
            canvasB.width = viewportB.width;
            canvasB.height = viewportB.height;
            await pageBack.render({
                canvasContext: canvasB.getContext("2d"),
                viewport: viewportB,
            }).promise;
            back.style.backgroundImage = `url(${canvasB.toDataURL()})`;
        } else if (isOdd) {
            // Si impair, mettre l'image de fin dans le back du dernier élément
            back.style.backgroundImage = "url('/images/findepage.jpg')";
        }

        pages.push(pageDiv);
    }

    const lastFaceIdx = pages.length - 1;

    if (typeof onReady === 'function') onReady();

    function updateBookPosition(idx) {
        // Première face : décalé à gauche, dernière face : décalé à droite, sinon centré
        if (pages.length === 1) {
            gsap.to(book, { x: -150, duration: 0.5, ease: "power2.out" });
        } else if (idx === 0) {
            gsap.to(book, { x: -150, duration: 0.5, ease: "power2.out" });
        } else if (idx === lastFaceIdx) {
            gsap.to(book, { x: 150, duration: 0.5, ease: "power2.out" });
        } else {
            gsap.to(book, { x: 0, duration: 0.5, ease: "power2.out" });
        }
    }

    // Animation initiale
    updateBookPosition(0);

    // Initialisation z-index et rotation
    pages.forEach((p, i) => {
        p._rotated = false;
        p._animating = false;
        p.style.zIndex = pages.length - i;
    });

    function updateZ() {
        const turned = pages.filter((p) => p._rotated);
        const unturned = pages.filter((p) => !p._rotated);
        turned.forEach((p, i) => (p.style.zIndex = unturned.length + i + 1));
        unturned.forEach((p, i) => (p.style.zIndex = unturned.length - i));
    }

    pages.forEach((p, idx) => {
        p.addEventListener("click", () => {
            if (p._animating) return;
            p._animating = true;
            if (!p._rotated) {
                gsap.to(p, {
                    duration: 1,
                    rotationY: -180,
                    onStart: () => {
                        p.style.zIndex = pages.length + 1000;
                    },
                    onComplete: () => {
                        updateZ();
                        p._animating = false;
                    },
                });
                p._rotated = true;
                currentPageIdx = idx + 1;
            } else {
                gsap.to(p, {
                    duration: 1,
                    rotationY: 0,
                    onStart: () => {
                        p.style.zIndex = pages.length + 1000;
                    },
                    onComplete: () => {
                        updateZ();
                        p._animating = false;
                    },
                });
                p._rotated = false;
                currentPageIdx = idx;
            }
            if (currentPageIdx > lastFaceIdx) {
                updateBookPosition(lastFaceIdx);
            } else {
                updateBookPosition(currentPageIdx);
            }
        });
    });
}
</script>

<!-- ===== Mobile slider implementation (separate) ===== -->
<script>
async function loadPdfSlider(pdfUrl, onReady) {
    const book = document.getElementById('book-mobile');
    if (!book) return 0;
    book.innerHTML = '';

    const slider = document.createElement('div');
    slider.className = 'mobile-slider';
    book.appendChild(slider);

    const response = await fetch(pdfUrl);
    const arrayBuffer = await response.arrayBuffer();
    const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

    const imgs = [];
    let numPages = pdf.numPages;
    let isOdd = numPages % 2 === 1;

    for (let i = 1; i <= numPages; i++) {
        const page = await pdf.getPage(i);
        const scale = 1.5;
        const viewport = page.getViewport({ scale });
        const canvas = document.createElement('canvas');
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        await page.render({
            canvasContext: canvas.getContext('2d'),
            viewport: viewport
        }).promise;

        const img = document.createElement('img');
        img.src = canvas.toDataURL('image/png');
        img.alt = `Page ${i}`;
        img.style.display = 'none';
        slider.appendChild(img);
        imgs.push(img);
    }

    // Si impair, remplacer le src du dernier img par l'image de fin
    if (isOdd && imgs.length > 0) {
        imgs[imgs.length - 1].src = '/images/findepage.png';
        imgs[imgs.length - 1].alt = 'Fin de livre';
    }

    if (imgs.length > 0) imgs[0].style.display = 'block';
    window._mobileSliderImgs = imgs;

    // swipe handling
    let startX = 0, startY = 0, isMoving = false;
    const threshold = 40, restraint = 100;
    slider.addEventListener('touchstart', (e) => {
        if (!e.touches || e.touches.length > 1) return;
        const t = e.touches[0];
        startX = t.clientX;
        startY = t.clientY;
        isMoving = true;
    }, { passive: true });

    slider.addEventListener('touchend', (e) => {
        if (!isMoving) return;
        const t = e.changedTouches && e.changedTouches[0];
        if (!t) return;
        const distX = t.clientX - startX;
        const distY = t.clientY - startY;
        isMoving = false;
        if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
            const currentIdx = imgs.findIndex(im => im.style.display === 'block');
            if (distX < 0) {
                const nextIdx = (currentIdx + 1) % imgs.length;
                showSliderIndex(nextIdx);
            } else {
                const prevIdx = (currentIdx - 1 + imgs.length) % imgs.length;
                showSliderIndex(prevIdx);
            }
        }
    }, { passive: true });

    if (typeof onReady === 'function') onReady(imgs.length);
    return imgs.length;
}

function showSliderIndex(idx) {
    const imgs = window._mobileSliderImgs || [];
    if (!imgs.length) return;
    imgs.forEach((im, i) => {
        if (i === idx) {
            im.style.display = 'block';
            im.style.opacity = 0;
            gsap.to(im, { opacity: 1, duration: 0.22 });
        } else {
            im.style.display = 'none';
            im.style.opacity = 1;
        }
    });

    // Update any visible Alpine mobile modal pagination (best-effort)
    const mobileModal = document.querySelector('[x-data*="sliderIndex"]');
    // we avoid fragile direct mutation of Alpine internals here
}
</script>

@endsection