import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ValidatorFn } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { FormService } from './../../../Administrador/services/FormService.service';
import { recibirRespuestas } from '../../services/recibirRespuestas.service';
import { EnviarInfoService } from '../../../Administrador/services/enviar-info.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { AbstractControl, ValidationErrors } from '@angular/forms';

function noSoloEspacios(control: AbstractControl): ValidationErrors | null {
  if (typeof control.value === 'string' && control.value.trim().length === 0) {
    return { soloEspacios: true };
  }
  return null;
}


@Component({
  selector: 'app-formularios',
  templateUrl: './formularios.component.html',
  styleUrls: ['./formularios.component.css']
})
export class FormulariosComponent implements OnInit {

  Padre = (() => {
    const simulacion = localStorage.getItem('userDataS');
    const real = localStorage.getItem('userData');
    try {
      return simulacion ? JSON.parse(simulacion) : real ? JSON.parse(real) : null;
    } catch (e) {
      console.error('Error al parsear usuario del localStorage:', e);
      return null;
    }
  })();
  hoy: string = new Date().toISOString().split('T')[0];

  usuarioLogueadoId = this.Padre ? this.Padre[0] : null;
  mensajeExito: string = '';

  form!: FormGroup;
  configuration: any;
  selectedTabIndex = 0;
  formId: any;
  yaRespondido: boolean = false;
  respuestasPrevias: any = null;
  color: string = '';
  textColor: string = '';
  modoEdicion: boolean = false;

  constructor(
    private formService: FormService,
    private fb: FormBuilder,
    private _recibirRespuestas: recibirRespuestas,
    private _enviarInfo: EnviarInfoService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private snackBar: MatSnackBar,
  ) {}

  ngOnInit(): void {
    this.activatedRoute.queryParams.subscribe(params => {
      this.modoEdicion = params['editar'] === 'true' && !!params['formId'];
      this.formId = params['formId'] || null;

      if (this.modoEdicion && this.formId) {
        this.cargarFormularioYRespuesta(this.formId, this.usuarioLogueadoId);
      } else {
        this.obtenerFormularioPublicado();
      }
    });

    this._enviarInfo.currentTextColor.subscribe(color => this.textColor = color);
    this._enviarInfo.currentColor.subscribe(color => this.color = color);
  }

  // Función para obtener validadores según el tipo y configuración del elemento
  getValidadores(element: any): ValidatorFn[] {
   const validators: ValidatorFn[] = [];

  if (element.required) {
      validators.push(Validators.required);
    validators.push(Validators.required, noSoloEspacios);
  }

  if (element.pattern) {
    try {
      validators.push(Validators.pattern(new RegExp(element.pattern)));
    } catch (e) {
      console.warn(`Patrón inválido: ${element.pattern}`);
    }
  }

  if (['text', 'email', 'textarea'].includes(element.type)) {
    if (element.min !== undefined) {
      validators.push(Validators.minLength(element.min));
    }
    if (element.max !== undefined) {
      validators.push(Validators.maxLength(element.max));
    }
  }

  if (element.type === 'number') {
    if (element.min !== undefined) {
      validators.push(Validators.min(element.min));
    }
    if (element.max !== undefined) {
      validators.push(Validators.max(element.max));
    }
  }

  return validators;
  }

  reconstruirFormulario(config: any, datosPrevios: any = null): void {
    if (!config || !config.tabs) {
      console.error('Configuración inválida o vacía');
      return;
    }

    const group: any = {};

    config.tabs.forEach((tab: any) => {
      tab.elements.forEach((el: any) => {
        const controlName = el.element.name;

        // Aquí usamos getValidadores para obtener los validadores de cada campo
        const validators = this.getValidadores(el.element);

        const valorInicial = datosPrevios && datosPrevios.tabs && datosPrevios.tabs[tab.title]
          ? datosPrevios.tabs[tab.title][controlName] || ''
          : '';

        group[controlName] = this.fb.control(valorInicial, validators);
      });
    });

    this.form = this.fb.group(group);
  }


 onSubmit(): void {
  if (!this.form) return;

  if (this.form.invalid) {
    this.form.markAllAsTouched();
    this.snackBar.open('Por favor completa los campos requeridos.', 'Cerrar', { duration: 3000 });
    return;
  }

  // Limpiar espacios en los valores del formulario antes de enviar
  const cleanValues: any = {};
  Object.keys(this.form.value).forEach(key => {
    const val = this.form.value[key];
    cleanValues[key] = typeof val === 'string' ? val.trim() : val;
  });

  console.log('Formulario enviado con datos limpios:', cleanValues);

  const respuestasPorSeccion: any = {};

  this.configuration.tabs.forEach((tab: any) => {
    respuestasPorSeccion[tab.title] = {};
    tab.elements.forEach((el: any) => {
      const campo = el.element.name;
      respuestasPorSeccion[tab.title][campo] = cleanValues[campo];
    });
  });

  const dataToSend = {
    form_id: this.formId,
    usuarioRegistro: this.usuarioLogueadoId,
    contenido_json: JSON.stringify({ tabs: respuestasPorSeccion })
  };


  if (this.yaRespondido) {
    // Actualizar respuesta existente (PUT)
    this._recibirRespuestas.actualizarRespuesta(dataToSend).subscribe({
      next: (response: any) => {
        if (response.success) {
    this.snackBar.open('Respuesta actualizada con éxito', 'Cerrar', { duration: 3000 });
               this.router.navigate(['homePadres/formularios/lista']);
        } else {
          console.error('Error actualizando respuesta');
        }
      },
      error: (err) => {
        console.error('Error en la actualización:', err);

      }
    });
  } else {
    // Insertar nueva respuesta (POST)
    this._recibirRespuestas.recibirRespuesta(dataToSend).subscribe({
      next: (response: any) => {
        if (response.success) {
    this.snackBar.open('Respuesta guardada con éxito', 'Cerrar', { duration: 3000 });
          this.yaRespondido = true;
     this.router.navigate(['homePadres/formularios/lista']);
          } else {
          console.error('Error guardando respuesta');
        }
      },
      error: (err) => {
        console.error('Error en el envío:', err);
      }
    });
  }
}

// descargarPDF() {
//   const usuarioId = this.usuarioLogueadoId || 'desconocido';
// const formId = this.formId || 'formulario-desconocido';

//   this._recibirRespuestas.descargarPDF(usuarioId, formId).subscribe((res) => {
//     const blob = new Blob([res], { type: 'application/pdf' });
//     const url = window.URL.createObjectURL(blob);

//     const a = document.createElement('a');
//     a.href = url;
//     a.download = `respuesta_${usuarioId}_form_${formId}.pdf`;
//     a.click();

//     window.URL.revokeObjectURL(url);
//   });
// }

   // Para modo edición: carga formulario y respuestas previas
  cargarFormularioYRespuesta(formId: number, usuarioId: any) {
    this.formService.getFormById(formId).subscribe({
      next: (response: any) => {
        if (response.success && response.form) {
          this.configuration = response.form.configuration;
          if (typeof this.configuration === 'string') {
            try {
              this.configuration = JSON.parse(this.configuration);
            } catch (error) {
              console.error('Error parseando configuración JSON:', error);
              return;
            }
          }
          this._recibirRespuestas.obtenerRespuesta(formId, usuarioId).subscribe({
            next: (respuestaData: any) => {
              if (respuestaData.success && respuestaData.respuesta) {
                this.respuestasPrevias = respuestaData.respuesta; // Objeto ya parseado
                this.yaRespondido = true;
                this.reconstruirFormulario(this.configuration, this.respuestasPrevias);
              } else {
                this.yaRespondido = false;
                this.reconstruirFormulario(this.configuration);
              }
            },
            error: (err) => {
              console.error('Error al obtener respuesta previa:', err);
              this.yaRespondido = false;
              this.reconstruirFormulario(this.configuration);
            }
          });
        } else {
          console.log('No se encontró formulario con ese ID');
        }
      },
      error: (err) => {
        console.error('Error al obtener el formulario:', err);
      }
    });
  }

  obtenerFormularioPublicado(): void {
    this.formService.getPublishedForm().subscribe({
      next: (response: any) => {
        if (response.success && response.form) {
          this.formId = response.form.id;
          this.configuration = response.form.configuration;

          if (typeof this.configuration === 'string') {
            try {
              this.configuration = JSON.parse(this.configuration);
            } catch (error) {
              console.error('Error parseando configuración JSON:', error);
              return;
            }
          }

          this._recibirRespuestas.tieneRespuesta(this.formId, this.usuarioLogueadoId).subscribe({
            next: (res: any) => {
              if (res.success && res.hasRespuesta) {
                this.yaRespondido = true;

                this._recibirRespuestas.obtenerRespuesta(this.formId, this.usuarioLogueadoId).subscribe({
                  next: (respuestaData: any) => {
                    if (respuestaData.success && respuestaData.respuesta) {
                      this.respuestasPrevias = respuestaData.respuesta;
                      this.reconstruirFormulario(this.configuration, this.respuestasPrevias);
                    } else {
                      this.reconstruirFormulario(this.configuration);
                    }
                  },
                  error: (err: any) => {
                    console.error('Error al obtener respuesta previa:', err);
                    this.reconstruirFormulario(this.configuration);
                  }
                });

              } else {
                this.yaRespondido = false;
                this.reconstruirFormulario(this.configuration);
              }
            },
            error: (err) => {
              console.error('Error verificando respuestas:', err);
              this.yaRespondido = false;
              this.reconstruirFormulario(this.configuration);
            }
          });
        } else {
          console.log('No se encontró formulario publicado');
        }
      },
      error: (err) => {
        console.error('Error al obtener el formulario:', err);
      }
    });
  }

}
