import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
    MatToolbarModule,
    MatButtonModule,
    MatTabsModule,
    MatSidenavModule,
    MatListModule
  ],
  template: `
    <mat-toolbar color="primary">
      <span>OriginDex</span>
      <span class="spacer"></span>
      <ng-container *ngIf="auth.isAuthenticated$ | async; else loginButtons">
        <span>Welcome, {{ auth.currentUser?.username }}!</span>
        <button mat-button (click)="auth.logout()">Logout</button>
      </ng-container>
      <ng-template #loginButtons>
        <button mat-button routerLink="/auth/login">Login</button>
        <button mat-button routerLink="/auth/register">Register</button>
      </ng-template>
    </mat-toolbar>

    <mat-sidenav-container class="content-container">
      <mat-sidenav mode="side" opened>
        <mat-nav-list>
          <a mat-list-item routerLink="/storage" routerLinkActive="active">
            Storage
          </a>
          <a mat-list-item routerLink="/storage-carousel" routerLinkActive="active">
            Storage Carousel
          </a>
          <a mat-list-item routerLink="/efficiency" routerLinkActive="active">
            Efficiency Plan
          </a>
        </mat-nav-list>
      </mat-sidenav>
      <mat-sidenav-content>
        <div class="content">
          <router-outlet></router-outlet>
        </div>
      </mat-sidenav-content>
    </mat-sidenav-container>
  `,
  styles: [`
    .spacer {
      flex: 1 1 auto;
    }

    mat-toolbar {
      margin-bottom: 0;
    }

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

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

    .content {
      padding: 20px;
      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 {
  constructor(public auth: AuthService) {}
}