import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ClientViewComponent } from "../client-view/client-view.component";
import { CdkDragMove } from '@angular/cdk/drag-drop';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { ConfigService } from '@services/config.service';

interface GroupedClients {
  organizationalUnitName: string;
  clientRows: any[][];
}

@Component({
  selector: 'app-classroom-view',
  templateUrl: './classroom-view.component.html',
  styleUrls: ['./classroom-view.component.css']
})
export class ClassroomViewComponent implements OnInit, OnChanges {
  baseUrl: string;
  @Input() clients: any[] = [];
  @Input() pcInTable: number = 5;
  groupedClients: GroupedClients[] = [];

  constructor(public dialog: MatDialog, private http: HttpClient, private toastService: ToastrService, private configService: ConfigService) {
    this.baseUrl = this.configService.apiUrl;
  }

  ngOnInit(): void {
    this.groupClientsByOrganizationalUnit();
    this.initializeClientPositions();
  }

  ngOnChanges(): void {
    this.groupClientsByOrganizationalUnit();
    this.initializeClientPositions();
  }

  groupClientsByOrganizationalUnit(): void {
    const grouped = this.clients.reduce((acc, client) => {
      const ouName = 'text';
      if (!acc[ouName]) {
        acc[ouName] = [];
      }
      acc[ouName].push(client);
      return acc;
    }, {});

    this.groupedClients = Object.keys(grouped).map(ouName => ({
      organizationalUnitName: ouName,
      clientRows: this.chunkArray(grouped[ouName], this.pcInTable)
    }));
  }

  initializeClientPositions(): void {
    this.groupedClients.forEach(group => {
      group.clientRows.forEach(row => {
        row.forEach(client => {
          const position = client.position || { x: 0, y: 0 };
          client.dragPosition = { x: position.x, y: position.y };
        });
      });
    });
  }

  chunkArray(arr: any[], chunkSize: number): any[][] {
    const chunks = [];
    for (let i = 0; i < arr.length; i += chunkSize) {
      chunks.push(arr.slice(i, i + chunkSize));
    }
    return chunks;
  }

  handleClientClick(client: any): void {
    console.log('Client clicked:', client);
    this.dialog.open(ClientViewComponent, { data: { client }, width: '800px', height: '700px' });
  }

  onDragMoved(event: CdkDragMove<any>, client: any): void {
    const dragPosition = event.source.getFreeDragPosition()
    client.position.x = dragPosition.x;
    client.position.y = dragPosition.y;
  }

  saveDisposition(): void {
    this.groupedClients.forEach(group => {
      group.clientRows.forEach(row => {
        row.forEach(client => {
          const url = `${this.baseUrl}/clients/${client.uuid}`;
          const payload = {
            name: client.name,
            position: client.position
          };
          this.http.patch(url, payload).subscribe(response => {
            this.openSnackBar(false, 'Plano actualizado!');
          }, error => {
            console.error('Error al actualizar cliente:', error);
            this.openSnackBar(true, error);
          });
        });
      });
    });
  }

  openSnackBar(isError: boolean, message: string) {
    if (isError) {
      this.toastService.error(' Error al actualizar cliente: ' + message, 'Error');
    } else
      this.toastService.success('Cliente actualizado!', 'Éxito');
  }
}