import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { ToastrService } from 'ngx-toastr';
import { JoyrideService } from 'ngx-joyride';
import { FlatTreeControl } from '@angular/cdk/tree';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { Subscription } from 'rxjs';
import { DataService } from './services/data.service';
import { UnidadOrganizativa, Client, TreeNode, FlatNode, Command } from './model/model';
import { ManageOrganizationalUnitComponent } from './shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component';
import { ShowOrganizationalUnitComponent } from './shared/organizational-units/show-organizational-unit/show-organizational-unit.component';
import { LegendComponent } from './shared/legend/legend.component';
import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/delete-modal.component';
import { ClassroomViewDialogComponent } from './shared/classroom-view/classroom-view-modal';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { PageEvent } from '@angular/material/paginator';
import { CreateMultipleClientComponent } from "./shared/clients/create-multiple-client/create-multiple-client.component";
import { SelectionModel } from "@angular/cdk/collections";
import { ManageClientComponent } from "./shared/clients/manage-client/manage-client.component";
import { debounceTime } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { ConfigService } from '@services/config.service';
import { GlobalStatusComponent } from '../global-status/global-status.component';

enum NodeType {
  OrganizationalUnit = 'organizational-unit',
  ClassroomsGroup = 'classrooms-group',
  Classroom = 'classroom',
  ClientsGroup = 'clients-group',
  Client = 'client',
}

@Component({
  selector: 'app-groups',
  templateUrl: './groups.component.html',
  styleUrls: ['./groups.component.css'],
})
export class GroupsComponent implements OnInit, OnDestroy {
  baseUrl: string;
  mercureUrl: string;
  organizationalUnits: UnidadOrganizativa[] = [];
  selectedUnidad: UnidadOrganizativa | null = null;
  selectedDetail: UnidadOrganizativa | null = null;
  length: number = 0;
  itemsPerPage: number = 20;
  page: number = 0;
  pageSizeOptions: number[] = [5, 10, 20, 50, 100];
  initialLoading: boolean = true;
  isLoadingClients: boolean = false;
  searchTerm = '';
  treeControl: FlatTreeControl<FlatNode>;
  treeFlattener: MatTreeFlattener<TreeNode, FlatNode>;
  treeDataSource: MatTreeFlatDataSource<TreeNode, FlatNode>;
  selectedNode: TreeNode | null = null;
  hasClients: boolean = false;
  commands: Command[] = [];
  commandsLoading = false;
  selectedClients = new MatTableDataSource<Client>([]);
  selection = new SelectionModel<any>(true, []);
  cols = 4;
  currentView: string = 'list';
  savedFilterNames: [string, string][] = [];
  selectedTreeFilter = '';
  syncStatus = false;
  syncingClientId: string | null = null;
  private originalTreeData: TreeNode[] = [];
  arrayClients: any[] = [];
  filters: { [key: string]: string } = {};
  private clientFilterSubject = new Subject<string>();

  protected status = [
    { value: 'off', name: 'Apagado' },
    { value: 'initializing', name: 'Inicializando' },
    { value: 'og-live', name: 'Og Live' },
    { value: 'linux', name: 'Linux' },
    { value: 'linux-session', name: 'Linux Session' },
    { value: 'windows', name: 'Windows' },
    { value: 'windows-session', name: 'Windows Session' },
    { value: 'busy', name: 'Ocupado' },
    { value: 'mac', name: 'Mac' },
  ];

  displayedColumns: string[] = ['select', 'status', 'ip', 'name', 'oglive', 'subnet', 'pxeTemplate', 'actions'];

  private _sort!: MatSort;

  @ViewChild(MatSort)
  set matSort(ms: MatSort) {
    this._sort = ms;
    if (this.selectedClients) {
      this.selectedClients.sort = this._sort;
    }
  }

  private subscriptions: Subscription = new Subscription();

  constructor(
    private http: HttpClient,
    private router: Router,
    private dataService: DataService,
    public dialog: MatDialog,
    private bottomSheet: MatBottomSheet,
    private joyrideService: JoyrideService,
    private toastr: ToastrService,
    private configService: ConfigService
  ) {
    this.baseUrl = this.configService.apiUrl;
    this.mercureUrl = this.configService.mercureUrl;
    this.treeFlattener = new MatTreeFlattener<TreeNode, FlatNode>(
      this.transformer,
      (node) => node.level,
      (node) => node.expandable,
      (node) => node.children
    );

    this.treeControl = new FlatTreeControl<FlatNode>(
      (node) => node.level,
      (node) => node.expandable
    );

    this.treeDataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    this.currentView = localStorage.getItem('groupsView') || 'list';
  }


  ngOnInit(): void {
    this.updateGridCols();
    this.refreshData();
    window.addEventListener('resize', this.updateGridCols);

    this.selectedClients.filterPredicate = (client: Client, filter: string): boolean => {
      const lowerTerm = filter.toLowerCase();
      return (
        client.name.toLowerCase().includes(lowerTerm) ||
        client.ip?.toLowerCase().includes(lowerTerm) ||
        client.status?.toLowerCase().includes(lowerTerm) ||
        client.mac?.toLowerCase().includes(lowerTerm)
      );
    };

    this.arrayClients = this.selectedClients.data;

    const eventSource = new EventSource(`${this.mercureUrl}?topic=`
      + encodeURIComponent(`clients`));

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data && data['@id']) {
        this.updateClientStatus(data['@id'], data.status);
      }
    }

    this.clientFilterSubject.pipe(debounceTime(500)).subscribe(searchTerm => {
      this.filters['query'] = searchTerm;
      this.filterClients(searchTerm);
    });
  }

  private updateClientStatus(clientUuid: string, newStatus: string): void {
    const clientIndex = this.selectedClients.data.findIndex(client => client['@id'] === clientUuid);

    if (clientIndex !== -1) {
      const updatedClients = [...this.selectedClients.data];

      updatedClients[clientIndex] = {
        ...updatedClients[clientIndex],
        status: newStatus
      };

      this.selectedClients.data = updatedClients;
      this.arrayClients = updatedClients;

      console.log(`Estado actualizado para el cliente ${clientUuid}: ${newStatus}`);
    } else {
      console.warn(`Cliente con UUID ${clientUuid} no encontrado en la lista.`);
    }
  }


  ngOnDestroy(): void {
    window.removeEventListener('resize', this.updateGridCols);
    this.subscriptions.unsubscribe();
  }


  private transformer = (node: TreeNode, level: number): FlatNode => ({
    id: node.id,
    name: node.name,
    type: node.type,
    level,
    expandable: !!node.children?.length,
    hasClients: node.hasClients,
    ip: node.ip,
    '@id': node['@id'],
  });


  toggleView(view: 'card' | 'list'): void {
    this.currentView = view;
  }


  updateGridCols = (): void => {
    const width = window.innerWidth;
    this.cols = width <= 600 ? 1 : width <= 960 ? 2 : width <= 1280 ? 3 : 4;
  };


  clearSelection(): void {
    this.selectedUnidad = null;
    this.selectedDetail = null;
    this.selectedClients.data = [];
    this.selectedNode = null;
  }


  // Función para obtener los filtros guardados actualmente deshabilitada
  // getFilters(): void {
  //   this.subscriptions.add(
  //     this.dataService.getFilters().subscribe(
  //       (data) => {
  //         this.savedFilterNames = data.map((filter: { name: string; uuid: string; }) => [filter.name, filter.uuid]);
  //       },
  //       (error) => {
  //         console.error('Error fetching filters:', error);
  //       }
  //     )
  //   );
  // }


  getFilters(): void {
    this.subscriptions.add(
      this.dataService.getFilters().subscribe(
        (data) => {
          this.savedFilterNames = data.map((filter: { name: string; uuid: string; }) => [filter.name, filter.uuid]);
        },
        (error) => {
          console.error('Error fetching filters:', error);
        }
      )
    );
  }


  private convertToTreeData(data: UnidadOrganizativa): TreeNode {
    const processNode = (node: UnidadOrganizativa): TreeNode => {
      const children = node.children?.map(processNode) || [];
      const hasClients = (node.clients?.length ?? 0) > 0 || children.some(child => child.hasClients);

      return {
        id: node.id,
        uuid: node.uuid,
        name: node.name,
        type: node.type,
        '@id': node['@id'],
        children: children,
        hasClients: hasClients,
      };
    };

    return processNode(data);
  }


  private refreshData(selectedNodeIdOrUuid?: string, selectedClientsBeforeEdit: string[] = []): void {
    this.dataService.getOrganizationalUnits().subscribe({
      next: (data) => {
        this.originalTreeData = data.map((unidad) => this.convertToTreeData(unidad));
        this.treeDataSource.data = [...this.originalTreeData];
        if (selectedNodeIdOrUuid) {
          this.selectedNode = this.findNodeByIdOrUuid(this.treeDataSource.data, selectedNodeIdOrUuid);

          if (this.selectedNode) {
            this.treeControl.collapseAll();
            this.expandPathToNode(this.selectedNode);
            this.fetchClientsForNode(this.selectedNode, selectedClientsBeforeEdit);
          }
        } else {
          this.treeControl.collapseAll();
          if (this.treeDataSource.data.length > 0) {
            this.selectedNode = this.treeDataSource.data[0];
            this.fetchClientsForNode(this.selectedNode, selectedClientsBeforeEdit);
          } else {
            this.selectedNode = null;
            this.selectedClients.data = [];
            this.initialLoading = false;
          }
        }
      },
      error: (error) => {
        console.error('Error fetching organizational units', error);
        this.toastr.error('Ocurrió un error al cargar las unidades organizativas');
      },
    });
  }


  expandPathToNode(node: TreeNode): void {
    const path: TreeNode[] = [];
    let currentNode: TreeNode | null = node;

    while (currentNode) {
      path.unshift(currentNode);
      currentNode = currentNode.id ? this.findParentNode(this.treeDataSource.data, currentNode.id) : null;
    }

    path.forEach((pathNode) => {
      const flatNode = this.treeControl.dataNodes?.find((n) => n.id === pathNode.id);
      if (flatNode) {
        this.treeControl.expand(flatNode);
      }
    });
  }


  private findParentNode(treeData: TreeNode[], childId: string): TreeNode | null {
    for (const node of treeData) {
      if (node.children?.some((child) => child.id === childId)) {
        return node;
      }

      if (node.children && node.children.length > 0) {
        const parent = this.findParentNode(node.children, childId);
        if (parent) {
          return parent;
        }
      }
    }
    return null;
  }


  private findNodeByIdOrUuid(treeData: TreeNode[], identifier: string): TreeNode | null {
    const search = (nodes: TreeNode[]): TreeNode | null => {
      for (const node of nodes) {
        if (node.id === identifier || node.uuid === identifier) return node;
        if (node.children && node.children.length > 0) {
          const found = search(node.children);
          if (found) return found;
        }
      }
      return null;
    };
    return search(treeData);
  }


  onNodeClick(node: TreeNode): void {
    this.selectedNode = node;
    this.fetchClientsForNode(node);
  }


  public fetchClientsForNode(node: any, selectedClientsBeforeEdit: string[] = []): void {
    const params = new HttpParams({ fromObject: this.filters });

    this.isLoadingClients = true;
    this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params }).subscribe({
      next: (response: any) => {
        this.selectedClients.data = response['hydra:member'];
        this.length = response['hydra:totalItems'];
        this.arrayClients = this.selectedClients.data;
        this.hasClients = node.hasClients ?? false;
        this.isLoadingClients = false;
        this.initialLoading = false;
        this.selection.clear();
        selectedClientsBeforeEdit.forEach(uuid => {
          const client = this.selectedClients.data.find(client => client.uuid === uuid);
          if (client) {
            this.selection.select(client);
          }
        });
      },
      error: () => {
        this.isLoadingClients = false;
        this.initialLoading = false;
      }
    });
  }

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

  addOU(event: MouseEvent, parent: TreeNode | null = null): void {
    event.stopPropagation();
    const dialogRef = this.dialog.open(ManageOrganizationalUnitComponent, {
      data: { parent },
      width: '900px',
    });
    dialogRef.afterClosed().subscribe((newUnit) => {
      if (newUnit?.uuid) {
        this.refreshData(newUnit.uuid);
      }
    });
  }


  addClient(event: MouseEvent, organizationalUnit: TreeNode | null = null): void {
    event.stopPropagation();
    const targetNode = organizationalUnit || this.selectedNode;
    const dialogRef = this.dialog.open(ManageClientComponent, {
      data: { organizationalUnit: targetNode },
      width: '900px',
    });

    dialogRef.afterClosed().subscribe((result) => {
      if (result?.client && result?.organizationalUnit) {
        const organizationalUnitUrl = result.organizationalUnit;
        const uuid = organizationalUnitUrl.split('/')[2];
        const parentNode = this.findNodeByIdOrUuid(this.treeDataSource.data, uuid);

        if (parentNode) {
          this.refreshData(parentNode.uuid);
        }
      }
    });
  }


  addMultipleClients(event: MouseEvent, organizationalUnit: TreeNode | null = null): void {
    event.stopPropagation();
    const targetNode = organizationalUnit || this.selectedNode;

    const dialogRef = this.dialog.open(CreateMultipleClientComponent, {
      data: { organizationalUnit: targetNode },
      width: '900px',
    });
    dialogRef.afterClosed().subscribe((result) => {
      if (result?.success) {
        const organizationalUnitUrl = result.organizationalUnit;
        const uuid = organizationalUnitUrl.split('/')[2];
        const parentNode = this.findNodeByIdOrUuid(this.treeDataSource.data, uuid);

        if (parentNode) {
          console.log('Nodo padre encontrado para actualización:', parentNode);
          this.refreshData(parentNode.uuid);
        } else {
          console.error('No se encontró el nodo padre después de la creación masiva.');
        }
      }
    });
  }


  onEditNode(event: MouseEvent, node: TreeNode | null): void {
    event.stopPropagation();
    const uuid = node ? this.extractUuid(node['@id']) : null;
    if (!uuid) return;

    const dialogRef = node?.type !== NodeType.Client
      ? this.dialog.open(ManageOrganizationalUnitComponent, { data: { uuid }, width: '900px' })
      : this.dialog.open(ManageClientComponent, { data: { uuid }, width: '900px' });

    dialogRef.afterClosed().subscribe(() => {
      if (node) {
        this.refreshData(node.id);
      }
    });
  }

  onDeleteClick(event: MouseEvent, entity: TreeNode | Client | null): void {
    event.stopPropagation();
    if (!entity) return;

    const uuid = entity['@id'] ? this.extractUuid(entity['@id']) : null;
    const type = entity.hasOwnProperty('mac') ? NodeType.Client : NodeType.OrganizationalUnit;

    if (!uuid) return;

    const dialogRef = this.dialog.open(DeleteModalComponent, {
      width: '400px',
      data: { name: entity.name },
    });

    dialogRef.afterClosed().subscribe((result) => {
      if (result === true) {
        this.deleteEntityorClient(uuid, type);
      }
    });
  }


  private deleteEntityorClient(uuid: string, type: string): void {
    if (!this.selectedNode) return;

    const parentNode = this.selectedNode?.id
      ? this.findParentNode(this.treeDataSource.data, this.selectedNode.id)
      : null;

    this.dataService.deleteElement(uuid, type).subscribe({
      next: () => {
        const entityType = type === NodeType.Client ? 'Cliente' : 'Entidad';
        const verb = type === NodeType.Client ? 'eliminado' : 'eliminada';

        this.toastr.success(`${entityType} ${verb} exitosamente`);

        if (type === NodeType.Client) {
          this.refreshData(this.selectedNode?.id);
        } else if (parentNode) {
          this.refreshData(parentNode.id);
        } else {
          this.refreshData();
        }
      },
      error: (error) => {
        console.error('Error deleting entity:', error);
        const entityType = type === NodeType.Client ? 'cliente' : 'entidad';
        this.toastr.error(`Error al eliminar el ${entityType}`);
      },
    });
  }


  onEditClick(event: MouseEvent, type: string, uuid: string): void {
    event.stopPropagation();
    const selectedClientsBeforeEdit = this.selection.selected.map(client => client.uuid);
    const dialogRef = type !== NodeType.Client
      ? this.dialog.open(ManageOrganizationalUnitComponent, { data: { uuid }, width: '900px' })
      : this.dialog.open(ManageClientComponent, { data: { uuid }, width: '900px' });

    dialogRef.afterClosed().subscribe(() => {
      this.refreshData(this.selectedNode?.id, selectedClientsBeforeEdit);
    });
  }


  onRoomMap(room: TreeNode | null): void {
    if (!room || !room['@id']) return;
    this.subscriptions.add(
      this.http.get<{ clients: Client[] }>(`${this.baseUrl}${room['@id']}`).subscribe(
        (response) => {
          this.dialog.open(ClassroomViewDialogComponent, {
            width: '90vw',
            data: { clients: response.clients },
          });
        },
        (error) => {
          console.error('Error fetching room data:', error);
        }
      )
    );
  }


  executeCommand(command: Command, selectedNode: TreeNode | null): void {

    if (!selectedNode) {
      this.toastr.error('No hay un nodo seleccionado.');
      return;
    } else {
      this.toastr.success(`Ejecutando comando: ${command.name} en ${selectedNode.name}`);
    }
  }


  onShowClientDetail(event: MouseEvent, client: Client): void {
    event.stopPropagation();
    this.router.navigate(['clients', client.uuid], { state: { clientData: client } });
  }


  onShowDetailsClick(event: MouseEvent, data: TreeNode | null): void {
    event.stopPropagation();
    if (data && data.type !== NodeType.Client) {
      this.dialog.open(ShowOrganizationalUnitComponent, { data: { data }, width: '800px' });
    } else {
      if (data) {
        this.router.navigate(['clients', this.extractUuid(data['@id'])], { state: { clientData: data } });
      }
    }
  }


  openBottomSheet(): void {
    this.bottomSheet.open(LegendComponent);
  }


  iniciarTour(): void {
    this.joyrideService.startTour({
      steps: ['groupsTitleStepText', 'filtersPanelStep', 'addStep', 'keyStep', 'tabsStep'],
      showPrevButton: true,
      themeColor: '#3f51b5',
    });
  }


  hasChild = (_: number, node: FlatNode): boolean => node.expandable;
  isLeafNode = (_: number, node: FlatNode): boolean => !node.expandable;


  filterTree(searchTerm: string): void {
    const expandPaths: TreeNode[][] = [];

    const filterNodes = (nodes: TreeNode[], parentPath: TreeNode[] = []): TreeNode[] => {
      return nodes
        .map((node) => {
          const matchesName = node.name.toLowerCase().includes(searchTerm.toLowerCase());
          const filteredChildren = node.children ? filterNodes(node.children, [...parentPath, node]) : [];

          if (matchesName) {
            expandPaths.push([...parentPath, node]);
            return {
              ...node,
              children: node.children,
            } as TreeNode;
          } else if (filteredChildren.length > 0) {
            return {
              ...node,
              children: filteredChildren,
            } as TreeNode;
          }
          return null;
        })
        .filter((node): node is TreeNode => node !== null);
    };

    if (!searchTerm) {
      this.treeDataSource.data = [...this.originalTreeData];
      this.treeControl.collapseAll();
    } else {
      this.treeDataSource.data = filterNodes(this.originalTreeData);
      expandPaths.forEach((path) => this.expandPath(path));
    }
  }


  private expandPath(path: TreeNode[]): void {
    path.forEach((pathNode) => {
      const flatNode = this.treeControl.dataNodes?.find((n) => n.id === pathNode.id);
      if (flatNode) {
        this.treeControl.expand(flatNode);
      }
    });
  }


  onTreeFilterInput(event: Event): void {
    const input = event.target as HTMLInputElement;
    const searchTerm = input?.value.trim() || '';
    this.filterTree(searchTerm);
  }


  onClientFilterInput(event: Event): void {
    const input = event.target as HTMLInputElement;
    const searchTerm = input?.value || '';
    this.clientFilterSubject.next(searchTerm);
  }

  onClientFilterStatusInput(event: Event): void {
    // @ts-ignore
    this.filters['status'] = event;
    this.fetchClientsForNode(this.selectedNode);
  }


  filterClients(searchTerm: string): void {
    this.searchTerm = searchTerm.trim().toLowerCase();
    //this.selectedClients.filter = this.searchTerm;

    this.fetchClientsForNode(this.selectedNode);
    this.arrayClients = this.selectedClients.filteredData;
  }


  public setSelectedNode(node: TreeNode): void {
    this.selectedNode = node;
  }


  getStatus(client: Client, node: any): void {
    if (!client.uuid || !client['@id']) return;

    this.syncingClientId = client.uuid;
    this.syncStatus = true;

    const parentNodeId = client.organizationalUnit?.id || node.id;
    console.log('Parent node id:', parentNodeId);

    this.subscriptions.add(
      this.http.post(`${this.baseUrl}${client['@id']}/agent/status`, {}).subscribe(
        () => {
          this.toastr.success('Cliente actualizado correctamente');
          this.syncStatus = false;
          this.syncingClientId = null;
          this.refreshData(parentNodeId)
        },
        () => {
          this.toastr.error('Error de conexión con el cliente');
          this.syncStatus = false;
          this.syncingClientId = null;
          this.refreshData(parentNodeId)
        }
      )
    );
  }


  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.selectedClients.data.length;
    return numSelected === numRows;
  }


  toggleAllRows() {
    if (this.isAllSelected()) {
      this.selection.clear();
    } else {
      this.selection.select(...this.selectedClients.data);
    }
    this.updateSelectedClients();
  }

  toggleAllCards() {
    if (this.isAllSelected()) {
      this.selection.clear();
    } else {
      this.selection.select(...this.selectedClients.data);
    }
    this.updateSelectedClients();
  }


  toggleRow(row: any) {
    this.selection.toggle(row);
    this.updateSelectedClients();
  }


  updateSelectedClients() {
    this.arrayClients = this.selectedClients.data;
  }


  getClientPath(client: Client): string {
    const path: string[] = [];
    let currentNode: TreeNode | null = this.findNodeByIdOrUuid(this.treeDataSource.data, client.organizationalUnit.uuid);

    while (currentNode) {
      path.unshift(currentNode.name);
      currentNode = currentNode.id ? this.findParentNode(this.treeDataSource.data, currentNode.id) : null;
    }

    return path.join(' / ');
  }


  private extractUuid(idPath: string | undefined): string | null {
    return idPath ? idPath.split('/').pop() || null : null;
  }


  clearTreeSearch(inputElement: HTMLInputElement): void {
    inputElement.value = '';
    this.filterTree('');
  }


  clearClientSearch(inputElement: HTMLInputElement): void {
    inputElement.value = '';
    delete this.filters['query'];
    this.filterClients('');
  }

  clearStatusFilter(event: Event, clientSearchStatusInput: any): void {
    event.stopPropagation();
    delete this.filters['status'];
    clientSearchStatusInput.value = null;
    this.fetchClientsForNode(this.selectedNode);
  }
}