import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatDialog } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
import { CreateTaskComponent } from './create-task/create-task.component';
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
import { JoyrideService } from 'ngx-joyride';
import { ConfigService } from '@services/config.service';
import {ShowTaskScheduleComponent} from "./show-task-schedule/show-task-schedule.component";
import {ShowTaskScriptComponent} from "./show-task-script/show-task-script.component";
import {DatePipe} from "@angular/common";

@Component({
  selector: 'app-commands-task',
  templateUrl: './commands-task.component.html',
  styleUrls: ['./commands-task.component.css']
})
export class CommandsTaskComponent implements OnInit {
  baseUrl: string;
  tasks: any[] = [];
  filters: { [key: string]: string | boolean } = {};
  length: number = 0;
  itemsPerPage: number = 10;
  page: number = 1;
  pageSizeOptions: number[] = [5, 10, 20, 40, 100];
  datePipe: DatePipe = new DatePipe('es-ES');

  columns = [
    { columnDef: 'id', header: 'ID', cell: (task: any) => task.id },
    { columnDef: 'name', header: 'Nombre de tarea', cell: (task: any) => task.name },
    { columnDef: 'scope', header: 'Ámbito', cell: (task: any) => task.scope },
    { columnDef: 'organizationalUnit', header: 'Unidad Organizativa', cell: (task: any) => task.organizationalUnit?.name || '' },
    { columnDef: 'management', header: 'Gestiones', cell: (task: any) => task.schedules },
    { columnDef: 'nextExecution', header: 'Próxima ejecución', cell: (task: any) => this.datePipe.transform(task.nextExecution, 'dd/MM/yyyy HH:mm:ss') },
    { columnDef: 'createdBy', header: 'Creado por', cell: (task: any) => task.createdBy },
  ];

  displayedColumns: string[] = ['id', 'name', 'scope', 'management', 'nextExecution', 'createdBy', 'actions'];
  loading: boolean = false;
  private apiUrl: string;

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

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

  search(): void {
    this.page = 1;
    this.loadTasks();
  }

  loadTasks(): void {
    this.loading = true;
    this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
      (data) => {
        this.tasks = data['hydra:member'];
        this.length = data['hydra:totalItems'];
        this.updateDisplayedColumns();
        this.loading = false;
      },
      (error) => {
        console.error('Error fetching tasks', error);
        this.loading = false;
      }
    );
  }


  updateDisplayedColumns(): void {
    const hasNonClientTasks = this.tasks.some(task => task.scope !== 'clients');
    
    if (hasNonClientTasks) {
      this.displayedColumns = ['id', 'name', 'scope', 'organizationalUnit', 'management', 'nextExecution', 'createdBy', 'actions'];
    } else {
      this.displayedColumns = ['id', 'name', 'scope', 'management', 'nextExecution', 'createdBy', 'actions'];
    }
  }

  getScopeTranslation(scope: string): string {
    const translations: { [key: string]: string } = {
      'organizational-unit': 'Unidad Organizativa',
      'classrooms-group': 'Grupo de aulas',
      'classroom': 'Aula',
      'clients-group': 'Grupo de clientes',
      'clients': 'Clientes'
    };
    return translations[scope] || scope;
  }

  getScopeColor(scope: string): string {
    const colors: { [key: string]: string } = {
      'organizational-unit': 'primary',
      'classrooms-group': 'accent',
      'classroom': 'warn',
      'clients-group': 'accent',
      'clients': 'primary'
    };
    return colors[scope] || 'primary';
  }

  openCreateTaskModal(): void {
    this.dialog.open(CreateTaskComponent, {
      width: '800px',
    }).afterClosed().subscribe(result => {
      if (result) {
        this.loadTasks();
      }
    })
  }

  editTask(task: any): void {
    this.dialog.open(CreateTaskComponent, {
      width: '800px',
      data: { task },
    }).afterClosed().subscribe(result => {
      if (result) {
        this.loadTasks();
      }
    })
  }

  deleteTask(task: any): void {
    this.dialog.open(DeleteModalComponent, {
      width: '300px',
      data: { name: task.name },
    }).afterClosed().subscribe((result) => {
      if (result) {
        this.http.delete(`${this.apiUrl}/${task.uuid}`).subscribe({
          next: () => {
            this.toastService.success('Tarea eliminada con éxito');
            this.loadTasks();
          },
          error: (error) => {
            console.error('Error al eliminar la tarea:', error);
          }
        });
      }
    });
  }

  onPageChange(event: any): void {
    this.page = event.pageIndex + 1;
    this.itemsPerPage = event.pageSize;
    this.loadTasks();
  }

  openShowScheduleDialog(commandTask: any) {
    const dialogRef = this.dialog.open(ShowTaskScheduleComponent, {
      width: '85vw',
      height: '85vh',
      maxWidth: '85vw',
      maxHeight: '85vh',
      data: { commandTask: commandTask }
    });

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

  openShowScriptDialog(commandTask: any) {
    const dialogRef = this.dialog.open(ShowTaskScriptComponent, {
      width: '85vw',
      height: '85vh',
      maxWidth: '85vw',
      maxHeight: '85vh',
      data: { commandTask: commandTask }
    });

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

  iniciarTour(): void {
    this.joyrideService.startTour({
      steps: [
        'titleStep',
        'addTaskStep',
        'searchStep',
        'tableStep',
        'actionsStep',
        'paginationStep'
      ],
      showPrevButton: true,
      themeColor: '#3f51b5'
    });
  }

}