import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { UnidadOrganizativa } from './model';
import { MatDialog } from '@angular/material/dialog';
import { CreateOrganizationalUnitComponent } from './organizational-units/create-organizational-unit/create-organizational-unit.component';
import { DeleteModalComponent } from './delete-modal/delete-modal.component';
import { CreateClientComponent } from './clients/create-client/create-client.component';
import { EditOrganizationalUnitComponent } from './organizational-units/edit-organizational-unit/edit-organizational-unit.component';
import { EditClientComponent } from './clients/edit-client/edit-client.component';

@Component({
  selector: 'app-groups',
  templateUrl: './groups.component.html',
  styleUrls: ['./groups.component.css']
})
export class GroupsComponent implements OnInit {
  unidadesOrganizativas: UnidadOrganizativa[] = [];
  selectedUnidad: UnidadOrganizativa | null = null;
  selectedDetail: any | null = null;
  children: any[] = [];
  breadcrumb: string[] = [];

  constructor(private dataService: DataService, public dialog: MatDialog) {}

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

  fetchUnidadesOrganizativas(): void {
    this.dataService.getUnidadesOrganizativas().subscribe(
      data => this.unidadesOrganizativas = data,
      error => console.error('Error fetching unidades organizativas', error)
    );
  }

  onSelectUnidad(unidad: UnidadOrganizativa): void {
    this.selectedUnidad = unidad;
    this.selectedDetail = unidad;
    this.breadcrumb = [unidad.nombre];
    this.loadChildrenAndClients(unidad.uuid);
  }

  onSelectChild(child: any): void {
    this.selectedDetail = child;
    if (child.type !== 'client' && child.uuid) {
      this.breadcrumb.push(child.name || child.nombre);
      this.loadChildrenAndClients(child.uuid);
    }
  }

  loadChildrenAndClients(uuid: string): void {
    this.dataService.getChildren(uuid).subscribe(
      childrenData => {
        this.dataService.getClients(uuid).subscribe(
          clientsData => {
            this.children = [...childrenData, ...clientsData];
            if (this.children.length === 0) {
              this.breadcrumb.pop();
            }
          },
          error => {
            console.error('Error fetching clients', error);
            this.children = [];
          }
        );
      },
      error => {
        console.error('Error fetching children', error);
        this.children = [];
      }
    );
  }

  addOU(): void {
    this.dialog.open(CreateOrganizationalUnitComponent).afterClosed().subscribe(() => {
      this.fetchUnidadesOrganizativas();
    });
  }

  addClient(): void {
    this.dialog.open(CreateClientComponent).afterClosed().subscribe(() => {
      this.fetchUnidadesOrganizativas();
    });
  }

  getIcon(type: string): string {
    const iconMap: { [key: string]: string } = {
      'organizational-unit': 'apartment',
      'classroom-group': 'classrooms-group-icon',
      'classroom': 'classroom-icon',
      'client': 'client-icon',
      'clients-group': 'clients-group-icon'
    };
    return iconMap[type] || '';
  }

  onDeleteClick(uuid: string, name: string, type: string, event: MouseEvent): void {
    event.stopPropagation();
    this.dialog.open(DeleteModalComponent, { width: '250px', data: { name } }).afterClosed().subscribe(result => {
      if (result) {
        this.dataService.deleteElement(uuid, type).subscribe(
          () => {
            this.loadChildrenAndClients(this.selectedUnidad?.uuid || '');
            this.fetchUnidadesOrganizativas();
          },
          error => console.error('Error deleting element', error)
        );
      }
    });
  }

  onEditClick(type: string, uuid: string, event: MouseEvent): void {
    event.stopPropagation();
    const dialogComponent = type === 'client' ? EditClientComponent : EditOrganizationalUnitComponent;
    this.dialog.open(dialogComponent as any);  // Usando type assertion aquí
  }
}