import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTabsModule } from '@angular/material/tabs';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatBadgeModule } from '@angular/material/badge';
import { MatDividerModule } from '@angular/material/divider';
import { AuthService } from '../../services/auth.service';
import { ActivityLogComponent } from '../activity-log/activity-log.component';

@Component({
  selector: 'app-main',
  standalone: true,
  imports: [
    CommonModule, 
    RouterLink, 
    RouterLinkActive, 
    RouterOutlet,
    MatToolbarModule,
    MatTabsModule,
    MatButtonModule,
    MatIconModule,
    MatMenuModule,
    MatBadgeModule,
    MatDividerModule,
    ActivityLogComponent
  ],
  template: `
    <div class="main-layout">
      <mat-toolbar color="primary" class="header-toolbar">
        <mat-toolbar-row>
          <span class="logo">
            <mat-icon>dashboard</mat-icon>
            Flare Administration
          </span>
          
          <span class="spacer"></span>
          
          <div class="header-actions">
            <span class="username">
              <mat-icon>person</mat-icon>
              {{ username }}
            </span>
            
            <button mat-icon-button 
                    (click)="toggleActivityLog()"
                    matTooltip="Activity Log">
              <mat-icon>notifications</mat-icon>
            </button>
            
            @if (showActivityLog) {
              <div class="activity-log-wrapper" (click)="$event.stopPropagation()">
                <app-activity-log (close)="toggleActivityLog()"></app-activity-log>
              </div>
            }
            
            <button mat-icon-button [matMenuTriggerFor]="userMenu" matTooltip="User Menu">
              <mat-icon>account_circle</mat-icon>
            </button>
            
            <mat-menu #userMenu="matMenu">
              <button mat-menu-item routerLink="/user-info">
                <mat-icon>settings</mat-icon>
                <span>User Settings</span>
              </button>
              <mat-divider></mat-divider>
              <button mat-menu-item (click)="logout()">
                <mat-icon>exit_to_app</mat-icon>
                <span>Logout</span>
              </button>
            </mat-menu>
          </div>
        </mat-toolbar-row>
      </mat-toolbar>

      <nav mat-tab-nav-bar class="nav-tabs">
        <a mat-tab-link
           routerLink="/user-info"
           routerLinkActive #rla1="routerLinkActive"
           [active]="rla1.isActive">
          <mat-icon>person</mat-icon>
          User Info
        </a>
        
        <a mat-tab-link
           routerLink="/environment"
           routerLinkActive #rla2="routerLinkActive"
           [active]="rla2.isActive">
          <mat-icon>settings</mat-icon>
          Environment
        </a>
        
        <a mat-tab-link
           routerLink="/apis"
           routerLinkActive #rla3="routerLinkActive"
           [active]="rla3.isActive">
          <mat-icon>api</mat-icon>
          APIs
        </a>
        
        <a mat-tab-link
           routerLink="/projects"
           routerLinkActive #rla4="routerLinkActive"
           [active]="rla4.isActive">
          <mat-icon>folder_special</mat-icon>
          Projects
        </a>
        
        <a mat-tab-link
           routerLink="/chat"
           routerLinkActive #rla5="routerLinkActive"
           [active]="rla5.isActive">
          <mat-icon>chat_bubble_outline</mat-icon>
          Chat
        </a>
        
        <a mat-tab-link
           routerLink="/test"
           routerLinkActive #rla5="routerLinkActive"
           [active]="rla5.isActive">
          <mat-icon>bug_report</mat-icon>
          Test
        </a>
      </nav>

      <main class="content">
        <router-outlet></router-outlet>
      </main>
    </div>
  `,
  styles: [`
    .main-layout {
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: #fafafa;
    }

    .header-toolbar {
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      z-index: 100;
      position: relative;

      .logo {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 20px;
        font-weight: 500;

        mat-icon {
          font-size: 28px;
          width: 28px;
          height: 28px;
        }
      }

      .spacer {
        flex: 1 1 auto;
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;

        .username {
          display: flex;
          align-items: center;
          gap: 4px;
          margin-right: 16px;

          mat-icon {
            font-size: 20px;
            width: 20px;
            height: 20px;
          }
        }

        .activity-log-wrapper {
          position: absolute;
          top: 56px;
          right: 0;
          z-index: 1000;
        }
      }
    }

    .nav-tabs {
      background-color: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.08);

      ::ng-deep {
        .mat-mdc-tab-link {
          min-width: 120px;
          opacity: 0.8;

          mat-icon {
            margin-right: 8px;
          }

          &.mdc-tab--active {
            opacity: 1;
          }
        }
      }
    }

    .content {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
    }
  `]
})
export class MainComponent {
  private authService = inject(AuthService);

  username = this.authService.getUsername() || '';
  showActivityLog = false;

  logout() {
    this.authService.logout();
  }

  toggleActivityLog() {
    this.showActivityLog = !this.showActivityLog;
  }
}