@php
    use Cheesegrits\FilamentGoogleMaps\Helpers\MapsHelper;

    $mapUrl = MapsHelper::mapsUrl(false, ['drawing']);
@endphp

<x-filament-panels::page>
    <div
        x-data="boundariesMap({
            levels: @js($boundaries),
            stats: @js($stats),
            mapScriptUrl: @js($mapUrl),
        })"
        x-init="initMap()"
        class="space-y-4"
    >
        <x-filament::section>
            <div class="space-y-4">
                <p class="text-sm text-gray-600 dark:text-gray-300">
                    خريطة تفاعلية لحدود المحافظات والعزل / الأحياء والمديريات والمباني. عند التكبير العالي تظهر المباني مع كود كل مبنى بشكل مسطّح داخل حدوده.
                </p>

                <div class="grid grid-cols-2 gap-3 lg:grid-cols-5">
                    <div class="rounded-xl border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-900">
                        <p class="text-xs text-gray-500 dark:text-gray-400">إجمالي الحدود</p>
                        <p class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
                            {{ number_format($stats['total']['count'] ?? 0) }}
                        </p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                            بيانات غير صالحة: {{ number_format($stats['total']['invalid_count'] ?? 0) }}
                        </p>
                    </div>

                    <div class="rounded-xl border border-blue-200 bg-blue-50 p-3 dark:border-blue-800/60 dark:bg-blue-950/40">
                        <p class="text-xs text-blue-700 dark:text-blue-300">المحافظات</p>
                        <p class="text-2xl font-semibold text-blue-900 dark:text-blue-100">
                            {{ number_format($stats['region']['count'] ?? 0) }}
                        </p>
                        <p class="text-xs text-blue-700/80 dark:text-blue-300/80">
                            متخطي: {{ number_format($stats['region']['invalid_count'] ?? 0) }}
                        </p>
                    </div>

                    <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-800/60 dark:bg-emerald-950/40">
                        <p class="text-xs text-emerald-700 dark:text-emerald-300">العزل / الأحياء</p>
                        <p class="text-2xl font-semibold text-emerald-900 dark:text-emerald-100">
                            {{ number_format($stats['district']['count'] ?? 0) }}
                        </p>
                        <p class="text-xs text-emerald-700/80 dark:text-emerald-300/80">
                            متخطي: {{ number_format($stats['district']['invalid_count'] ?? 0) }}
                        </p>
                    </div>

                    <div class="rounded-xl border border-amber-200 bg-amber-50 p-3 dark:border-amber-800/60 dark:bg-amber-950/40">
                        <p class="text-xs text-amber-700 dark:text-amber-300">المديريات</p>
                        <p class="text-2xl font-semibold text-amber-900 dark:text-amber-100">
                            {{ number_format($stats['city']['count'] ?? 0) }}
                        </p>
                        <p class="text-xs text-amber-700/80 dark:text-amber-300/80">
                            متخطي: {{ number_format($stats['city']['invalid_count'] ?? 0) }}
                        </p>
                    </div>

                    <div class="rounded-xl border border-rose-200 bg-rose-50 p-3 dark:border-rose-800/60 dark:bg-rose-950/40">
                        <p class="text-xs text-rose-700 dark:text-rose-300">المباني</p>
                        <p class="text-2xl font-semibold text-rose-900 dark:text-rose-100">
                            {{ number_format($stats['building']['count'] ?? 0) }}
                        </p>
                        <p class="text-xs text-rose-700/80 dark:text-rose-300/80">
                            متخطي: {{ number_format($stats['building']['invalid_count'] ?? 0) }}
                        </p>
                    </div>
                </div>
            </div>
        </x-filament::section>

        <div class="grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]">
            <x-filament::section>
                <div class="space-y-4">
                    <div class="space-y-2">
                        <label for="boundaries-search" class="text-sm font-medium text-gray-700 dark:text-gray-200">
                            البحث بالاسم
                        </label>

                        <div class="flex gap-2">
                            <input
                                id="boundaries-search"
                                type="text"
                                x-model.debounce.300ms="searchTerm"
                                placeholder="ابحث بالاسم أو كود المبنى"
                                class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 shadow-sm outline-none ring-primary-500 transition focus:ring-2 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
                            />

                            <button
                                type="button"
                                class="rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
                                @click="searchTerm = ''; refreshStyle()"
                            >
                                مسح
                            </button>
                        </div>

                        <button
                            type="button"
                            class="w-full rounded-lg bg-primary-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
                            @click="focusFirstMatch()"
                            :disabled="searchTerm.trim() === ''"
                        >
                            تركيز أول نتيجة
                        </button>
                    </div>

                    <div class="space-y-2">
                        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">طبقات الحدود</p>

                        <template x-for="control in layerControls" :key="control.key">
                            <label class="flex items-center justify-between rounded-lg border border-gray-200 p-2 dark:border-gray-700">
                                <span class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
                                    <span
                                        class="inline-block h-2.5 w-2.5 rounded-full"
                                        :style="`background-color: ${control.color}`"
                                    ></span>
                                    <span x-text="control.label"></span>
                                </span>

                                <input
                                    type="checkbox"
                                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600"
                                    x-model="visibleLevels[control.key]"
                                    @change="refreshStyle(); fitVisibleBounds()"
                                />
                            </label>
                        </template>
                    </div>

                    <div class="grid grid-cols-1 gap-2">
                        <button
                            type="button"
                            class="rounded-lg bg-primary-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-primary-500"
                            @click="fitVisibleBounds()"
                        >
                            ملاءمة الحدود المعروضة
                        </button>

                        <button
                            type="button"
                            class="rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
                            @click="fitAllBounds()"
                        >
                            ملاءمة كل الطبقات المفعلة
                        </button>
                    </div>

                    <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-300">
                        <p class="font-medium">مستوى التكبير الحالي: <span x-text="currentZoom"></span></p>
                        <p>الطبقة النشطة الآن: <span x-text="levelLabel(activeZoomLevel())"></span></p>
                        <p>المحافظات: <span x-text="levelZoomRangeText('region')"></span></p>
                        <p>العزل / الأحياء: <span x-text="levelZoomRangeText('district')"></span></p>
                        <p>المديريات: <span x-text="levelZoomRangeText('city')"></span></p>
                        <p>المباني: <span x-text="levelZoomRangeText('building')"></span></p>
                        <p>يتم إخفاء الطبقات الأعلى تلقائيًا عند الانتقال لمستوى أدق.</p>
                        <p>أكواد المباني تظهر من تكبير <span x-text="buildingLabelMinZoom"></span> فأعلى.</p>
                    </div>

                    <div
                        x-show="selectedFeature !== null"
                        x-cloak
                        class="rounded-lg border border-primary-200 bg-primary-50 p-3 text-sm text-primary-900 dark:border-primary-800/60 dark:bg-primary-950/30 dark:text-primary-100"
                    >
                        <p class="font-semibold" x-text="selectedFeature?.name"></p>
                        <p>
                            المستوى:
                            <span x-text="levelLabel(selectedFeature?.level)"></span>
                        </p>
                        <p x-show="selectedFeature?.code" x-cloak>
                            كود المبنى: <span class="font-semibold" x-text="selectedFeature?.code"></span>
                        </p>
                        <button
                            type="button"
                            class="mt-2 rounded-md bg-primary-600 px-2.5 py-1.5 text-xs font-medium text-white transition hover:bg-primary-500"
                            @click="fitToSelected()"
                        >
                            تركيز على العنصر المختار
                        </button>
                    </div>
                </div>
            </x-filament::section>

            <x-filament::section>
                <div class="relative">
                    <div
                        id="boundaries-map"
                        class="w-full rounded-xl border border-gray-200 dark:border-gray-700"
                        style="min-height: 68vh;"
                    ></div>

                    <div
                        x-show="!isMapReady && !mapError"
                        class="absolute inset-0 flex items-center justify-center rounded-xl bg-white/75 text-sm text-gray-700 backdrop-blur-sm dark:bg-gray-900/75 dark:text-gray-200"
                    >
                        جاري تحميل الخريطة...
                    </div>

                    <div
                        x-show="mapError"
                        x-text="mapError"
                        class="absolute inset-0 flex items-center justify-center rounded-xl bg-danger-50 px-4 text-center text-sm text-danger-700 dark:bg-danger-950/60 dark:text-danger-300"
                    ></div>
                </div>
            </x-filament::section>
        </div>
    </div>

    <script>
        function boundariesMap(config) {
            const colors = {
                region: { strokeColor: '#2563eb', fillColor: '#3b82f6', fillOpacity: 0.08 },
                district: { strokeColor: '#16a34a', fillColor: '#22c55e', fillOpacity: 0.12 },
                city: { strokeColor: '#f59e0b', fillColor: '#fbbf24', fillOpacity: 0.15 },
                building: { strokeColor: '#be123c', fillColor: '#fb7185', fillOpacity: 0.24 },
            };

            const labels = {
                region: 'المحافظات',
                district: 'العزل / الأحياء',
                city: 'المديريات',
                building: 'المباني',
            };

            return {
                map: null,
                dataLayer: null,
                levels: config.levels ?? {},
                stats: config.stats ?? {},
                mapScriptUrl: config.mapScriptUrl ?? '',
                features: [],
                labelMarkersByFeatureId: {},
                labelSyncRafId: null,
                selectedFeature: null,
                hoverFeatureId: null,
                currentZoom: 7,
                isMapReady: false,
                mapError: null,
                searchTerm: '',
                maxBuildingLabels: 300,
                buildingLabelMinZoom: 18,
                visibleLevels: {
                    region: true,
                    district: true,
                    city: true,
                    building: true,
                },
                levelZoomThresholds: {
                    region: 5,
                    district: 9,
                    city: 11,
                    building: 17,
                },
                allLayerControls: [
                    { key: 'region', label: labels.region, color: colors.region.strokeColor },
                    { key: 'district', label: labels.district, color: colors.district.strokeColor },
                    { key: 'city', label: labels.city, color: colors.city.strokeColor },
                    { key: 'building', label: labels.building, color: colors.building.strokeColor },
                ],
                layerControls: [],
                async initMap() {
                    try {
                        this.configureLayerControls();
                        await this.loadGoogleMaps();
                        this.createMap();
                        this.$watch('searchTerm', () => this.refreshStyle());
                    } catch (error) {
                        this.mapError = 'تعذر تحميل خريطة Google. تأكد من إعدادات API Key.';
                        console.error(error);
                    }
                },
                async loadGoogleMaps() {
                    if (window.google?.maps) {
                        return;
                    }

                    if (!window.__boundariesMapLoaderPromise) {
                        window.__boundariesMapLoaderPromise = new Promise((resolve, reject) => {
                            const callbackName = '__initBoundariesMapCallback';
                            const script = document.createElement('script');
                            const scriptUrl = new URL(this.mapScriptUrl, window.location.origin);

                            window[callbackName] = () => {
                                resolve();
                                delete window[callbackName];
                            };

                            scriptUrl.searchParams.set('callback', callbackName);
                            scriptUrl.searchParams.set('loading', 'async');
                            script.src = scriptUrl.toString();
                            script.async = true;
                            script.defer = true;
                            script.onerror = () => reject(new Error('Google Maps script failed to load.'));

                            document.head.appendChild(script);
                        });
                    }

                    await window.__boundariesMapLoaderPromise;
                },
                createMap() {
                    if (this.map) {
                        return;
                    }

                    const mapElement = document.getElementById('boundaries-map');
                    if (!mapElement) {
                        this.mapError = 'تعذر الوصول إلى عنصر الخريطة في الصفحة.';

                        return;
                    }

                    this.map = new google.maps.Map(mapElement, {
                        center: { lat: 13.9653, lng: 44.1833 },
                        zoom: 7,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        streetViewControl: false,
                        mapTypeControl: false,
                        fullscreenControl: true,
                    });

                    this.dataLayer = new google.maps.Data({ map: this.map });
                    this.registerMapEvents();
                    this.addAllFeatures();

                    this.currentZoom = this.map.getZoom() ?? 7;
                    this.refreshStyle();
                    this.fitVisibleBounds();
                    this.isMapReady = true;
                },
                registerMapEvents() {
                    this.map.addListener('zoom_changed', () => {
                        this.currentZoom = this.map.getZoom() ?? this.currentZoom;
                        this.refreshStyle();
                    });

                    this.map.addListener('idle', () => this.syncBuildingLabels());

                    this.dataLayer.addListener('mouseover', (event) => {
                        this.hoverFeatureId = event.feature.getProperty('feature_id');
                        this.map.getDiv().style.cursor = 'pointer';
                        this.refreshStyle();
                    });

                    this.dataLayer.addListener('mouseout', () => {
                        this.hoverFeatureId = null;
                        this.map.getDiv().style.cursor = '';
                        this.refreshStyle();
                    });

                    this.dataLayer.addListener('click', (event) => {
                        const feature = event.feature;

                        this.selectedFeature = {
                            id: feature.getProperty('bound_id'),
                            name: feature.getProperty('bound_name'),
                            code: feature.getProperty('bound_code'),
                            level: feature.getProperty('bound_level'),
                            featureId: feature.getProperty('feature_id'),
                        };

                        this.fitFeature(feature);
                        this.refreshStyle();
                    });
                },
                addAllFeatures() {
                    this.features = [];

                    Object.entries(this.levels).forEach(([level, items]) => {
                        if (!Array.isArray(items)) {
                            return;
                        }

                        items.forEach((item) => this.addBoundaryItem(item, level));
                    });
                },
                addBoundaryItem(item, level) {
                    try {
                        const normalizedGeoJson = this.normalizeGeoJsonForDataLayer(item.geojson);
                        if (!normalizedGeoJson) {
                            console.warn('Skipping invalid GeoJSON payload for', item?.id, item?.geojson);
                            return;
                        }

                        const added = this.dataLayer.addGeoJson(normalizedGeoJson);

                        if (!Array.isArray(added) || added.length === 0) {
                            return;
                        }

                        added.forEach((feature) => {
                            const featureId = `${level}-${item.id}-${this.features.length}`;

                            feature.setProperty('feature_id', featureId);
                            feature.setProperty('bound_id', item.id);
                            feature.setProperty('bound_name', item.name);
                            feature.setProperty('bound_code', item.code ?? null);
                            feature.setProperty('bound_level', level);
                            feature.setProperty('bound_centroid', item.centroid ?? null);

                            this.features.push({
                                id: item.id,
                                name: item.name,
                                code: item.code ?? null,
                                level,
                                featureId,
                                centroid: item.centroid ?? null,
                                feature,
                            });
                        });
                    } catch (error) {
                        console.warn('GeoJSON rendering failed for', item?.id, error);
                    }
                },
                normalizeGeoJsonForDataLayer(input) {
                    if (typeof input === 'string') {
                        try {
                            input = JSON.parse(input);
                        } catch (_) {
                            return null;
                        }
                    }

                    if (!input || typeof input !== 'object' || Array.isArray(input)) {
                        return null;
                    }

                    const geometryTypes = new Set([
                        'Point',
                        'MultiPoint',
                        'LineString',
                        'MultiLineString',
                        'Polygon',
                        'MultiPolygon',
                        'GeometryCollection',
                    ]);

                    const normalizeFeature = (feature) => {
                        if (!feature || typeof feature !== 'object' || Array.isArray(feature)) {
                            return null;
                        }

                        if (feature.type === 'Feature') {
                            const geometry = feature.geometry;

                            if (!geometry || !geometryTypes.has(geometry.type)) {
                                return null;
                            }

                            return {
                                type: 'Feature',
                                geometry,
                                properties: (
                                    feature.properties &&
                                    typeof feature.properties === 'object' &&
                                    !Array.isArray(feature.properties)
                                )
                                    ? feature.properties
                                    : {},
                            };
                        }

                        if (geometryTypes.has(feature.type)) {
                            return {
                                type: 'Feature',
                                geometry: feature,
                                properties: {},
                            };
                        }

                        return null;
                    };

                    if (input.type === 'FeatureCollection') {
                        const features = Array.isArray(input.features)
                            ? input.features
                                .map((feature) => normalizeFeature(feature))
                                .filter((feature) => feature !== null)
                            : [];

                        if (features.length === 0) {
                            return null;
                        }

                        return {
                            type: 'FeatureCollection',
                            features,
                        };
                    }

                    const normalizedFeature = normalizeFeature(input);
                    if (!normalizedFeature) {
                        return null;
                    }

                    return {
                        type: 'FeatureCollection',
                        features: [normalizedFeature],
                    };
                },
                levelHasData(level) {
                    const rows = this.levels?.[level];

                    return Array.isArray(rows) && rows.length > 0;
                },
                activeLayerOrder() {
                    return ['region', 'district', 'city', 'building']
                        .filter((level) => this.levelHasData(level));
                },
                zoomThreshold(level) {
                    if (
                        level === 'city' &&
                        this.levelHasData('city') &&
                        !this.levelHasData('district')
                    ) {
                        return this.levelZoomThresholds.district;
                    }

                    return this.levelZoomThresholds[level];
                },
                configureLayerControls() {
                    this.layerControls = this.allLayerControls
                        .filter((control) => this.levelHasData(control.key));

                    Object.keys(this.visibleLevels).forEach((level) => {
                        if (!this.levelHasData(level)) {
                            this.visibleLevels[level] = false;
                        }
                    });
                },
                levelLabel(level) {
                    if (!level) {
                        return '-';
                    }

                    return labels[level] ?? level;
                },
                activeZoomLevel() {
                    const orderedLevels = this.activeLayerOrder();
                    let active = null;

                    orderedLevels.forEach((level) => {
                        const threshold = this.zoomThreshold(level);

                        if (this.currentZoom >= threshold) {
                            active = level;
                        }
                    });

                    if (active) {
                        return active;
                    }

                    return null;
                },
                levelZoomRangeText(level) {
                    const orderedLevels = this.activeLayerOrder();
                    const currentIndex = orderedLevels.indexOf(level);

                    if (currentIndex === -1) {
                        return 'غير متاح';
                    }

                    const start = this.zoomThreshold(level);
                    const nextLevel = orderedLevels[currentIndex + 1] ?? null;

                    if (!nextLevel) {
                        return `${start}+`;
                    }

                    return `${start} - ${this.zoomThreshold(nextLevel) - 1}`;
                },
                normalizedSearch() {
                    return this.searchTerm.trim().toLowerCase();
                },
                matchesSearch(name, code) {
                    const search = this.normalizedSearch();
                    if (search === '') {
                        return true;
                    }

                    const nameValue = String(name ?? '').toLowerCase();
                    const codeValue = String(code ?? '').toLowerCase();

                    return nameValue.includes(search) || codeValue.includes(search);
                },
                shouldShowFeature(level, name, code = null) {
                    const activeLevel = this.activeZoomLevel();
                    if (!activeLevel || level !== activeLevel) {
                        return false;
                    }

                    if (!this.visibleLevels[level]) {
                        return false;
                    }

                    return this.matchesSearch(name, code);
                },
                styleForFeature(feature) {
                    const level = feature.getProperty('bound_level');
                    const name = feature.getProperty('bound_name');
                    const code = feature.getProperty('bound_code');
                    const featureId = feature.getProperty('feature_id');
                    const palette = colors[level] ?? colors.region;
                    const isSelected = this.selectedFeature?.featureId === featureId;
                    const isHovered = this.hoverFeatureId === featureId;

                    return {
                        strokeColor: palette.strokeColor,
                        strokeWeight: isSelected ? 4 : (isHovered ? 3 : 2),
                        fillColor: palette.fillColor,
                        fillOpacity: isSelected ? 0.28 : (isHovered ? 0.18 : palette.fillOpacity),
                        zIndex: isSelected ? 3 : (isHovered ? 2 : 1),
                        visible: this.shouldShowFeature(level, name, code),
                    };
                },
                refreshStyle() {
                    if (!this.dataLayer) {
                        return;
                    }

                    if (
                        this.selectedFeature &&
                        !this.shouldShowFeature(
                            this.selectedFeature.level,
                            this.selectedFeature.name,
                            this.selectedFeature.code
                        )
                    ) {
                        this.selectedFeature = null;
                    }

                    this.dataLayer.setStyle((feature) => this.styleForFeature(feature));
                    this.scheduleBuildingLabelsSync();
                },
                scheduleBuildingLabelsSync() {
                    if (this.labelSyncRafId !== null) {
                        cancelAnimationFrame(this.labelSyncRafId);
                    }

                    this.labelSyncRafId = requestAnimationFrame(() => {
                        this.labelSyncRafId = null;
                        this.syncBuildingLabels();
                    });
                },
                fitBoundsFor(predicate) {
                    if (!this.map || !this.dataLayer) {
                        return;
                    }

                    const bounds = new google.maps.LatLngBounds();
                    let hasPoints = false;

                    this.dataLayer.forEach((feature) => {
                        const level = feature.getProperty('bound_level');
                        const name = feature.getProperty('bound_name');
                        const code = feature.getProperty('bound_code');

                        if (!predicate(feature, level, name, code)) {
                            return;
                        }

                        const geometry = feature.getGeometry();
                        if (!geometry) {
                            return;
                        }

                        geometry.forEachLatLng((latLng) => {
                            bounds.extend(latLng);
                            hasPoints = true;
                        });
                    });

                    if (hasPoints) {
                        this.map.fitBounds(bounds, 28);
                    }
                },
                fitVisibleBounds() {
                    this.fitBoundsFor((feature, level, name, code) => this.shouldShowFeature(level, name, code));
                },
                fitAllBounds() {
                    this.fitBoundsFor((feature, level) => Boolean(this.visibleLevels[level]));
                },
                fitFeature(feature) {
                    if (!this.map || !feature) {
                        return;
                    }

                    const bounds = new google.maps.LatLngBounds();
                    let hasPoints = false;

                    feature.getGeometry()?.forEachLatLng((latLng) => {
                        bounds.extend(latLng);
                        hasPoints = true;
                    });

                    if (hasPoints) {
                        this.map.fitBounds(bounds, 28);
                    }
                },
                fitToSelected() {
                    if (!this.selectedFeature?.featureId) {
                        return;
                    }

                    const selected = this.features.find((entry) => entry.featureId === this.selectedFeature.featureId);
                    if (selected?.feature) {
                        this.fitFeature(selected.feature);
                    }
                },
                clearBuildingLabel(featureId) {
                    const marker = this.labelMarkersByFeatureId[featureId];
                    if (!marker) {
                        return;
                    }

                    marker.setMap(null);
                    delete this.labelMarkersByFeatureId[featureId];
                },
                clearAllBuildingLabels() {
                    Object.keys(this.labelMarkersByFeatureId).forEach((featureId) => this.clearBuildingLabel(featureId));
                },
                getFeatureLabelPosition(entry) {
                    const centroid = entry?.centroid;
                    if (
                        centroid &&
                        Number.isFinite(Number(centroid.lat)) &&
                        Number.isFinite(Number(centroid.lng))
                    ) {
                        return new google.maps.LatLng(Number(centroid.lat), Number(centroid.lng));
                    }

                    const geometry = entry?.feature?.getGeometry?.();
                    if (!geometry) {
                        return null;
                    }

                    const bounds = new google.maps.LatLngBounds();
                    let hasPoints = false;

                    geometry.forEachLatLng((latLng) => {
                        bounds.extend(latLng);
                        hasPoints = true;
                    });

                    if (!hasPoints) {
                        return null;
                    }

                    return bounds.getCenter();
                },
                createOrUpdateBuildingLabel(entry, position) {
                    const text = String(entry?.code ?? '').trim();
                    if (text === '') {
                        this.clearBuildingLabel(entry?.featureId);

                        return;
                    }

                    const isSelected = this.selectedFeature?.featureId === entry.featureId;
                    let marker = this.labelMarkersByFeatureId[entry.featureId];

                    if (!marker) {
                        marker = new google.maps.Marker({
                            map: this.map,
                            position,
                            clickable: false,
                            optimized: true,
                            zIndex: isSelected ? 1200 : 1100,
                            icon: {
                                path: google.maps.SymbolPath.CIRCLE,
                                scale: 0,
                            },
                            label: {
                                text,
                                color: '#111827',
                                fontSize: isSelected ? '12px' : '11px',
                                fontWeight: isSelected ? '700' : '600',
                            },
                        });

                        this.labelMarkersByFeatureId[entry.featureId] = marker;

                        return;
                    }

                    marker.setPosition(position);
                    marker.setZIndex(isSelected ? 1200 : 1100);
                    marker.setLabel({
                        text,
                        color: '#111827',
                        fontSize: isSelected ? '12px' : '11px',
                        fontWeight: isSelected ? '700' : '600',
                    });

                    if (!marker.getMap()) {
                        marker.setMap(this.map);
                    }
                },
                syncBuildingLabels() {
                    if (!this.map || !window.google?.maps) {
                        return;
                    }

                    if (!this.visibleLevels.building || this.currentZoom < this.buildingLabelMinZoom) {
                        this.clearAllBuildingLabels();

                        return;
                    }

                    const mapBounds = this.map.getBounds();
                    if (!mapBounds) {
                        return;
                    }

                    const visibleIds = new Set();
                    let renderedCount = 0;

                    this.features.forEach((entry) => {
                        if (entry.level !== 'building') {
                            this.clearBuildingLabel(entry.featureId);

                            return;
                        }

                        const shouldRender = this.shouldShowFeature(entry.level, entry.name, entry.code);
                        if (!shouldRender) {
                            this.clearBuildingLabel(entry.featureId);

                            return;
                        }

                        if (renderedCount >= this.maxBuildingLabels) {
                            this.clearBuildingLabel(entry.featureId);

                            return;
                        }

                        const position = this.getFeatureLabelPosition(entry);
                        if (!position || !mapBounds.contains(position)) {
                            this.clearBuildingLabel(entry.featureId);

                            return;
                        }

                        renderedCount += 1;
                        visibleIds.add(entry.featureId);
                        this.createOrUpdateBuildingLabel(entry, position);
                    });

                    Object.keys(this.labelMarkersByFeatureId).forEach((featureId) => {
                        if (!visibleIds.has(featureId)) {
                            this.clearBuildingLabel(featureId);
                        }
                    });
                },
                focusFirstMatch() {
                    const search = this.normalizedSearch();
                    if (search === '') {
                        return;
                    }

                    const matched = this.features.find((entry) => {
                        return this.shouldShowFeature(entry.level, entry.name, entry.code);
                    });

                    if (!matched) {
                        return;
                    }

                    this.selectedFeature = {
                        id: matched.id,
                        name: matched.name,
                        code: matched.code,
                        level: matched.level,
                        featureId: matched.featureId,
                    };

                    this.fitFeature(matched.feature);
                    this.refreshStyle();
                },
            };
        }
    </script>
</x-filament-panels::page>