import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatTabsModule } from '@angular/material/tabs';
import { AuthService } from './core/services/auth.service';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { PokemonService } from './core/services/pokemon.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
    MatToolbarModule,
    MatButtonModule,
    MatTabsModule,
    MatSidenavModule,
    MatListModule
  ],
  template: `
    <mat-toolbar color="primary" class="top-bar">
      <div class="toolbar-left">
        <span>OriginDex</span>
      </div>

      <div class="image-container">
        <img
          [src]="isRouteSelected('/storage-carousel') ? 'assets/images/poke_box_selected.png' : 'assets/images/poke_box.png'"
          [routerLink]="['/storage-carousel']"
          (mouseover)="hoveredRoute = '/storage-carousel'"
          (mouseout)="hoveredRoute = ''"
          class="top-bar-icon"
        >
        <img
          [src]="isRouteSelected('/efficiency') ? 'assets/images/map_selected.png' : 'assets/images/map.png'"
          [routerLink]="['/efficiency']"
          (mouseover)="hoveredRoute = '/efficiency'"
          (mouseout)="hoveredRoute = ''"
          class="top-bar-icon"
        >
      </div>

      <div class="toolbar-right" *ngIf="auth.isAuthenticated$ | async; else loginButtons">
        <span>Welcome, {{ auth.currentUser?.username }}!</span>
        <button mat-button (click)="auth.logout()">Logout</button>
      </div>

      <ng-template #loginButtons>
        <div class="toolbar-right">
          <button mat-button routerLink="/auth/login">Login</button>
          <button mat-button routerLink="/auth/register">Register</button>
        </div>
      </ng-template>
    </mat-toolbar>


    <div class="content">
      <router-outlet></router-outlet>
    </div>
  `,
  styles: [`
    .top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .toolbar-left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .image-container {
      display: flex;
      align-items: center;
      gap: 16px; /* Space between images */
      flex: 0;   /* Do not grow or shrink */
    }

    .toolbar-right {
      display: flex;
      align-items: center;
      gap: 8px;  /* Space between the welcome message and buttons */
      flex: 1;
      justify-content: flex-end;
    }

    .top-bar-icon {
      cursor: pointer;
      height: 48px; /* Adjust as needed */
      width: auto;   /* Maintain aspect ratio */
      transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition effect */
    }

    .top-bar-icon:hover {
      transform: scale(1.1); /* Slightly enlarge the image on hover */
    }



    mat-toolbar {
      margin-bottom: 0;
    }

    .content-container {
      height: calc(100vh - 64px);
    }

    mat-sidenav {
      width: 200px;
      background: #f5f5f5;
      border-right: 1px solid #ddd;
    }

    .content {
      //height: 100%;
      overflow: auto;
    }

    .active {
      background: rgba(0, 0, 0, 0.04);
      color: #3f51b5;
    }

    mat-nav-list {
      padding-top: 0;
    }

    mat-nav-list a {
      height: 48px;
    }
  `]
})
export class AppComponent {
  hoveredRoute: string = '';
  constructor(
    public auth: AuthService,
    public pokemonService: PokemonService,
    private router: Router
  ) {
    this.pokemonService.initializeCaughtPokemon();
  }

  isRouteSelected(route: string): boolean {
    return this.router.url === route || this.hoveredRoute === route;
  }
}