import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { NivelEducativoService } from '../../services/nivel-educativo.service';

import Swal from 'sweetalert2';
import { Router } from '@angular/router';
import { EnviarInfoService } from '../../services/enviar-info.service';
import { GradosEducativosService } from '../../services/grados-educativos.service';
import { GradoEducativo } from '../../interfaces/GradoEducativo.interface';
import { GruposService } from '../../services/grupos.service';
import { Grupo } from '../../interfaces/Grupo.interface';
import { CategoriasMateriasService } from '../../services/categorias-materias.service';
import { CategoriaMateria } from '../../interfaces/CategoriasMaterias.interface';
import { finalize, forkJoin, Subscription, map, tap } from 'rxjs';
import { Materia } from '../../interfaces/Materias.interface';
import { MateriaService } from '../../services/materia.service';
import { UsersService } from '../../services/users.service';
import { NivelEducativo } from '../../interfaces/NivelEducativo.interface';
import { Usuario } from '../../interfaces/Usuario.interface';
import { Editor, Toolbar } from 'ngx-editor';
import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
import moment from 'moment';
import { CircularService } from '../../services/circular.service';
import { parseJSON } from 'date-fns';
import { HttpEventType } from '@angular/common/http';
import { v4 as uuidv4 } from 'uuid';
import { PeriodosService } from '../../services/periodos.service';

/**
 * @title Dialog with header, scrollable content and actions
 */
@Component({
  selector: 'app-button-dialog',
  templateUrl: './button-dialog.component.html',
  styleUrl: './button-dialog.component.css'
})
export class ButtonDialogComponent implements OnInit {
  public primerColorTitulos: string = '';
  public color: string = '';
  public textColor: string = '';
  @Input() vista: string = '';
  constructor(public dialog: MatDialog, private _enviarInfo: EnviarInfoService) {
  }

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

  openDialog() {
    let dialogRef;
    switch (this.vista) {
      case 'nivelEducativo':
        dialogRef = this.dialog.open(ModalNivelEducativo, {
          autoFocus: false
        });
        break;
      case 'gradoEducativo':
        dialogRef = this.dialog.open(ModalGradoEducativo, {
          autoFocus: false
        });
        break;
      case 'grupo':
        dialogRef = this.dialog.open(ModalGrupo, {
          autoFocus: false
        });
        break;
      case 'catalogoUsuarios':
        dialogRef = this.dialog.open(ModalCatalogoUsuarios, {
          autoFocus: false
        });
        break;
      case 'materias':
        dialogRef = this.dialog.open(ModalMaterias, {
          autoFocus: false
        });
        break;
      case 'categoriasMaterias':
        dialogRef = this.dialog.open(ModalCategoriasMaterias, {
          autoFocus: false
        });
        break;
      case 'circulares':
        dialogRef = this.dialog.open(ModalCirculares, {
          autoFocus: false
        });
        break;
      case 'periodos':
        dialogRef = this.dialog.open(ModalPeriodos, {
          autoFocus: false
        });
        break;
    }
    // dialogRef.afterClosed().subscribe(result => {
    //   console.log(`Dialog result: ${result}`);
    // });
  }


}

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'ModalNivelEducativo.component.html',
  styleUrl: './button-dialog.component.css'

})
export class ModalNivelEducativo {

  constructor(public dialog: MatDialog,
    private _nivelEducativoService: NivelEducativoService,
    private _enviarInfoService: EnviarInfoService,
    private fb: FormBuilder
  ) { }

  get currentNivel(): NivelEducativo {
    const nivel = this.form.value as NivelEducativo;
    return nivel;
  }

  public form = this.fb.group({
    idNivel: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ,.][a-zA-Z0-9\\sáéíóúÁÉÍÓÚñÑ,.]*$')]],
    nombreNivel: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ,.][a-zA-Z0-9\\sáéíóúÁÉÍÓÚñÑ,.]*$')]],
  })

  crearNivelEducativo() {

    if (this.form.invalid) {
      return Object.values(this.form.controls).forEach(control => {
        control.markAllAsTouched();
        Swal.fire({
          icon: 'error',
          title: `Por favor, ingrese información válida en el formulario.`
        })
      });
    }

    return this._nivelEducativoService.crearNivel(this.currentNivel).subscribe((response: any) => {
      Swal.fire({
        icon: 'success',
        title: `${response.mensaje}`
      })

      this.dialog.closeAll();

      //envía la actualización al servicio
      this._enviarInfoService.notifyCambioTabla();
    }, (err) => {
      console.log(err);
      Swal.fire({
        icon: 'error',
        title: `${err.error.mensaje}`
      })
    }
    )
  }

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

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

  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;
    }
  }

}


@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'ModalGradoEducativo.component.html',
  styleUrl: './button-dialog.component.css'

})
export class ModalGradoEducativo {
  public data: any;
  constructor(
    public dialog: MatDialog,
    private nivelEducativoService: NivelEducativoService,
    private enviarInfoService: EnviarInfoService,
    private gradoEducativoService: GradosEducativosService
  ) {
    this.getNiveles()
  }

  get currentGrado(): GradoEducativo {
    const grado = this.form.value as GradoEducativo;
    return grado;
  }

  public form = new FormGroup({
    idGrado: new FormControl<string>('', Validators.required),
    nombreGrado: new FormControl<string>('', Validators.required),
    idNivel: new FormControl<string>('', Validators.required)
  })

  crearGradoEducativo() {
    if (this.form.invalid) {
      return Object.values(this.form.controls).forEach(control => {
        control.markAllAsTouched();
      });
    }

    return this.gradoEducativoService.guardar(this.currentGrado).subscribe((response: any) => {
      Swal.fire({
        icon: 'success',
        title: `${response.mensaje}`
      })

      this.dialog.closeAll();

      //envía la actualización al servicio
      this.enviarInfoService.notifyCambioTabla();
    }, (err) => {
      Swal.fire({
        icon: 'error',
        title: `${err.error.mensaje}`
      })
    })
  }

  getNiveles() {
    return this.nivelEducativoService.getHabilitados().subscribe((response) => {
      this.data = response;
    })
  }

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

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: './ModalGrupo.component.html',
  styleUrl: './button-dialog.component.css'

})
export class ModalGrupo {

  constructor(
    private gruposService: GruposService,
    private _enviarInfoService: EnviarInfoService,
    public dialog: MatDialog,
  ) { }

  get currentGrupo(): Grupo {
    const grupo = this.form.value as Grupo;
    return grupo;
  }

  public form = new FormGroup({
    idGrupo: new FormControl<string>('', Validators.required),
    nombreGrupo: new FormControl<string>('', Validators.required),
  })

  crearGrupo() {

    if (this.form.invalid) {
      return Object.values(this.form.controls).forEach(control => {
        control.markAllAsTouched();
      });
    }
    return this.gruposService.crearGrupo(this.currentGrupo).subscribe((response: any) => {
      Swal.fire({
        icon: 'success',
        title: `${response.mensaje}`
      })

      this.dialog.closeAll();

      //envía la actualización al servicio
      this._enviarInfoService.notifyCambioTabla();
    }, (err) => {
      Swal.fire({
        icon: 'error',
        title: `${err.error.mensaje}`
      })
    });
  }

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

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

  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;
    }
  }

}

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: './ModalCatalogoUsuarios.component.html',
  styleUrl: './button-dialog.component.css'

})
export class ModalCatalogoUsuarios {

  public showPassword: boolean = false
  public grados: any;
  public selectedRole: string = ''

  public roles = [
    { value: 'AL', rol: 'AL - Alumno' },
    { value: 'PR', rol: 'PR - Profesor' },
    { value: 'PF', rol: 'PF - Padre de Familia' },
    { value: 'AD', rol: 'AD - Administrador' },
  ]

  public statuses = [
    { value: 'Activo', status: 'Activo' },
    { value: 'Inactivo', status: 'Inactivo' },
  ]

  public validados = [
    { value: 'Si', desc: 'Si - Validado' },
    { value: 'No', desc: 'No - No Validado' },
    { value: 'Ac', desc: 'Ac - Requiere Validación' },
    { value: 'Bq', desc: 'Si - Bloqueado' },
    { value: 'Na', desc: 'Na - No APlica' },
    { value: 'Bt', desc: 'Bt - Baja Temporal' },
    { value: 'Bd', desc: 'Bd - Baja Definitiva' },
  ]



  public form: FormGroup;

  constructor(
    private fb: FormBuilder,
    private userService: UsersService,
    private _enviarInfoService: EnviarInfoService,
    private gradosService: GradosEducativosService,
    public dialog: MatDialog,
  ) {
    this.form = this.fb.group({
      primerNombre: ['', Validators.required],
      segundoNombre: [''],
      apellidoPaterno: ['', Validators.required],
      apellidoMaterno: [''],
      idUsuario: ['', Validators.required],
      estatus: ['', Validators.required],
      tipoUsuario: ['', Validators.required],
      validado: ['', Validators.required],
      grado: [{ value: '', disabled: true }],
      correo: ['', Validators.email],
      contrasenaHash: ['', Validators.pattern(/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*\W)(?!.* ).{8,16}$/)],
      alias: [''],
    });
  }

  ngOnInit(): void {
    this.form.get('tipoUsuario')?.valueChanges.subscribe(value => {
      const gradoControl = this.form.get('grado');
      if (value === 'AL') {
        gradoControl?.enable();
      } else {
        gradoControl?.disable();
      }
    });

    this.getGrados();
  }


  toggleVisibility() {
    this.showPassword = !this.showPassword
  }

  get currentUsuario(): Usuario {
    const usuario = this.form.value as Usuario;
    return usuario;
  }

  getGrados() {
    return this.gradosService.getHabilitados().subscribe((response) => {
      this.grados = response;
    })
  }

  crearUsuario() {

    if (this.form.invalid) {
      return Object.values(this.form.controls).forEach(control => {
        control.markAllAsTouched();
      });
    }

    return this.userService.crearUsuario(this.currentUsuario).subscribe((response: any) => {
      Swal.fire({
        icon: 'success',
        title: `${response.mensaje}`,
        text: 'Registro Exitoso'
      })

      this.dialog.closeAll();

      //envía la actualización al servicio
      this._enviarInfoService.notifyCambioTabla();
    }, (err) => {
      console.log(err);
      Swal.fire({
        icon: 'error',
        title: `${err.error.mensaje}`
      })
    });


  }

  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;
    }
  }


}

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: './ModalMaterias.component.html',
  styleUrl: './button-dialog.component.css'

})
export class ModalMaterias {
  public color1: string = '';
  public todos: any;
  public catData: any;
  constructor(
    private gradosService: GradosEducativosService,
    private gruposService: GruposService,
    private categoriasService: CategoriasMateriasService,
    private materiaService: MateriaService,
    private _enviarInfoService: EnviarInfoService,
    public dialog: MatDialog,
  ) {
    this.gradosGrupos();
    this.categorias()
  }

  gradosGrupos() {
    forkJoin({
      grados: this.gradosService.getHabilitados(),
      grupos: this.gruposService.getHabilitados()
    }).subscribe(({ grados, grupos }: any) => {
      this.todos = grados.concat(grupos);
    });
  }

  categorias() {
    return this.categoriasService.getHabilitados().subscribe((response) => {
      this.catData = response
    })
  }

  public form = new FormGroup({
    idMateria: new FormControl<string>('', [Validators.required, Validators.pattern('^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ,.][a-zA-Z0-9\\sáéíóúÁÉÍÓÚñÑ,.]*$')]),
    nombreMateria: new FormControl<string>('', [Validators.required, Validators.pattern('^(?!\\s)[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ]*$')]),
    colorCurso: new FormControl<string>('', Validators.required),
    idGradoGrupoRelacionado: new FormControl<string>('', Validators.required),
    categoria: new FormControl<string>('', Validators.required),
    afectaBoleta: new FormControl<boolean>(false, Validators.required),
    materiaAcademica: new FormControl<boolean>(false, Validators.required),
    mostrarMateria: new FormControl<boolean>(false, Validators.required),
  });


  get currentMateria(): Materia {
    return this.form.value as Materia;
  }

  transformMateria(materia: Materia): any {
    return {
      ...materia,
      afectaBoleta: materia.afectaBoleta ? 'Si' : 'No',
      materiaAcademica: materia.materiaAcademica ? 'Si' : 'No',
      mostrarMateria: materia.mostrarMateria ? 'Si' : 'No',
    };
  }

  public colorError: boolean = false;

  crearMateria() {
    const materia = this.currentMateria;
    const transformedMateria = this.transformMateria(materia);
    console.log(this.form.value);
    if (this.form.get('colorCurso')?.value === "") {
      this.colorError = true;
    } else {
      this.colorError = false;
    }
    if (this.form.invalid) {
      return Object.values(this.form.controls).forEach(control => {
        control.markAllAsTouched();
        Swal.fire({
          icon: 'error',
          title: `Por favor, llene todos los campos.`
        })
      });
    }

    return this.materiaService.crearMateria(transformedMateria).subscribe((response: any) => {
      console.log(response);
      Swal.fire({
        icon: 'success',
        title: `${response.mensaje}`
      })

      this.dialog.closeAll();

      //envía la actualización al servicio
      this._enviarInfoService.notifyCambioTabla();
    }, (err) => {

      Swal.fire({
        icon: 'error',
        title: `${err.error.mensaje}`
      })
    })
  }


  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;
    }
  }

}

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: './ModalCategoriasMaterias.component.html',
  styleUrl: './button-dialog.component.css'

})
export class ModalCategoriasMaterias {
  constructor(
    public dialog: MatDialog,
    private categoriasMateriasService: CategoriasMateriasService,
    private _enviarInfoService: EnviarInfoService
  ) {
  }

  public form = new FormGroup({
    categoria: new FormControl<string>('', Validators.required),
    ordenBoleta: new FormControl<string>('', [Validators.required]),
  })

  get currentCategoria(): CategoriaMateria {
    const categoria = this.form.value as CategoriaMateria;
    return categoria;
  }

  crearCategoria() {

    if (this.form.invalid) {
      return Object.values(this.form.controls).forEach(control => {
        control.markAllAsTouched();
      });
    }

    return this.categoriasMateriasService.crearCategoria(this.currentCategoria).subscribe((response: any) => {
      Swal.fire({
        icon: 'success',
        title: `${response.mensaje}`
      })

      this.dialog.closeAll();

      //envía la actualización al servicio
      this._enviarInfoService.notifyCambioTabla();
    }, (err) => {
      Swal.fire({
        icon: 'error',
        title: `${err.error.mensaje}`
      })
    })
  }

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

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

  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;
    }
  }


}

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: './ModalCirculares.component.html',
  styleUrl: './button-dialog.component.css',
  providers: [provideNativeDateAdapter(),
  { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
  ],
})
export class ModalCirculares {
  constructor(public dialog: MatDialog,
    private circularService: CircularService,
    private _enviarInfoService: EnviarInfoService,
    private nivelService: NivelEducativoService,
    private gradoService: GradosEducativosService,
    private grupoService: GruposService,
    private materiaService: MateriaService,
  ) {
    // this.lista()
  }

  public todayDate: Date = new Date();
  valoresCombinados: any = {};

  public info: any;
  private userData = JSON.parse(localStorage.getItem('userData') || '');
  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();
    this.lista().subscribe(() => {
      this.originales = [...this.opciones]; // Guarda las opciones originales
    });
  }

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


  audiencia = [
    { value: 'AL', audiencia: 'Alumnos' },
    { value: 'PF', audiencia: 'Padre de Familia' },
    { value: 'AD', audiencia: 'Administradores' },
    { value: 'PR', audiencia: 'Profesores' },
    { value: 'TD', audiencia: 'Todos los usuarios' },
  ]

  importancia = [
    { value: 'Alta', importancia: 'Alta' },
    { value: 'Normal', importancia: 'Normal' },
    { value: 'Baja', importancia: 'Baja' },
  ]
  public opciones: any;
  public roles = ['Administradores', 'Padres'];
  public originales: any;

  public selectedAudiencia: string[] = [];

  onAudienciaChange(value: string[]) {
    // Si selecciona TD → bloquear todo excepto TD
    if (value.includes('TD')) {
      this.form.get('audiencia')?.setValue(['TD']);
      this.selectedAudiencia = ['TD'];
    } else {
      // Si lo deselecciona, volver a habilitar todas
      this.selectedAudiencia = value;
    }
  
    // 🔹 Siempre resetear destinos al cambiar audiencia
    this.form.get('destinos')?.setValue([]);
    this.selectedDestino = [];
  
    console.log('Audiencia seleccionada:', this.selectedAudiencia);
  
    // 🔹 Tu lógica de opciones según audiencia
    let extra = {};
    switch (this.selectedAudiencia[0]) {
      case 'AL':
        extra = { name: 'Alumnos', grupo: [{ value: 'AL', Destino: 'todos', viewValue: 'Todos los Alumnos' }] };
        this.opciones = [extra, ...this.originales];
        break;
      case 'PF':
        extra = { name: 'Padres de Familia', grupo: [{ value: 'PF', Destino: 'todos', viewValue: 'Todos los Padres de Familia' }] };
        this.opciones = [extra, ...this.originales];
        break;
      case 'AD':
        extra = { name: 'Administradores', grupo: [{ value: 'AD', Destino: 'todos', viewValue: 'Todos los Administradores' }] };
        this.opciones = [extra];
        break;
      case 'PR':
        extra = { name: 'Profesores', grupo: [{ value: 'PR', Destino: 'todos', viewValue: 'Todos los Profesores' }] };
        this.opciones = [extra, ...this.originales];
        break;
      case 'TD':
        extra = { name: 'Todos', grupo: [{ value: 'TD', Destino: 'todos', viewValue: 'Todos los usuarios' }] };
        this.opciones = [extra];
        this.form.get('destinos')?.setValue(['TD']);
        break;
      default:
        this.opciones = [...this.originales];
        break;
    }
  }
  


  lista() {
    return forkJoin({
      niveles: this.nivelService.getHabilitados(),
      grados: this.gradoService.getHabilitados(),
      grupos: this.grupoService.getHabilitados(),
      materias: this.materiaService.getHabilitados(),
    }).pipe(
      tap(({ niveles, grados, grupos, materias }: any) => {
        this.opciones = [
          {
            name: 'Nivel Educativo',
            grupo: niveles.map((nivel: any) => ({
              value: nivel.idNivel,
              Destino: 'NivelEducativo',
              viewValue: nivel.nombreNivel,
            })),
          },
          {
            name: 'Grados',
            grupo: grados.map((grado: any) => ({
              value: grado.nombreGrado,
              Destino: 'Grado',
              viewValue: grado.nombreGrado,
            })),
          },
          {
            name: 'Grupos',
            grupo: grupos.map((grupo: any) => ({
              value: grupo.idGrupo,
              Destino: 'Grupo',
              viewValue: grupo.nombreGrupo,
            })),
          },
          {
            name: 'Materia',
            grupo: materias.map((materia: any) => ({
              value: materia.idMateria,
              Destino: 'Materias',
              viewValue: materia.nombreMateria,
            })),
          },
        ];
      })
    );
  }

  public form = new FormGroup({
    titulo: new FormControl<string>('', Validators.required),
    audiencia: new FormControl<string[]>([''], Validators.required),
    destinos: new FormControl<string[]>([''], Validators.required),
    contenido: new FormControl<string>('', Validators.required),
    importancia: new FormControl<string>('', Validators.required),
    fechaInicio: new FormControl<any>(null, [Validators.required, this.validateFechaInicio.bind(this)]),
    horaInicio: new FormControl<any>(null, Validators.required),
    fechaCaducidad: new FormControl<any>(null, [Validators.required, this.validatefechaCaducidad.bind(this)]),
    horaCaducidad: new FormControl<any>(null, Validators.required),
    link: new FormControl<string>('')
  });

  validateFechaInicio(control: AbstractControl): ValidationErrors | null {
    const fechaInicio = new Date(control.value);
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    if (fechaInicio >= today) {
      this.form.get('fechaCaducidad')?.updateValueAndValidity();
      return null;
    } else {
      return { fechaInvalida: true };
    }
  }

  validatefechaCaducidad(control: AbstractControl): ValidationErrors | null {
    if (!this.form) {
      return null;
    }
    const fechaInicioValue = this.form.get('fechaInicio')?.value;
    const fechaCaducidadValue = control.value;

    if (!fechaInicioValue || !fechaCaducidadValue) {
      return { fechaInvalida: true };
    }

    const fechaInicio = new Date(fechaInicioValue);
    const fechaCaducidad = new Date(fechaCaducidadValue);

    if (fechaCaducidad >= fechaInicio) {
      return null;
    } else {
      return { fechaInvalida: true };
    }
  }

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

  public urls: any = []

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


  public selectedDestino: string[] = [];

  Evaluar(event: any) {
    const todosValores = ['AL', 'PF', 'AD', 'PR', 'TD'];
    let destinosActuales: any[] = this.form.get('destinos')?.value || [];

    if (todosValores.includes(event.value)) {
      // Caso: selecciona "Todos"
      if (destinosActuales.includes(event.value)) {
        // Si ya estaba seleccionado, lo quitamos y reactivamos los demás
        destinosActuales = destinosActuales.filter((d: any) => d !== event.value);
        this.selectedDestino = destinosActuales;
        this.form.get('destinos')?.setValue(destinosActuales);
      } else {
        // Si lo selecciona por primera vez → limpiar y dejar solo "Todos"
        this.selectedDestino = [event.value];
        this.form.get('destinos')?.setValue([event.value]);
      }
    } else {
      // Caso: selecciona normales
      this.selectedDestino = destinosActuales;
    }

    // Para tu combinación
    this.valoresCombinados = {
      Destino: event.Destino,
      id: event.value,
    };
  }



  convertToDatetime() {
    // Obtener valores del formulario
    const fechaInicio: any = this.form.get('fechaInicio')?.value;
    const horaInicio: any = this.form.get('horaInicio')?.value;
    const fechaCaducidad: any = this.form.get('fechaCaducidad')?.value;
    const horaCaducidad: any = this.form.get('horaCaducidad')?.value;

    let fechaHoraInicio: string | undefined;
    let fechaHoraCaducidad: string | undefined;

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

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

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

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

    this.info = {
      titulo: this.form.get('titulo')?.value,
      audiencia: this.form.get('audiencia')?.value,
      idReceptores: this.form.get('destinos')?.value,
      contenido: this.form.get('contenido')?.value,
      importancia: this.form.get('importancia')?.value,
      jsonAdjuntos: this.archivosData,
      bases64: this.bases64,
      fechaCreacion: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      fechaPublicacion: fechaHoraInicio,
      fechaCaducidad: fechaHoraCaducidad,
      idUsuario: this.userData[0],
      urls: this.urls.join('||')
    };


    this.valoresCombinados = {
      Audiencia: this.form.get('audiencia')?.value,
      ...this.valoresCombinados
    }
  }



  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);
    }
  }






  // cancelUpload() {
  //   this.uploadSub.unsubscribe();
  //   this.reset();
  // }


  valoresCombinados2: any[] = [];
  // crearCircular() {
  //   if (this.form.invalid) {
  //     return Object.values(this.form.controls).forEach(control => {
  //       control.markAllAsTouched();
  //       Swal.fire({
  //         icon: 'error',
  //         title: `Por favor, llene todos los campos obligatorios.`
  //       })
  //     });
  //   }
  //   const audiencias = this.form.get('audiencia')?.value || [];
  //   const destinos = this.form.get('destinos')?.value || [];

  //   // Genera el arreglo de combinaciones
  //   this.valoresCombinados = [];
  //   audiencias.forEach((audiencia: string) => {
  //     destinos.forEach((destino: any) => {
  //       this.valoresCombinados.push({
  //         Audiencia: audiencia,
  //         Destino: destino.Destino,
  //         id: destino.value
  //       });
  //     });
  //   });

  //   this.convertToDatetime();

  //   console.log('Combinaciones:', this.valoresCombinados);
  //   console.log('Info:', this.info);


  //   // TODO: Descomentar cuando el backend esté listo
  //   // Swal.fire({
  //   //   title: 'Cargando...',
  //   //   allowOutsideClick: false,
  //   //   didOpen: () => {
  //   //     Swal.showLoading();
  //   //   }
  //   // });

  //   // this.circularService.crearCircular(this.info).subscribe((response: any) => {
  //   //   console.log(response);
  //   //   this.idCircular = response.idCircular;
  //   //   console.log(this.idCircular);
  //   //   Swal.close();
  //   //   Swal.fire({
  //   //     icon: 'success',
  //   //     title: `${response.mensaje}`
  //   //   })

  //   //   this.dialog.closeAll();

  //   //   //envía la actualización al servicio
  //   //   this._enviarInfoService.notifyCambioTabla();
  //   //   // TODO
  //   //   this.circularService.obtenerDestinatarios(this.valoresCombinados).subscribe((response: any) => {
  //   //     console.log(response);
  //   //     let iD = response.idUsuario;
  //   //     console.log(this.idCircular);
  //   //     for (let i = 0; i < iD.length; i++) {

  //   //       this.valoresCombinados2.push({
  //   //         idUsuario: iD[i],
  //   //         idCircular: this.idCircular
  //   //       });

  //   //     }
  //   //     for (let i = 0; i < this.valoresCombinados2.length; i++) {
  //   //       this.circularService.enviarCircular(this.valoresCombinados2[i]).subscribe((response: any) => {
  //   //         console.log(response);
  //   //       }, (err) => {
  //   //         console.log(err);
  //   //       });
  //   //     }
  //   //   }, (err) => {
  //   //     console.log(err);
  //   //   });
  //   // }, (err) => {
  //   //   Swal.fire({
  //   //     icon: 'error',
  //   //     title: `${err.mensaje}`
  //   //   })
  //   // });


  // }

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

  async crearCircular() {
    if (this.form.invalid) {
      return Object.values(this.form.controls).forEach(control => {
        control.markAllAsTouched();
        Swal.fire({
          icon: 'error',
          title: `Por favor, llene todos los campos obligatorios.`
        })
      });
    }

    const audiencias = this.form.get('audiencia')?.value || [];
    const destinos = this.form.get('destinos')?.value || [];

    // Genera el arreglo de combinaciones
    this.arregloCombinaciones = [];
    audiencias.forEach((audiencia: string) => {
      destinos.forEach((destino: any) => {
        this.arregloCombinaciones.push({
          Audiencia: audiencia,
          Destino: destino.Destino,
          id: destino.value
        });
      });
    });

    this.convertToDatetime();
    this.info.audiencia = JSON.stringify(audiencias);
    this.info.idReceptores = JSON.stringify(destinos.map((d: any) => d.value));
    console.log('Combinaciones:', this.arregloCombinaciones);
    console.log('Info:', this.info);

    // Loading
    Swal.fire({
      title: 'Cargando...',
      allowOutsideClick: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });

    // 1️⃣ Primero creamos la circular
    this.circularService.crearCircular(this.info).subscribe(
      async (response: any) => {
        console.log('Circular creada:', response);
        this.idCircular = response.idCircular;

        // 2️⃣ Obtener destinatarios únicos
        const destinatariosUnicos: Set<string> = new Set();

        for (const combinacion of this.arregloCombinaciones) {
          console.log('Obteniendo destinatarios para:', combinacion);
          await new Promise<void>((resolve) => {
            this.circularService.obtenerDestinatarios(combinacion).subscribe(
              (resp: any) => {
                if (resp.idUsuario && Array.isArray(resp.idUsuario)) {
                  resp.idUsuario.forEach((id: string) => destinatariosUnicos.add(id));
                }
                resolve();
              },
              (err) => {
                console.error('Error al obtener destinatarios:', err);
                resolve();
              }
            );
          });
        }

        console.log('Destinatarios únicos:', Array.from(destinatariosUnicos));

        // 3️⃣ Enviar circular a cada destinatario
        const valoresCombinados2: any[] = [];
        Array.from(destinatariosUnicos).forEach((idUsuario: string) => {
          valoresCombinados2.push({
            idUsuario,
            idCircular: this.idCircular
          });
        });

        for (let i = 0; i < valoresCombinados2.length; i++) {
          this.circularService.enviarCircular(valoresCombinados2[i]).subscribe(
            (resp: any) => console.log('Envío OK:', resp),
            (err) => console.error('Error en envío:', err)
          );
        }

        Swal.close();
        Swal.fire({
          icon: 'success',
          title: `${response.mensaje}`
        });

        this.dialog.closeAll();
        this._enviarInfoService.notifyCambioTabla();
      },
      (err) => {
        Swal.close();
        Swal.fire({
          icon: 'error',
          title: `${err.mensaje}`
        });
      }
    );
  }



  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();
  }


}


@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'ModalPeriodos.component.html',
  styleUrl: './button-dialog.component.css',
  providers: [provideNativeDateAdapter(),
  { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
  ],

})
export class ModalPeriodos {

  public todayDate: Date = new Date();

  constructor(public dialog: MatDialog,
    private _periodoService: PeriodosService,
    private _enviarInfoService: EnviarInfoService,
    private fb: FormBuilder
  ) { }

  get currentPeriodo(): any {
    const nivel = this.form.value as any;

    const fechaFormateada = moment(nivel.fechaFinalizacion).format('YYYY-MM-DD');

    return {
      ...nivel,
      fechaFinalizacion: fechaFormateada
    };
  }

  public form = this.fb.group({
    idPeriodo: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ,.][a-zA-Z0-9\\sáéíóúÁÉÍÓÚñÑ,.]*$')]],
    nombrePeriodo: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ,.][a-zA-Z0-9\\sáéíóúÁÉÍÓÚñÑ,.]*$')]],
    fechaFinalizacion: ['', Validators.required],
  })

  crearPeriodo() {

    console.log(this.currentPeriodo);

    if (this.form.invalid) {
      return Object.values(this.form.controls).forEach(control => {
        control.markAllAsTouched();
        Swal.fire({
          icon: 'error',
          title: `Por favor, ingrese información válida en el formulario.`
        })
      });
    }

    return this._periodoService.crearPeriodo(this.currentPeriodo).subscribe((response: any) => {
      console.log(response);
      Swal.fire({
        icon: 'success',
        title: `${response.mensaje}`
      })

      this.dialog.closeAll();

      //envía la actualización al servicio
      this._enviarInfoService.notifyCambioTabla();
    }, (err) => {
      console.log(err);
      Swal.fire({
        icon: 'error',
        title: `${err.error.mensaje}`
      })
    }
    )


  }

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

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

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

  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;
    }
  }

}
