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

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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
    <link href="{{ asset('styles/pages/marche.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>{{ pageHeading|default('Estimation de bureaux dans les Yvelines') }}</h1>
                        <p>{{ pageIntro|default('Retrouvez les loyers par ville, calculés à partir des offres disponibles dans notre base.') }}</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="section-carte p-4">
            <div class="container bg-grey03 p-4">
                <div class="row">
                    <div class="col-12 mb-4">
                        <h2>{{ mapTitle|default('Cartographie des loyers') }}</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-between gap-2 aspect-ratio-2 rent-map-shell">
                            <div class="bigMap" data-rent-map data-google-maps-key="{{ googleMapsApiKey }}" data-google-maps-developer-mode="{{ googleMapsDeveloperMode ? 'true' : 'false' }}" data-stats="{{ rentMapStats|json_encode|e('html_attr') }}">
                                <div class="bigMap__fallback" data-rent-map-fallback>
                                    Carte en cours de chargement
                                </div>
                            </div>
                            <div class="legende">
                                <p>Max</p>
                                <div class="jauge">
                                    <div class="niv niv1"></div>
                                    <div class="niv niv2"></div>
                                    <div class="niv niv3"></div>
                                    <div class="niv niv4"></div>
                                    <div class="niv niv5"></div>
                                </div>
                                <p>Min</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="maillage-section py-5">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h2 class="mb-3 grey01">Liste des villes</h2>
                        <ul>
                            {% for city in rentCities %}
                                <li>
                                    <a href="{{ path(cityRouteName|default('app_estimation_bureaux_ville'), { slugVille: city.slug }) }}" title="{{ cityKindLabel|default('Location bureaux') }} à {{ city.label }}">
                                        <span>{{ cityKindLabel|default('Location bureaux') }}</span>
                                        <span>{{ city.label }}</span>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <section class="autres-offres bg-grey03 py-5">
            <div class="container-fluid ps-lg-4">
                <div class="row">
                    <div class="col-12 py-5 px-0 ps-4">
                        <div class="row">
                            <div class="col-12 text-center pb-4">
                                <h2>{{ suggestedOffersTitle|default('Ces offres pourraient également vous intéresser') }}</h2>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 p-0 ps-lg-4 pb-5">
                                <div class="splide splideOffres" id="splideOffres">
                                    <div class="splide__track">
                                        <ul class="splide__list">
                                            <li class="splide__slide">
                                                {% include 'layout/_cardOffre.html.twig' %}
                                            </li>
                                            <li class="splide__slide">
                                                {% include 'layout/_cardOffre.html.twig' %}
                                            </li>
                                            <li class="splide__slide">
                                                {% include 'layout/_cardOffre.html.twig' %}
                                            </li>
                                            <li class="splide__slide">
                                                {% include 'layout/_cardOffre.html.twig' %}
                                            </li>
                                            <li class="splide__slide">
                                                {% include 'layout/_cardOffre.html.twig' %}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    {% include 'layout/_footer.html.twig' %}
{% endblock %}
{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
    {{ parent() }}
    <script>
    (function() {
        function parseStats(mapElement) {
            try {
                const stats = JSON.parse(mapElement.dataset.stats || '[]');
                return Array.isArray(stats) ? stats : [];
            } catch (error) {
                return [];
            }
        }

        function showRentMapFallback(mapElement, message) {
            const fallback = mapElement.querySelector('[data-rent-map-fallback]');
            if (fallback) {
                fallback.textContent = message;
            }
        }

        function getRentColor(value, min, max) {
            if (!value || min === null || max === null || min === max) {
                return '#d8d8d8';
            }

            const ratio = Math.max(0, Math.min(1, (value - min) / (max - min)));

            if (ratio >= 0.8) {
                return '#ff5011';
            }

            if (ratio >= 0.6) {
                return '#f39c4f';
            }

            if (ratio >= 0.4) {
                return '#ffd43b';
            }

            if (ratio >= 0.2) {
                return '#7bc96f';
            }

            return '#0d6f8f';
        }

        function escapeHtml(value) {
            return String(value || '').replace(/[&<>"']/g, function(character) {
                return {
                    '&': '&amp;',
                    '<': '&lt;',
                    '>': '&gt;',
                    '"': '&quot;',
                    "'": '&#039;',
                }[character];
            });
        }

        function fetchCommuneGeoJson(stat) {
            const params = new URLSearchParams({
                fields: 'nom,code,codesPostaux,centre,contour',
                format: 'geojson',
                geometry: 'contour',
            });
            const url = stat.inseeCode
                ? 'https://geo.api.gouv.fr/communes/' + encodeURIComponent(stat.inseeCode) + '?' + params.toString()
                : 'https://geo.api.gouv.fr/communes?' + new URLSearchParams({
                    codePostal: stat.postalCode,
                    nom: stat.city,
                    fields: 'nom,code,codesPostaux,centre,contour',
                    format: 'geojson',
                    geometry: 'contour',
                }).toString();

            return fetch(url)
                .then(function(response) {
                    if (!response.ok) {
                        throw new Error('Geo API indisponible');
                    }

                    return response.json();
                })
                .then(function(geoJson) {
                    const feature = geoJson.type === 'Feature'
                        ? geoJson
                        : (geoJson.features && geoJson.features[0] ? geoJson.features[0] : null);

                    if (!feature) {
                        return null;
                    }

                    feature.properties = feature.properties || {};
                    feature.properties.city = stat.city;
                    feature.properties.postalCode = stat.postalCode;
                    feature.properties.average = stat.average;
                    feature.properties.min = stat.min;
                    feature.properties.max = stat.max;
                    feature.properties.median = stat.median;

                    return feature;
                });
        }

        function renderRentMap(mapElement, stats) {
            const numericValues = stats.map(function(stat) { return stat.average; }).filter(function(value) { return Number.isFinite(value); });
            const minValue = numericValues.length ? Math.min.apply(null, numericValues) : null;
            const maxValue = numericValues.length ? Math.max.apply(null, numericValues) : null;
            const map = new google.maps.Map(mapElement, {
                center: {lat: 48.95, lng: 1.95},
                zoom: 10,
                mapTypeControl: false,
                streetViewControl: false,
                fullscreenControl: true,
            });
            const bounds = new google.maps.LatLngBounds();
            const infoWindow = new google.maps.InfoWindow();

            Promise.all(stats.map(fetchCommuneGeoJson)).then(function(features) {
                const validFeatures = features.filter(Boolean);

                if (validFeatures.length === 0) {
                    showRentMapFallback(mapElement, 'Aucun contour disponible');
                    return;
                }

                mapElement.querySelector('[data-rent-map-fallback]')?.remove();

                validFeatures.forEach(function(feature) {
                    map.data.addGeoJson({
                        type: 'FeatureCollection',
                        features: [feature],
                    });
                });

                map.data.forEach(function(feature) {
                    feature.getGeometry().forEachLatLng(function(latLng) {
                        bounds.extend(latLng);
                    });
                });

                map.data.setStyle(function(feature) {
                    const average = feature.getProperty('average');
                    const color = getRentColor(average, minValue, maxValue);

                    return {
                        fillColor: color,
                        fillOpacity: average ? 0.38 : 0.18,
                        strokeColor: '#ffffff',
                        strokeOpacity: 1,
                        strokeWeight: 2,
                    };
                });

                map.data.addListener('click', function(event) {
                    const average = event.feature.getProperty('average');
                    const city = event.feature.getProperty('city');
                    const postalCode = event.feature.getProperty('postalCode');
                    const content = '<div class="rent-map-popin">' +
                        '<button type="button" class="rent-map-popin__close" aria-label="Fermer">×</button>' +
                        '<strong>' + escapeHtml(city) + '</strong>' +
                        '<span>' + escapeHtml(postalCode) + '</span>' +
                        '<p>Loyer moyen : ' + (average ? escapeHtml(average) + ' €/m²/an' : 'non disponible') + '</p>' +
                        '</div>';

                    infoWindow.setContent(content);
                    infoWindow.setPosition(event.latLng);
                    infoWindow.open(map);

                    google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
                        document.querySelector('.rent-map-popin__close')?.addEventListener('click', function() {
                            infoWindow.close();
                        });
                    });
                });

                map.fitBounds(bounds);
            }).catch(function() {
                showRentMapFallback(mapElement, 'Carte indisponible');
            });
        }

        function initRentMap() {
            const mapElement = document.querySelector('[data-rent-map]');
            if (!mapElement || mapElement.dataset.rentMapInitialized === 'true') {
                return;
            }

            const stats = parseStats(mapElement);
            if (stats.length === 0) {
                showRentMapFallback(mapElement, 'Aucune donnée disponible');
                return;
            }

            const apiKey = mapElement.dataset.googleMapsKey || '';
            const developerMode = mapElement.dataset.googleMapsDeveloperMode === 'true';
            if (!apiKey && !developerMode) {
                showRentMapFallback(mapElement, 'Clé Google Maps manquante');
                return;
            }

            mapElement.dataset.rentMapInitialized = 'true';

            if (window.google && window.google.maps) {
                renderRentMap(mapElement, stats);
                return;
            }

            window.initYfimoRentMap = function() {
                renderRentMap(mapElement, stats);
            };

            if (!document.querySelector('script[data-google-maps-loader]')) {
                const script = document.createElement('script');
                script.src = 'https://maps.googleapis.com/maps/api/js?' + (apiKey ? 'key=' + encodeURIComponent(apiKey) + '&' : '') + 'callback=initYfimoRentMap';
                script.async = true;
                script.defer = true;
                script.dataset.googleMapsLoader = 'true';
                document.head.appendChild(script);
            }
        }

        function initMarketPage() {
            const splideElement = document.querySelector('#splideOffres');
            if (splideElement && !splideElement.classList.contains('is-initialized')) {
                const splideOffres = new Splide("#splideOffres", {
                    type: 'loop',
                    perPage : 3,
                    height : '100%',
                    pagination : false,
                    gap : '24px',
                    arrows : false,
                    autoplay : false,
                    drag : true,
                    padding: { left: '0', right: '150px' },
                    breakpoints: {
                        728: {
                            perPage: 2,
                            type: "loop",
                        },
                        480: {
                            arrows: false,
                            perPage: 1,
                            gap: '10px',
                            padding: { left: '0', right: '30px' },
                        }
                    },
                });
                splideOffres.mount();
            }

            initRentMap();
        }

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