import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { ProductsService } from '../../services/products.service';
import Swal from 'sweetalert2'
import { Router } from '@angular/router';
import { ImagesService } from '../../services/images.service';
import { HttpClient } from '@angular/common/http';
import { environments } from '../../../environment/environment';

@Component({
  selector: 'app-cotizacion',
  templateUrl: './cotizacion.component.html',
  styleUrl: './cotizacion.component.css',
  standalone: false
})
export class CotizacionComponent {
  private URL: string = environments.baseUrl;
  forma: FormGroup;
  msjSend: string = '';
  paises: any[] = [];
  estados: any[] = [];
  paisSeleccionado: boolean = false;
  typeBann: string = 'assets/img/bg-hab.jpg';
  constructor(private fb: FormBuilder,
    private http: HttpClient,
    private _matIconRegistry: MatIconRegistry,
    private _domSanitizer: DomSanitizer,
    private _productoService: ProductsService,
    private _router: Router,
    private _imageService: ImagesService
  ) {

    this.forma = fb.group({
      name: ['', [Validators.required, Validators.pattern(/^[a-zA-ZÁÉÍÓÚáéíóú. ]+$/)]],
      empresa: ['', [Validators.required, Validators.pattern(/^[a-zA-ZÁÉÍÓÚáéíóú0-9. "]+$/)]],
      proyecto: ['', [Validators.required, Validators.pattern(/^[a-zA-ZÁÉÍÓÚáéíóú0-9. "]+$/)]],
      sele: ['default', [Validators.required]],
      email: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)]],
      pais: ['', [Validators.required]],
      estado: ['', [Validators.required]],
      ciudad: ['', [Validators.required, Validators.pattern(/^[a-zA-ZÁÉÍÓÚáéíóú. ]+$/)]],
      codigoPostal: ['', [Validators.required, Validators.pattern(/^\d+$/), Validators.minLength(5), Validators.maxLength(5)]],
      tel: ['', [Validators.required, Validators.pattern(/^\d+$/), Validators.minLength(10), Validators.maxLength(10)]],
      msj: ['', [Validators.required, Validators.pattern(/^[a-zA-ZÁÉÍÓÚáéíóú0-9. "]+$/)]],
      // recaptcha: ['', [Validators.required]]
    });


    this.functAddSVGIcon();
  }

  ngOnInit(): void {
    this.getCountries();
    // console.log(this.forma);

    // this.forma.get('pais')?.statusChanges.subscribe(status => {
    //   // console.log('Estado del campo país:', status);
    // });

    // this.forma.get('estado')?.statusChanges.subscribe(status => {
    //   // console.log('Estado del campo estado:', status);
    // });
  }

  handleAutocompleteError(errorInfo: { field: string, message: string }) {
    // console.log('Error:', errorInfo);
    // if (errorInfo.message === 'error') {
    //   // Marcar el campo como inválido en el formulario
    //   if (errorInfo.field === 'país') {
    //     this.forma.get('pais')?.setErrors({ invalid: true });
    //   } else if (errorInfo.field === 'estado') {
    //     this.forma.get('estado')?.setErrors({ invalid: true });
    //   }
    // } else if(errorInfo.message === 'null') {
    //   // Limpiar el error si el valor es válido
    //   if (errorInfo.field === 'país') {
    //     this.forma.get('pais')?.setErrors({ invalid: false });
    //   } else if (errorInfo.field === 'estado') {
    //     this.forma.get('estado')?.setErrors(null);
    //   }
    // }
  }

  onPaisSeleccionado(pais: any) {
    if (pais) {
      this.forma.get('pais')?.setValue(pais.NOMBRE);
      this.paisSeleccionado = true;

      // Llamar al servicio para obtener los estados
      this._imageService.getStates(pais.IDPAIS).subscribe((response: any) => {
        this.estados = response;
      });
    }
  }


  onEstadoSeleccionado(estado: any) {
    //asdf esto hace que se ponga el nombre del estado en el campo estado
    this.forma.get('estado')?.setValue(estado.NOMBRE);
    this.forma.get('estado')?.markAsUntouched();
    this.forma.get('pais')?.markAsUntouched();
    // console.log('Estado seleccionado:', estado);
  }


  // onEstadoSeleccionado(estado: any) {
  //   // this.paisSeleccionado = pais;
  //   this.forma.get('estado')?.setValue(estado.NOMBRE);
  //   console.log('Estado seleccionado:', estado);
  // }

  campoVacio(campoCoti: string) {
    const campo = this.forma.get(campoCoti);
    return campo?.touched && !campo?.value;
  }

  campoNoValido(campoCoti: string) {
    const campo = this.forma.get(campoCoti);
    return campo?.invalid && campo?.touched;
  }


  // public form: FormGroup = this.fb.group({
  //   grupo: ['', [Validators.required]],
  // });

  getCountries() {
    this._imageService.getCountries().subscribe((paises: any) => {
      this.paises = paises;
    });
  }

  functAddSVGIcon() {
    this._matIconRegistry.addSvgIcon(
      'nombreProyecto',
      this._domSanitizer.bypassSecurityTrustResourceUrl('assets/img/svg/1.svg')
    );
    this._matIconRegistry.addSvgIcon(
      'cp',
      this._domSanitizer.bypassSecurityTrustResourceUrl('assets/img/svg/2.svg')
    );
    this._matIconRegistry.addSvgIcon(
      'telefono',
      this._domSanitizer.bypassSecurityTrustResourceUrl('assets/img/svg/3.svg')
    );
    this._matIconRegistry.addSvgIcon(
      'correo',
      this._domSanitizer.bypassSecurityTrustResourceUrl('assets/img/svg/4.svg')
    );
    this._matIconRegistry.addSvgIcon(
      'nombreEmpresa',
      this._domSanitizer.bypassSecurityTrustResourceUrl('assets/img/svg/5.svg')
    );
    this._matIconRegistry.addSvgIcon(
      'ubicacion',
      this._domSanitizer.bypassSecurityTrustResourceUrl('assets/img/svg/6.svg')
    );
    this._matIconRegistry.addSvgIcon(
      'nombrePersona',
      this._domSanitizer.bypassSecurityTrustResourceUrl('assets/img/svg/7.svg')
    );

  }
  sendEmail() {
    const data = this.forma;
    let fechaActual = new Date();
    let mes = fechaActual.getMonth() + 1
    let strFechaActual = fechaActual.getDate() + '/' + mes + '/' + fechaActual.getFullYear() + ' ' + fechaActual.getHours() + ':' + fechaActual.getMinutes() + ':' + fechaActual.getSeconds();


    // let bodyMail = "Nombre completo: " + data.get('name')?.value + "<br>Nombre de la empresa: " + data.get('empresa')?.value+"<br>Nombre del proyecto: "+data.get('proyecto')?.value;
    // bodyMail += "<br>Tipo de empresa: "+data.get('sele')?.value+"<br>Correo electrónico: "+data.get('email')?.value+"<br>Pais: "+data.get('pais')?.value+"<br>Estado: "+data.get('estado')?.value;
    // bodyMail += "<br>Ciudad: "+data.get('ciudad')?.value+"<br>Código Postal: "+data.get('codigoPostal')?.value+"<br>Teléfono: "+data.get('tel')?.value+"<br>Mensaje: "+data.get('msj')?.value;
    // bodyMail += "<br>Fecha y Hora de Contacto: "+strFechaActual;

    let bodyMail = "<!DOCTYPE HTML PUBLIC ";//W3C//DTD HTML 4.0 Transitional//EN">
    bodyMail += "<html>";
    bodyMail += "<head><meta content=\"text/html; charset=iso-8859-1\" http-equiv=\"content-type\"></head>";
    bodyMail += "<body>";
    bodyMail += "<div align=\"left\"><font color=\"#000000\" face=\"Arial\" size=\"2\"><img alt=\"Air Technology Corporation\" src=\"https://www.atcfans.com/assets/img/Atcfans.png\"></font></div>";
    bodyMail += "<div align=\"center\">&nbsp;</div>";
    bodyMail += "<div align=\"left\" style=\"background-color:#878787\"><font color=\"#878787\" face=\"Arial\" size=\"2\">&nbsp;<br/>&nbsp;</font></div>";
    bodyMail += "<div align=\"center\">&nbsp;</div>";
    bodyMail += "<div align=\"left\"><font color=\"#252e68\" face=\"Arial\" size=\"3\"><strong>COTIZACIÓN PAGINA WEB</strong></font></div>";
    bodyMail += "<div align=\"center\">&nbsp;</div>";
    bodyMail += "<div align=\"justify\"><font color=\"#000000\" face=\"Arial\" size=\"2\">Se ha generado la siguiente cotización del Sitio Web  por parte de: </font></div>";
    bodyMail += "<div align=\"center\">&nbsp;</div>";
    bodyMail += "<div align=\"justify\"><font color=\"#000000\" face=\"Arial\" size=\"2\"><strong> " + data.get('name')?.value + " </strong> con correo electr&oacute;nico <strong> " + data.get('email')?.value + " </strong> y tel&eacute;fono <strong> " + data.get('tel')?.value + " </strong>.</font></div>";
    bodyMail += "<div align=\"justify\"><font color=\"#000000\" face=\"Arial\" size=\"2\">El solictante ha propocionado la siguiente información, Nombre de la empresa <strong>" + data.get('empresa')?.value + "</strong>, Tipo de empresa <strong>" + data.get('sele')?.value + "</strong>, Nombre del proyecto <strong>" + data.get('proyecto')?.value + "</strong>, con dirección en <strong>" + data.get('pais')?.value + ", " + data.get('estado')?.value + ", C.P. " + data.get('codigoPostal')?.value + "</strong>.</font></div>";
    bodyMail += "<div align=\"center\">&nbsp;</div>";
    bodyMail += "<div align=\"justify\"><font color=\"#000000\" face=\"Arial\" size=\"2\">Se adjunta mensaje enviado por el solicitante <strong>" + data.get('msj')?.value + "</strong>.</font></div>";
    bodyMail += "<div align=\"center\">&nbsp;</div>";
    bodyMail += "<div align=\"justify\"><font color=\"#000000\" face=\"Arial\" size=\"2\">Este correo electr&oacute;nico ha sido generado autom&aacute;ticamente, en caso de tener alguna duda o aclaraci&oacute;n referente a la informaci&oacute;n contenida en este mensaje contacte al Departamento Comercial de Air Technology Corporation.</font></div>";
    bodyMail += "<div align=\"center\">&nbsp;</div>";
    bodyMail += "<div align=\"center\">&nbsp;</div>";
    bodyMail += "<div align=\"left\" style=\"background-color:#252e68\"><font color=\"#FFFFFF\" face=\"Arial\" size=\"2\">&nbsp;<br/>&nbsp;&nbsp;&nbsp;Copyright &copy; " + fechaActual.getFullYear() + " <strong>Air Technology Corporation.</strong> Todos los derechos reservados.<br/>&nbsp;</font></div>";
    bodyMail += "</body>";
    bodyMail += "</html>";
    let mailBody: string[] = [
      data.get('email')?.value, bodyMail
    ];


    this._productoService.postSendMail(mailBody).subscribe((request: any) => {
      // console.log(request[1]);

      if (request[1] == false) {
        // mensaje enviado
        Swal.fire({
          title: "Mensaje enviado",
          text: "Hemos recibido su mensaje, en breve nos pondremos en contacto con usted.",
          icon: "success",
          confirmButtonText: "Cerrar",
        }).then((result: any) => {
          this._router.navigate(['']);
        })
      } else {
        // mensaje no enviado
        Swal.fire({
          title: "Mensaje no enviado",
          text: request[0],
          icon: "error"
        })
      }
    });

  }

  recaptchaResponse: string = '';
  validRecaptcha: boolean = false;
  verifyRecaptcha(token: string) {
    const body = { recaptcha: token };

    this.http.post(`${this.URL}/validate-recaptcha`, body).subscribe(
      (response: any) => {
        console.log(response);
        if (!response.status) {
          this.validRecaptcha = true;
          console.log('reCAPTCHA válido');
        } else {
          this.validRecaptcha = false;
          console.log('reCAPTCHA inválido');
        }
      },
      (error) => {
        this.validRecaptcha = false;
        console.error('Error al verificar el reCAPTCHA', error);
      }
    );
  }

  resolved(captchaResponse: string | null) {
    this.recaptchaResponse = captchaResponse || '';
    this.forma.get('recaptcha')?.setValue(this.recaptchaResponse);
    console.log("reCAPTCHA resuelto:", captchaResponse);

    if (this.recaptchaResponse) {
      this.verifyRecaptcha(this.recaptchaResponse);
    }
  }

  sendEmail2() {
    // console.log(this.forma);
    if (this.forma.invalid) {
      Object.keys(this.forma.controls).forEach(key => {
        const control = this.forma.get(key);
        if (control?.invalid) {
          control.markAsTouched();
        }
      });

      Swal.fire({
        title: 'Formulario incompleto',
        text: 'Por favor, completa todos los campos correctamente.',
        icon: 'warning',
        confirmButtonText: 'Cerrar'
      });
      return;
    }

    if (!this.recaptchaResponse) {
      Swal.fire({
        title: 'reCAPTCHA no resuelto',
        text: 'Por favor, resuelve el reCAPTCHA para enviar el mensaje.',
        icon: 'warning',
        confirmButtonText: 'Cerrar'
      });
      return;
    }

    if (!this.validRecaptcha) {
      Swal.fire({
        title: 'reCAPTCHA inválido',
        text: 'Por favor, resuelve el reCAPTCHA nuevamente.',
        icon: 'warning',
        confirmButtonText: 'Cerrar'
      });
    }

    if (this.forma.valid && this.validRecaptcha) {
      console.log('Formulario enviado');

      let newForm = {
        ...this.forma.value,
        recaptcha: this.recaptchaResponse
      }
      console.log(newForm);
      // this.sendEmail();
    }


  }
}
