/**
 * Neshan Map JavaScript Component
 * Handles map rendering and custom markers.
 */
(function($) {
	"use strict";

	var NeshanMap = function($scope) {
		// Find the main map wrapper and container within the scope
		var $wrapper = $scope.find('.neshan-map-wrapper');
		var $mapContainer = $scope.find('.neshan-map-inner');

		if (!$wrapper.length || !$mapContainer.length) {
			return;
		}

		// Retrieve data settings passed from PHP
		var config = $wrapper.data('map-config') || {};

		var lat = parseFloat(config.lat) || 35.699739;
		var lng = parseFloat(config.lng) || 51.338097;
		var theme = config.theme || 'standard-night';
		var apiKey = config.key || 'web.xxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

		// Initialize Neshan Map (Leaflet)
		// Check if Neshan Map SDK is loaded
		if (typeof L === 'undefined') {
			console.error('Neshan Map SDK (Leaflet) is not loaded.');
			return;
		}

		var map = new L.Map($mapContainer[0], {
			key: apiKey,
			maptype: theme,
			poi: config.poi !== undefined ? config.poi : true,
			traffic: config.traffic !== undefined ? config.traffic : false,
			zoomControl: config.zoomControl !== undefined ? config.zoomControl : true,
			center: [lat, lng],
			zoom: config.zoom !== undefined ? parseInt(config.zoom, 10) : 14,
			minZoom: config.minZoom !== undefined ? parseInt(config.minZoom, 10) : 1,
			maxZoom: config.maxZoom !== undefined ? parseInt(config.maxZoom, 10) : 20,
			scrollWheelZoom: config.scrollWheelZoom !== undefined ? config.scrollWheelZoom : true,
			doubleClickZoom: config.doubleClickZoom !== undefined ? config.doubleClickZoom : true,
			touchZoom: config.touchZoom !== undefined ? config.touchZoom : true,
			keyboard: config.keyboardNav !== undefined ? config.keyboardNav : true,
			dragging: config.dragging !== undefined ? config.dragging : true
		});

		// Marker reference — declared here so radius block can safely read it
		var marker = null;

		// Create Custom HTML Marker with Hover & Shadow Elements
		if (config.showMarker !== false) {
			var mapIcon = L.divIcon({
				className: 'map-marker-container',
				html: '<div class="map-marker">' +
					'<div class="marker-pin">' +
						'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="currentColor">' +
							'<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>' +
						'</svg>' +
					'</div>' +
					'<div class="marker-shadow"></div>' +
				'</div>',
				iconSize: [40, 60],
				iconAnchor: [20, 60],
				popupAnchor: [0, -50]
			});

			// Add marker to map
			marker = L.marker([lat, lng], {
				icon: mapIcon,
				draggable: config.draggableMarker !== undefined ? config.draggableMarker : false
			}).addTo(map);

			// Bind popup if content was provided
			if (config.markerPopup && config.markerPopup.trim() !== '') {
				var popupOptions = {};

				if (config.markerPopupMode === 'fixed') {
					popupOptions.autoClose = false;
					popupOptions.closeOnClick = false;
					marker.bindPopup(config.markerPopup, popupOptions).openPopup();
				} else if (config.markerPopupMode === 'hover') {
					marker.bindPopup(config.markerPopup, popupOptions);
					marker.on('mouseover', function() {
						this.openPopup();
					});
					marker.on('mouseout', function() {
						this.closePopup();
					});
				} else {
					// Default mode: click
					marker.bindPopup(config.markerPopup, popupOptions);
				}
			}
		}

		// Service Radius Rendering
		if (config.showRadius) {
			var radiusSize = config.radiusSize ? parseFloat(config.radiusSize) : 1000;
			var radiusColor = config.radiusColor || '#00e5ff';
			var radiusOpacity = config.radiusOpacity ? parseFloat(config.radiusOpacity) : 0.2;

			var circle = L.circle([lat, lng], {
				color: radiusColor,
				fillColor: radiusColor,
				fillOpacity: radiusOpacity,
				radius: radiusSize
			}).addTo(map);

			// If marker is draggable, synchronize the circle position with the marker
			if (marker && config.draggableMarker) {
				marker.on('drag', function(e) {
					var position = e.target.getLatLng();
					circle.setLatLng(position);
				});
			}
		}

	};

	// Bind to Elementor Frontend Hooks
	$(window).on('elementor/frontend/init', function() {
		elementorFrontend.hooks.addAction('frontend/element_ready/neshan_map.default', NeshanMap);
	});

})(jQuery);