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';
import { LucideAngularModule, Database, Upload, Search } from 'lucide-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive, LucideAngularModule],
  template: `
    <div class="container">
      <header>
        <h1>◆ Obsidian</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">
          <lucide-icon [img]="Database" [size]="16"></lucide-icon> Artifacts
        </a>
        <a routerLink="/upload" routerLinkActive="active" class="tab-button">
          <lucide-icon [img]="Upload" [size]="16"></lucide-icon> Upload
        </a>
        <a routerLink="/query" routerLinkActive="active" class="tab-button">
          <lucide-icon [img]="Search" [size]="16"></lucide-icon> Query
        </a>
      </nav>

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

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