@php
    $mapId = 'service-area-map-' . \Illuminate\Support\Str::uuid();
@endphp

<div class="space-y-4">
    @if (blank($googleMapsApiKey))
        <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
            Add <code>GOOGLE_MAPS_API_KEY</code> to enable the interactive map. You can still enter latitude, longitude,
            and radius manually below.
        </div>
    @endif

    <div
        x-data="serviceAreaMap({
            apiKey: @js($googleMapsApiKey),
            latitude: $wire.$entangle(@js($latitudeStatePath)),
            longitude: $wire.$entangle(@js($longitudeStatePath)),
            radiusKm: $wire.$entangle(@js($radiusStatePath)),
            mapId: @js($mapId),
        })"
        x-init="init()"
        class="space-y-4"
    >
        <template x-if="hasInteractiveMap">
            <div class="space-y-4" wire:ignore>
                <label class="block space-y-2">
                    <span class="text-sm font-medium text-gray-900">Search location</span>
                    <input
                        x-ref="searchInput"
                        type="text"
                        placeholder="Search for a city, postcode, or address"
                        class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-200"
                    >
                </label>

                <div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
                    <div :id="mapId" x-ref="map" style="height: 32rem;"></div>
                </div>
            </div>
        </template>

        <div class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700">
            <div>
                <strong>Center:</strong>
                <span x-text="hasCoordinates ? `${Number(latitude).toFixed(7)}, ${Number(longitude).toFixed(7)}` : 'Not set yet'"></span>
            </div>
            <div>
                <strong>Radius:</strong>
                <span x-text="isFiniteNumber(radiusKm) ? `${Number(radiusKm).toFixed(2)} km` : 'Not set yet'"></span>
            </div>
        </div>

        <p class="text-sm text-gray-500" x-show="hasInteractiveMap" x-cloak>
            Search for a location, click the map to place the center, drag the marker to move it, or resize the circle handle to set the exact service radius.
        </p>
    </div>
</div>

@once
    <script>
        window.loadGoogleMapsApi ??= (apiKey) => {
            if (window.google?.maps) {
                return Promise.resolve(window.google.maps);
            }

            if (window.__googleMapsApiPromise) {
                return window.__googleMapsApiPromise;
            }

            window.__googleMapsApiPromise = new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,geometry`;
                script.async = true;
                script.defer = true;
                script.onload = () => resolve(window.google.maps);
                script.onerror = reject;
                document.head.appendChild(script);
            });

            return window.__googleMapsApiPromise;
        };

        document.addEventListener('alpine:init', () => {
            Alpine.data('serviceAreaMap', (config) => ({
                apiKey: config.apiKey,
                latitude: config.latitude,
                longitude: config.longitude,
                radiusKm: config.radiusKm,
                mapId: config.mapId,
                map: null,
                marker: null,
                circle: null,
                autocomplete: null,
                syncingFromMap: false,
                syncingFromState: false,
                radiusSyncTimeout: null,

                get hasInteractiveMap() {
                    return Boolean(this.apiKey);
                },

                get hasCoordinates() {
                    return this.isFiniteNumber(this.latitude) && this.isFiniteNumber(this.longitude);
                },

                init() {
                    this.ensureDefaults();

                    this.$watch('latitude', () => this.syncMapFromState());
                    this.$watch('longitude', () => this.syncMapFromState());
                    this.$watch('radiusKm', () => this.syncMapFromState());

                    if (! this.hasInteractiveMap) {
                        return;
                    }

                    window.loadGoogleMapsApi(this.apiKey)
                        .then(() => this.mountMap())
                        .catch(() => {
                            console.error('Google Maps failed to load.');
                        });
                },

                ensureDefaults() {
                    if (! this.isFiniteNumber(this.radiusKm)) {
                        this.radiusKm = 10;
                    }
                },

                mountMap() {
                    if (this.map || ! this.$refs.map) {
                        return;
                    }

                    const center = this.currentCenter();

                    this.map = new google.maps.Map(this.$refs.map, {
                        center,
                        zoom: this.hasCoordinates ? 10 : 2,
                        mapTypeControl: false,
                        streetViewControl: false,
                        fullscreenControl: false,
                    });

                    this.marker = new google.maps.Marker({
                        map: this.map,
                        position: center,
                        draggable: true,
                    });

                    this.circle = new google.maps.Circle({
                        map: this.map,
                        center,
                        radius: this.radiusMeters(),
                        editable: true,
                        fillColor: '#f59e0b',
                        fillOpacity: 0.18,
                        strokeColor: '#d97706',
                        strokeOpacity: 0.9,
                        strokeWeight: 2,
                    });

                    this.map.addListener('click', (event) => {
                        this.applyMapState(event.latLng, this.circle.getRadius());
                    });

                    this.marker.addListener('dragend', () => {
                        this.applyMapState(this.marker.getPosition(), this.circle.getRadius());
                    });

                    this.circle.addListener('radius_changed', () => {
                        if (this.syncingFromState) {
                            return;
                        }

                        clearTimeout(this.radiusSyncTimeout);

                        this.radiusSyncTimeout = window.setTimeout(() => {
                            this.applyRadiusFromCircle();
                        }, 50);
                    });

                    this.initializeAutocomplete();
                    this.syncMapFromState();
                },

                initializeAutocomplete() {
                    if (! this.$refs.searchInput) {
                        return;
                    }

                    this.autocomplete = new google.maps.places.Autocomplete(this.$refs.searchInput, {
                        fields: ['geometry', 'formatted_address', 'name'],
                    });

                    this.autocomplete.addListener('place_changed', () => {
                        const place = this.autocomplete.getPlace();
                        const location = place?.geometry?.location;

                        if (! location) {
                            return;
                        }

                        if (place.formatted_address || place.name) {
                            this.$refs.searchInput.value = place.formatted_address ?? place.name ?? '';
                        }

                        this.map?.panTo(location);
                        this.map?.setZoom(11);
                        this.applyMapState(location, this.circle?.getRadius() ?? this.radiusMeters());
                    });
                },

                applyRadiusFromCircle() {
                    if (! this.circle) {
                        return;
                    }

                    this.syncingFromMap = true;
                    this.radiusKm = Number((this.circle.getRadius() / 1000).toFixed(2));
                    this.syncingFromMap = false;
                },

                applyMapState(latLng, radiusMeters) {
                    this.syncingFromMap = true;

                    this.latitude = Number(latLng.lat().toFixed(7));
                    this.longitude = Number(latLng.lng().toFixed(7));
                    this.radiusKm = Number((radiusMeters / 1000).toFixed(2));

                    this.marker?.setPosition(latLng);
                    this.circle?.setCenter(latLng);
                    this.circle?.setRadius(radiusMeters);

                    this.syncingFromMap = false;
                },

                syncMapFromState() {
                    if (this.syncingFromMap || ! this.map || ! this.marker || ! this.circle || ! this.hasCoordinates) {
                        return;
                    }

                    this.syncingFromState = true;

                    const center = this.currentCenter();
                    const radius = this.radiusMeters();

                    this.marker.setPosition(center);
                    this.circle.setCenter(center);
                    this.circle.setRadius(radius);
                    this.syncingFromState = false;
                },

                currentCenter() {
                    return {
                        lat: this.isFiniteNumber(this.latitude) ? Number(this.latitude) : 0,
                        lng: this.isFiniteNumber(this.longitude) ? Number(this.longitude) : 0,
                    };
                },

                radiusMeters() {
                    return (this.isFiniteNumber(this.radiusKm) ? Number(this.radiusKm) : 10) * 1000;
                },

                isFiniteNumber(value) {
                    return Number.isFinite(Number(value));
                },
            }));
        });
    </script>
@endonce