{% extends 'base.html.twig' %}
{% block photoCounter %} <span class="feed-badge">{{ totalItems }}</span>{% endblock %}
{% block body %}
    <div class="page-content header-clear">
        <div class="content my-n1" style="padding-top: 0;">
            <!-- Floating Camera Icon -->
            <button class="gallery-toggle-icon" id="gallery-toggle-icon">
                <img src="{{ asset('images/visualization.png') }}" alt="Feed" style="width: 25px; height: 25px;">
            </button>
            <div class="gallery-container" id="gallery-container" data-current-page="{{ page }}" data-hash="{{ event.hash }}" data-page="timeline">
                {% for photo in eventPhotos %}
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4 gallery-item" data-photo-id="{{ photo.id }}">
                        <div class="gallery-code" data-glightbox="title: {{ photo.id }} - Photo at Grateful Events; description: Download or report this photo; href: {{ photo.photo|default(photo.thumbnail) }}">
                            <img src="{{ photo.thumbnail }}" alt="Event Photo {{ photo.id }}" class="img-fluid" data-full="{{ photo.photo|default(photo.thumbnail) }}">
                        </div>
                        <div class="desc-{{ photo.id }} row me-0 ms-0" style="display: none;">
                            <div class="col-xs-6">
                                <a class="btn btn-primary btn-full" href="{{ photo.photo|default(photo.thumbnail) }}">Download Photo</a>
                            </div>
                            <div class="col-xs-6" style="padding-top: 50px;">
                                <a href="#" class="btn btn-primary btn-full reportPhoto" data-reportPhotoId="{{ photo.id }}" style="background-color: #ff0000;">Report</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div id="loading" class="text-center mt-3" style="display: none;">
                <span class="loading-text">Loading more photos...</span>
            </div>
        </div>

        <!-- Lightbox Modal -->
        <div id="lightbox-modal" style="display: none;">
            <span class="close-btn">×</span>
            <div class="lightbox-content">
                <img src="" alt="Full Size Photo" id="lightbox-image">
                <div class="lightbox-description" id="lightbox-description"></div>
            </div>
        </div>

        <!-- Tour Overlay and Tooltip -->
        <div id="tour-overlay" style="display: none;">
            <div id="tour-tooltip" style="display: none;">
                SNAP A SHOT
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* [Styles unchanged, omitted for brevity] */
        #gallery-toggle-icon {
            background-color: #4abeb6;
            color: white;
            border: none;
            padding: 20px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            position: fixed;
            right: 10px;
            z-index: 950;
            font-size: 20px;
        }
        #gallery-toggle-icon:hover {
            background-color: #3da29f;
        }
        #gallery-toggle-icon.active {
            background-color: #50c1ba;
            color: #4abeb6;
        }

        .gallery-container {
            padding-bottom: 100px !important;
            padding: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            scroll-behavior: smooth;
        }
        .gallery-container.dual-view {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }
        .gallery-code {
            width: 100%;
            max-width: 95%;
            background-color: white;
            padding: 10px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .gallery-container.dual-view .gallery-code {
            width: calc(50% - 5px);
            max-width: none;
        }
        .gallery-code img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 30px;
        }
        .gallery-container.dual-view .gallery-code img {
            height: 200px;
        }

        #tour-tooltip {
            animation: bounceOnly 2.0s ease-in-out;
            color: #333;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        }
        @keyframes bounceOnly {
            0% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
            70% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
        #loading {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        #loading.visible {
            opacity: 1;
        }
        #lightbox-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.98);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 60px;
            box-sizing: border-box;
        }

        .lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #lightbox-image {
            max-width: 100%;
            max-height: 60vh;
            object-fit: contain;
            margin-top: 80px; /* Space for description at the top */
        }

        .lightbox-description {
            width: 100%;
            text-align: center;
            color: white;
            padding: 20px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            min-height: 60px;
            position: absolute;
            top: 20px; /* Position at the top */
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            z-index: 1001; /* Ensure it stays above other elements */
        }

        .lightbox-description .report-btn {
            background-color: #ff0000;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            visibility: visible;
            padding: 10px 20px;
            border: none;
            transition: background-color 0.3s ease;
        }

        .lightbox-description .report-btn:hover {
            background-color: #cc0000;
        }

        .lightbox-description .download-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            visibility: visible;
        }

        .lightbox-description .download-btn:hover {
            background-color: #0056b3;
        }

        #lightbox-modal .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 24px;
            cursor: pointer;
            z-index: 1001;
        }

        @media (max-width: 768px) {
            .gallery-code {
                max-width: 95%;
            }
            .lightbox-description {
                padding: 10px;
                gap: 10px;
                top: 10px; /* Adjust for smaller screens */
                width: 90%;
            }
            .lightbox-description .report-btn,
            .lightbox-description .download-btn {
                font-size: 14px;
                padding: 8px 16px;
            }
        }

        #tour-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            z-index: 999;
        }

        #tour-tooltip {
            position: absolute;
            background-color: #fff;
            color: #000;
            padding: 30px 40px;
            border-radius: 16px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            z-index: 1000;
            min-width: 400px;
        }

        #tour-tooltip::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 20px 20px 0;
            border-style: solid;
            border-color: #fff transparent transparent transparent;
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript">
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        $(document).ready(function() {
            $('#gallery-toggle-icon').on('click', function() {
                const $gallery = $('#gallery-container');
                const $icon = $(this);

                if ($gallery.hasClass('dual-view')) {
                    $gallery.removeClass('dual-view');
                    $icon.removeClass('active').html('<img src="{{ asset("images/visualization.png") }}" alt="Feed" style="width: 25px; height: 25px; ">');
                } else {
                    $gallery.addClass('dual-view');
                    $icon.addClass('active').html('<img src="{{ asset("images/row.png") }}" alt="Add Friend" style="width: 25px; height: 25px;">');
                }
            });

            $(document).on('click', '.gallery-code img', function(e) {
                e.preventDefault();
                const thumbnailUrl = $(this).attr('src');
                const fullImageUrl = $(this).data('full');
                const photoId = $(this).attr('alt')?.match(/\d+/)?.[0] || null;

                console.log('Thumbnail URL from src:', thumbnailUrl);
                console.log('Full Image URL from data-full:', fullImageUrl);
                console.log('Photo ID:', photoId);

                if (fullImageUrl && photoId) {
                    $('#lightbox-image').attr('src', fullImageUrl);
                    $('#lightbox-modal').css('display', 'flex');

                    const buttonsHtml = `
                        <a href="#" class="report-btn btn-full" style="background-color: #ff0000; width: 50%" data-photo-id="${photoId}">Report</a>
                        <a href="${fullImageUrl}" class="download-btn btn-full" style="background-color: #50c1ba; width: 50%" target="_blank">Download</a>
                    `;
                    $('#lightbox-description').empty().html(buttonsHtml);

                    $('#lightbox-description .report-btn').on('click', function(e) {
                        e.preventDefault();
                        const reportPhotoId = $(this).data('photo-id');
                        console.log('Reporting Photo ID:', reportPhotoId);

                        $.ajax({
                            type: 'POST',
                            url: '{{ path('reportPhoto') }}',
                            data: { photoId: reportPhotoId },
                            dataType: 'json',
                            success: function(response) {
                                console.log('Report Response:', response);
                                if (response.status === 'success') {
                                    alert('This photo has been taken down and is only available for the host');
                                    $('#lightbox-modal').css('display', 'none');
                                    $('#lightbox-image').attr('src', '');
                                    $('#lightbox-description').empty();

                                    $(`.gallery-code img[alt="Event Photo ${reportPhotoId}"]`).closest('.gallery-code').remove();
                                    $(`.desc-${reportPhotoId}`).remove();

                                    let currentPage = 1;
                                    $('#gallery-container').data('current-page', currentPage).empty();
                                    window.location.href = '{{ path('eventTimeline', {'hash': event.hash}) }}';
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error('Error reporting photo:', error);
                                alert('Failed to report photo. Please try again.');
                            }
                        });
                    });
                } else {
                    console.error('Full image URL or photo ID missing:', fullImageUrl, photoId);
                    alert('Cannot open image. Please check the photo link and try again.');
                }
            });

            $('#lightbox-modal .close-btn').on('click', function() {
                $('#lightbox-modal').css('display', 'none');
                $('#lightbox-image').attr('src', '');
                $('#lightbox-description').empty();
            });

            $(window).on('click', function(e) {
                if ($(e.target).is('#lightbox-modal')) {
                    $('#lightbox-modal').css('display', 'none');
                    $('#lightbox-image').attr('src', '');
                    $('#lightbox-description').empty();
                }
            });

            let currentPage = parseInt($('#gallery-container').data('current-page')) || 1;
            const hash = $('#gallery-container').data('hash') || '';
            let $galleryContainer = $('#gallery-container');
            let isLoading = false;
            let hasMorePhotos = true;

            $galleryContainer.empty().append($('#loading').show());

            function loadMorePhotos() {
                if (isLoading || !hasMorePhotos) return;
                isLoading = true;
                $('#loading').addClass('visible');
                $.ajax({
                    url: '/timeline/' + hash + '/' + currentPage,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        console.log('Load More Photos Response:', response);
                        if (response.photos && response.photos.length > 0) {
                            const $tempContainer = $('<div></div>');
                            $tempContainer.append(response.photos);
                            const $newPhotos = $tempContainer.find('.gallery-code');
                            const newDescriptions = $tempContainer.find('.desc-').detach();
                            if (currentPage === 1) {
                                $galleryContainer.empty().append($newPhotos);
                            } else {
                                $galleryContainer.append($newPhotos);
                            }
                            $newPhotos.each(function(index) {
                                const photoId = $(this).find('img').attr('alt')?.match(/\d+/)?.[0] || null;
                                const $description = newDescriptions.filter('.desc-' + photoId);
                                $galleryContainer.append($description);
                                if ($description.length) {
                                    const $reportButton = $description.find('.reportPhoto');
                                    if (!$reportButton.data('reportPhotoId') && photoId) {
                                        $reportButton.attr('data-reportPhotoId', photoId);
                                    }
                                }

                                const thumbnailUrl = $(this).find('img').attr('src');
                                const fullImageUrl = $(this).find('img').data('full') || thumbnailUrl;

                                console.log('Dynamic Load - Thumbnail URL:', thumbnailUrl);
                                console.log('Dynamic Load - Full Image URL:', fullImageUrl);

                                $(this).find('img')
                                    .attr('src', thumbnailUrl)
                                    .attr('data-full', fullImageUrl);

                                $(this).attr('data-glightbox', `title: ${photoId} - Photo at Grateful Events; description: Download or report this photo; href: ${fullImageUrl}`);
                            });
                        } else {
                            hasMorePhotos = false;
                            $('#loading').hide();
                        }
                        currentPage++;
                        isLoading = false;
                        $('#loading').removeClass('visible');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error loading more photos:', error);
                        $('#loading').removeClass('visible');
                        isLoading = false;
                        alert('Failed to load more photos. Please try again.');
                    }
                });
            }

            const debouncedLoadMore = debounce(loadMorePhotos, 250);
            loadMorePhotos();

            if (typeof window !== 'undefined' && $galleryContainer.length) {
                $(window).on('scroll', function() {
                    const windowHeight = $(window).height() || 0;
                    const scrollTop = $(window).scrollTop() || 0;
                    const containerOffset = $galleryContainer.offset() ? $galleryContainer.offset().top : 0;
                    const containerHeight = $galleryContainer.outerHeight() || 0;
                    if (hasMorePhotos && !isLoading && scrollTop + windowHeight >= containerOffset + containerHeight - 500) {
                        debouncedLoadMore();
                    }
                });
            } else {
                console.error('Window or gallery container not available for scroll binding');
            }
        });
    </script>
{% endblock %}