/**
 * Google Maps initialization for Carhop Localisation Map block
 */

// Configuration
const GOOGLE_MAPS_CONFIG = {
	apiKey: "AIzaSyBs-owKPe4qiYLb2baCTAptLeNNJX7bTQk",
	center: {
		lat: 50.61036915572659,
		lng: 4.148529499893204,
	},
	zoom: 15,
	marker: {
		lat: 50.61036915386491,
		lng: 4.151615298397132, // Position originale du pin
		title: "Carhop",
		address: "Av. de la Houssière 80, 7090 Braine-le-Comte",
		placeId: "ChIJ41pZLUq1w0cRjXw8zlHnvXI", // Place ID Google Maps (à remplacer par le vrai)

		color: "green",
	},
	styles: [
		{
			featureType: "administrative",
			elementType: "geometry",
			stylers: [
				{
					color: "#136f63",
				},
			],
		},
		{
			featureType: "administrative",
			elementType: "labels.text.fill",
			stylers: [
				{
					color: "#ffffff",
				},
				{
					gamma: "1.00",
				},
				{
					lightness: "0",
				},
				{
					saturation: "0",
				},
				{
					visibility: "on",
				},
				{
					weight: "1.5",
				},
			],
		},
		{
			featureType: "administrative",
			elementType: "labels.text.stroke",
			stylers: [
				{
					color: "#19464b",
				},
				{
					weight: "2",
				},
			],
		},
		{
			featureType: "administrative.land_parcel",
			elementType: "geometry",
			stylers: [
				{
					color: "#19464b",
				},
			],
		},
		{
			featureType: "landscape",
			elementType: "all",
			stylers: [
				{
					color: "#19464b",
				},
			],
		},
		{
			featureType: "landscape",
			elementType: "geometry",
			stylers: [
				{
					color: "#136f63",
				},
			],
		},
		{
			featureType: "landscape.man_made",
			elementType: "geometry",
			stylers: [
				{
					color: "#136f63",
				},
			],
		},
		{
			featureType: "landscape.natural",
			elementType: "labels.text.fill",
			stylers: [
				{
					color: "#ffffff",
				},
				{
					visibility: "on",
				},
			],
		},
		{
			featureType: "landscape.natural.landcover",
			elementType: "geometry",
			stylers: [
				{
					color: "#136f63",
				},
			],
		},
		{
			featureType: "landscape.natural.terrain",
			elementType: "geometry",
			stylers: [
				{
					color: "#136f63",
				},
			],
		},
		{
			featureType: "poi",
			elementType: "all",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "poi.attraction",
			elementType: "all",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "poi.business",
			elementType: "all",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "poi.government",
			elementType: "all",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "poi.park",
			elementType: "all",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "poi.school",
			elementType: "all",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "poi.medical",
			elementType: "all",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "poi.place_of_worship",
			elementType: "all",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "poi.sports_complex",
			elementType: "all",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "road.highway",
			elementType: "geometry.fill",
			stylers: [
				{
					color: "#136f63",
				},
				{
					lightness: "-40",
				},
			],
		},
		{
			featureType: "road.highway",
			elementType: "geometry.stroke",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "road.highway",
			elementType: "labels",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "road.highway",
			elementType: "labels.text.fill",
			stylers: [
				{
					color: "#ffffff",
				},
			],
		},
		{
			featureType: "road.highway",
			elementType: "labels.text.stroke",
			stylers: [
				{
					color: "#0a1f14",
				},
			],
		},
		{
			featureType: "road.arterial",
			elementType: "geometry",
			stylers: [
				{
					color: "#136f63",
				},
				{
					lightness: 30,
				},
			],
		},
		{
			featureType: "road.arterial",
			elementType: "geometry.fill",
			stylers: [
				{
					color: "#136f63",
				},
			],
		},
		{
			featureType: "road.arterial",
			elementType: "labels",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
		{
			featureType: "road.arterial",
			elementType: "labels.text.fill",
			stylers: [
				{
					color: "#ffffff",
				},
			],
		},
		{
			featureType: "road.arterial",
			elementType: "labels.text.stroke",
			stylers: [
				{
					color: "#2c2c2c",
				},
			],
		},
		{
			featureType: "road.local",
			elementType: "geometry",
			stylers: [
				{
					color: "#136F63",
				},
				{
					lightness: -20,
				},
			],
		},
		{
			featureType: "road.local",
			elementType: "labels",
			stylers: [
				{
					visibility: "simplified",
				},
			],
		},
		{
			featureType: "road.local",
			elementType: "labels.text.fill",
			stylers: [
				{
					color: "#ffffff",
				},
			],
		},
		{
			featureType: "transit",
			elementType: "geometry",
			stylers: [
				{
					color: "#136F63",
				},
				{
					lightness: -20,
				},
			],
		},
		// Grandes masses d'eau (océans, lacs, grands fleuves)
		{
			featureType: "water",
			elementType: "geometry",
			stylers: [
				{
					color: "#136F63",
				},
				{
					lightness: 18,
				},
				{
					saturation: -50,
				},
				{
					visibility: "simplified", // Simplifie l'affichage
				},
			],
		},

		{
			featureType: "water",
			elementType: "geometry.fill",
			stylers: [
				{
					visibility: "simplified",
				},
			],
		},
		// Masquer les labels des petites rivières
		{
			featureType: "water",
			elementType: "labels",
			stylers: [
				{
					visibility: "off",
				},
			],
		},
	],
};

/**
 * Initialize Google Maps for all map containers on the page
 */
function initializeCarhopMaps() {
	// Find all map containers
	const mapContainers = document.querySelectorAll(".carhop-localisation-map");

	mapContainers.forEach((container) => {
		const mapElement = container.querySelector(".map-container");

		if (!mapElement || mapElement.dataset.initialized === "true") {
			return;
		}

		// Create map
		const map = new google.maps.Map(mapElement, {
			zoom: GOOGLE_MAPS_CONFIG.zoom,
			center: new google.maps.LatLng(
				GOOGLE_MAPS_CONFIG.center.lat,
				GOOGLE_MAPS_CONFIG.center.lng,
			),
			styles: GOOGLE_MAPS_CONFIG.styles,
			// Contrôles de zoom
			zoomControl: true,
			zoomControlOptions: {
				position: google.maps.ControlPosition.RIGHT_TOP,
				style: google.maps.ZoomControlStyle.DEFAULT,
			},
			// Autres contrôles utiles
			mapTypeControl: false, // Masquer le sélecteur de type de carte
			streetViewControl: false, // Contrôle Street View
			fullscreenControl: false, // Bouton plein écran
		});
		// Chemin vers votre pin personnalisé avec fallback
		const customPinPath =
			"/wp-content/plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/carhop-pin.png";

		// Add marker with custom color
		const marker = new google.maps.Marker({
			position: new google.maps.LatLng(
				GOOGLE_MAPS_CONFIG.marker.lat,
				GOOGLE_MAPS_CONFIG.marker.lng,
			),
			map: map,
			title: GOOGLE_MAPS_CONFIG.marker.title,
			icon: {
				url: customPinPath,
				scaledSize: new google.maps.Size(40, 40), // Taille du pin
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(20, 40), // Point d'ancrage (centre bas)
			},
		});

		// Add click event to open Google Maps place
		marker.addListener("click", function () {
			const placeId = GOOGLE_MAPS_CONFIG.marker.placeId;

			// URL pour ouvrir la fiche Google Maps complète
			let googleMapsUrl;
			if (placeId && placeId !== "ChIJXXXXXXXXXXXXXXXXXXXX") {
				// Utiliser le Place ID pour ouvrir la fiche complète
				googleMapsUrl = `https://www.google.com/maps/place/?q=place_id:${placeId}`;
			} else {
				// Fallback avec l'adresse
				const address = encodeURIComponent(GOOGLE_MAPS_CONFIG.marker.address);
				googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${address}`;
			}

			// Ouvrir dans un nouvel onglet
			window.open(googleMapsUrl, "_blank");
		});

		// Mark as initialized
		mapElement.dataset.initialized = "true";
	});
}

/**
 * Load Google Maps API and initialize maps
 */
function loadGoogleMapsAPI() {
	// Check if Google Maps is already loaded
	if (typeof google !== "undefined" && google.maps) {
		initializeCarhopMaps();
		return;
	}

	// Check if script is already loading
	if (window.carhopMapsLoading) {
		window.carhopMapsCallbacks = window.carhopMapsCallbacks || [];
		window.carhopMapsCallbacks.push(initializeCarhopMaps);
		return;
	}

	// Mark as loading
	window.carhopMapsLoading = true;
	window.carhopMapsCallbacks = [initializeCarhopMaps];

	// Create callback function
	window.carhopMapsReady = function () {
		window.carhopMapsLoading = false;
		if (window.carhopMapsCallbacks) {
			window.carhopMapsCallbacks.forEach((callback) => callback());
			window.carhopMapsCallbacks = [];
		}
	};

	// Load Google Maps API
	const script = document.createElement("script");
	script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_CONFIG.apiKey}&callback=carhopMapsReady`;
	script.async = true;
	script.defer = true;
	document.head.appendChild(script);
}

// Initialize when DOM is ready
if (document.readyState === "loading") {
	document.addEventListener("DOMContentLoaded", loadGoogleMapsAPI);
} else {
	loadGoogleMapsAPI();
}

// Also initialize on window load as fallback
window.addEventListener("load", loadGoogleMapsAPI);
