import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { ArtifactService } from './services/artifact';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    <div class="container">
      <header>
        <h1><span class="logo">[W13]</span></h1>
        <div class="header-info">
          <span class="badge">{{ deploymentMode }}</span>
          <span class="badge">{{ storageBackend }}</span>
        </div>
      </header>

      <nav class="tabs">
        <a routerLink="/artifacts" routerLinkActive="active" class="tab-button">
          <span class="material-icons md-16">storage</span> Artifacts
        </a>
        <a routerLink="/upload" routerLinkActive="active" class="tab-button">
          <span class="material-icons md-16">upload</span> Upload
        </a>
        <a routerLink="/query" routerLinkActive="active" class="tab-button">
          <span class="material-icons md-16">search</span> Query
        </a>
      </nav>

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

  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)
    });
  }
}