import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { CircularService } from '../../../Administrador/services/circular.service';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { EnviarInfoService } from '../../../Administrador/services/enviar-info.service';
import { MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogClose, MatDialogContent } from '@angular/material/dialog';
import { ModalTarea } from '../../../Profesor/pages/tareas/tareas.component';

import * as XLSX from 'xlsx';
import { TareasService } from '../../services/tareas.service';
import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';

@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>();
  private userData = JSON.parse(localStorage.getItem('userData') || '[]');
  private userDataS = JSON.parse(localStorage.getItem('userDataS') || '[]');
  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
  @ViewChild('TABLE') table!: ElementRef;

  constructor(
    private circularService: CircularService,
    private sanitizer: DomSanitizer,
    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(circular: any) {
    this.dialog.open(TareaAlumComponent, {
      data: { titulo: circular.tituloTarea, contenido: this.sanitizer.bypassSecurityTrustHtml(circular.descripcionTarea) }
    });

    if (localStorage.getItem('userDataS')) {

    } else {
      let info = {
        idCircular: circular.idCircular,
        idUsuario: this.userData[0]
      };
      this.circularService.verCircular(info).subscribe((response) => {
      });
    }
  }



  public allInfo: any;
  public files: any;
  public urls: any = [];
  //Traer la información y mostrarla en la tabla
  getTareas() {
    this.tareasService.getTareas(this.userDataS[0] ? this.userDataS[0] : this.userData[0]).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;
    });
  }

  buscarArchivo(ruta: string) {
    console.log("🚀 ~ TareasComponent ~ buscarArchivo ~ ruta:", ruta)
    // window.open(ruta, '_blank');
  }

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

  filtroSeleccionado: string = '';
  materias: any[] = [];
  fechaSeleccionada: Date | null = null;
  materiaSeleccionada: any = null;

  onFiltroChange(valor: string): void {
    // Actualiza el filtro seleccionado
    this.filtroSeleccionado = valor;

    // Limpia valores previos
    this.fechaSeleccionada = null;
    this.materiaSeleccionada = null;

    // Limpia tabla (opcional)
    this.dataSource.data = this.allInfo;

    // Si se selecciona MAT, carga materias recientes
    if (valor === 'MAT') {
      this.cargarMaterias();
    }
  }

  cargarMaterias(): void {
    const userId = this.userDataS[0] ? this.userDataS[0] : this.userData[0];

    this.tareasService.getMaterias30Dias(userId).subscribe(
      (response: any) => {
        this.materias = response;
        console.log('Materias de últimos 30 días:', this.materias);
      },
      (error) => {
        console.error('Error al cargar materias:', error);
        this.materias = []; // fallback
      }
    );
  }

  onFechaSeleccionada(event: any): void {
    
    this.fechaSeleccionada = event.value;
    if (!this.fechaSeleccionada) return;
    const fechaFormateada = this.formatFecha(this.fechaSeleccionada);
    console.log('📅 Fecha seleccionada:', fechaFormateada);

    if (!this.filtroSeleccionado) return;

    // Mostrar loader
    this.isLoading = true;

    // Llamar al servicio correspondiente
    if (this.filtroSeleccionado === 'FE') {
      // Fecha de entrega
      this.tareasService.getByFechaEntrega(fechaFormateada, this.userDataS[0] ? this.userDataS[0] : this.userData[0]).subscribe((response: any) => {
        this.actualizarTabla(response);
      });
    } else if (this.filtroSeleccionado === 'FA') {
      // Fecha de asignación
      this.tareasService.getByFechaAsignacion(fechaFormateada, this.userDataS[0] ? this.userDataS[0] : this.userData[0]).subscribe((response: any) => {
        this.actualizarTabla(response);
      });
    }
  }

  onMateriaSeleccionada(idMateria: any): void {
    this.materiaSeleccionada = idMateria;
    console.log('📘 Materia seleccionada:', idMateria);

    if (!idMateria) return;

    this.isLoading = true;
    this.tareasService.getByMateria(idMateria).subscribe((response: any) => {
      this.actualizarTabla(response);
    });
  }

  private actualizarTabla(response: any): void {
    this.isLoading = false;

    this.dataSource = new MatTableDataSource<any>(
      response.map((tarea: any) => {
        tarea.vinculoTareaArray = tarea.vinculoTarea
          ? tarea.vinculoTarea.split("||").map((url: string) => ({ nombre: url, url }))
          : [];
        tarea.adjuntoTarea = tarea.adjuntoTarea ? JSON.parse(tarea.adjuntoTarea) : [];
        return tarea;
      })
    );
    this.dataSource.paginator = this.paginator;
  }

  private formatFecha(fecha: Date): string {
    // Devuelve formato YYYY-MM-DD
    const year = fecha.getFullYear();
    const month = String(fecha.getMonth() + 1).padStart(2, '0');
    const day = String(fecha.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }




  // openDialog1(id: string) {
  //   const dialogRef = this.dialog.open(ModalCircular, {
  //     autoFocus: false
  //   });


  //   dialogRef.componentInstance.setData(id);
  // }



  // openDialogEdit(circular: any) {
  //   console.log("🚀 ~ CircularesComponent ~ openDialogEdit ~ circular:", circular)
  //   const dialogRef = this.dialog.open(ModalCircularesEdit, {
  //     autoFocus: false,
  //     data: circular
  //   });

  //   dialogRef.componentInstance.circularActualizada.subscribe(() => {
  //     this.getCirculares();
  //   });


  // }




}

@Component({
  selector: 'App-circularAlumno-component',
  templateUrl: './tareaAlumno.component.html',
  styleUrls: ['./tareas.component.css'],
  standalone: true,
  imports: [MatIconModule, MatDialogContent, MatDialogActions, MatDialogClose]
})
export class TareaAlumComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
  }
}