import { CommonModule } from '@angular/common';
import { Component, signal } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { ZardAvatarComponent } from '@shared/components/avatar/avatar.component';
import { ZardBreadcrumbModule } from '@shared/components/breadcrumb/breadcrumb.module';
import { ZardButtonComponent } from '@shared/components/button/button.component';
import { ZardDividerComponent } from '@shared/components/divider/divider.component';
import { LayoutModule } from '@shared/components/layout/layout.module';
import { ZardMenuModule } from '@shared/components/menu/menu.module';
import { ZardTooltipModule } from '@shared/components/tooltip/tooltip';
import { MenuItem } from 'src/app/core/interfaces/menu-item';
import { Theme } from 'src/app/core/services/theme';
import { ModeToggle } from '@shared/components/mode-toggle/mode-toggle';
import { PmuLogo } from '@shared/components/pmu-logo/pmu-logo';
import { User } from 'src/app/core/interfaces/user';
import { Auth } from 'src/app/core/services/auth';

@Component({
  selector: 'app-layout',
  imports: [
    CommonModule,
    RouterModule,
    LayoutModule,
    ZardButtonComponent,
    ZardBreadcrumbModule,
    ZardMenuModule,
    ZardTooltipModule,
    ZardDividerComponent,
    ZardAvatarComponent,
    ModeToggle,
    PmuLogo,
  ],
  templateUrl: './layout.html',
  styleUrl: './layout.css',
})
export class Layout {
  sidebarCollapsed = signal(false);
  user = signal<User | null>(null);

  constructor(public theme: Theme, public auth: Auth, public router: Router) {
    this.user.set(auth.getUser());
  }

  mainMenuItems: MenuItem[] = [
    { icon: '🏠', label: 'Tableau de bord', link: '/', exact: true },
    { icon: '🏟️', label: 'Hippodromes', link: '/hippodromes' },
    { icon: '📅', label: 'Reunions', link: '/reunions' },
    { icon: '🏇', label: 'Courses', link: '/courses' },
    { icon: 'icon-chart-bar', label: 'Résultats des courses', link: '/resultat' },
    { icon: '💰', label: 'Gains (cagnotte)', link: '/gains' },
  ];

  workspaceMenuItems: MenuItem[] = [
    {
      icon: 'icon-folder',
      label: 'Gestion Agents',
      submenu: [
        { icon: 'icon-user-plus', label: 'Gestion Agents', link: '/agents' },
        { icon: 'icon-sliders', label: 'Gestion limites Agents', link: '/limits' },
      ],
    },
    { icon: 'icon-monitor', label: 'Gestion des TPE', link: '/tpes' },
    {
      icon: 'icon-users',
      label: 'Utilisateurs',
      submenu: [
        { icon: 'icon-users', label: 'Liste des utilisateurs', link: '/users' },
        { icon: 'icon-shield', label: 'Rôles & Permissions', link: '/roles' },
      ],
    },
  ];

  avatar = {
    fallback: 'ZA',
    url: '/assets/images/avatar.svg',
    alt: 'ZadUI',
  };

  toggleSidebar() {
    this.sidebarCollapsed.update((collapsed) => !collapsed);
  }

  onCollapsedChange(collapsed: boolean) {
    this.sidebarCollapsed.set(collapsed);
  }

  toggleTheme() {
    this.theme.toggle();
  }

  async logout() {
    this.auth.logout();
    await this.router.navigateByUrl('/auth/login');
  }

  navigate(link: string | undefined) {
    if (link) {
      this.router.navigateByUrl(link);
    }
  }

  isActive(link: string, exact = false): boolean {
    const current = this.router.url;
    return exact ? current === link : current.startsWith(link);
  }

  isAnyActive(item: MenuItem): boolean {
    if (item.link && this.isActive(item.link, !!item.exact)) return true;
    if (item.submenu && item.submenu.length) {
      return item.submenu.some((s) => !!s.link && this.isActive(s.link!, !!s.exact));
    }
    return false;
  }

  isEmoji(icon: string): boolean {
    // simple: emojis are not alphanumeric or typical class names
    // Detect if it contains non-ASCII characters
    return /[^\u0000-\u00ff]/.test(icon);
  }
}