import { Component, inject, signal } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive, Router } from '@angular/router';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { AuthService } from '../core/services/auth.service';

interface NavItem { path: string; label: string; icon: string; }

@Component({
  selector: 'app-shell',
  imports: [
    RouterOutlet, RouterLink, RouterLinkActive,
    MatToolbarModule, MatSidenavModule, MatListModule, MatIconModule, MatButtonModule, MatMenuModule,
  ],
  templateUrl: './shell.component.html',
  styleUrl: './shell.component.scss',
})
export class ShellComponent {
  private auth = inject(AuthService);
  private router = inject(Router);

  readonly opened = signal(true);
  readonly username = this.auth.username;
  readonly role = this.auth.role;

  readonly nav: NavItem[] = [
    { path: '/dashboard', label: 'Dashboard', icon: 'dashboard' },
    { path: '/pre-match', label: 'Pre-Match Reports', icon: 'query_stats' },
    { path: '/matches', label: 'Matches', icon: 'sports_soccer' },
    { path: '/leagues', label: 'Leagues', icon: 'emoji_events' },
    { path: '/seasons', label: 'Seasons', icon: 'calendar_month' },
    { path: '/teams', label: 'Teams', icon: 'groups' },
    { path: '/players', label: 'Players', icon: 'person' },
    { path: '/contracts', label: 'Contracts', icon: 'description' },
  ];

  toggle() { this.opened.update((v) => !v); }

  logout() {
    this.auth.logout();
    this.router.navigate(['/login']);
  }
}