@props([
    'prefix' => 'address',
    'lat' => null,
    'lng' => null,
    'formatted' => null,
    'label' => 'Адрес на карте',
    'required' => true,
])

{{-- Shared OSM address picker: pin/drag/search → reverse-geocode fills the hidden
     fields. The address is only accepted if it geocodes (real coordinates), so a
     made-up address cannot be saved. City is resolved server-side from the coords. --}}
<div x-data="addressPicker({
        lat: {{ $lat !== null ? $lat : 'null' }},
        lng: {{ $lng !== null ? $lng : 'null' }},
        formatted: @js($formatted),
        searchUrl: '{{ route('geo.search') }}',
        reverseUrl: '{{ route('geo.reverse') }}',
     })" x-init="init()" class="space-y-2">
    <label class="block text-sm font-semibold text-[var(--color-ink)]">
        {{ $label }} @if ($required)<span class="text-[var(--color-sale)]">*</span>@endif
    </label>
    <p class="text-xs text-[var(--color-muted)]">Кликните по карте или перетащите маркер — либо впишите адрес и нажмите «Найти». Город определится автоматически.</p>

    <div class="relative">
        <div x-ref="map" :class="expanded ? 'h-[520px]' : 'h-56'"
             class="w-full overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-line)] transition-[height] duration-200"></div>
        <button type="button" @click="toggleSize()"
                class="absolute right-3 top-3 z-[400] inline-flex items-center gap-1.5 rounded-[var(--radius-sm)] border border-[var(--color-line)] bg-white/95 px-2.5 py-1.5 text-xs font-bold text-[var(--color-ink)] shadow-sm hover:text-[var(--color-primary)]">
            <i data-lucide="maximize-2" class="h-3.5 w-3.5" x-show="!expanded"></i>
            <i data-lucide="minimize-2" class="h-3.5 w-3.5" x-cloak x-show="expanded"></i>
            <span x-text="expanded ? 'Свернуть' : 'Развернуть'"></span>
        </button>
        <span class="pointer-events-none absolute bottom-3 left-3 z-[400] rounded-[var(--radius-sm)] bg-white/90 px-2 py-1 text-[11px] font-semibold text-[var(--color-muted)]">Ctrl + колесо — масштаб</span>
    </div>

    <div class="flex gap-2">
        <input type="text" x-model="query" @keydown.enter.prevent="search()"
               placeholder="Впишите адрес и нажмите «Найти»"
               class="w-full flex-1 rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--color-primary)]">
        <button type="button" @click="search()" :disabled="searching"
                class="shrink-0 whitespace-nowrap rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2.5 text-sm font-bold text-[var(--color-ink)] disabled:opacity-50">
            <span x-show="!searching">Найти</span>
            <span x-show="searching" x-cloak>Ищу…</span>
        </button>
    </div>

    <p x-show="notFound" x-cloak class="text-xs text-[var(--color-sale)]">Адрес не найден — уточните формулировку или укажите точку на карте.</p>
    <p x-show="formatted" x-cloak class="text-xs text-[var(--color-success)]">✓ Адрес: <span class="font-semibold" x-text="formatted"></span></p>

    <input type="hidden" name="{{ $prefix }}_formatted" x-model="formatted">
    <input type="hidden" name="{{ $prefix }}_lat" x-model="lat">
    <input type="hidden" name="{{ $prefix }}_lng" x-model="lng">

    @error($prefix.'_lat')<span class="block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
    @error($prefix.'_formatted')<span class="block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
</div>