import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Personalizar } from '../../interfaces/Personalizar.interface';
import { PersonalizarService } from '../../services/personalizar.service';
import Swal from 'sweetalert2';
import { EnviarInfoService } from '../../services/enviar-info.service';

@Component({
  selector: 'app-personalizar',
  templateUrl: './personalizar.component.html',
  styleUrl: './personalizar.component.css'
})
export class PersonalizarComponent implements OnInit {
public imagenNueva: boolean = false;
public imagenNueva1: boolean = false;
public imagenNueva2: boolean = false;
  public mostrarAyuda = false;
  public url: string = '';
  public msg = "";
  public data!: Personalizar;
  public isLoading: boolean = true;
  public color1: string = '';
  public color2: string = '';
  public color3: string = '';
  public imagenGuardada: string = '';
public imagenGuardada1: string = '';
public imagenGuardada2: string = '';
public url1: string = '';
public url2: string = '';
errorDimension: string | null = null;

  public color4: string = '';
  public color5: string = '';
  public selectedOptionC: string = ''
  public selectedOptionT: string = ''
  public color: string = '';
  public textColor: string = '';
  public colorOptions = [
    { value: 'solido', typeColor: 'Color sólido' },
    { value: 'degradado', typeColor: 'Degradado' },
    { value: 'textura', typeColor: 'Textura' },
  ]
  public img = [
    { src: 'assets/img/texturas/2.png', id: 2, checked: false },
    { src: 'assets/img/texturas/3.png', id: 3, checked: false },
    { src: 'assets/img/texturas/4.png', id: 4, checked: false },
    { src: 'assets/img/texturas/5.png', id: 5, checked: false },
    { src: 'assets/img/texturas/6.png', id: 6, checked: false },
    { src: 'assets/img/texturas/7.png', id: 7, checked: false },
    { src: 'assets/img/texturas/9.png', id: 9, checked: false },
    { src: 'assets/img/texturas/10.png', id: 10, checked: false },
    { src: 'assets/img/texturas/11.png', id: 11, checked: false },
    { src: 'assets/img/texturas/12.png', id: 12, checked: false },
    { src: 'assets/img/texturas/13.png', id: 13, checked: false },
    { src: 'assets/img/texturas/14.png', id: 14, checked: false },
    { src: 'assets/img/texturas/15.png', id: 15, checked: false },
    { src: 'assets/img/texturas/16.png', id: 16, checked: false },
    { src: 'assets/img/texturas/17.png', id: 17, checked: false },
    { src: 'assets/img/texturas/18.png', id: 18, checked: false },
    { src: 'assets/img/texturas/19.png', id: 19, checked: false },
    { src: 'assets/img/texturas/20.png', id: 20, checked: false },
    { src: 'assets/img/texturas/21.png', id: 21, checked: false },
    { src: 'assets/img/texturas/22.png', id: 22, checked: false },
  ];

  public form = new FormGroup({
    mensajeBienvenida: new FormControl(''),
    eslogan: new FormControl(''),
    nombreColegio: new FormControl(''),
    imagen: new FormControl(''),
    primerColorBarra: new FormControl(''),
    segundoColorBarra: new FormControl(''),
    texturaBarra: new FormControl(''),
    colorLetraNav: new FormControl(''),
    primerColorTitulos: new FormControl(''),
    colorVinculos: new FormControl(''),
    imagen1: new FormControl(''),
    imagen2: new FormControl(''),


  })

  public formReset = new FormGroup({
    mensajeBienvenida: new FormControl('Bienvenidos al Ciclo Escolar 2024-2025'),
    nombreColegio: new FormControl('Colegio ABC'),
   eslogan: new FormControl('Mi eslogan'),
    imagen: new FormControl(''),
    primerColorBarra: new FormControl('#3C6AB8'),
    segundoColorBarra: new FormControl(''),
    texturaBarra: new FormControl(''),
    colorLetraNav: new FormControl('#FFFFFF'),
    primerColorTitulos: new FormControl('#e89a20'),
    colorVinculos: new FormControl('#F4665F'),
  })

  public errorType: string = '';
  public errorSize: string = '';
  public errorPx: string = '';

  public toolTip: string = 'La imagen debe cumplir: ' + '\n' + '- Extensiones: PNG, JPG.' + '\n' +
    '- Peso máximo: 1MB.' + '\n' +
    '- Dimensiones: 800px x 600px.';

  public nombreColegio: string = '';

 get formData(): Personalizar {
    this.form.value.imagen = this.url;
    const data = this.form.value as Personalizar;

    return data;
  }

  get formDataReset(): Personalizar {
    const data = this.formReset.value as Personalizar;
    return data;
  }

  constructor(private _personalizarService: PersonalizarService, private _enviarInfo: EnviarInfoService) {
  }
   abrirImagenModal() {
    Swal.fire({
      title: 'Imagen de ayuda',
      imageUrl: 'assets/img/Bases.jpg',
      imageAlt: 'Imagen de ayuda',
      imageWidth: 600,
      confirmButtonText: 'Cerrar',
       confirmButtonColor: '#4074b0'

    });
  }

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

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

  this._personalizarService.getOptions().subscribe((response: any) => {
    this.isLoading = false;
    this.data = response.personalizacion;

    // Leer imágenes después de tener data
    this.imagenGuardada= this.data.PERLOGO|| '';
    this.imagenGuardada1 = this.data.PERLOGO1 || '';
    this.imagenGuardada2 = this.data.PERLOGO2 || '';
    this.url= this.imagenGuardada;
    this.url1 = this.imagenGuardada1;
    this.url2 = this.imagenGuardada2;

    // mostrar data en el formulario
    this.form.controls['mensajeBienvenida'].setValue(this.data.PERMENSAJE);
    this.form.controls['nombreColegio'].setValue(this.data.PERNOMBRE);
    this.form.controls['eslogan'].setValue(this.data.PERESLOGAN);
    this.form.controls['primerColorBarra'].setValue(this.data.PERPR_COL_BAR);
    this.form.controls['segundoColorBarra'].setValue(this.data.PERSDO_COL_BAR);
    this.form.controls['texturaBarra'].setValue(this.data.PERTXT_BAR);
    this.form.controls['colorLetraNav'].setValue(this.data.PERCOL_LTR_BAR);
    this.form.controls['primerColorTitulos'].setValue(this.data.PERPR_COL_TIT);
    this.form.controls['colorVinculos'].setValue(this.data.PERVINCULOS);
    this.form.get('imagen')?.setValue(this.imagenGuardada);
    this.form.get('imagen1')?.setValue(this.imagenGuardada1);
    this.form.get('imagen2')?.setValue(this.imagenGuardada2);
  });
}
eliminarImagen(ruta: string, nombreCampo: 'PERLOGO' | 'PERLOGO1' | 'PERLOGO2') {
  console.log('Ruta original:', ruta);

  // Extraer la ruta relativa dentro del bucket
  // Ajusta esta parte si tu estructura cambia
const basePath = 'https://s3.us-south.cloud-object-storage.appdomain.cloud/pledu-dv-fjcm/';
let rutaRelativa = ruta;

const index = ruta.indexOf(basePath);
if (index !== -1) {
  rutaRelativa = ruta.substring(index + basePath.length);
}


  const nombreMostrado = {
    PERLOGO: 'Logo Principal',
    PERLOGO1: 'Logo Secundario 1',
    PERLOGO2: 'Logo Secundario 2'
  }[nombreCampo];

  Swal.fire({
    title: `¿Estás seguro?`,
    text: `Se eliminará la imagen de ${nombreMostrado}.`,
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: 'Eliminar',
    cancelButtonText: 'Cancelar'
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire({
        title: 'Espere un momento',
        text: "Este proceso puede tardar unos segundos",
        icon: 'warning',
        showConfirmButton: false,
        allowEscapeKey: false,
        allowOutsideClick: false,
        timer: 2000,
        timerProgressBar: true
      });

      this._personalizarService.eliminarArchivo(rutaRelativa).subscribe({
        next: () => {
          if (nombreCampo === 'PERLOGO') {
            this.url = '';
            this.form.get('imagen')?.setValue('');
            this.formData.PERLOGO = null;
          } else if (nombreCampo === 'PERLOGO1') {
            this.url1 = '';
            this.form.get('imagen1')?.setValue('');
            this.formData.PERLOGO1 = null;
          } else if (nombreCampo === 'PERLOGO2') {
            this.url2 = '';
            this.form.get('imagen2')?.setValue('');
            this.formData.PERLOGO2 = null;
          }
           

          Swal.fire({
            title: 'Eliminado',
            text: `La imagen de ${nombreMostrado} ha sido eliminada correctamente.`,
            icon: 'success',
            confirmButtonColor: '#4074b0',
            confirmButtonText: 'De acuerdo'
          }).then(() => {
  window.location.reload(); 
});
        },
        error: () => {
          Swal.fire({
            title: 'Error',
            text: `No se pudo eliminar la imagen.`,
            icon: 'error'
          });
        }
      });
    }
  });
}



  // preview de la imagen en input type file y convertirla a base64
onFileChange(event: any, field: 'imagen' | 'imagen1' | 'imagen2') {
  const file = event.target.files[0];
  if (!file) return;

  this.clearErrors();

  const mimeType = file.type.toLowerCase();
  const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
  if (!allowedTypes.includes(mimeType)) {
    this.errorType = "Debe ser .JPEG o .PNG.";
    return;
  }

  const allowedSize = 1 * 1024 * 1024;
  if (file.size > allowedSize) {
    this.errorSize = "Máximo 1MB.";
    return;
  }

  const reader = new FileReader();
  reader.onloadend = () => {
    const result = reader.result;
    if (typeof result === 'string') {
      const img = new Image();
      img.onload = () => {
        const maxWidth = 216;
        const maxHeight = 70;

        if (img.width > maxWidth || img.height > maxHeight) {
          this.errorDimension = `Máximo ${maxWidth}px de ancho y ${maxHeight}px de alto. Imagen seleccionada: ${img.width}x${img.height}px.`;
          return;
        }

        this.form.get(field)?.setValue(result);

        if (field === 'imagen') {
          this.url = result;
          this.imagenNueva = true;
        } else if (field === 'imagen1') {
          this.url1 = result;
          this.imagenNueva1 = true;
        } else if (field === 'imagen2') {
          this.url2 = result;
          this.imagenNueva2 = true;
        }
      };
      img.src = result;
    }
  };
  reader.readAsDataURL(file);
}

clearErrors() {
  this.errorType = '';
  this.errorSize = '';
  this.errorPx = '';
  this.errorDimension='';
}



  //Seleccionar una textura y mostrarla visualmente
  toggleChecked(id: number) {
    this.img.forEach(item => {
      if (item.id === id) {
        item.checked = true;
      } else {
        item.checked = false;
      }
    });
  }

  //mostrar opciones para personalizar colores
  onOptionChangeBarra(option: string) {
    if (option === 'solido') {
      this.form.get('segundoColorBarra')?.setValue('');
      this.form.get('texturaBarra')?.setValue('');
    } else if (option === 'textura') {
      this.form.get('primerColorBarra')?.setValue('');
      this.form.get('segundoColorBarra')?.setValue('');
    }
  }

  //mostrar el gradiente en el div
  getGradientBarra(): string {
    return `linear-gradient(${this.color1}, ${this.color2})`;
  }

  //actualizar las preferencias de la página
  personalizar() {
  const datos = this.formData; // Esto respeta tu getter actual

  // Aquí manualmente insertamos los valores base64 (o null) a las propiedades faltantes
  datos.PERLOGO = this.url || null;
  datos.PERLOGO1 = this.url1 || null;
  datos.PERLOGO2 = this.url2 || null;

  console.log('Datos a enviar:', datos); // Revisa que estén bien

  Swal.fire({
    icon: 'question',
    title: '¿Quieres actualizar con estas configuraciones?',
    showCancelButton: true,
    cancelButtonText: "Cancelar",
    confirmButtonColor: 'rgb(237,46,56)',
    confirmButtonText: 'Sí',
  }).then((result) => {
    if (result.isConfirmed) {
      this._personalizarService.personalizar(datos).subscribe({
        next: (resp) => {
          Swal.fire({
            icon: 'success',
            title: '¡Configuración actualizada!',
            timer: 2000,
            showConfirmButton: false

          }).then(() => {
  window.location.reload();
});

        },
error: (err) => {
  const errorMsg = err.error.message || 'Ocurrió un error';

  Swal.fire({
    icon: 'error',
    title: 'Error',
    text: errorMsg,
  }).then(() => {
    window.location.reload();
  });
}


      });
    }
  });
}


  reset() {

    console.log(this.formReset.value);
    Swal.fire({
      icon: 'question',
      title: '¿Quieres volver a los valores iniciales?',
      text: 'Esta acción no podrá deshacerse',
      showCancelButton: true,
      cancelButtonText: "Cancelar",
      confirmButtonColor: 'rgb(237,46,56)',
      confirmButtonText: 'Sí',
    }).then((result: any) => {
      if (result.isConfirmed) {
        this._personalizarService.personalizar(this.formDataReset).subscribe((response) => {
          Swal.fire({
            icon: 'success',
            title: 'Personalización actualizada',
            text: 'Se han regresado a los valores por default',
            confirmButtonColor: 'rgb(237,46,56)',
            confirmButtonText: 'Ok',
          }).then((result: any) => {
            if (result.isConfirmed) {
           window.location.reload();
            }
          });
        }, (err) => {
          console.log(err.error.message);
          Swal.fire({
            icon: 'error',
            title: 'Error al hacer la actualización',
            text: `${err.error.message}`
          })
                     window.location.reload();

        })
      }
    })

  }


}

