import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
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, ActivityLogComponent],
  template: `
    <div class="main-layout">
      <header class="header">
        <div class="header-content">
          <h1>Flare Administration</h1>
          <div class="header-actions">
            <span class="username">{{ username }}</span>
            <button class="notification-btn" (click)="toggleActivityLog()">
              🔔
              @if (showActivityLog) {
                <app-activity-log (close)="toggleActivityLog()"></app-activity-log>
              }
            </button>
            <button class="btn btn-secondary" (click)="logout()">Logout</button>
          </div>
        </div>
      </header>

      <nav class="tabs">
        <a
          routerLink="/user-info"
          routerLinkActive="active"
          class="tab"
        >
          User Info
        </a>
        <a
          routerLink="/environment"
          routerLinkActive="active"
          class="tab"
        >
          Environment
        </a>
        <a
          routerLink="/apis"
          routerLinkActive="active"
          class="tab"
        >
          APIs
        </a>
        <a
          routerLink="/projects"
          routerLinkActive="active"
          class="tab"
        >
          Projects
        </a>
        <a
          routerLink="/test"
          routerLinkActive="active"
          class="tab"
        >
          Test
        </a>
      </nav>

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

    .header {
      background-color: #fff;
      border-bottom: 1px solid #dee2e6;
      padding: 1rem 0;

      .header-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h1 {
          font-size: 1.5rem;
          color: #333;
          margin: 0;
        }
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 1rem;

        .username {
          font-weight: 500;
          color: #495057;
        }

        .notification-btn {
          position: relative;
          background: none;
          border: none;
          font-size: 1.25rem;
          cursor: pointer;
          padding: 0.25rem;

          &:hover {
            opacity: 0.7;
          }
        }
      }
    }

    .tabs {
      background-color: #fff;
      border-bottom: 2px solid #dee2e6;
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;

      a {
        text-decoration: none;
      }
    }

    .content {
      flex: 1;
      overflow-y: auto;
      padding: 2rem 0;

      > * {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
      }
    }
  `]
})
export class MainComponent {
  private authService = inject(AuthService);

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

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

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