// Questo file fa parte di MyTown.
// MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
// i termini della GNU Affero General Public License come pubblicata dalla
// Free Software Foundation, versione 3.
// Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
// Copyright (C) Kondor Consulting & Services S.r.l.
// SPDX-License-Identifier: AGPL-3.0-or-later

import { Component, OnInit } from '@angular/core';
import { PopoverController, ModalController, AlertController, IonicModule } from '@ionic/angular';
import { Router } from '@angular/router';
import { ConfigService } from 'src/app/providers/config.service';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// User Menu Popover Component
@Component({
	selector: 'app-user-menu',
	template: `
		<ion-content class="user-menu-popover">
			<div class="user-header">
				@if (getUserAvatar()) {
				<img [src]="getUserAvatar()" alt="avatar" class="user-avatar-large user-avatar-large--img" />
				} @else {
				<div class="user-avatar-large" style="background: var(--app-brand); color: var(--app-on-brand);">
					{{ getUserInitials() }}
				</div>
				}
				<h3>{{ getUserFullName() }}</h3>
				<p>{{ getUserEmail() }}</p>
			</div>

			<ion-list lines="none">
				<ion-item button (click)="goToProfile()" detail="false">
					<ion-icon name="person-outline" slot="start" color="primary"></ion-icon>
					<ion-label>Mio Profilo</ion-label>
				</ion-item>

				<ion-item button (click)="openSettings()" detail="false">
					<ion-icon name="settings-outline" slot="start" color="primary"></ion-icon>
					<ion-label>Impostazioni</ion-label>
				</ion-item>

				<!--ion-item-divider>
					<ion-label>Preferenze</ion-label>
				</!--ion-item-divider>

				<ion-item-- button (click)="toggleTheme()" detail="false">
					<ion-icon [name]="isDarkMode ? 'moon' : 'sunny-outline'" slot="start" color="primary"></ion-icon>
					<ion-label>Tema</ion-label>
					<ion-toggle [(ngModel)]="isDarkMode" (ionChange)="applyTheme()"></ion-toggle>
				</ion-item-->

				<ion-item-divider>
					<ion-label>Account</ion-label>
				</ion-item-divider>

				<ion-item button (click)="signOut()" detail="false" class="logout-item">
					<ion-icon name="log-out-outline" slot="start" color="danger"></ion-icon>
					<ion-label color="danger">Esci</ion-label>
				</ion-item>
			</ion-list>
		</ion-content>
	`,
	styles: [
		`
			.user-menu-popover {
				--width: 300px;
			}

			.user-header {
				padding: 20px;
				text-align: center;
				background: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-primary-shade));
				color: white;
			}

			.user-avatar-large {
				width: 70px;
				height: 70px;
				border-radius: 50%;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-size: 28px;
				font-weight: bold;
				color: white;
				margin-bottom: 10px;
			}

			.user-header h3 {
				margin: 5px 0;
				font-size: 18px;
			}

			.user-header p {
				margin: 0;
				opacity: 0.9;
				font-size: 14px;
			}

			ion-list {
				padding: 0;
			}

			ion-item {
				--padding-start: 16px;
				--inner-padding-end: 16px;
			}

			ion-item-divider {
				font-size: 12px;
				font-weight: 600;
				text-transform: uppercase;
				--padding-start: 16px;
				margin-top: 10px;
			}

			.logout-item {
				margin-top: 10px;
			}
		`,
	],
	imports: [FormsModule, IonicModule, ReactiveFormsModule],
})
export class UserMenuComponent {
	isDarkMode = false;

	constructor(private popoverController: PopoverController, private router: Router, private configService: ConfigService) {
		this.checkTheme();
	}

	checkTheme() {
		this.isDarkMode = document.body.classList.contains('dark');
	}

	getUserInitials(): string {
		return this.configService.getUsernameInitials();
	}

	getUserFullName(): string {
		const user = this.configService.getUser();
		return user ? `${user.usr_firstname} ${user.usr_lastname}` : '';
	}

	getUserEmail(): string {
		return this.configService.getUser()?.usr_mail || '';
	}

	getAvatarColor(): string {
		return this.configService.getColorFromDisplayName();
	}

	getUserAvatar(): string {
		return this.configService.getUserAvatar();
	}

	async goToProfile() {
		await this.popoverController.dismiss();
		this.router.navigate(['/profile']);
	}

	async openSettings() {
		await this.popoverController.dismiss();
		this.router.navigate(['/settings']);
	}

	async changePortal() {
		await this.popoverController.dismiss();
		this.router.navigate(['/portal-selection']);
	}

	async toggleTheme() {
		this.isDarkMode = !this.isDarkMode;
		this.applyTheme();
	}

	applyTheme() {
		document.body.classList.toggle('dark', this.isDarkMode);
		localStorage.setItem('theme', this.isDarkMode ? 'dark' : 'light');
	}

	async signOut() {
		await this.popoverController.dismiss();
		this.configService.logout();
		this.router.navigate(['/login']);
	}
}
