{% trans_default_domain 'home' %}

<!-- Message de chargement de la géolocalisation -->
<div id="alert_location_loading" class="container mx-auto max-w-4xl">
  <div class="bg-orange-50 rounded-t-xl shadow-sm">
    <div class="p-3 flex items-center justify-center">
      <span class="material-symbols-outlined text-orange-600 mr-2 animate-spin">location_searching</span>
      <p class="text-sm text-orange-700">
        Chargement de vos données de localisation en cours...
      </p>
    </div>
  </div>
</div>

<!-- Message d'erreur de géolocalisation -->
<div id="alert_location_unavailable" class="container mx-auto max-w-4xl mt-4" style="display: none;">
  <div class="bg-red-50 border border-red-200 rounded-lg mx-4 mb-4">
    <div class="p-6 text-center">
      <div class="flex justify-center mb-4">
        <span class="material-symbols-outlined text-red-600 text-6xl">location_off</span>
      </div>

      <h2 class="text-xl font-bold text-red-800 mb-2">
        {{ 'Integration.location_required'|trans }}
      </h2>

      <p class="text-red-700 mb-6">
        {{ 'Integration.location_required_info'|trans }}
      </p>

      <div class="flex flex-col sm:flex-row gap-3 justify-center">
        <button id="open_location_settings"
                class="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
          {{ 'Integration.location_settings_button'|trans }}
        </button>

        <a href="javascript:window.location.reload()"
           class="px-6 py-3 text-gray-600 rounded-lg hover:text-gray-400 transition-colors inline-block text-center">
          {{ 'Integration.location_retry_button'|trans }}
        </a>
      </div>
    </div>
  </div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		const alertLocationUnavailable = document.getElementById('alert_location_unavailable');
		const alertLocationLoading = document.getElementById('alert_location_loading');
		const formContainer = document.getElementById('signalement-form-container');
		const openSettingsBtn = document.getElementById('open_location_settings');

// Fonction pour détecter le type d'appareil
		function detectDevice() {
			const userAgent = navigator.userAgent;
			if (/iPad|iPhone|iPod/.test(userAgent)) {
				return 'ios';
			} else if (/Android/.test(userAgent)) {
				return 'android';
			}
			return 'desktop';
		}

// Fonction pour ouvrir les paramètres de localisation
		function openLocationSettings() {
			const device = detectDevice();

			if (device === 'ios') { // Pour iOS, tenter d'ouvrir les paramètres de localisation
				window.location.href = 'app-settings:location';
// Fallback pour les versions plus récentes d'iOS
				setTimeout(() => {
					window.location.href = 'prefs:root=Privacy&path=LOCATION';
				}, 250);
			} else if (device === 'android') { // Pour Android, tenter d'ouvrir les paramètres de localisation
				window.location.href = 'android-app://com.android.settings/.Settings$LocationSettingsActivity';
// Fallback
				setTimeout(() => {
					window.location.href = 'intent://settings/location_source_settings#Intent;scheme=android-app;package=com.android.settings;end';
				}, 250);
			} else { // Pour desktop, afficher un message d'information
				alert('Veuillez activer la localisation dans les paramètres de votre navigateur.');
			}
		}

// Fonction pour vérifier la localisation de manière proactive
		async function checkLocationAvailability() {
// Le message de chargement est déjà affiché par défaut

// Vérifier si la géolocalisation est supportée
			if (!navigator.geolocation) {
				showLocationError();
				return;
			}

			try {
// Vérifier d'abord les permissions sans demander de position
				if (navigator.permissions) {
					const permission = await navigator.permissions.query({name: 'geolocation'});

// Si permission refusée définitivement, afficher l'erreur
					if (permission.state === 'denied') {
						showLocationError();
						return;
					}

// Écouter les changements de permission
					permission.addEventListener('change', function () {
						if (permission.state === 'denied') {
							showLocationError();
						} else if (permission.state === 'granted') {
							// Remettre le message de chargement si l'utilisateur réactive
							showFormWithLoading();
						}
					});
				}

// Seulement si on arrive ici, faire une demande de position légère
				navigator.geolocation.getCurrentPosition(
					function (position) {
// Succès - géolocalisation disponible et fonctionnelle
						showFormReady();
					},
					function (error) {
// Erreur spécifique selon le code d'erreur
						if (error.code === error.PERMISSION_DENIED) {
							showLocationError();
						} else if (error.code === error.POSITION_UNAVAILABLE) {
							showLocationError();
						} else if (error.code === error.TIMEOUT) {
							showLocationError();
						}
					},
					{
						enableHighAccuracy: true,   // GPS hardware pour plus de précision
						timeout: 15000,             // 15 secondes pour permettre un fix GPS correct
						maximumAge: 60000           // 1 minute max de cache
					}
				);
			} catch (error) {
// En cas d'erreur, on garde le formulaire ouvert avec le message de chargement
			}
		}

// Fonction pour afficher le formulaire avec message de chargement
		function showFormWithLoading() {
			alertLocationUnavailable.style.display = 'none';
			alertLocationLoading.style.display = 'block';
			if (formContainer) {
				formContainer.style.visibility = 'visible';
				formContainer.style.opacity = '1';
			}
		}

// Fonction pour afficher le formulaire prêt (sans message de chargement)
		function showFormReady() {
			alertLocationUnavailable.style.display = 'none';
			alertLocationLoading.style.display = 'none';
			if (formContainer) {
				formContainer.style.visibility = 'visible';
				formContainer.style.opacity = '1';
			}
		}

// Fonction pour afficher l'erreur de localisation
		function showLocationError() {
			alertLocationLoading.style.display = 'none';
			if (formContainer) {
				formContainer.style.visibility = 'hidden';
				formContainer.style.opacity = '0';
			}
			alertLocationUnavailable.style.display = 'block';
		}

// Event listeners
		openSettingsBtn.addEventListener('click', openLocationSettings);

// Fonction de debug pour le développement
		window.disableLocalisation = function() {
			console.log('🛠️ Mode dev : Localisation désactivée - Formulaire accessible');
			showFormReady();
		};

// Vérification initiale
		checkLocationAvailability();
	});
</script>