import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { PageEvent } from '@angular/material/paginator';
import {Observable} from "rxjs";
import {ServerInfoDialogComponent} from "../../ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component";

@Component({
  selector: 'app-pxe-boot-files',
  templateUrl: './pxe-boot-files.component.html',
  styleUrls: ['./pxe-boot-files.component.css']
})
export class PxeBootFilesComponent implements OnInit {
  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;

  availableOrganizationalUnits: any[] = [];
  selectedUnitChildren: any[] = [];
  dataSource: any[] = [];
  taskForm: FormGroup;
  loadingUnits: boolean = false;
  ogLiveOptions: any[] = [];
  globalOgLive: string | null = null;
  length: number = 0;
  itemsPerPage: number = 10;
  page: number = 0;
  pageSizeOptions: number[] = [5, 10, 20, 40, 100];
  filters: any = {};
  displayedColumns: string[] = ['id', 'name', 'ogLive'];


  constructor(
    private fb: FormBuilder,
    private http: HttpClient,
    private toastService: ToastrService
  ) {
    this.taskForm = this.fb.group({
      organizationalUnit: ['', Validators.required],
      selectedChild: ['', Validators.required]
    });
  }

  ngOnInit(): void {
    this.fetchOrganizationalUnits();
    this.fetchPxeTemplates();
  }

  fetchOrganizationalUnits(): void {
    this.loadingUnits = true;
    this.http.get<any>(`${this.baseUrl}/organizational-units?page=1&itemsPerPage=30`)
      .subscribe(
        response => {
          this.availableOrganizationalUnits = response['hydra:member'].filter((item: any) => item.type === 'organizational-unit');
          this.loadingUnits = false;
        },
        error => {
          this.toastService.error('Error al cargar las unidades organizativas');
          this.loadingUnits = false;
        }
      );
  }

  fetchPxeTemplates(): void {
    this.http.get<any>(`${this.baseUrl}/pxe-templates?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters })
      .subscribe(
        response => {
          this.ogLiveOptions = response['hydra:member'];
          this.length = response['hydra:totalItems'];
        },
        error => {
          this.toastService.error('Error al cargar las plantillas');
        }
      );
  }

  onOrganizationalUnitChange(): void {
    const selectedUnitId = this.taskForm.get('organizationalUnit')?.value;
    const selectedUnit = this.availableOrganizationalUnits.find(unit => unit['@id'] === selectedUnitId);

    if (selectedUnit) {
      this.selectedUnitChildren = this.getAllClassrooms(selectedUnit);
    } else {
      this.selectedUnitChildren = [];
    }
  }

  getAllClassrooms(unit: any): any[] {
    let classrooms: any[] = [];
    if (unit.type === 'classroom') {
      classrooms.push(unit);
    }
    if (unit.children) {
      for (const child of unit.children) {
        classrooms = classrooms.concat(this.getAllClassrooms(child));
      }
    }
    return classrooms;
  }


  onChildChange(): void {
    const selectedChildId = this.taskForm.get('selectedChild')?.value;
    const selectedChild = this.selectedUnitChildren.find(child => child['@id'] === selectedChildId);
    if (selectedChild && selectedChild.clients) {
      this.dataSource = selectedChild.clients.map((client: { template: { [x: string]: any; }; }) => ({
        ...client,
        ogLive: client.template ? client.template['@id'] : null
      }));
    } else {
      this.dataSource = [];
    }
  }


  applyToAll(): void {
    this.dataSource = this.dataSource.map(client => ({
      ...client,
      ogLive: this.globalOgLive || client.ogLive
    }));
  }

  saveOgLiveTemplates(): void {
    const groupedByTemplate: { [key: string]: string[] } = {};

    this.dataSource.forEach(client => {
      if (client.ogLive) {
        if (!groupedByTemplate[client.ogLive]) {
          groupedByTemplate[client.ogLive] = [];
        }
        groupedByTemplate[client.ogLive].push(client['@id']);
      }
    });

    Object.keys(groupedByTemplate).forEach(templateId => {
      const clients = groupedByTemplate[templateId];
      const url = `${this.baseUrl}${templateId}/add-clients`;

      const payload = {
        clients: clients
      };

      this.http.post(url, payload).subscribe({
        next: () => {
          this.toastService.success(`Clientes guardados correctamente para la plantilla ${templateId}`);
        },
        error: () => {
          this.toastService.error(`Error al guardar clientes para la plantilla ${templateId}`);
        }
      });
    });
  }

  onPageChange(event: PageEvent): void {
    this.page = event.pageIndex;
    this.itemsPerPage = event.pageSize;
    this.fetchPxeTemplates();
  }
}