/**
 * Google Maps Frontend Integration
 * Handles all client-side Google Maps functionality
 */
class JVBGoogleMaps {
	constructor() {
		this.instances = new Map();
		this.defaults = null;
		this.ready = false;

		if (typeof google !== 'undefined' && google.maps) {
			this.init();
		} else {
			document.addEventListener('googleMapsReady', () => this.init());
		}
	}

	init() {
		this.ready = true;
		this.defaults = window.jvbMapDefaults || {
			lat: 53.5461,
			lng: -113.4938,
			zoom: 14,
		};

		document.querySelectorAll('[data-location-field-init]').forEach(field => {
			try {
				const jsonString = field.dataset.locationFieldInit;

				// Check if the data attribute exists and is not empty
				if (!jsonString || jsonString.trim() === '') {
					console.warn('Empty location field init data for field:', field);
					return;
				}

				// Attempt to parse the JSON
				const config = JSON.parse(jsonString);

				// Validate required properties
				if (!config.fieldId) {
					console.error('Missing fieldId in location field config');
					return;
				}

				this.createLocationField(config);
			} catch (error) {
				console.error('Failed to parse location field config:', error);
				console.error('Data attribute value:', field.dataset.locationFieldInit);
				console.error('Field element:', field);
			}
		});
	}

	/**
	 * Create a location field with autocomplete and map
	 */
	createLocationField(config) {
		if (!this.ready) {
			console.warn('Google Maps not ready yet');
			setTimeout(() => this.createLocationField(config), 100);
			return null;
		}

		const {
			fieldId,
			initialCoords,
			onLocationSelected
		} = config;

		// Get elements using data attribute
		const fieldContainer = document.querySelector(`[data-field="${fieldId}"]`);
		if (!fieldContainer) {
			console.error('Field container not found:', fieldId);
			return null;
		}
		const mapContainer = fieldContainer.querySelector('.location-map');

		if ( !mapContainer) {
			console.error('Required elements not found in field:', fieldId);
			return null;
		}

		// Initialize map
		const mapOptions = {
			center: initialCoords || this.defaults,
			zoom: this.defaults.zoom,
			mapId: this.defaults.mapId,
			styles: this.getMapStyles(),
			disableDefaultUI: true,
		};

		const map = new google.maps.Map(mapContainer, mapOptions);

		// Initialize marker if coordinates exist
		let marker = null;
		if (initialCoords && initialCoords.lat && initialCoords.lng) {
			marker = this.createMarker(map, initialCoords);
		}

		// Setup Places Autocomplete
		this.setupAutocomplete(fieldContainer, map, marker, onLocationSelected);

		// Store instance
		const instance = { map, marker, fieldContainer, config };
		this.instances.set(fieldId, instance);

		return instance;
	}

	/**
	 * Setup Places Autocomplete using the new API
	 */
	setupAutocomplete(fieldContainer, map, marker, onLocationSelected) {
		console.log('Setting up autocomplete');
		const autocomplete = new google.maps.places.PlaceAutocompleteElement({
			includedRegionCodes: ['ca']
		});


		let wrapper = fieldContainer.querySelector('.autocomplete-wrapper');
		wrapper.append(autocomplete);

		let savedInput = fieldContainer.querySelector('[name="current_location[street]"]');
		if (savedInput && savedInput.value !== '') {
			console.log('Saved value: ', savedInput.value);
			autocomplete.value = savedInput.value;
		}

		autocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
			const place = placePrediction.toPlace();
			await place.fetchFields({ fields: ['displayName', 'addressComponents', 'formattedAddress', 'location'] });
			console.log('Display Name:',place.displayName);
			console.log('Formatted Address:',place.formattedAddress);
			console.log('Address Components:',place.addressComponents);
			console.log('Location:',place.location);
			// If the place has a geometry, then present it on a map.
			if (place.viewport) {
				map.fitBounds(place.viewport);
			}
			else {
				map.setCenter(place.location);
				map.setZoom(17);
			}

			const location = {
				lat: place.location.lat(),
				lng: place.location.lng(),
				address: place.displayName || place.formattedAddress || '',
				components: this.parseAddressComponents(place.addressComponents)
			};

			console.log('Grabbed Location: ',location);

			// Update map and marker
			map.setCenter(place.location);
			if (marker) {
				marker.position = place.location;
			} else {
				marker = this.createMarker(map, place.location);
			}

			console.log('Updating field inputs');

			// Update all hidden inputs
			this.updateFieldInputs(fieldContainer, location);

			// Update map links
			this.updateMapLinks(fieldContainer, location.lat, location.lng);

			// Call callback
			if (onLocationSelected) {
				onLocationSelected(location);
			}

			fieldContainer.dispatchEvent(new Event('change', {bubbles: true}));
		});

		// Handle marker drag
		if (marker) {
			marker.addListener('dragend', (event) => {
				const newPos = {
					lat: event.latLng.lat(),
					lng: event.latLng.lng()
				};

				this.reverseGeocode(newPos.lat, newPos.lng, (result) => {
					if (result) {
						const location = {
							...newPos,
							address: result.formatted_address,
							components: result.components
						};

						autocomplete.value = location.address;
						this.updateFieldInputs(fieldContainer, location);
						this.updateMapLinks(fieldContainer, location.lat, location.lng);

						if (onLocationSelected) {
							onLocationSelected(location);
						}
					}
				});
			});
		}

		return autocomplete;
	}

	/**
	 * Create marker using Advanced Markers API
	 */
	createMarker(map, position) {
		if (google.maps.marker && google.maps.marker.AdvancedMarkerElement) {
			return new google.maps.marker.AdvancedMarkerElement({
				map: map,
				position: position,
				gmpDraggable: true
			});
		}

		// Fallback to regular marker
		return new google.maps.Marker({
			position: position,
			map: map,
			draggable: true
		});
	}

	/**
	 * Parse address components from Places API
	 */
	parseAddressComponents(components) {
		const result = {
			street: '',
			city: '',
			province: '',
			country: '',
			postal_code: ''
		};

		if (!Array.isArray(components)) return result;

		let streetNumber = '';
		let route = '';
		console.log('Attempting to parse address components...');
		components.forEach(component => {
			const types = component.types || [];
			console.log(component);
			console.log(types);
			const text = component.longText || component.long_name || '';
			const shortText = component.shortText || component.short_name || '';

			if (types.includes('street_number')) streetNumber = text;
			if (types.includes('route')) route = text;
			if (types.includes('locality')) result.city = text;
			if (types.includes('administrative_area_level_1')) result.province = shortText;
			if (types.includes('country')) result.country = shortText;
			if (types.includes('postal_code')) result.postal_code = text;
		});

		result.street = `${streetNumber} ${route}`.trim();

		console.log('Final result: ', result);
		return result;
	}

	/**
	 * Update hidden form inputs within the field container
	 */
	updateFieldInputs(fieldContainer, location) {
		// Update main fields
		const addressInput = fieldContainer.querySelector('[data-location-field="address"]');
		const latInput = fieldContainer.querySelector('[data-location-field="lat"]');
		const lngInput = fieldContainer.querySelector('[data-location-field="lng"]');

		console.log('Address Input:', addressInput);
		console.log('Latitude Input:', latInput);
		console.log('lngInput Input:', lngInput);
		if (addressInput) addressInput.value = location.address || '';
		if (latInput) latInput.value = location.lat || '';
		if (lngInput) lngInput.value = location.lng || '';

		console.log('Components: ', location.components);
		// Update component fields
		if (location.components) {
			Object.keys(location.components).forEach(key => {
				const input = fieldContainer.querySelector(`[data-location-field="${key}"]`);
				console.log('Component input: ', input);
				if (input) {
					input.value = location.components[key] || '';
				}
			});
		}

		// Trigger change events
		fieldContainer.querySelectorAll('input[type="hidden"]').forEach(input => {
			input.dispatchEvent(new Event('change', { bubbles: true }));
		});
	}

	/**
	 * Update map links
	 */
	updateMapLinks(fieldContainer, lat, lng) {
		const linksContainer = fieldContainer.querySelector('.location-links');
		if (!linksContainer) {
			// Create links container if it doesn't exist
			const preview = fieldContainer.querySelector('.location-preview');
			if (preview) {
				const newLinks = document.createElement('div');
				newLinks.className = 'location-links';
				newLinks.innerHTML = `
					<a href="https://www.google.com/maps/search/?api=1&query=${lat},${lng}"
					   target="_blank" class="google-maps-link">
						<span>View in Google Maps</span>
					</a>
					<a href="https://maps.apple.com/?ll=${lat},${lng}"
					   target="_blank" class="apple-maps-link">
						<span>View in Apple Maps</span>
					</a>
				`;
				preview.appendChild(newLinks);
			}
		} else {
			const googleLink = linksContainer.querySelector('.google-maps-link');
			const appleLink = linksContainer.querySelector('.apple-maps-link');

			if (googleLink) {
				googleLink.href = `https://www.google.com/maps/search/?api=1&query=${lat},${lng}`;
			}
			if (appleLink) {
				appleLink.href = `https://maps.apple.com/?ll=${lat},${lng}`;
			}
		}
	}

	/**
	 * Create a display-only map
	 */
	createDisplayMap(containerId, config) {
		if (!this.ready) return null;

		const container = document.getElementById(containerId);
		if (!container) return null;

		const mapOptions = {
			center: { lat: config.lat, lng: config.lng },
			zoom: config.zoom || this.defaults.zoom,
			mapId: this.defaults.mapId,
			styles: this.getMapStyles(),
			disableDefaultUI: !config.interactive,
			gestureHandling: config.interactive ? 'auto' : 'none'
		};

		const map = new google.maps.Map(container, mapOptions);

		if (config.show_marker) {
			const marker = this.createMarker(map, { lat: config.lat, lng: config.lng });

			if (config.show_info_window && config.info_content) {
				const infoWindow = new google.maps.InfoWindow({
					content: `<div class="map-info-window">${config.info_content}</div>`
				});

				marker.addListener('click', () => {
					infoWindow.open(map, marker);
				});

				if (config.auto_open !== false) {
					setTimeout(() => infoWindow.open(map, marker), 500);
				}
			}
		}

		this.instances.set(containerId, { map, config });
		return map;
	}

	/**
	 * Reverse geocode coordinates to address
	 */
	reverseGeocode(lat, lng, callback) {
		const geocoder = new google.maps.Geocoder();

		geocoder.geocode({ location: { lat, lng } }, (results, status) => {
			if (status === 'OK' && results[0]) {
				const result = {
					formatted_address: results[0].formatted_address,
					components: this.parseAddressComponents(results[0].address_components)
				};
				callback(result);
			} else {
				callback(null);
			}
		});
	}

	/**
	 * Get default map styles
	 */
	getMapStyles() {
		return [
			{ elementType: "geometry", stylers: [{ color: "#f5f5f5" }] },
			{ elementType: "labels.text.fill", stylers: [{ color: "#616161" }] },
			{ elementType: "labels.text.stroke", stylers: [{ color: "#f5f5f5" }] },
			{ featureType: "road", elementType: "geometry", stylers: [{ color: "#ffffff" }] },
			{ featureType: "water", elementType: "geometry", stylers: [{ color: "#c9c9c9" }] },
			{ featureType: "poi.business", stylers: [{ visibility: "off" }],},
			{ featureType: "transit", elementType: "labels.icon", stylers: [{ visibility: "off" }],}
		];
	}

	/**
	 * Get map instance
	 */
	getInstance(fieldId) {
		return this.instances.get(fieldId);
	}

	/**
	 * Destroy map instance
	 */
	destroyInstance(fieldId) {
		const instance = this.instances.get(fieldId);
		if (instance) {
			if (instance.map) {
				google.maps.event.clearInstanceListeners(instance.map);
			}
			this.instances.delete(fieldId);
		}
	}
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
	if (!window.jvbMaps) {
		window.jvbMaps = new JVBGoogleMaps();
	}
});