@php
    use Cheesegrits\FilamentGoogleMaps\Helpers\MapsHelper;
    $mapUrl = MapsHelper::mapsUrl(false, ['drawing']);
@endphp

<x-filament-panels::page>
    <div
        x-data="bulkEditMap({
            mapScriptUrl: @js($mapUrl),
            initialBuildings: @js([]),
            selectedIds: $wire.entangle('selectedIds'),
        })"
        x-init="init()"
        @filters-changed.window="onFiltersChanged($event.detail.buildings)"
        class="space-y-4"
    >
        {{-- ═══════════════ FILTER SECTION ═══════════════ --}}
        <x-filament::section>
            <x-slot name="heading">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-funnel class="h-5 w-5 text-primary-500" />
                    <span>تصفية المباني</span>
                </div>
            </x-slot>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                {{-- City / المديرية --}}
                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        المديرية <span class="text-danger-500">*</span>
                    </label>
                    <select
                        wire:model.live="cityId"
                        class="fi-select-input w-full rounded-lg border-gray-300 text-sm shadow-sm transition focus:border-primary-500 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
                    >
                        <option value="">اختر المديرية...</option>
                        @foreach ($this->cities as $city)
                            <option value="{{ $city['id'] }}">{{ $city['label'] }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- District / العزلة --}}
                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        العزلة / الحي <span class="text-danger-500">*</span>
                    </label>
                    <select
                        wire:model.live="districtId"
                        @disabled(blank($cityId))
                        class="fi-select-input w-full rounded-lg border-gray-300 text-sm shadow-sm transition focus:border-primary-500 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
                    >
                        <option value="">اختر العزلة...</option>
                        @foreach ($this->districts as $district)
                            <option value="{{ $district['id'] }}">{{ $district['label'] }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Block / الحارة --}}
                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        القرية / الحارة <span class="text-xs text-gray-400">(اختياري)</span>
                    </label>
                    <select
                        wire:model.live="blockId"
                        @disabled(blank($districtId))
                        class="fi-select-input w-full rounded-lg border-gray-300 text-sm shadow-sm transition focus:border-primary-500 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
                    >
                        <option value="">الكل</option>
                        @foreach ($this->blocks as $block)
                            <option value="{{ $block['id'] }}">{{ $block['label'] }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </x-filament::section>

        {{-- ═══════════════ MAP + SIDEBAR LAYOUT ═══════════════ --}}
        <div class="grid gap-4 xl:grid-cols-[340px_minmax(0,1fr)]">

            {{-- ────── Sidebar: selection info + selected list ────── --}}
            <div class="space-y-4">
                {{-- Stats --}}
                <x-filament::section>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">إجمالي المباني</span>
                            <span
                                class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-bold text-gray-800 dark:bg-gray-800 dark:text-gray-200"
                                x-text="buildings.length"
                            ></span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-primary-600 dark:text-primary-400">المباني المحددة</span>
                            <span
                                class="inline-flex items-center rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-bold text-primary-800 dark:bg-primary-900/30 dark:text-primary-300"
                                x-text="selectedIds.length"
                            ></span>
                        </div>

                        <div class="flex flex-wrap gap-2 border-t border-gray-200 pt-3 dark:border-gray-700">
                            <button
                                type="button"
                                @click="selectAllOnMap()"
                                class="flex-1 rounded-lg bg-primary-600 px-3 py-2 text-xs font-medium text-white transition hover:bg-primary-500"
                            >
                                تحديد الكل
                            </button>
                            <button
                                type="button"
                                @click="clearSelection()"
                                x-show="selectedIds.length > 0"
                                class="flex-1 rounded-lg border border-danger-300 bg-danger-50 px-3 py-2 text-xs font-medium text-danger-700 transition hover:bg-danger-100 dark:border-danger-700 dark:bg-danger-900/30 dark:text-danger-300"
                            >
                                إلغاء التحديد
                            </button>
                        </div>
                    </div>
                </x-filament::section>

                {{-- Search within map --}}
                <x-filament::section>
                    <div class="space-y-2">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-200">بحث في المباني</label>
                        <input
                            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="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="focusSearchResult()"
                            :disabled="searchTerm.trim() === ''"
                        >
                            تركيز أول نتيجة
                        </button>
                    </div>
                </x-filament::section>

                {{-- Selected buildings list --}}
                <x-filament::section x-show="selectedIds.length > 0" x-cloak>
                    <x-slot name="heading">
                        <span class="text-sm">المباني المحددة</span>
                    </x-slot>

                    <div class="max-h-[280px] space-y-1.5 overflow-y-auto">
                        <template x-for="b in selectedBuildingsInfo()" :key="b.id">
                            <div class="flex items-center justify-between rounded-lg border border-primary-200 bg-primary-50/50 px-2.5 py-1.5 dark:border-primary-800 dark:bg-primary-950/30">
                                <div class="min-w-0 flex-1">
                                    <span class="block truncate text-xs font-bold text-primary-700 dark:text-primary-300" x-text="b.building_code"></span>
                                    <span class="block truncate text-[10px] text-gray-500 dark:text-gray-400" x-text="b.name"></span>
                                </div>
                                <button
                                    type="button"
                                    @click="toggleSelection(b.id)"
                                    class="ms-2 flex-shrink-0 rounded-full p-0.5 text-danger-500 transition hover:bg-danger-100 dark:hover:bg-danger-900/30"
                                >
                                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </template>
                    </div>
                </x-filament::section>

                {{-- Map legend --}}
                <x-filament::section>
                    <div class="space-y-2 text-xs">
                        <p class="font-medium text-gray-700 dark:text-gray-200">دليل الألوان</p>
                        <div class="flex items-center gap-2">
                            <span class="inline-block h-3 w-5 rounded border border-rose-300 bg-rose-200/60"></span>
                            <span class="text-gray-600 dark:text-gray-400">مبنى غير محدد</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="inline-block h-3 w-5 rounded border border-emerald-400 bg-emerald-400/70"></span>
                            <span class="text-gray-600 dark:text-gray-400">مبنى محدد</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="inline-block h-3 w-5 rounded border-2 border-amber-500 bg-amber-300/60"></span>
                            <span class="text-gray-600 dark:text-gray-400">مبنى تحت المؤشر</span>
                        </div>
                    </div>
                </x-filament::section>
            </div>

            {{-- ────── Map ────── --}}
            <x-filament::section>
                <div class="relative" wire:ignore>
                    <div
                        id="bulk-edit-map"
                        class="w-full rounded-xl border border-gray-200 dark:border-gray-700"
                        style="min-height: 65vh;"
                    ></div>

                    {{-- Loading overlay --}}
                    <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 class="flex items-center gap-2">
                            <svg class="h-5 w-5 animate-spin text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                            </svg>
                            <span>جاري تحميل الخريطة...</span>
                        </div>
                    </div>

                    {{-- Empty state --}}
                    <div
                        x-show="isMapReady && buildings.length === 0"
                        x-cloak
                        class="absolute inset-0 flex flex-col items-center justify-center rounded-xl bg-white/90 dark:bg-gray-900/90"
                    >
                        <x-heroicon-o-map-pin class="mb-3 h-12 w-12 text-gray-300 dark:text-gray-600" />
                        <p class="text-sm font-medium text-gray-700 dark:text-gray-300">اختر المديرية والعزلة لعرض المباني</p>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">انقر على مبنى في الخريطة لتحديده أو إلغاء تحديده</p>
                    </div>

                    {{-- Error --}}
                    <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>

                    {{-- Info box on hover --}}
                    <div
                        x-show="hoveredBuilding !== null"
                        x-cloak
                        class="pointer-events-none absolute start-4 top-4 z-10 rounded-xl border border-gray-200 bg-white/95 px-4 py-3 shadow-lg backdrop-blur dark:border-gray-700 dark:bg-gray-900/95"
                    >
                        <p class="text-xs font-bold text-primary-600 dark:text-primary-400" x-text="hoveredBuilding?.building_code"></p>
                        <p class="text-sm font-medium text-gray-900 dark:text-gray-100" x-text="hoveredBuilding?.name"></p>
                        <div class="mt-1 flex flex-wrap gap-1.5">
                            <span class="inline-flex items-center rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 ring-1 ring-inset ring-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:ring-blue-800" x-text="hoveredBuilding?.building_type_label"></span>
                            <span class="inline-flex items-center rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-700 ring-1 ring-inset ring-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700" x-text="hoveredBuilding?.status_label"></span>
                            <template x-if="hoveredBuilding?.block_name">
                                <span class="inline-flex items-center rounded bg-purple-50 px-1.5 py-0.5 text-[10px] font-medium text-purple-700 ring-1 ring-inset ring-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:ring-purple-800" x-text="hoveredBuilding?.block_name"></span>
                            </template>
                        </div>
                        <p class="mt-1 text-[10px] text-gray-400">
                            <span x-text="isSelected(hoveredBuilding?.id) ? '✓ محدد — انقر لإلغاء التحديد' : 'انقر للتحديد'"></span>
                        </p>
                    </div>
                </div>
            </x-filament::section>
        </div>

        {{-- ═══════════════ BULK EDIT PANEL ═══════════════ --}}
        <div x-show="selectedIds.length > 0" x-cloak x-transition>
            <x-filament::section>
                <x-slot name="heading">
                    <div class="flex items-center gap-2">
                        <x-heroicon-o-pencil-square class="h-5 w-5 text-primary-500" />
                        <span>تعديل المباني المحددة</span>
                        <span
                            class="inline-flex items-center rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-medium text-primary-800 dark:bg-primary-900/30 dark:text-primary-300"
                            x-text="selectedIds.length + ' مبنى'"
                        ></span>
                    </div>
                </x-slot>

                <x-slot name="description">
                    فعّل الحقل الذي تريد تعديله، ثم أدخل القيمة الجديدة. سيتم تطبيق القيمة على جميع المباني المحددة.
                </x-slot>

                <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                    {{-- Name --}}
                    <div class="rounded-xl border border-gray-200 p-4 transition dark:border-gray-700"
                         :class="$wire.editName && 'bg-primary-50/50 border-primary-200 dark:bg-primary-950/20 dark:border-primary-800'">
                        <div class="mb-3 flex items-center justify-between">
                            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">اسم / وصف المبنى</label>
                            <label class="relative inline-flex cursor-pointer items-center">
                                <input type="checkbox" wire:model.live="editName" class="peer sr-only">
                                <div class="peer h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-300 dark:bg-gray-600 dark:peer-focus:ring-primary-800 rtl:peer-checked:after:-translate-x-full"></div>
                            </label>
                        </div>
                        @if ($editName)
                            <input type="text" wire:model="bulkName" placeholder="أدخل الاسم الجديد..."
                                class="w-full rounded-lg border-gray-300 text-sm shadow-sm transition focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200" />
                        @endif
                    </div>

                    {{-- Building Type --}}
                    <div class="rounded-xl border border-gray-200 p-4 transition dark:border-gray-700"
                         :class="$wire.editBuildingType && 'bg-primary-50/50 border-primary-200 dark:bg-primary-950/20 dark:border-primary-800'">
                        <div class="mb-3 flex items-center justify-between">
                            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">نوع المبنى</label>
                            <label class="relative inline-flex cursor-pointer items-center">
                                <input type="checkbox" wire:model.live="editBuildingType" class="peer sr-only">
                                <div class="peer h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-300 dark:bg-gray-600 dark:peer-focus:ring-primary-800 rtl:peer-checked:after:-translate-x-full"></div>
                            </label>
                        </div>
                        @if ($editBuildingType)
                            <select wire:model="bulkBuildingType"
                                class="w-full rounded-lg border-gray-300 text-sm shadow-sm transition focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">
                                <option value="">اختر النوع...</option>
                                @foreach ($this->buildingTypeOptions as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>

                    {{-- Status --}}
                    <div class="rounded-xl border border-gray-200 p-4 transition dark:border-gray-700"
                         :class="$wire.editStatus && 'bg-primary-50/50 border-primary-200 dark:bg-primary-950/20 dark:border-primary-800'">
                        <div class="mb-3 flex items-center justify-between">
                            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">الحالة</label>
                            <label class="relative inline-flex cursor-pointer items-center">
                                <input type="checkbox" wire:model.live="editStatus" class="peer sr-only">
                                <div class="peer h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-300 dark:bg-gray-600 dark:peer-focus:ring-primary-800 rtl:peer-checked:after:-translate-x-full"></div>
                            </label>
                        </div>
                        @if ($editStatus)
                            <select wire:model="bulkStatus"
                                class="w-full rounded-lg border-gray-300 text-sm shadow-sm transition focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">
                                <option value="">اختر الحالة...</option>
                                @foreach ($this->statusOptions as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>

                    {{-- Block --}}
                    <div class="rounded-xl border border-gray-200 p-4 transition dark:border-gray-700"
                         :class="$wire.editBlock && 'bg-primary-50/50 border-primary-200 dark:bg-primary-950/20 dark:border-primary-800'">
                        <div class="mb-3 flex items-center justify-between">
                            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">القرية / الحارة</label>
                            <label class="relative inline-flex cursor-pointer items-center">
                                <input type="checkbox" wire:model.live="editBlock" class="peer sr-only">
                                <div class="peer h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-300 dark:bg-gray-600 dark:peer-focus:ring-primary-800 rtl:peer-checked:after:-translate-x-full"></div>
                            </label>
                        </div>
                        @if ($editBlock)
                            <select wire:model="bulkBlockId"
                                class="w-full rounded-lg border-gray-300 text-sm shadow-sm transition focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">
                                <option value="">اختر الحارة...</option>
                                @foreach ($this->targetBlocks as $block)
                                    <option value="{{ $block['id'] }}">{{ $block['label'] }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                </div>

                {{-- Apply Button --}}
                <div class="mt-6 flex items-center justify-end gap-3 border-t border-gray-200 pt-4 dark:border-gray-700">
                    <button type="button" @click="clearSelection()"
                        class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                        إلغاء
                    </button>
                    <button type="button" @click="showConfirm = true"
                        class="inline-flex items-center gap-1.5 rounded-lg bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:ring-offset-2">
                        <x-heroicon-m-check class="h-4 w-4" />
                        تطبيق التعديلات
                    </button>
                </div>
            </x-filament::section>
        </div>

        {{-- ═══════════════ CONFIRMATION MODAL ═══════════════ --}}
        <div
            x-show="showConfirm"
            x-cloak
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
            @keydown.escape.window="showConfirm = false"
        >
            <div
                x-show="showConfirm"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl dark:bg-gray-900"
                @click.outside="showConfirm = false"
            >
                <div class="mb-4 flex items-center gap-3">
                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30">
                        <x-heroicon-o-exclamation-triangle class="h-5 w-5 text-amber-600 dark:text-amber-400" />
                    </div>
                    <div>
                        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">تأكيد التعديل الجماعي</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            سيتم تعديل <span class="font-bold text-primary-600" x-text="selectedIds.length"></span> مبنى
                        </p>
                    </div>
                </div>

                <div class="flex items-center justify-end gap-2">
                    <button type="button" @click="showConfirm = false"
                        class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">
                        إلغاء
                    </button>
                    <button type="button"
                        wire:click="applyBulkEdit"
                        @click="showConfirm = false"
                        wire:loading.attr="disabled"
                        class="inline-flex items-center gap-1.5 rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-primary-500 disabled:opacity-50">
                        <span wire:loading.remove wire:target="applyBulkEdit">تأكيد التعديل</span>
                        <span wire:loading wire:target="applyBulkEdit">جاري التعديل...</span>
                    </button>
                </div>
            </div>
        </div>

    </div>

    {{-- ═══════════════ MAP JAVASCRIPT ═══════════════ --}}
    <script>
        function bulkEditMap(config) {
            return {
                map: null,
                dataLayer: null,
                mapScriptUrl: config.mapScriptUrl ?? '',
                buildings: config.initialBuildings ?? [],
                buildingMap: {},          // id → building data
                featureMap: {},           // id → google.maps.Data.Feature
                labelMarkers: {},         // id → google.maps.Marker
                selectedIds: config.selectedIds ?? [],
                hoveredBuilding: null,
                hoveredFeatureId: null,
                searchTerm: '',
                isMapReady: false,
                mapError: null,
                showConfirm: false,

                /* ─── Initialization ─── */

                async init() {
                    try {
                        await this.loadGoogleMaps();
                        this.createMap();
                    } catch (error) {
                        this.mapError = 'تعذر تحميل خريطة Google. تأكد من إعدادات API Key.';
                        console.error(error);
                    }
                },

                async loadGoogleMaps() {
                    if (window.google?.maps) return;

                    if (!window.__bulkEditMapLoader) {
                        window.__bulkEditMapLoader = new Promise((resolve, reject) => {
                            const cb = '__initBulkEditMapCb';
                            const script = document.createElement('script');
                            const url = new URL(this.mapScriptUrl, window.location.origin);

                            window[cb] = () => { resolve(); delete window[cb]; };
                            url.searchParams.set('callback', cb);
                            url.searchParams.set('loading', 'async');
                            script.src = url.toString();
                            script.async = true;
                            script.defer = true;
                            script.onerror = () => reject(new Error('Google Maps failed'));
                            document.head.appendChild(script);
                        });
                    }

                    await window.__bulkEditMapLoader;
                },

                createMap() {
                    const el = document.getElementById('bulk-edit-map');
                    if (!el) { this.mapError = 'لم يتم العثور على عنصر الخريطة.'; return; }

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

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

                    // Click = toggle selection
                    this.dataLayer.addListener('click', (e) => {
                        const id = e.feature.getProperty('building_id');
                        if (id) this.toggleSelection(id);
                    });

                    // Hover
                    this.dataLayer.addListener('mouseover', (e) => {
                        const id = e.feature.getProperty('building_id');
                        this.hoveredFeatureId = id;
                        this.hoveredBuilding = this.buildingMap[id] ?? null;
                        this.map.getDiv().style.cursor = 'pointer';
                        this.refreshStyles();
                    });

                    this.dataLayer.addListener('mouseout', () => {
                        this.hoveredFeatureId = null;
                        this.hoveredBuilding = null;
                        this.map.getDiv().style.cursor = '';
                        this.refreshStyles();
                    });

                    // Watch selectedIds for external changes (from Livewire)
                    this.$watch('selectedIds', () => this.refreshStyles());

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

                    this.isMapReady = true;
                },

                /* ─── Building Data Management ─── */

                onFiltersChanged(newBuildings) {
                    this.clearAllFeatures();
                    this.buildings = newBuildings ?? [];
                    this.buildingMap = {};
                    this.featureMap = {};

                    this.buildings.forEach(b => {
                        this.buildingMap[b.id] = b;
                        this.addBuildingFeature(b);
                    });

                    this.refreshStyles();
                    this.fitBounds();
                },

                addBuildingFeature(b) {
                    const geojson = this.normalizeGeoJson(b.geojson);
                    if (!geojson) return;

                    try {
                        const added = this.dataLayer.addGeoJson(geojson);
                        if (added && added.length > 0) {
                            added.forEach(f => {
                                f.setProperty('building_id', b.id);
                                this.featureMap[b.id] = f;
                            });
                        }
                    } catch (err) {
                        console.warn('Failed to add building', b.id, err);
                    }
                },

                normalizeGeoJson(input) {
                    if (typeof input === 'string') {
                        try { input = JSON.parse(input); } catch (_) { return null; }
                    }
                    if (!input || typeof input !== 'object') return null;

                    const geoTypes = ['Point','MultiPoint','LineString','MultiLineString','Polygon','MultiPolygon','GeometryCollection'];

                    if (input.type === 'FeatureCollection') return input;
                    if (input.type === 'Feature') return { type: 'FeatureCollection', features: [input] };
                    if (geoTypes.includes(input.type)) {
                        return { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: input, properties: {} }] };
                    }
                    return null;
                },

                clearAllFeatures() {
                    if (this.dataLayer) {
                        this.dataLayer.forEach(f => this.dataLayer.remove(f));
                    }
                    this.clearAllLabels();
                    this.featureMap = {};
                },

                /* ─── Selection ─── */

                toggleSelection(id) {
                    const idx = this.selectedIds.indexOf(id);
                    if (idx >= 0) {
                        this.selectedIds.splice(idx, 1);
                    } else {
                        this.selectedIds.push(id);
                    }
                    // Sync to Livewire
                    this.$wire.setSelectedIds([...this.selectedIds]);
                    this.refreshStyles();
                },

                isSelected(id) {
                    return this.selectedIds.includes(id);
                },

                selectAllOnMap() {
                    const allIds = this.buildings.map(b => b.id);
                    this.selectedIds = [...allIds];
                    this.$wire.setSelectedIds([...this.selectedIds]);
                    this.refreshStyles();
                },

                clearSelection() {
                    this.selectedIds = [];
                    this.$wire.deselectAll();
                    this.refreshStyles();
                },

                selectedBuildingsInfo() {
                    return this.selectedIds
                        .map(id => this.buildingMap[id])
                        .filter(b => b);
                },

                /* ─── Styling ─── */

                refreshStyles() {
                    if (!this.dataLayer) return;

                    this.dataLayer.setStyle((feature) => {
                        const id = feature.getProperty('building_id');
                        const selected = this.isSelected(id);
                        const hovered = this.hoveredFeatureId === id;

                        if (selected) {
                            return {
                                strokeColor: '#10b981',
                                strokeWeight: hovered ? 4 : 3,
                                fillColor: '#34d399',
                                fillOpacity: hovered ? 0.65 : 0.5,
                                zIndex: hovered ? 4 : 3,
                                visible: true,
                            };
                        }

                        if (hovered) {
                            return {
                                strokeColor: '#f59e0b',
                                strokeWeight: 3,
                                fillColor: '#fcd34d',
                                fillOpacity: 0.5,
                                zIndex: 2,
                                visible: true,
                            };
                        }

                        return {
                            strokeColor: '#e11d48',
                            strokeWeight: 1.5,
                            fillColor: '#fda4af',
                            fillOpacity: 0.35,
                            zIndex: 1,
                            visible: true,
                        };
                    });
                },

                /* ─── Map Controls ─── */

                fitBounds() {
                    if (!this.map || this.buildings.length === 0) return;

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

                    this.buildings.forEach(b => {
                        if (b.centroid) {
                            bounds.extend(new google.maps.LatLng(b.centroid.lat, b.centroid.lng));
                            hasPoints = true;
                        }
                    });

                    // Fallback: iterate features
                    if (!hasPoints) {
                        this.dataLayer.forEach(f => {
                            f.getGeometry()?.forEachLatLng(ll => {
                                bounds.extend(ll);
                                hasPoints = true;
                            });
                        });
                    }

                    if (hasPoints) {
                        this.map.fitBounds(bounds, 40);
                    }
                },

                focusSearchResult() {
                    const term = this.searchTerm.trim().toLowerCase();
                    if (!term) return;

                    const match = this.buildings.find(b =>
                        (b.building_code ?? '').toLowerCase().includes(term) ||
                        (b.name ?? '').toLowerCase().includes(term) ||
                        (b.external_number ?? '').toLowerCase().includes(term)
                    );

                    if (!match) return;

                    // Zoom to building
                    const feature = this.featureMap[match.id];
                    if (feature) {
                        const bounds = new google.maps.LatLngBounds();
                        feature.getGeometry()?.forEachLatLng(ll => bounds.extend(ll));
                        this.map.fitBounds(bounds, 60);
                    } else if (match.centroid) {
                        this.map.setCenter(match.centroid);
                        this.map.setZoom(19);
                    }

                    // Highlight
                    this.hoveredBuilding = match;
                    this.hoveredFeatureId = match.id;
                    this.refreshStyles();

                    setTimeout(() => {
                        this.hoveredBuilding = null;
                        this.hoveredFeatureId = null;
                        this.refreshStyles();
                    }, 3000);
                },

                /* ─── Labels ─── */

                clearAllLabels() {
                    Object.values(this.labelMarkers).forEach(m => m.setMap(null));
                    this.labelMarkers = {};
                },

                syncLabels() {
                    if (!this.map || !window.google?.maps) return;

                    const zoom = this.map.getZoom();
                    if (zoom < 17) {
                        this.clearAllLabels();
                        return;
                    }

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

                    const visibleIds = new Set();

                    this.buildings.forEach(b => {
                        if (!b.centroid) return;

                        const pos = new google.maps.LatLng(b.centroid.lat, b.centroid.lng);
                        if (!mapBounds.contains(pos)) {
                            if (this.labelMarkers[b.id]) {
                                this.labelMarkers[b.id].setMap(null);
                                delete this.labelMarkers[b.id];
                            }
                            return;
                        }

                        visibleIds.add(b.id);
                        const selected = this.isSelected(b.id);
                        const text = b.building_code ?? '';

                        if (!this.labelMarkers[b.id]) {
                            this.labelMarkers[b.id] = new google.maps.Marker({
                                map: this.map,
                                position: pos,
                                clickable: false,
                                optimized: true,
                                zIndex: selected ? 1200 : 1100,
                                icon: { path: google.maps.SymbolPath.CIRCLE, scale: 0 },
                                label: {
                                    text,
                                    color: selected ? '#065f46' : '#111827',
                                    fontSize: selected ? '12px' : '10px',
                                    fontWeight: selected ? '700' : '600',
                                },
                            });
                        } else {
                            const marker = this.labelMarkers[b.id];
                            marker.setPosition(pos);
                            marker.setZIndex(selected ? 1200 : 1100);
                            marker.setLabel({
                                text,
                                color: selected ? '#065f46' : '#111827',
                                fontSize: selected ? '12px' : '10px',
                                fontWeight: selected ? '700' : '600',
                            });
                            if (!marker.getMap()) marker.setMap(this.map);
                        }
                    });

                    // Remove labels no longer visible
                    Object.keys(this.labelMarkers).forEach(id => {
                        if (!visibleIds.has(Number(id))) {
                            this.labelMarkers[id].setMap(null);
                            delete this.labelMarkers[id];
                        }
                    });
                },
            };
        }
    </script>
</x-filament-panels::page>