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

{% block title %}YFIMO{% endblock %}

{% block body_class %}page-news{% endblock %}

{% block head_meta %}
    {{ parent() }}
    <meta name="turbo-visit-control" content="reload">
    <meta name="turbo-cache-control" content="no-cache">
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('styles/pages/news.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
    {% include 'layout/_header.html.twig' %}
    <main>
        <section class="section-entete pt-5 pb-4">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h1>{{ newsPage.title|default('Actualités') }}</h1>
                        <p>{{ newsPage.description|default("Retrouvez toute l'expertise d'YFIMO et les dernières tendances de l'immobilier d'entreprise dans les Yvelines et en Île-de-France.") }}</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="section-liste-news py-5">
            <div class="container">
                <div class="row" id="news-list" data-load-url="{{ path('app_news_load') }}" data-next-offset="{{ nextOffset }}" data-has-more="{{ hasMoreActus ? '1' : '0' }}">
                    {% include 'news/_actus_cards.html.twig' with { actus: actus } %}
                </div>
                <div id="news-loader" class="py-4 text-center d-none" aria-live="polite">
                    <span>Chargement...</span>
                </div>
                <div id="news-scroll-sentinel" class="news-scroll-sentinel" aria-hidden="true"></div>
            </div>
        </section>
    </main>
    {% include 'layout/_footer.html.twig' %}
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
    window.initNewsInfiniteScroll = () => {
        const list = document.getElementById('news-list');
        const sentinel = document.getElementById('news-scroll-sentinel');
        const loader = document.getElementById('news-loader');

        if (!list || !sentinel || !loader || list.dataset.infiniteScrollInitialized === 'true') {
            return;
        }

        list.dataset.infiniteScrollInitialized = 'true';
        let isLoading = false;
        let hasMore = list.dataset.hasMore === '1';
        let nextOffset = Number.parseInt(list.dataset.nextOffset || '0', 10);

        const loadMore = async () => {
            if (isLoading || !hasMore) {
                return;
            }

            isLoading = true;
            loader.classList.remove('d-none');

            try {
                const url = new URL(list.dataset.loadUrl, window.location.origin);
                url.searchParams.set('offset', String(nextOffset));

                const response = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                });

                if (!response.ok) {
                    throw new Error('Impossible de charger les actualites.');
                }

                const data = await response.json();
                list.insertAdjacentHTML('beforeend', data.html || '');
                nextOffset = data.nextOffset || nextOffset;
                hasMore = Boolean(data.hasMore);
                list.dataset.nextOffset = String(nextOffset);
                list.dataset.hasMore = hasMore ? '1' : '0';

                if (!hasMore) {
                    observer.disconnect();
                }
            } catch (error) {
                console.error(error);
            } finally {
                isLoading = false;
                loader.classList.add('d-none');
            }
        };

        const observer = new IntersectionObserver((entries) => {
            if (entries.some((entry) => entry.isIntersecting)) {
                loadMore();
            }
        }, {
            rootMargin: '450px 0px',
        });

        if (hasMore) {
            observer.observe(sentinel);
        }
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', window.initNewsInfiniteScroll, { once: true });
    } else {
        window.initNewsInfiniteScroll();
    }

    document.addEventListener('turbo:load', window.initNewsInfiniteScroll);
    </script>
{% endblock %}