import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-boot-server-dashboard',
  template: `
    <div class="dashboard-container">
      <div class="header">
        <button mat-icon-button (click)="goBack()" matTooltip="Volver a servidores">
          <mat-icon>arrow_back</mat-icon>
        </button>
        <h1>Gestión de Servidor: {{ serverName }}</h1>
      </div>

      <mat-tab-group animationDuration="0ms" class="dashboard-tabs">
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon class="tab-icon">album</mat-icon>
            <div class="tab-label-content">
              <span class="tab-title">OgLives</span>
              <span class="tab-subtitle">Versiones de OgLive disponibles</span>
            </div>
          </ng-template>
          <div class="tab-content">
            @if (serverUuid) {
              <app-pxe-images [selectedServerId]="serverUuid"></app-pxe-images>
            }
          </div>
        </mat-tab>

        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon class="tab-icon">assignment</mat-icon>
            <div class="tab-label-content">
              <span class="tab-title">Plantillas PXE</span>
              <span class="tab-subtitle">Configuraciones de arranque PXE</span>
            </div>
          </ng-template>
          <div class="tab-content">
            @if (serverUuid) {
              <app-pxe [selectedServerId]="serverUuid"></app-pxe>
            }
          </div>
        </mat-tab>

        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon class="tab-icon">save</mat-icon>
            <div class="tab-label-content">
              <span class="tab-title">Arranque PXE</span>
              <span class="tab-subtitle">Ficheros de arranque de clientes</span>
            </div>
          </ng-template>
          <div class="tab-content">
             @if (serverUuid) {
              <app-pxe-boot-files [selectedServerId]="serverUuid"></app-pxe-boot-files>
            }
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
  `,
  styles: [`
    .dashboard-container { padding: 0; }
    .header { display: flex; align-items: center; padding: 20px 20px 10px 20px; gap: 10px; border-bottom: 1px solid #eee; background: #fff; }
    .header h1 { margin: 0; font-size: 20px; font-weight: 500; }
    .dashboard-tabs { background: #fafafa; }
    .tab-icon { margin-right: 12px; font-size: 24px; color: #3f51b5; }
    .tab-label-content { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; padding: 10px 0; }
    .tab-title { font-weight: 600; font-size: 14px; }
    .tab-subtitle { font-size: 11px; color: #666; font-weight: 400; }
    .tab-content { padding: 0; background: #fff; min-height: 400px; }
    ::ng-deep .mat-mdc-tab-body-wrapper { padding-top: 0 !important; }
  `]
})
export class BootServerDashboardComponent implements OnInit {
  serverUuid: string | null = null;
  serverName: string = 'Cargando...';

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private http: HttpClient,
    private configService: ConfigService
  ) {}

  ngOnInit() {
    this.serverUuid = this.route.snapshot.paramMap.get('uuid');
    if (this.serverUuid) {
      this.loadServerInfo();
    }
  }

  loadServerInfo() {
    const url = `${this.configService.apiUrl}/boot-servers/${this.serverUuid}`;
    this.http.get<any>(url).subscribe(res => {
      this.serverName = res.name;
    });
  }

  navigateTo(view: string) {
    const queryParams = { serverId: this.serverUuid };
    switch(view) {
      case 'oglives': this.router.navigate(['/pxe-images'], { queryParams }); break;
      case 'pxe-templates': this.router.navigate(['/pxe'], { queryParams }); break;
      case 'pxe-boot-files': this.router.navigate(['/pxe-boot-file'], { queryParams }); break;
    }
  }

  goBack() {
    this.router.navigate(['/boot-servers']);
  }
}