import { Usuario } from './../../../Administrador/interfaces/Usuario.interface';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormService } from './../../../Administrador/services/FormService.service';
import { recibirRespuestas } from '../../services/recibirRespuestas.service';

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

 Padre = JSON.parse(
  localStorage.getItem('userDataS')
    ? localStorage.getItem('userDataS') || ''
    : localStorage.getItem('userData') || ''
);

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

  form!: FormGroup;
  configuration: any;
  selectedTabIndex = 0;
  formId: any;

  constructor(
    private formService: FormService,
    private fb: FormBuilder,
    private _recibirRespuestas: recibirRespuestas,

  ) {}

  ngOnInit(): void {
    this.obtenerFormularioPublicado();

console.log('Padre:', this.usuarioLogueadoId);

  }

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

          this.configuration = response.form.configuration;

          // Si configuration viene como string JSON, parsea a objeto
          if (typeof this.configuration === 'string') {
            try {
              this.configuration = JSON.parse(this.configuration);
            } catch (error) {
              console.error('Error parseando configuración JSON:', error);
              return;
            }
          }

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

  reconstruirFormulario(config: any): 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;
        const validators = el.element.required ? [Validators.required] : [];
        group[controlName] = this.fb.control('', validators);
      });
    });

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

  onSubmit(): void {
    if (this.form.valid) {
      console.log('Formulario enviado con datos:', this.form.value);

     const dataToSend = {
  form_id: this.formId,
  usuarioRegistro: this.usuarioLogueadoId, // acá va el id del usuario
  contenido_json: JSON.stringify(this.form.value)
};


   this._recibirRespuestas.recibirRespuesta(dataToSend).subscribe({
  next: (response: any) => {  // <-- usa any para que TS no te marque error
    if (response.success) {
      console.log('Respuesta guardada con éxito');
    } else {
      console.error('Error guardando respuesta:');
    }
  },
  error: (err) => {
    console.error('Error en el envío:', err);
  }
});
    }
  }
}

// onSubmit(): void {
//   if (this.form.valid) {
//     console.log('Formulario enviado con datos:', this.form.value);

//     // Armar el payload que enviarás al backend
//     const dataToSend = {
//       form_id: this.formId,        // el id del formulario
//       usuarioRegistro: this.usuarioRegistro, // por ejemplo, el id del usuario logueado, si lo tienes
//       contenido_json: JSON.stringify(this.form.value) // enviar el contenido como JSON string
//     };

//     // Aquí llamas al servicio para enviar los datos al backend

