import { inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import {Component, OnInit } from '@angular/core';
import {MatTableDataSource} from "@angular/material/table";
import {DatePipe} from "@angular/common";
import {MatDialog} from "@angular/material/dialog";
import {HttpClient} from "@angular/common/http";
import {ToastrService} from "ngx-toastr";
import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
import { JoyrideService } from 'ngx-joyride';
import { Router } from '@angular/router';
import { ConfigService } from '@services/config.service';
import {ManageBootServerComponent} from "../manage-boot-server/manage-boot-server.component";
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-boot-servers',
  templateUrl: './boot-servers.component.html',
  styleUrl: './boot-servers.component.css'
})
export class BootServersComponent implements OnInit {
  public translate = inject(TranslateService);
  baseUrl: string;
  private apiUrl: string;
  dataSource = new MatTableDataSource<any>();
  length: number = 0;
  itemsPerPage: number = 20;
  page: number = 0;
  loading: boolean = false;
  filters: { [key: string]: string } = {};
  datePipe: DatePipe = new DatePipe('es-ES');
  columns = [
    {
      columnDef: 'id',
      header: 'id1',
      cell: (server: any) => `${server.id}`
    },
    {
      columnDef: 'name',
      header: 'nombre',
      cell: (server: any) => server.name
    },
    {
      columnDef: 'ip',
      header: 'ip',
      cell: (server: any) => server.ip
    },
    {
      columnDef: 'apiPort',
      header: 'puertoApi',
      cell: (server: any) => server.apiPort
    },
    {
      columnDef: 'pxePort',
      header: 'puertoPxe',
      cell: (server: any) => server.pxePort
    },
    {
      columnDef: 'createdAt',
      header: 'fechaDeCreacion',
      cell: (server: any) => `${this.datePipe.transform(server.createdAt, 'dd/MM/yyyy hh:mm:ss')}`
    }
  ];
  displayedColumns: string[] = ['id', 'name', 'ip', 'apiPort', 'pxePort', 'createdAt', 'actions'];

  constructor(
    public dialog: MatDialog,
    private http: HttpClient,
    private toastService: ToastrService,
    private joyrideService: JoyrideService,
    private router: Router,
    private configService: ConfigService
  ) {
    this.baseUrl = this.configService.apiUrl;
    this.apiUrl = `${this.baseUrl}/boot-servers`;
  }

  ngOnInit(): void {
    this.search();
  }

  addServer(): void {
    const dialogRef = this.dialog.open(ManageBootServerComponent, {
      width: '600px'
    });

    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        this.search();
      }
    });
  }

  search(): void {
    this.loading = true;
    this.http.get<any>(`${this.apiUrl}?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
      data => {
        this.dataSource.data = data['hydra:member'];
        this.length = data['hydra:totalItems'];
        this.loading = false;
      },
      error => {
        this.loading = false;
      }
    );
  }

  editServer(event: MouseEvent, server: any): void {
    event.stopPropagation();
    this.dialog.open(ManageBootServerComponent, {
      width: '600px',
      data: server['@id']
    }).afterClosed().subscribe((result) => {
      if (result) {
        this.search();
      }
    });
  }

  deleteServer(event: MouseEvent, server: any): void {
    event.stopPropagation();
    this.dialog.open(DeleteModalComponent, {
      width: '300px',
      data: { name: server.name },
    }).afterClosed().subscribe((result) => {
      if (result) {
        this.http.delete(`${this.apiUrl}/${server.uuid}`).subscribe({
          next: () => {
            this.toastService.success(this.translate.instant('servidorEliminadoConExito'));
            this.search();
          },
          error: (error) => {
            console.error(this.translate.instant('errorAlEliminarServidor'), error);
            this.toastService.error(this.translate.instant('errorAlEliminarElServidor'));
          }
        });
      }
    });
  }

  onPageChange(event: any): void {
    this.page = event.pageIndex;
    this.itemsPerPage = event.pageSize;
    this.length = event.length;
    this.search();
  }

  openServerDashboard(server: any): void {
    this.router.navigate(['/boot-servers', server.uuid]);
  }

  syncServer(server: any): void {
    this.loading = true;
    const ogLiveSyncUrl = `${this.baseUrl}/boot-servers/${server.uuid}/oglives/sync`;
    const pxeSyncUrl = `${this.baseUrl}/boot-servers/${server.uuid}/pxe-templates/sync`;

    // Concurrent sync is fine as they target different entities
    const syncRequests = [
      this.http.post(ogLiveSyncUrl, {}),
      this.http.post(pxeSyncUrl, {})
    ];

    forkJoin(syncRequests).subscribe({
      next: () => {
        this.toastService.success(this.translate.instant('sincronizacionCompletadaConExito'));
        this.loading = false;
        this.search();
      },
      error: (error: any) => {
        console.error(this.translate.instant('errorDuranteLaSincronizacion1'), error);
        this.toastService.error(this.translate.instant('errorDuranteLaSincronizacion'));
        this.loading = false;
      }
    });
  }

  initTour(): void {
    this.joyrideService.startTour({
      steps: [
        'bootServerTitleStep',
        'addStep',
        'searchStep',
        'tableDateStep',
        'actionsStep',
        'paginationStep'
      ],
      showPrevButton: true,
      themeColor: '#3f51b5'
    });
  }
}