import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
    MatToolbarModule,
    MatButtonModule,
    MatIconModule,
  ],
  template: `
    <div class="app-shell">
      <mat-toolbar class="app-toolbar">
        <a class="brand" routerLink="/">
          <span class="brand-mark">A</span>
          <span class="brand-text">
            <strong>AzioneLab</strong>
            <small>Theatre and reservations</small>
          </span>
        </a>

        <nav class="main-nav">
          <a mat-button routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
          <a mat-button routerLink="/shows" routerLinkActive="active">Shows</a>
          <a mat-button routerLink="/check-in" routerLinkActive="active">Check-in</a>
        </nav>
      </mat-toolbar>

      <main class="page-shell">
        <router-outlet></router-outlet>
      </main>
    </div>
  `,
  styles: [`
    .app-shell {
      min-height: 100vh;
    }

    .app-toolbar {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      min-height: 72px;
      padding: 0 24px;
      background: rgba(251, 247, 242, 0.88);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--azionelab-border);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: inherit;
      text-decoration: none;
    }

    .brand-mark {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--azionelab-accent), #ca6d3b);
      color: white;
      font-weight: 700;
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .brand-text small {
      color: var(--azionelab-muted);
      font-size: 0.74rem;
    }

    .main-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    .main-nav .active {
      background: rgba(159, 47, 40, 0.08);
    }

    .page-shell {
      padding: 32px 20px 56px;
    }

    @media (max-width: 800px) {
      .app-toolbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px 16px 14px;
      }

      .main-nav {
        width: 100%;
      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {}