Vue.component('tt-map', {
    props: {
        markersData: {
            type: Array,
            default: () => [] // Expecting [{ lat: Number, lng: Number, options: { ..., noCluster?: Boolean, tooltip: { content: '...', minZoom: 18, ... } } }, ...]
        },
        config: {
            type: Object,
            default: () => ({}) // User overrides for defaults
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            map: null,
            markerLayer: null, // For clustered markers
            nonClusteredLayer: null, // For important, always-visible markers
            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,
        };
    },
    computed: {
        isLoading() {
            return this.internalLoading || this.loading;
        },
        mapConfig() {
            const defaults = {
                center: [47.07, 15.44], // Centered on Graz, Styria
                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, Stadt Wien - data.wien.gv.at',
                clusterOptions: {},
                makiMarkerOptions: { icon: "marker", color: "#3b82f6", size: "m" }
            };
            return { ...defaults, ...this.config }; // Merge user config over defaults
        }
    },
    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;
        }
    },
    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' || typeof L.MarkerClusterGroup === 'undefined' || !this.mapConfig.mapboxKey) {
                console.error("Leaflet or MarkerCluster is not loaded. Cannot initialize map.");
                return;
            }

            this.map = L.map(this.$refs.mapContainer, { preferCanvas: true }).setView(this.mapConfig.center, this.mapConfig.zoom);
            if (typeof L.MakiMarkers !== 'undefined') {
                L.MakiMarkers.accessToken = this.mapConfig.mapboxKey;
            }

            this.map.createPane('fcpPane');
            this.map.getPane('fcpPane').style.zIndex = 599; // Default markerPane is 600

            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: 20 });
            this.tileLayers.basemap.satellite = L.tileLayer(this.mapConfig.basemapSatelliteTileUrl, { attribution: this.mapConfig.basemapAttribution, maxZoom: 20 });
            this.setActiveTileLayer();

            this.markerLayer = L.markerClusterGroup(this.mapConfig.clusterOptions);
            this.nonClusteredLayer = L.layerGroup();
            this.map.addLayer(this.markerLayer);
            this.map.addLayer(this.nonClusteredLayer);

            this.map.on('zoomend moveend', this.updateTooltipVisibility);

            this.$nextTick(() => { this.map.invalidateSize(); });
            window.addEventListener('resize', this.handleResize);
        },
        setActiveTileLayer() {
            if (!this.map) return;
            Object.values(this.tileLayers).forEach(provider => {
                Object.values(provider).forEach(layer => {
                    if (layer && this.map.hasLayer(layer)) {
                        this.map.removeLayer(layer);
                    }
                });
            });

            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') {
                    const makiOptions = { ...this.mapConfig.makiMarkerOptions, ...(data.options?.maki || {}) };
                    icon = L.MakiMarkers.icon(makiOptions);
                }

                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);

                // Attach a unique identifier if provided
                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) => {
                        const content = await data.options.asyncPopupContent(data);
                        e.popup.setContent(content).update();
                    });
                }

                if (data.options?.noCluster) {
                    this.nonClusteredLayer.addLayer(marker);
                } else {
                    markersToCluster.push(marker);
                }
            });

            if (markersToCluster.length > 0) {
                this.markerLayer.addLayers(markersToCluster);
            }

            this.updateTooltipVisibility();

            const allMarkers = this.markerLayer.getLayers().concat(this.nonClusteredLayer.getLayers());
            if (allMarkers.length > 0) {
                const bounds = L.latLngBounds(allMarkers.map(marker => marker.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() {
            if (this.map) {
                this.map.invalidateSize();
            }
        }
    },
    watch: {
        markersData: { handler() { this.updateMarkers(); }, deep: true },
        loading(newVal) {
            if (!newVal && this.map) {
                this.$nextTick(() => this.map.invalidateSize());
            }
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.map) {
            this.map.off('zoomend moveend', this.updateTooltipVisibility);
            this.map.remove();
            this.map = null;
        }
    },
    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 class="tt-map-top-controls">
          <slot name="tools"></slot>
        </div>

        <div class="tt-map-builtin-controls">
          <div class="btn-group-vertical">
            <button @click="toggleMapType" class="btn btn-light btn-sm d-flex align-items-center">
              <i :class="mapType === 'streets' ? 'fas fa-globe-americas' : 'fas fa-map'" style="width: 1.2em;"></i>
              <span class="ml-1">{{ mapType === 'streets' ? 'Satellit' : 'Karte' }}</span>
            </button>
            <button @click="showSettings = !showSettings" class="btn btn-light btn-sm d-flex align-items-center">
              <i class="fas fa-cog" style="width: 1.2em;"></i>
              <span class="ml-1">Einstellungen</span>
            </button>
          </div>
          <div v-if="showSettings" class="tt-map-settings-panel">
            <div class="form-group mb-1">
              <label class="d-block font-weight-bold small">Kartenanbieter</label>
              <div class="btn-group btn-group-sm">
                <button class="btn" :class="mapProvider === 'mapbox' ? 'btn-primary' : 'btn-light'" @click="setMapProvider('mapbox')">Mapbox</button>
                <button class="btn" :class="mapProvider === 'basemap' ? 'btn-primary' : 'btn-light'" @click="setMapProvider('basemap')">basemap.at</button>
              </div>
            </div>
          </div>
        </div>

        <div class="tt-map-bottom-controls">
          <slot name="legend"></slot>
        </div>
      </div>
    `
});