import { Component, ElementRef, ViewChild } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Inject } from '@angular/core';

import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import Swal from 'sweetalert2';
import * as XLSX from 'xlsx';
import { CircularService } from '../../../Administrador/services/circular.service';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { EnviarInfoService } from '../../../Administrador/services/enviar-info.service';
import { MatDialog } from '@angular/material/dialog';
import { NivelEducativoService } from '../../../Administrador/services/nivel-educativo.service';
import { NivelEducativo } from '../../../Administrador/interfaces/NivelEducativo.interface';
import { GradosEducativosService } from '../../../Administrador/services/grados-educativos.service';
import { GruposService } from '../../../Administrador/services/grupos.service';
import { MateriaService } from '../../../Administrador/services/materia.service';
import { Editor, Toolbar } from 'ngx-editor';
import { forkJoin, tap } from 'rxjs';
import moment from 'moment';

import { v4 as uuidv4 } from 'uuid';
import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
import { TareasService } from '../../services/tareas.service';


@Component({
  selector: 'app-tareas',
  templateUrl: './tareas.component.html',
  styleUrl: './tareas.component.css',
  providers: [provideNativeDateAdapter(),
  { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
  ],
})
export class TareasComponent {
  public checked = false;
  public isLoading: boolean = true;
  public searchInput = new FormControl('');
  public color: string = '';
  public textColor: string = '';
  public columnas: string[] = ['titulo', 'materia', 'tipoTarea', 'fechaPub', 'fechaEntrega', 'enlaces', 'adjuntos', 'acciones'];
  public dataSource = new MatTableDataSource<any>();

  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
  @ViewChild('TABLE') table!: ElementRef;

  constructor(

    private tareasService: TareasService,
    private _MatIconRegister: MatIconRegistry,
    private _DomSanitizer: DomSanitizer,
    private paginatorIntl: MatPaginatorIntl,
    private _enviarInfo: EnviarInfoService,
    public dialog: MatDialog
  ) {
    this._MatIconRegister.addSvgIcon('excel', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/excel.svg'));
    //paginador de tabla a español
    const spanishRangeLabel = (page: number, pageSize: number, length: number): string => {
      if (length === 0 || pageSize === 0) {
        return `0 de ${length}`;
      }
      length = Math.max(length, 0);
      const startIndex = page * pageSize;
      const endIndex = startIndex < length ?
        Math.min(startIndex + pageSize, length) :
        startIndex + pageSize;
      return `${startIndex + 1} - ${endIndex} de ${length}`;
    };
    this.paginatorIntl.nextPageLabel = "Siguiente";
    this.paginatorIntl.previousPageLabel = "Anterior";
    this.paginatorIntl.firstPageLabel = "Ir a la primer página";
    this.paginatorIntl.lastPageLabel = "Ir a la última página";
    this.paginatorIntl.itemsPerPageLabel = "Registros por página";
    this.paginatorIntl.getRangeLabel = spanishRangeLabel;
  }

  ngOnInit(): void {
    this._enviarInfo.currentTextColor.subscribe(textColor => {
      this.textColor = textColor;
    });
    this._enviarInfo.currentColor.subscribe(color => {
      this.color = color;
    });

    //suscribirse al subject que manda al servicio
    this._enviarInfo.tabla$.subscribe(() => {
      this.getTareas();
    });

    this.getTareas()

  }

  openDialog(tarea?: any) {
    let dialogRef;

    dialogRef = this.dialog.open(ModalTarea, {
      autoFocus: false,
      data: tarea ?? null   // <--- paso la tarea si existe
    });
  }




  public allInfo: any;
  public files: any;
  //Traer la información y mostrarla en la tabla
  public urls: any = [];
  //Traer la información y mostrarla en la tabla
  getTareas() {
    this.tareasService.getTareas().subscribe((response: any) => {
      this.isLoading = false;

      this.allInfo = response.map((tarea: any) => {
        // separar los vinculos en un arreglo de objetos con nombre
        if (tarea.vinculoTarea) {
          tarea.vinculoTareaArray = tarea.vinculoTarea.split("||").map((url: string, index: number) => {
            return { nombre: url, url: url };
          });
        } else {
          tarea.vinculoTareaArray = [];
        }

        if (tarea.adjuntoTarea) {
          tarea.adjuntoTarea = JSON.parse(tarea.adjuntoTarea);
        } else {
          tarea.adjuntoTarea = [];
        }

        return tarea;
      });


      this.dataSource = new MatTableDataSource<any>(this.allInfo);
      this.dataSource.paginator = this.paginator;
    });
  }

  filtroSeleccionado: string = '';
  materias: any[] = []; // Aquí se llenará el listado de materias



  onFiltroChange(valor: string): void {
    this.filtroSeleccionado = valor;
  }

  onFechaSeleccionada(event: any): void {
    const fecha = event.value;
    console.log('Fecha seleccionada:', fecha);
    // Aquí puedes filtrar tus tareas según la fecha
  }

  onMateriaSeleccionada(idMateria: any): void {
    console.log('Materia seleccionada:', idMateria);
    // Aquí puedes aplicar tu filtro de tareas por materia
  }

  cargarMaterias(): void {
    // this.materiaService.getMaterias().subscribe((response: any) => {
    //   this.materias = response; // Ajusta según el formato de tu API
    // });
    console.log('Cargar materias - función llamada');
  }

  buscarArchivo(ruta: string) {
    window.open(ruta, '_blank');
  }



  deleteTarea(id: string) {

    Swal.fire({
      icon: 'question',
      title: '¿Desea cambiar el estado de la circular?',
      showCancelButton: true,
      allowOutsideClick: false,
      allowEscapeKey: false,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: "Eliminar",
    }).then((result: any) => {
      /* Read more about isConfirmed, isDenied below */
      if (result.isConfirmed) {
        this.tareasService.eliminarTarea(id).subscribe((response: any) => {
          Swal.fire({
            icon: 'success',
            title: `${response.mensaje}`,
            confirmButtonColor: 'rgb(237,46,56)',
            confirmButtonText: 'Ok',
          }).then((result: any) => {

            if (result.isConfirmed) {
              this._enviarInfo.notifyCambioTabla();
              Swal.close();
            }
          })
        }, (err: any) => {
          Swal.fire({
            icon: 'error',
            title: 'Error al eliminar',
            text: `${err.error.mensaje}`,
          })
          this._enviarInfo.notifyCambioTabla();
        }
        )
      } else if (result.dismiss == 'cancel') {
        this._enviarInfo.notifyCambioTabla();
      }
    });

  }

  enableTarea(id: string) {
    Swal.fire({
      icon: 'question',
      title: '¿Desea habilitar la circular?',
      showCancelButton: true,
      allowOutsideClick: false,
      allowEscapeKey: false,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: "Habilitar",
    }).then((result: any) => {

      if (result.value) {
        this.tareasService.habilitarTarea(id).subscribe((response: any) => {
          Swal.fire({
            icon: 'success',
            title: `${response.mensaje}`,
            confirmButtonColor: 'rgb(237,46,56)',
            confirmButtonText: 'Ok',
          }).then((result: any) => {
            if (result.isConfirmed) {
              Swal.close();
              this._enviarInfo.notifyCambioTabla();
            }
          })
        }, (err: any) => {
          Swal.fire({
            icon: 'error',
            title: 'Error al habilitar',
            text: `${err.error.message}`,
          })
        }
        )
      } else if (result.dismiss == 'cancel') {
        this._enviarInfo.notifyCambioTabla();
      }
    });
  }

  option(event: string) {
    this.isLoading = true;
    let filteredData: any;

    if (event === 'Activos') {
      filteredData = this.allInfo.filter((filtro: any) => filtro.estado === 'Completa');
    } else if (event === 'Eliminados') {
      filteredData = this.allInfo.filter((filtro: any) => filtro.estado === 'Eliminada');
    }

    this.dataSource = new MatTableDataSource<any>(filteredData);
    this.dataSource.paginator = this.paginator;
    this.isLoading = false;
  }


  //filtro de búsqueda
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }




  //exportar búsqueda a excel
  exportAsExcel() {
    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(this.table.nativeElement);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'COLEGIOABC-ConsultaCirculares');
    XLSX.writeFile(wb, 'Circulares.xlsx');

  }
  //exportar toda la data a excel
  exportAll() {
    const dataSource = this.dataSource.data;
    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(dataSource);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();

    XLSX.utils.book_append_sheet(wb, ws, 'COLEGIOABC-ConsultaCirculares');
    XLSX.writeFile(wb, 'Circulares.xlsx');
  }




}


@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: './ModalTarea.component.html',
  styleUrl: './tareas.component.css',
  providers: [provideNativeDateAdapter(),
  { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
  ],
})
export class ModalTarea {
  constructor(
    public dialog: MatDialog,
    private circularService: CircularService,
    private _enviarInfoService: EnviarInfoService,
    private nivelService: NivelEducativoService,
    private gradoService: GradosEducativosService,
    private grupoService: GruposService,
    private materiaService: MateriaService,
    private tareaService: TareasService,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.getTipoTareas();
    this.getMaterias();
  }

  public todayDate: Date = new Date();
  public modoEdicion: boolean = false; // <-- bandera

  public info: any;
  private userData = JSON.parse(localStorage.getItem('userData') || '[]');
  private userDataS = JSON.parse(localStorage.getItem('userDataS') || '[]');

  editor!: Editor;
  toolbar: Toolbar = [
    ['bold', 'italic'],
    ['underline', 'strike'],
    ['blockquote'],
    ['ordered_list', 'bullet_list'],
    [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
    ['link', 'image'],
    ['text_color', 'background_color'],
    ['align_left', 'align_center', 'align_right', 'align_justify'],
  ];
  colorPresets = [
    "#000000", // Negro
    "#FF0000", // Rojo
    "#00FF00", // Verde
    "#0000FF", // Azul
    "#FFFF00", // Amarillo
    "#FF00FF", // Magenta
    "#00FFFF", // Cian
    "#808080", // Gris
    "#FFFFFF", // Blanco
    "#800000", // Marrón
    "#008000", // Verde oscuro
    "#000080", // Azul oscuro
    "#808000", // Oliva
    "#800080", // Púrpura
    "#008080", // Verde azulado
    "#C0C0C0"  // Plata

  ];


  ngOnInit(): void {
    this.editor = new Editor();

    if (this.data) {
      this.modoEdicion = true;

      // Rellenar el formulario con la info de la tarea
      this.form.patchValue({
        tituloTarea: this.data.tituloTarea,
        idMateriaTarea: this.data.idMateriaTarea,
        idTipoTarea: this.data.idTipoTarea,
        descripcionTarea: this.data.descripcionTarea,
        fechaPublicacion: moment(this.data.fechaPublicacion).toDate(),
        horaPublicacion: moment(this.data.fechaPublicacion).format("HH:mm:ss"),
        fechaEntrega: moment(this.data.fechaEntrega).toDate(),
        horaEntrega: moment(this.data.fechaEntrega).format("HH:mm:ss"),
      });

      // URLs
      if (this.data.vinculoTarea) {
        this.urls = this.data.vinculoTarea.split("||");
      }

      // Archivos (si existen en la tarea)
      if (this.data.adjuntoTarea) {
        this.archivosData = this.data.adjuntoTarea;
      }
    }
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }


  public tipoTareas: any = [];
  public materias: any = [];
  getMaterias() {
    this.materiaService.getHabilitados().subscribe((response: any) => {
      this.materias = response.filter((materia: any) => materia.estado === 'Activo');
      console.log("🚀 ~ ModalTarea ~ getMaterias ~ response:", response)
    });
  }

  getTipoTareas() {
    this.tareaService.getTipoTareas().subscribe((response: any) => {
      this.tipoTareas = response.filter((tarea: any) => tarea.estado === 'Activo');
      console.log("🚀 ~ ModalTarea ~ getTipoTareas ~ this.tipoTareas:", this.tipoTareas)
    });
  }


  public opciones: any;
  public originales: any;

  public form = new FormGroup({
    tituloTarea: new FormControl<string>('', Validators.required),
    idMateriaTarea: new FormControl<string[]>([''], Validators.required),
    idTipoTarea: new FormControl<string[]>([''], Validators.required),
    descripcionTarea: new FormControl<string>('', Validators.required),
    fechaPublicacion: new FormControl<any>(null, [Validators.required]),
    horaPublicacion: new FormControl<any>(null, Validators.required),
    fechaEntrega: new FormControl<any>(null, [Validators.required]),
    horaEntrega: new FormControl<any>(null, Validators.required),
    vinculoTarea: new FormControl<string>('')
  });


  isValidField(field: string, errorType: string) {
    const control = this.form.get(field);
    return control?.hasError(errorType) && control?.touched;
  }

  public urls: any = []

  addUrl() {
    const vinculoTarea = this.form.get('vinculoTarea')?.value;
    this.urls.push(vinculoTarea);
    this.form.get('vinculoTarea')?.setValue('');
    console.log(this.urls);
  }






  convertToDatetime() {
    // Obtener valores del formulario
    const fechaPublicacion: any = this.form.get('fechaPublicacion')?.value;
    const horaPublicacion: any = this.form.get('horaPublicacion')?.value;
    const fechaEntrega: any = this.form.get('fechaEntrega')?.value;
    const horaEntrega: any = this.form.get('horaEntrega')?.value;

    let fechahoraPublicacion: string | undefined;
    let fechahoraEntrega: string | undefined;

    if (fechaPublicacion && horaPublicacion) {
      // Formatear fecha en 'YYYY-MM-DD'
      var formattedDate = moment(fechaPublicacion).format("YYYY-MM-DD");
      fechahoraPublicacion = `${formattedDate} ${horaPublicacion}`;

    } else {
      console.error('Fecha de inicio o hora de inicio no válidas.');
    }

    if (fechaEntrega && horaEntrega) {
      // Formatear fecha en 'YYYY-MM-DD'
      var formattedDate = moment(fechaEntrega).format("YYYY-MM-DD");
      fechahoraEntrega = `${formattedDate} ${horaEntrega}`;

    } else {
      console.error('Fecha de caducidad o hora de caducidad no válidas.');
    }

    this.info = {
      tituloTarea: this.form.get('tituloTarea')?.value,
      idMateriaTarea: this.form.get('idMateriaTarea')?.value,
      idTipoTarea: this.form.get('idTipoTarea')?.value,
      descripcionTarea: this.form.get('descripcionTarea')?.value,
      adjuntoTarea: this.archivosData,
      bases64: this.bases64,
      fechaCreacion: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      fechaPublicacion: fechahoraPublicacion,
      fechaEntrega: fechahoraEntrega,
      idUsuario: this.userDataS[0] ? this.userDataS[0] : this.userData[0],
      vinculoTarea: this.urls.join('||')
    };



  }



  fileName = '';
  uploadProgress: number = 0;
  // uploadSub: Subscription = new Subscription();



  archivosData: Array<{ id: string, nombre: string, tamanio: number }> = [];
  bases64: Array<{ id: string, nombre: string, base64: string }> = [];

  nombreInvalido(nombre: string): boolean {
    const caracteresInvalidos = /[<>:"/\\|?*]/;
    const nombresReservados = /^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])(\..+)?$/i;
    return (
      caracteresInvalidos.test(nombre) ||
      nombre.length > 255 ||
      nombre.endsWith('.') ||
      nombre.endsWith(' ') ||
      nombresReservados.test(nombre)
    );
  };

  extensionesPermitidas = ['.xlsx', '.docx', '.pdf', '.pptx', '.txt', '.jpg', '.jpeg', '.png'];


  extensionInvalida(nombre: string): boolean {
    const extension = nombre.substring(nombre.lastIndexOf('.')).toLowerCase();
    return !this.extensionesPermitidas.includes(extension);
  };


  onFilesSelected(event: any) {
    const files = event.target.files;


    for (let i = 0; i < files.length; i++) {
      const file = files[i];

      if (this.nombreInvalido(file.name)) {
        Swal.fire({
          icon: 'error',
          title: 'Nombre de archivo inválido',
          text: `El archivo "${file.name}" contiene caracteres no permitidos o es demasiado largo.`
        });
        continue;
      }

      if (this.extensionInvalida(file.name)) {
        Swal.fire({
          icon: 'error',
          title: 'Extensión no permitida',
          text: `El archivo "${file.name}" no tiene una extensión válida. Solo se permiten: ${this.extensionesPermitidas.join(', ')}.`
        });
        continue;
      }

      const reader = new FileReader();

      const uniqueId = uuidv4();

      reader.onload = (e: any) => {
        const base64String = e.target.result;
        this.archivosData.push({
          id: uniqueId,
          nombre: file.name,
          tamanio: Math.round((file.size / 1000 * 10)) / 10,
        });
        this.bases64.push({
          id: uniqueId,
          nombre: file.name,
          base64: base64String
        });
      };

      reader.readAsDataURL(file);
    }

  }




  deleteIndex(i: number) {
    if (i !== -1) {
      this.archivosData.splice(i, 1);
    }
  }

  deleteUrl(i: number) {
    if (i !== -1) {
      this.urls.splice(i, 1);
    }
  }


  valoresCombinados2: any[] = [];


  arregloCombinaciones: any[] = [];
  idCircular: any;

  public alumnos: any = [];

  crearOActualizarTarea() {
    this.convertToDatetime();

    if (this.modoEdicion) {
      this.actualizarTarea();
    } else {
      this.crearTarea();
    }
  }

  actualizarTarea() {
    const tareaId = this.data.idTarea;

    this.tareaService.actualizarTarea(tareaId, this.info).subscribe(
      (response: any) => {
        console.log('Tarea actualizada:', response);
        Swal.fire({
          icon: 'success',
          title: `${response.mensaje || 'Tarea actualizada correctamente'}`
        });

        this.dialog.closeAll();
        this._enviarInfoService.notifyCambioTabla();
      },
      (err) => {
        console.error('Error al actualizar la tarea:', err);
        Swal.fire({
          icon: 'error',
          title: 'Error al actualizar la tarea',
          text: err.error?.mensaje || err.message || 'Error desconocido'
        });
      }
    );
  }


  crearTarea() {
    this.convertToDatetime();
    console.log(this.info);

    this.tareaService.getAlumnos(this.info.idMateriaTarea).subscribe(
      (response: any) => {
        this.alumnos = response.map((alumno: any) => alumno.idUsuario);
        console.log("🚀 ~ ModalTarea ~ crearTarea ~ alumnos:", this.alumnos)
      },
      (err) => {
        console.error('Error al obtener los alumnos:', err);
        Swal.fire({
          icon: 'error',
          title: 'Error al obtener los alumnos',
          text: err.error?.mensaje || err.message || 'Error desconocido'
        });
      }
    );

    this.tareaService.crearTarea(this.info).subscribe(
      (response: any) => {
        console.log('Tarea creada:', response);
        Swal.fire({
          icon: 'success',
          title: `${response.mensaje || 'Tarea creada correctamente'}`
        });

        this.alumnos.forEach((alumno: any) => {
          this.tareaService.asignarTarea({
            idTarea: response.idTarea,
            idUsuario: alumno
          }).subscribe(
            (res) => {
              console.log('Tarea asignada al alumno:', res);
            },
            (err) => {
              console.error('Error al asignar la tarea al alumno:', err);
              Swal.fire({
                icon: 'error',
                title: 'Error al asignar la tarea al alumno',
                text: err.error?.mensaje || err.message || 'Error desconocido'
              });
            }
          );
        });

        this.dialog.closeAll();
        this._enviarInfoService.notifyCambioTabla();
      },
      (err) => {
        console.error('Error al crear la tarea:', err);
        Swal.fire({
          icon: 'error',
          title: `Error al crear la tarea`,
          text: err.error?.mensaje || err.message || 'Error desconocido'
        });
      }
    );
  }




  public horasDelDia: any = this.generarHorasDelDia();
  generarHorasDelDia(): { hora24: string, hora12: string }[] {
    const horas: { hora24: string, hora12: string }[] = [];
    let hora: number = 0;
    let minutos: number = 0;

    for (let i = 0; i < 48; i++) {
      let ampm = 'am';
      let hora12: number = hora;

      if (hora === 0) {
        hora12 = 12;
      } else if (hora === 12) {
        ampm = 'pm';
      } else if (hora > 12) {
        hora12 = hora - 12;
        ampm = 'pm';
      }

      const horaFormateada24 = `${hora.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')}:00`;
      const horaFormateada12 = `${hora12.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')} ${ampm}`;

      horas.push({ hora24: horaFormateada24, hora12: horaFormateada12 });

      minutos += 30;
      if (minutos === 60) {
        minutos = 0;
        hora++;
      }
    }

    return horas;
  }

  campoNoValido(campo: string): boolean {
    if (this.form.get(campo)?.invalid && this.form.get(campo)?.touched) {
      return true;
    } else {
      return false;
    }
  }

  campoVacio(campo: string): boolean {
    if ((this.form.get(campo)?.value === '' || this.form.get(campo)?.invalid) && this.form.get(campo)?.touched) {
      return true;
    } else {
      return false;
    }
  }

  close() {
    this.dialog.closeAll()
  }

  limpiar() {
    this.form.reset();
  }


}