import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { AppBarModule } from '@progress/kendo-angular-navigation';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { IndicatorsModule } from '@progress/kendo-angular-indicators';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { IconsModule } from '@progress/kendo-angular-icons';
import { SVGIcon, bellIcon, menuIcon, searchIcon, userIcon, logoutIcon } from '@progress/kendo-svg-icons';
import { LayoutService } from '../services/layout.service';
import { AuthService, UserInfo } from '../../shared/services/auth.service';
import { Subject, takeUntil } from 'rxjs';

@Component({
    selector: 'app-header',
    standalone: true,
    imports: [
        CommonModule,
        AppBarModule,
        ButtonsModule,
        IndicatorsModule,
        InputsModule,
        IconsModule,
        DropDownsModule
    ],
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit, OnDestroy {
    public menuIcon: SVGIcon = menuIcon;
    public searchIcon: SVGIcon = searchIcon;
    public bellIcon: SVGIcon = bellIcon;
    public userIcon: SVGIcon = userIcon;
    public logoutIcon: SVGIcon = logoutIcon;

    public userMenuItems: any[] = [];
    public currentUser: UserInfo | null = null;
    public isAuthenticated = false;

    public badgeAlign = {
        vertical: 'top' as const,
        horizontal: 'end' as const
    };

    private destroy$ = new Subject<void>();

    constructor(
        public layoutService: LayoutService,
        private authService: AuthService,
        private router: Router
    ) { }

    ngOnInit(): void {
        // Subscribe to authentication state changes
        this.authService.currentUser$
            .pipe(takeUntil(this.destroy$))
            .subscribe(user => {
                this.currentUser = user;
                this.isAuthenticated = !!user;
                this.updateUserMenu();
            });
    }

    ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }

    public onMenuClick(): void {
        this.layoutService.toggleDrawer();
    }

    public onLogout(): void {
        this.authService.logout();
        this.router.navigate(['/login']);
    }

    public onUserMenuClick(item: any): void {
        if (item.click) {
            item.click();
        }
    }

    public getDisplayName(): string {
        return this.currentUser?.email || '';
    }

    private updateUserMenu(): void {
        if (this.isAuthenticated && this.currentUser) {
            this.userMenuItems = [
                {
                    text: `Welcome, ${this.getDisplayName() || this.currentUser.email}`,
                    disabled: true
                },
                { separator: true },
                {
                    text: 'Profile',
                    icon: 'user',
                    disabled: true
                },
                {
                    text: 'Settings',
                    icon: 'settings',
                    disabled: true
                },
                { separator: true },
                {
                    text: 'Logout',
                    icon: 'logout',
                    click: () => this.onLogout()
                }
            ];
        } else {
            this.userMenuItems = [
                {
                    text: 'Sign In',
                    click: () => this.router.navigate(['/login'])
                }
            ];
        }
    }
}

