{% if app.user is defined and app.user %}
  <div id="zone_notification"
       class="p-2 fixed flex flex-col items-center justify-center top-4 z-50 cursor-pointer overflow-auto"></div>

  <script>
		function init() {
			initializePushNotification();

			let isAppFocused = true;

			// Gestionnaire de visibilité pour desktop et mobile
			document.addEventListener('visibilitychange', handleVisibilityChange);
			window.addEventListener('focus', () => setFocusState(true));
			window.addEventListener('blur', () => setFocusState(false));

			function handleVisibilityChange() {
				setFocusState(!document.hidden);
			}

			function setFocusState(isFocused) {
				isAppFocused = isFocused;
				console.log('App focus state:', isFocused);

				if (isFocused) {
					console.log('App focus state:', isFocused);
					// Actualiser la liste des conversations quand on revient sur l'app
					document.querySelector('turbo-frame')?.reload();

					if (window.location.href.includes('/signalement_chat/show/')) {
						window.location.reload();
					}
				}
			}

			// Configuration Mercure
			const url = new URL('{{ app.request.server.get('MERCURE_PUBLIC_URL') }}');
			url.searchParams.append('topic', '{{ 'conversation_' ~ app.user.id }}');

			const eventSource = new EventSource(url);

			// Gestionnaire d'événements Mercure
			eventSource.onmessage = function (event) {
				console.log('Nouveau message reçu:', event);
				showNotification();
			};

			function showNotification() {
				if (document.querySelector('#view_communication')) {
					return;
				}
				window.dispatchEvent(new CustomEvent('sendNotification', {
					detail: {
						id: "new_message_signalement",
						title: "Nouveau message reçu !",
						type: "success",
						description: "Vous avez reçu un nouveau message ! Cliquez pour voir le message.",
						icon: "{{ asset('assets/img/pin/nouveau_marker_police.png') }}",
						autoClose: false,
						onClick: function () {
							window.location.href = "{{ path('signalement_chat') }}";
						}
					}
				}));

				sendNotificationSystem();

				// reload turbo frame
				document.getElementById('view_list_contact_signalement')?.reload();
			}

			function initializePushNotification() {
				if (!("Notification" in window)) {
					console.log("Les notifications ne sont pas supportées par ce navigateur");
					return;
				}
				initializePushNotifications_().then(function (result) {
					if (result === 'granted') {
						console.log('Notification permission granted.');
					} else {
						console.log('Unable to get permission to notify.');
					}
				});

				function initializePushNotifications_() {
					return Notification.requestPermission(function (result) {
						return result;
					});
				}
			}

			function sendNotificationSystem() {
				if (!("Notification" in window)) {
					return;
				}
				new Notification("Nouveau message reçu !", {
					body: "Nouveau message reçu !",
					icon: "{{ asset('assets/img/pin/nouveau_marker_police.png') }}",
					image: "{{ asset('assets/img/pin/nouveau_marker_police.png') }}",
				});
			}

			eventSource.onerror = function (error) {
				console.error('Erreur de connexion Mercure:', error);
			};
		}

		init();
  </script>
{% endif %}