Vue.component('tt-map', {
    props: {
        markersData: { type: Array, default: () => [] },
        config: { type: Object, default: () => ({}) },
        loading: { type: Boolean, default: false },
        showLogo: { type: Boolean, default: false },
        contextmenu: { type: Boolean, default: false }
    },
    data: () => ({
        map: null,
        markerLayer: null,
        nonClusteredLayer: null,
        tileLayers: { mapbox: { streets: null, satellite: null }, basemap: { streets: null, satellite: null } },
        mapProvider: localStorage.getItem('tt-map-provider') || 'basemap',
        mapType: localStorage.getItem('tt-map-type') || 'streets',
        internalLoading: true,
        scriptsLoaded: false,
        showSettings: false,
        searchQuery: '',
        searchResults: [],
        isSearchLoading: false,
        showSearchResults: false,
        searchDebounce: null,
        selectedMarker: null,
        isLegendOpen: false,
        isMobile: window.innerWidth < 992,
        showMobileControls: false
    }),
    computed: {
        isLoading() { return this.internalLoading || this.loading; },
        mapConfig() {
            const defaults = {
                center: [47.07, 15.44], zoom: 9, mapboxKey: window.TT_CONFIG?.MAPBOX_KEY,
                streetsTileUrl: 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
                streetsTileId: 'mapbox/streets-v11',
                satelliteTileUrl: 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
                satelliteTileId: 'mapbox/satellite-streets-v12',
                tileAttribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                basemapStreetsTileUrl: 'https://maps.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png',
                basemapSatelliteTileUrl: 'https://maps.wien.gv.at/basemap/bmaporthofoto30cm/normal/google3857/{z}/{y}/{x}.jpeg',
                basemapAttribution: 'Datenquelle: basemap.at',
                clusterOptions: {},
                makiMarkerOptions: { icon: "marker", color: "#3b82f6", size: "m" }
            };
            return { ...defaults, ...this.config };
        }
    },
    async mounted() {
        try {
            await this.loadScripts();
            this.scriptsLoaded = true;
            this.initializeMap();
            this.updateMarkers();
            this.internalLoading = false;
        } catch (error) {
            console.error("Map Initialization Error:", error);
            this.internalLoading = false;
        }
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.map) {
            this.map.off('zoomend moveend', this.updateTooltipVisibility);
            if (this.contextmenu) this.map.off('contextmenu', this.onMapContextMenu);
            this.map.remove();
            this.map = null;
        }
    },
    methods: {
        loadScripts() {
            const scripts = [
                { type: 'link', url: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' },
                { type: 'script', url: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' },
                { type: 'script', url: 'https://unpkg.com/leaflet-makimarkers@3.1.0/Leaflet.MakiMarkers.js' },
                { type: 'link', url: 'https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css' },
                { type: 'link', url: 'https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css' },
                { type: 'script', url: 'https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js' }
            ];
            const promises = scripts.map(s => new Promise((resolve, reject) => {
                let el;
                if (s.type === 'script') {
                    el = document.createElement('script');
                    el.src = s.url; el.async = false; el.onload = resolve; el.onerror = reject;
                } else {
                    el = document.createElement('link');
                    el.rel = 'stylesheet'; el.href = s.url; el.onload = resolve;
                    el.onerror = () => { console.warn(`Could not load stylesheet: ${s.url}`); resolve(); };
                }
                document.head.appendChild(el);
            }));
            return Promise.all(promises);
        },
        initializeMap() {
            if (!this.scriptsLoaded || typeof L === 'undefined' || !this.mapConfig.mapboxKey) return;
            this.map = L.map(this.$refs.mapContainer, { preferCanvas: true, zoomControl: false }).setView(this.mapConfig.center, this.mapConfig.zoom);
            L.control.zoom({ position: 'topright' }).addTo(this.map);
            if (typeof L.MakiMarkers !== 'undefined') L.MakiMarkers.accessToken = this.mapConfig.mapboxKey;
            this.map.createPane('fcpPane'); this.map.getPane('fcpPane').style.zIndex = 599;
            this.tileLayers.mapbox.streets = L.tileLayer(this.mapConfig.streetsTileUrl, { attribution: this.mapConfig.tileAttribution, maxZoom: 22, id: this.mapConfig.streetsTileId, tileSize: 512, zoomOffset: -1, accessToken: this.mapConfig.mapboxKey });
            this.tileLayers.mapbox.satellite = L.tileLayer(this.mapConfig.satelliteTileUrl, { attribution: this.mapConfig.tileAttribution, maxZoom: 22, id: this.mapConfig.satelliteTileId, tileSize: 512, zoomOffset: -1, accessToken: this.mapConfig.mapboxKey });
            this.tileLayers.basemap.streets = L.tileLayer(this.mapConfig.basemapStreetsTileUrl, { attribution: this.mapConfig.basemapAttribution, maxZoom: 19 });
            this.tileLayers.basemap.satellite = L.tileLayer(this.mapConfig.basemapSatelliteTileUrl, { attribution: this.mapConfig.basemapAttribution, maxZoom: 19 });
            this.setActiveTileLayer();

            // --- PERFORMANCE OPTIMIZATION ---
            const clusterOptions = {
                ...this.mapConfig.clusterOptions, // Keep existing user-defined options
                chunkedLoading: true,             // Add markers in chunks to avoid freezing
                maxClusterRadius: 100,            // Increase clustering radius for better performance when zoomed out
                disableClusteringAtZoom: 18       // Disable clustering at high zoom levels
            };
            this.markerLayer = L.markerClusterGroup(clusterOptions);
            // --- END PERFORMANCE OPTIMIZATION ---

            this.nonClusteredLayer = L.layerGroup();
            this.map.addLayer(this.markerLayer);
            this.map.addLayer(this.nonClusteredLayer);
            this.map.on('zoomend moveend', this.updateTooltipVisibility);
            if (this.contextmenu) { this.map.on('contextmenu', this.onMapContextMenu); }
            if (this.showLogo) {
                const LogoControl = L.Control.extend({ onAdd: map => {
                        const container = L.DomUtil.create('div', 'leaflet-control-logo');
                        container.innerHTML = `<img src="/assets/images/xinon-full.png" style="width: 150px; opacity: 0.8; margin-right: 5px;">`;
                        L.DomEvent.disableClickPropagation(container);
                        return container;
                    }});
                new LogoControl({ position: 'bottomright' }).addTo(this.map);
            }
            this.$nextTick(() => { this.map.invalidateSize(); });
        },
        setActiveTileLayer() {
            if (!this.map) return;
            Object.values(this.tileLayers).forEach(p => Object.values(p).forEach(l => { if (l && this.map.hasLayer(l)) this.map.removeLayer(l); }));
            const activeLayer = this.tileLayers[this.mapProvider]?.[this.mapType];
            if (activeLayer) activeLayer.addTo(this.map); else this.tileLayers.mapbox.streets.addTo(this.map);
        },
        updateMarkers() {
            if (!this.map || !this.markerLayer || !this.scriptsLoaded) return;
            this.markerLayer.clearLayers(); this.nonClusteredLayer.clearLayers();
            const markersToCluster = [];
            this.markersData.forEach(data => {
                if (data.lat == null || data.lng == null) return;
                let icon;
                if (data.options?.icon instanceof L.Icon) icon = data.options.icon;
                else if (data.options?.icon) icon = L.divIcon(data.options.icon);
                else if (typeof L.MakiMarkers !== 'undefined') icon = L.MakiMarkers.icon({ ...this.mapConfig.makiMarkerOptions, ...(data.options?.maki || {}) });
                const markerOptions = { icon };
                if (data.options?.zIndexOffset) markerOptions.zIndexOffset = data.options.zIndexOffset;
                if (data.options?.noCluster) markerOptions.pane = 'fcpPane';
                const marker = L.marker([data.lat, data.lng], markerOptions);
                if (data.hausnummerId) marker.tt_hausnummerId = data.hausnummerId;
                if (data.options?.tooltip) marker.tt_tooltip_options = data.options.tooltip;
                if (data.options?.popup) marker.bindPopup(data.options.popup);
                else if (data.options?.asyncPopupContent) {
                    marker.bindPopup(() => '<div class="popup-loader">Loading...</div>');
                    marker.on('popupopen', async e => e.popup.setContent(await data.options.asyncPopupContent(data)).update());
                }
                if (data.options?.noCluster) this.nonClusteredLayer.addLayer(marker);
                else markersToCluster.push(marker);
            });

            // The chunkedLoading option will automatically handle adding these without freezing
            if (markersToCluster.length > 0) this.markerLayer.addLayers(markersToCluster);

            this.updateTooltipVisibility();
            const allMarkers = [...this.markerLayer.getLayers(), ...this.nonClusteredLayer.getLayers()];
            if (allMarkers.length > 0) {
                const bounds = L.latLngBounds(allMarkers.map(m => m.getLatLng()));
                if (bounds.isValid()) this.map.fitBounds(bounds, { padding: [50, 50], maxZoom: 17 });
            }
        },
        updateTooltipVisibility() {
            if (!this.map) return;
            const currentZoom = this.map.getZoom();
            const processMarker = marker => {
                const tooltipOptions = marker.tt_tooltip_options;
                if (!tooltipOptions || !tooltipOptions.minZoom) return;
                const isBound = marker.getTooltip();
                if (currentZoom >= tooltipOptions.minZoom) {
                    if (!isBound) {
                        const { content, minZoom, ...options } = tooltipOptions;
                        marker.bindTooltip(content, options);
                        if (options.permanent) marker.openTooltip();
                    }
                } else if (isBound) marker.unbindTooltip();
            };
            this.markerLayer.eachLayer(processMarker); this.nonClusteredLayer.eachLayer(processMarker);
        },
        toggleMapType() {
            this.mapType = this.mapType === 'streets' ? 'satellite' : 'streets';
            localStorage.setItem('tt-map-type', this.mapType);
            this.setActiveTileLayer();
        },
        setMapProvider(provider) {
            this.mapProvider = provider;
            localStorage.setItem('tt-map-provider', provider);
            this.setActiveTileLayer();
            this.showSettings = false;
        },
        handleResize() { this.isMobile = window.innerWidth < 992; if (this.map) this.map.invalidateSize(); },
        searchLocations() {
            if (this.searchDebounce) clearTimeout(this.searchDebounce);
            if (this.searchQuery.length < 3) { this.searchResults = []; this.showSearchResults = true; return; }
            this.isSearchLoading = true;
            this.searchDebounce = setTimeout(async () => {
                try {
                    const res = await axios.get('/Geocoding/autocomplete', { params: { q: this.searchQuery } });
                    this.searchResults = res.data;
                } catch (e) { this.searchResults = []; } finally { this.isSearchLoading = false; }
            }, 350);
        },
        selectLocation(location) {
            this.searchQuery = location.text; this.showSearchResults = false;
            const [lat, lng] = location.value.split(',').map(Number);
            if (this.map && !isNaN(lat) && !isNaN(lng)) {
                this.map.flyTo([lat, lng], 17, { duration: 0.5 });
                if (this.selectedMarker) this.selectedMarker.remove();
                const icon = L.divIcon({ html: `<div class="custom-map-marker"><i class="fas fa-map-marker-alt"></i></div>`, className: '', iconSize: [24, 24], iconAnchor: [12, 12], popupAnchor: [0, -14] });
                this.selectedMarker = L.marker([lat, lng], { icon }).addTo(this.map).bindPopup(`<b>${location.text}</b>`).openPopup();
                this.searchQuery = ''; this.searchResults = [];
                setTimeout(() => { if (this.selectedMarker) { this.selectedMarker.remove(); this.selectedMarker = null; } }, 10000);
            }
        },
        clearSearch() {
            this.searchQuery = ''; this.searchResults = []; this.showSearchResults = false;
            if (this.selectedMarker) { this.selectedMarker.remove(); this.selectedMarker = null; }
        },
        handleSearchFocus() { this.showSearchResults = true; },
        handleSearchBlur() { setTimeout(() => { this.showSearchResults = false; }, 200); },
        onMapContextMenu(e) { e.originalEvent.preventDefault(); this.$emit('contextmenu', e); },
    },
    watch: {
        markersData: { handler() { this.updateMarkers(); }, deep: true },
        loading(newVal) { if (!newVal && this.map) this.$nextTick(() => this.map.invalidateSize()); }
    },
    template: `
      <div class="tt-map-wrapper">
        <div v-if="isLoading" class="tt-map-loader"><tt-loader></tt-loader></div>
        <div ref="mapContainer" class="tt-map-container" :style="{ visibility: internalLoading ? 'hidden' : 'visible' }"></div>

        <div v-if="!isMobile" class="tt-map-top-container">
          <div class="tt-map-top-left-controls">
            <slot name="tools"></slot>
          </div>
          <div class="tt-map-top-right-controls">
            <div class="tt-map-search-wrapper">
              <div class="tt-map-search-input-container">
                <tt-input type="text" placeholder="Adresse suchen..." v-model="searchQuery"
                          @input="searchLocations" @focus="handleSearchFocus" @blur="handleSearchBlur"
                          autocomplete="off" :sm="true" :no-form-group="true"
                          prefix-icon="fas fa-search"/>
                <button v-if="searchQuery" @click="clearSearch" class="clear-icon"><i class="fas fa-times"></i></button>
              </div>
              <transition name="fade">
                <ul v-if="showSearchResults" class="tt-map-search-results">
                  <li v-if="isSearchLoading" class="result-item-info">
                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                      <span class="sr-only">Loading...</span>
                    </div>
                    <span>Suche läuft...</span>
                  </li>
                  <li v-else-if="searchQuery.length < 3" class="result-item-info">Bitte mind. 3 Zeichen eingeben</li>
                  <li v-else-if="searchResults.length === 0" class="result-item-info">Keine Ergebnisse gefunden</li>
                  <li v-for="result in searchResults" :key="result.value" class="result-item" @mousedown="selectLocation(result)"><i class="fas fa-map-marker-alt"></i><span>{{ result.text }}</span></li>
                </ul>
              </transition>
            </div>
            <div class="tt-map-builtin-controls">
              <div class="btn-group">
                <tt-button @click="toggleMapType" :icon="mapType === 'streets' ? 'fas fa-globe-americas' : 'fas fa-map'" :text="mapType === 'streets' ? 'Satellit' : 'Karte'" sm additional-class="btn-light"/>
                <tt-button @click="showSettings = !showSettings" icon="fas fa-cog" text="Anbieter" sm additional-class="btn-light"/>
              </div>
              <transition name="fade">
                <div v-if="showSettings" class="tt-map-settings-panel">
                  <div class="btn-group btn-group-sm">
                    <tt-button @click="setMapProvider('mapbox')" text="Mapbox" :additional-class="mapProvider === 'mapbox' ? 'btn-primary' : 'btn-light'"/>
                    <tt-button @click="setMapProvider('basemap')" text="basemap.at" :additional-class="mapProvider === 'basemap' ? 'btn-primary' : 'btn-light'"/>
                  </div>
                </div>
              </transition>
            </div>
          </div>
        </div>

        <div v-if="!isMobile" class="tt-map-bottom-right-container" :class="{'with-logo': showLogo}">
          <slot name="bottom-tools"></slot>
          <div v-if="$scopedSlots.legend" class="tt-map-bottom-controls">
            <div class="map-legend-wrapper" :class="{'collapsed': !isLegendOpen}">
              <div class="map-legend-header" @click="isLegendOpen = !isLegendOpen">
                <h6><i class="fas fa-list-ul mr-1"></i> Legende</h6>
                <i class="fas fa-chevron-down"></i>
              </div>
              <div v-show="isLegendOpen" class="map-legend-content">
                <slot name="legend"></slot>
              </div>
            </div>
          </div>
        </div>

        <div v-if="isMobile" class="tt-map-mobile-fab">
          <tt-button @click="showMobileControls = true" icon="fas fa-layer-group" additional-class="btn-primary btn-lg rounded-circle" title="Filter & Legende"/>
        </div>

        <div v-if="isMobile && showMobileControls" class="tt-map-mobile-controls-overlay" @click.self="showMobileControls = false">
          <div class="tt-map-mobile-controls-panel">
            <div class="panel-header">
              <h5>Filter & Legende</h5>
              <tt-button @click="showMobileControls = false" icon="fas fa-times" additional-class="btn-link text-secondary"/>
            </div>
            <div class="panel-content">
              <div class="panel-section"><h6 class="font-weight-bold">Filter</h6><slot name="tools"></slot></div>
              <div class="panel-section" v-if="$scopedSlots.legend"><h6 class="font-weight-bold">Legende</h6><slot name="legend"></slot></div>
            </div>
          </div>
        </div>
      </div>
    `
});