import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { ArtifactService } from './services/artifact';
import { NavSidebarComponent } from './components/nav-sidebar/nav-sidebar';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, NavSidebarComponent],
  template: `
    <div class="app-layout">
      <app-nav-sidebar (sidebarToggled)="onSidebarToggle($event)"></app-nav-sidebar>

      <main class="main-content" [class.sidebar-collapsed]="isSidebarCollapsed">
        <header class="top-header">
          <h1><span class="logo">[W13]</span> Warehouse13</h1>
          <div class="header-info">
            <span class="badge">{{ deploymentMode }}</span>
            <span class="badge">{{ storageBackend }}</span>
          </div>
        </header>

        <div class="content-area">
          <router-outlet></router-outlet>
        </div>
      </main>
    </div>
  `,
  styleUrls: ['./app.css']
})
export class AppComponent implements OnInit {
  deploymentMode: string = '';
  storageBackend: string = '';
  isSidebarCollapsed: boolean = false;

  constructor(private artifactService: ArtifactService) {}

  ngOnInit() {
    this.artifactService.getApiInfo().subscribe({
      next: (info) => {
        this.deploymentMode = `Mode: ${info.deployment_mode}`;
        this.storageBackend = `Storage: ${info.storage_backend}`;
      },
      error: (err) => console.error('Failed to load API info:', err)
    });
  }

  onSidebarToggle(isCollapsed: boolean) {
    this.isSidebarCollapsed = isCollapsed;
  }
}