import { ChangeDetectionStrategy, Component, inject, OnInit<% if (hasNotifications) { %>, effect<% } %> } from '@angular/core';
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
import { filter, map } from 'rxjs/operators';
import { injectAnalyticsService } from '@/core/services/analytics.service';
<% if (hasNotifications) { %>import { injectAuthService } from '@/core/services/auth.service';
import { PushNotificationService } from '@/core/services/push-notification.service';
<% } %><% if (hasPwa) { %>import { PwaService } from '@/core/services/pwa.service';
<% } %>import { injectUIService } from '@/core/services/ui.service';
import { injectWebsocketService, WSEvents } from '@/core/services/websocket.service';
<% if (hasPwa) { %>import { PwaInstallPromptComponent } from '@/shared/components/pwa-install-prompt.component';
<% } %>

@Component({
	selector: 'app-root',
	template: `
		<router-outlet />
<% if (hasPwa) { %>		<app-pwa-install-prompt />
<% } %>	`,
	styles: [],
	changeDetection: ChangeDetectionStrategy.OnPush,
	imports: [RouterOutlet<% if (hasPwa) { %>, PwaInstallPromptComponent<% } %>],
})
export class App implements OnInit {
	private router = inject(Router);
	private analyticsServ = injectAnalyticsService();
	private websocketServ = injectWebsocketService();
	private uiServ = injectUIService();
<% if (hasNotifications) { %>	private authServ = injectAuthService();
	private pushNotificationServ = inject(PushNotificationService);

	private loginStatusEffect = effect(() => {
		const isLoggedIn = this.authServ.loginStatus.data();
		if (isLoggedIn === true) {
			this.pushNotificationServ.ensurePushSubscription();
		}
	});
<% } %><% if (hasPwa) { %>	private pwaServ = inject(PwaService);
<% } %>

	ngOnInit() {
		this.analyticsServ.appendAnalyticsScript();
		this.routerNavigationEnd().subscribe((item: NavigationEnd) => {
			this.analyticsServ.setGtagUrl(item.url);
		});
		this.listenWebsockets();
<% if (hasNotifications) { %>		this.setupPushMessageListener();
<% } %><% if (hasPwa) { %>		this.setupServiceWorkerUpdateHandler();
<% } %>	}

<% if (hasPwa) { %>	private setupServiceWorkerUpdateHandler() {
		this.pwaServ.setOnUpdateReadyCallback((message) => {
			this.uiServ.showNotificationToast('Actualizacion disponible', message);
		});
	}

<% } %><% if (hasNotifications) { %>	private setupPushMessageListener() {
		this.pushNotificationServ.onPushMessage((payload) => {
			if (!document.hidden) {
				const title = payload?.notification?.title || 'Notificacion';
				const body = payload?.notification?.body;
				this.uiServ.showNotificationToast(title, body);
			}
		});
	}

<% } %>	private listenWebsockets() {
		this.websocketServ.listen(WSEvents.REFRESH).subscribe(() => window.location.reload());
		this.websocketServ.listen<{ message: string }>(WSEvents.MESSAGE).subscribe((data) => {
			if (!data) {
				return;
			}
			this.uiServ.showInfoAlert(data.message);
<% if (hasNotifications) { %>			const isAuthenticated = this.authServ.loginStatus.data();
			if (isAuthenticated && document.hidden && this.pushNotificationServ.hasPermission) {
				this.pushNotificationServ.showNotification({
					title: '<%= projectName %>',
					body: data.message,
					tag: 'broadcast-message',
				});
			}
<% } %>		});
	}

	private routerNavigationEnd() {
		return this.router.events.pipe(
			filter((item) => item instanceof NavigationEnd),
			map((item) => item as NavigationEnd)
		);
	}
}