@props([
    'latitude' => null,
    'longitude' => null,
    'address' => null,
    'readonly' => false,
    'height' => '400px',
    'zoom' => 13,
])

<div class="map-picker-container">
    @unless($readonly)
    <div class="mb-3 position-relative">
        <label class="form-label">{{ __('dashboard.search_location') }}</label>
        <div class="input-group">
            <span class="input-group-text"><i class="ri-search-line"></i></span>
            <input type="text"
                   id="map-search-input"
                   class="form-control"
                   placeholder="{{ __('dashboard.search_address_placeholder') }}"
                   autocomplete="off">
            <span class="input-group-text search-spinner d-none">
                <span class="spinner-border spinner-border-sm" role="status"></span>
            </span>
        </div>
        <div id="map-search-suggestions" class="search-suggestions"></div>
    </div>
    @endunless

    <div id="map-container" style="height: {{ $height }}; border-radius: 8px; overflow: hidden;" class="mb-3"></div>

    @unless($readonly)
    <div class="row">
        <div class="col-md-6 mb-3">
            {{--  <label class="form-label">{{ __('dashboard.latitude') }}</label>  --}}
            <input type="hidden"
                   name="latitude"
                   id="latitude-input"
                   class="form-control"
                   value="{{ $latitude }}"
                   readonly>
        </div>
        <div class="col-md-6 mb-3">
            {{--  <label class="form-label">{{ __('dashboard.longitude') }}</label>  --}}
            <input type="hidden"
                   name="longitude"
                   id="longitude-input"
                   class="form-control"
                   value="{{ $longitude }}"
                   readonly>
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label">{{ __('dashboard.selected_address') }}</label>
        <textarea name="address"
                  id="address-input"
                  class="form-control"
                  rows="2"
                  placeholder="{{ __('dashboard.address_will_appear_here') }}">{{ $address }}</textarea>
    </div>
    @endunless
</div>

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    .map-picker-container .leaflet-control-zoom {
        border: none;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .map-picker-container .leaflet-control-zoom a {
        background: #fff;
        color: #333;
    }
    .map-picker-container .leaflet-control-zoom a:hover {
        background: #f4f4f4;
    }
    #map-search-input:focus {
        border-color: #405189;
        box-shadow: 0 0 0 0.15rem rgba(64, 81, 137, 0.25);
    }
    .search-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        background: #fff;
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 280px;
        overflow-y: auto;
        display: none;
    }
    .search-suggestions.show {
        display: block;
    }
    .search-suggestion-item {
        padding: 10px 14px;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.15s ease;
    }
    .search-suggestion-item:last-child {
        border-bottom: none;
    }
    .search-suggestion-item:hover,
    .search-suggestion-item.active {
        background-color: #f0f4ff;
    }
    .search-suggestion-item .suggestion-name {
        font-weight: 500;
        color: #333;
        font-size: 0.9rem;
    }
    .search-suggestion-item .suggestion-address {
        font-size: 0.8rem;
        color: #6c757d;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .search-suggestion-item .suggestion-icon {
        color: #405189;
        margin-right: 10px;
    }
    .search-no-results {
        padding: 12px 14px;
        color: #6c757d;
        text-align: center;
        font-size: 0.875rem;
    }
</style>
@endpush

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const defaultLat = {{ $latitude ?? 24.7136 }};
    const defaultLng = {{ $longitude ?? 46.6753 }};
    const isReadonly = {{ $readonly ? 'true' : 'false' }};
    const zoomLevel = {{ $zoom }};

    const map = L.map('map-container').setView([defaultLat, defaultLng], zoomLevel);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    }).addTo(map);

    let marker = L.marker([defaultLat, defaultLng], {
        draggable: !isReadonly
    }).addTo(map);

    if (!isReadonly) {
        const latInput = document.getElementById('latitude-input');
        const lngInput = document.getElementById('longitude-input');
        const addressInput = document.getElementById('address-input');
        const searchInput = document.getElementById('map-search-input');

        function updateInputs(lat, lng) {
            latInput.value = lat.toFixed(8);
            lngInput.value = lng.toFixed(8);
        }

        function reverseGeocode(lat, lng) {
            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`)
                .then(response => response.json())
                .then(data => {
                    if (data.display_name) {
                        addressInput.value = data.display_name;
                    }
                })
                .catch(error => console.log('Geocoding error:', error));
        }

        marker.on('dragend', function(e) {
            const position = marker.getLatLng();
            updateInputs(position.lat, position.lng);
            reverseGeocode(position.lat, position.lng);
        });

        map.on('click', function(e) {
            marker.setLatLng(e.latlng);
            updateInputs(e.latlng.lat, e.latlng.lng);
            reverseGeocode(e.latlng.lat, e.latlng.lng);
        });

        const suggestionsContainer = document.getElementById('map-search-suggestions');
        const searchSpinner = document.querySelector('.search-spinner');
        let searchTimeout;
        let activeIndex = -1;
        let currentResults = [];

        function showSpinner() {
            searchSpinner.classList.remove('d-none');
        }

        function hideSpinner() {
            searchSpinner.classList.add('d-none');
        }

        function showSuggestions(results) {
            currentResults = results;
            activeIndex = -1;

            if (results.length === 0) {
                suggestionsContainer.innerHTML = '<div class="search-no-results"><i class="ri-map-pin-line me-1"></i>{{ __("dashboard.no_locations_found") }}</div>';
                suggestionsContainer.classList.add('show');
                return;
            }

            const html = results.map((result, index) => {
                const nameParts = result.display_name.split(',');
                const name = nameParts[0].trim();
                const address = nameParts.slice(1).join(',').trim();

                return `
                    <div class="search-suggestion-item" data-index="${index}">
                        <div class="d-flex align-items-start">
                            <i class="ri-map-pin-2-fill suggestion-icon mt-1"></i>
                            <div class="flex-grow-1 overflow-hidden">
                                <div class="suggestion-name">${name}</div>
                                <div class="suggestion-address">${address}</div>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');

            suggestionsContainer.innerHTML = html;
            suggestionsContainer.classList.add('show');

            // Add click handlers
            suggestionsContainer.querySelectorAll('.search-suggestion-item').forEach(item => {
                item.addEventListener('click', function() {
                    const index = parseInt(this.dataset.index);
                    selectSuggestion(index);
                });
            });
        }

        function hideSuggestions() {
            suggestionsContainer.classList.remove('show');
            activeIndex = -1;
        }

        function selectSuggestion(index) {
            if (index < 0 || index >= currentResults.length) return;

            const result = currentResults[index];
            const lat = parseFloat(result.lat);
            const lng = parseFloat(result.lon);

            // Use bounding box for precise zoom to the exact place geometry
            if (result.boundingbox && result.boundingbox.length === 4) {
                const south = parseFloat(result.boundingbox[0]);
                const north = parseFloat(result.boundingbox[1]);
                const west = parseFloat(result.boundingbox[2]);
                const east = parseFloat(result.boundingbox[3]);

                const bounds = L.latLngBounds(
                    L.latLng(south, west),
                    L.latLng(north, east)
                );

                map.flyToBounds(bounds, {
                    padding: [20, 20],
                    maxZoom: 18,
                    duration: 0.8
                });
            } else {
                // Fallback to center with detailed zoom
                map.flyTo([lat, lng], 17, { duration: 0.8 });
            }

            marker.setLatLng([lat, lng]);
            updateInputs(lat, lng);
            addressInput.value = result.display_name;
            searchInput.value = result.display_name.split(',')[0].trim();

            hideSuggestions();
        }

        function updateActiveItem() {
            const items = suggestionsContainer.querySelectorAll('.search-suggestion-item');
            items.forEach((item, index) => {
                item.classList.toggle('active', index === activeIndex);
            });

            if (activeIndex >= 0 && items[activeIndex]) {
                items[activeIndex].scrollIntoView({ block: 'nearest' });
            }
        }

        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            const query = this.value.trim();

            if (query.length < 3) {
                hideSuggestions();
                return;
            }

            showSpinner();
            searchTimeout = setTimeout(() => {
                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=5&addressdetails=1`)
                    .then(response => response.json())
                    .then(data => {
                        hideSpinner();
                        showSuggestions(data);
                    })
                    .catch(error => {
                        hideSpinner();
                        console.log('Search error:', error);
                    });
            }, 400);
        });

        searchInput.addEventListener('keydown', function(e) {
            if (!suggestionsContainer.classList.contains('show')) return;

            const items = suggestionsContainer.querySelectorAll('.search-suggestion-item');
            if (items.length === 0) return;

            switch (e.key) {
                case 'ArrowDown':
                    e.preventDefault();
                    activeIndex = Math.min(activeIndex + 1, items.length - 1);
                    updateActiveItem();
                    break;
                case 'ArrowUp':
                    e.preventDefault();
                    activeIndex = Math.max(activeIndex - 1, 0);
                    updateActiveItem();
                    break;
                case 'Enter':
                    e.preventDefault();
                    if (activeIndex >= 0) {
                        selectSuggestion(activeIndex);
                    } else if (currentResults.length > 0) {
                        selectSuggestion(0);
                    }
                    break;
                case 'Escape':
                    hideSuggestions();
                    break;
            }
        });

        // Close suggestions when clicking outside
        document.addEventListener('click', function(e) {
            if (!searchInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
                hideSuggestions();
            }
        });

        searchInput.addEventListener('focus', function() {
            if (currentResults.length > 0 && this.value.trim().length >= 3) {
                suggestionsContainer.classList.add('show');
            }
        });

        // Only populate inputs if custom coordinates were provided (not the Saudi Arabia default)
        if (defaultLat !== 24.7136 || defaultLng !== 46.6753) {
            updateInputs(defaultLat, defaultLng);
        }
    }

    setTimeout(() => map.invalidateSize(), 100);
});
</script>
@endpush