@php
    $tileTemplate = $tileUrlTemplate;
    $buildingEditTemplate = $buildingEditUrlTemplate;
    $lat = $initialCenter['lat'];
    $lng = $initialCenter['lng'];
    $zoom = $initialZoom;
@endphp

<x-filament-panels::page>
    <div
        id="buildings-map-explorer"
        class="fi-section"
        style="position: relative; height: calc(100vh - 200px); min-height: 560px; width: 100%; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgb(var(--gray-200));"
        data-tile-url-template="{{ $tileTemplate }}"
        data-building-edit-template="{{ $buildingEditTemplate }}"
        data-initial-lat="{{ $lat }}"
        data-initial-lng="{{ $lng }}"
        data-initial-zoom="{{ $zoom }}"
    >
        <style>@import url("https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css");</style>

        <div
            id="buildings-map-explorer-canvas"
            style="position: absolute; inset: 0;"
        ></div>

        <div
            id="buildings-map-explorer-status"
            style="position: absolute; top: 12px; left: 12px; z-index: 5; background: rgba(255,255,255,0.92); padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.4; box-shadow: 0 1px 3px rgba(0,0,0,0.15); max-width: 320px;"
            dir="rtl"
        >
            <div style="font-weight: 600; margin-bottom: 4px;">مستكشف المباني (MapLibre + MVT)</div>
            <div>قرّب/بعّد وحرّك الخريطة — يجلب المتصفح فقط ما يظهر في الشاشة.</div>
            <div style="margin-top: 6px; color: #555;">انقر على مبنى لفتح صفحة تعديله.</div>
            <div id="buildings-map-explorer-metrics" style="margin-top: 6px; color: #333;"></div>
        </div>

        <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
        <script>
        (function () {
            'use strict';

            var root = document.getElementById('buildings-map-explorer');
            if (!root || typeof maplibregl === 'undefined') return;

            var tileUrl = root.dataset.tileUrlTemplate;
            var editTemplate = root.dataset.buildingEditTemplate;
            var lat = parseFloat(root.dataset.initialLat);
            var lng = parseFloat(root.dataset.initialLng);
            var zoom = parseFloat(root.dataset.initialZoom);
            var metrics = document.getElementById('buildings-map-explorer-metrics');

            // OSM raster basemap — no API key required. Can be swapped for any
            // vector style later (e.g. MapTiler, Stadia, self-hosted tiles).
            var style = {
                version: 8,
                sources: {
                    'osm': {
                        type: 'raster',
                        tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                        tileSize: 256,
                        attribution: '© OpenStreetMap contributors',
                    },
                    'yemen-admin': {
                        type: 'vector',
                        tiles: [tileUrl],
                        minzoom: 12,
                        maxzoom: 22,
                    },
                },
                layers: [
                    { id: 'osm', type: 'raster', source: 'osm' },
                    {
                        id: 'blocks-outline',
                        type: 'line',
                        source: 'yemen-admin',
                        'source-layer': 'blocks',
                        minzoom: 12,
                        paint: {
                            'line-color': '#2563eb',
                            'line-width': 2,
                            'line-opacity': 0.6,
                        },
                    },
                    {
                        id: 'buildings-fill',
                        type: 'fill',
                        source: 'yemen-admin',
                        'source-layer': 'buildings',
                        minzoom: 14,
                        paint: {
                            'fill-color': '#f59e0b',
                            'fill-opacity': 0.45,
                            'fill-outline-color': '#b45309',
                        },
                    },
                    {
                        id: 'buildings-outline',
                        type: 'line',
                        source: 'yemen-admin',
                        'source-layer': 'buildings',
                        minzoom: 14,
                        paint: {
                            'line-color': '#b45309',
                            'line-width': 1,
                        },
                    },
                ],
            };

            var map = new maplibregl.Map({
                container: 'buildings-map-explorer-canvas',
                style: style,
                center: [lng, lat],
                zoom: zoom,
            });

            map.addControl(new maplibregl.NavigationControl(), 'top-right');
            map.addControl(new maplibregl.ScaleControl(), 'bottom-left');
            map.addControl(new maplibregl.GeolocateControl({
                positionOptions: { enableHighAccuracy: true },
                trackUserLocation: true,
            }), 'top-right');

            var hoveredBuildingId = null;

            map.on('load', function () {
                // Hover highlight for buildings.
                map.addLayer({
                    id: 'buildings-hover',
                    type: 'fill',
                    source: 'yemen-admin',
                    'source-layer': 'buildings',
                    minzoom: 14,
                    paint: {
                        'fill-color': '#ef4444',
                        'fill-opacity': 0.75,
                    },
                    filter: ['==', ['id'], ''],
                });
            });

            map.on('mousemove', 'buildings-fill', function (e) {
                if (e.features && e.features.length) {
                    map.getCanvas().style.cursor = 'pointer';
                    hoveredBuildingId = e.features[0].properties.id;
                    map.setFilter('buildings-hover', ['==', ['get', 'id'], hoveredBuildingId]);
                }
            });

            map.on('mouseleave', 'buildings-fill', function () {
                map.getCanvas().style.cursor = '';
                hoveredBuildingId = null;
                map.setFilter('buildings-hover', ['==', ['id'], '']);
            });

            map.on('click', 'buildings-fill', function (e) {
                if (!e.features || !e.features.length) return;

                var f = e.features[0];
                var props = f.properties || {};
                var title = props.name || props.building_code || ('Building #' + props.id);
                var editUrl = editTemplate.replace('__ID__', props.id);

                new maplibregl.Popup({ offset: 8 })
                    .setLngLat(e.lngLat)
                    .setHTML(
                        '<div dir="rtl" style="min-width: 200px;">' +
                            '<div style="font-weight: 600; margin-bottom: 4px;">' + escapeHtml(title) + '<\/div>' +
                            (props.building_code ? '<div style="font-size: 12px; color: #555;">الكود: ' + escapeHtml(props.building_code) + '<\/div>' : '') +
                            (props.external_number ? '<div style="font-size: 12px; color: #555;">الرقم الخارجي: ' + escapeHtml(props.external_number) + '<\/div>' : '') +
                            '<div style="margin-top: 8px;">' +
                                '<a href="' + editUrl + '" target="_blank" rel="noopener" style="color: #2563eb; font-weight: 600;">فتح صفحة التعديل ↗<\/a>' +
                            '<\/div>' +
                        '<\/div>'
                    )
                    .addTo(map);
            });

            // Payload metrics — shows how tiny the tile payloads are at scale.
            var totalBytes = 0;
            var totalTiles = 0;

            map.on('data', function (e) {
                if (e.sourceId === 'yemen-admin' && e.isSourceLoaded && e.tile) {
                    var bytes = (e.tile && e.tile.rawTileData) ? e.tile.rawTileData.byteLength : 0;
                    totalBytes += bytes;
                    totalTiles += 1;
                    if (metrics) {
                        metrics.innerHTML =
                            'بلاطات محمّلة: <b>' + totalTiles + '</b> · ' +
                            'إجمالي البيانات: <b>' + (totalBytes / 1024).toFixed(1) + ' KB</b>';
                    }
                }
            });

            function escapeHtml(v) {
                return String(v == null ? '' : v)
                    .replace(/&/g, '&amp;')
                    .replace(/[<]/g, '&lt;')
                    .replace(/[>]/g, '&gt;')
                    .replace(/"/g, '&quot;');
            }
        })();
        </script>
    </div>
</x-filament-panels::page>