import { Component, OnInit, ViewChild } from '@angular/core';
import { FormService } from '../../../services/FormService.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { EnviarInfoService } from '../../../services/enviar-info.service';
import { Router } from '@angular/router';
import { MatSnackBar } from '@angular/material/snack-bar';

// INTERFACES PARA TIPAR LOS FORMULARIOS Y RESPUESTAS DEL SERVICIO
interface Form {
  id: number;
  title: string;
  configuration: any;
}

interface GetAllFormsResponse {
  success: boolean;
  forms: Form[];
}

// COMPONENTE PRINCIPAL PARA MOSTRAR Y PUBLICAR LOS FORMULARIOS
@Component({
  selector: 'app-form-selector',
  templateUrl: './form-selector.component.html',
  styleUrl: './form-selector.component.css'
})
export class FormSelectorComponent implements OnInit {

  color: string = '';                  // COLOR PRINCIPAL DEL HEADER
  textColor: string = '';              // COLOR DEL TEXTO
  formTitle: string = '';              // TITULO DEL FORMULARIO (SI ES NECESARIO)
  forms: any[] = [];                   // ARRAY DE FORMULARIOS
  dataSource = new MatTableDataSource<any>([]); // DATASOURCE DE LA TABLA
  displayedColumns: string[] = ['id', 'title', 'ver', 'editar', 'publicar', 'eliminar']; // COLUMNAS DE LA TABLA
  selectedFormId: number | null = null; // FORMULARIO SELECCIONADO
  isLoading = false;                   // PARA MOSTRAR SPINNER O BLOQUEAR BOTONES

  @ViewChild(MatPaginator) paginator!: MatPaginator; // PAGINADOR DE LA TABLA
  @ViewChild(MatSort) sort!: MatSort;               // ORDENAMIENTO DE LA TABLA

  constructor(
    private formService: FormService,
    private _enviarInfo: EnviarInfoService,
    private router: Router,
    private snackBar: MatSnackBar
  ) {}

  // GETTER PARA SABER SI HAY ALGÚN FORMULARIO PUBLICADO
  get hayFormularioPublicado(): boolean {
    return this.dataSource.data.some(f => f.is_published);
  }

  ngOnInit(): void {
    // SUSCRIPCIÓN A COLORES DESDE EL SERVICIO DE CONFIGURACIÓN
    this._enviarInfo.currentTextColor.subscribe(color => this.textColor = color);
    this._enviarInfo.currentColor.subscribe(color => this.color = color);

    // CARGAMOS LOS FORMULARIOS AL INICIO
    this.loadForms();
  }

  // FUNCION PARA CARGAR TODOS LOS FORMULARIOS
  loadForms(): void {
    this.isLoading = true;
    this.formService.getAllForms().subscribe({
      next: (res) => {
this.dataSource.data = (res.forms || []).sort((a: { id: number; }, b: { id: number; }) => b.id - a.id);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.isLoading = false;
      },
      error: (err) => {
        console.error('Error cargando formularios:', err);
        this.isLoading = false;
      }
    });
  }

  // FILTRAR LA TABLA POR EL INPUT DE BUSQUEDA
  applyFilter(event: any): void {
    const filterValue = (event.target.value || '').trim().toLowerCase();
    this.dataSource.filter = filterValue;
  }

  // NAVEGAR A LA VISTA DE VISUALIZACIÓN DE UN FORMULARIO
  selectForm(id: number): void {
    this.router.navigate(['homeAdmin/visualizarForm', id]);
  }

  // ELIMINAR UN FORMULARIO
  deleteForm(id: number) {
    if (confirm('¿ESTÁS SEGURO DE QUE DESEAS ELIMINAR ESTE FORMULARIO?')) {
      this.formService.deleteForm(id).subscribe({
        next: (res) => {
          console.log('FORMULARIO ELIMINADO:', res);
          this.loadForms(); // RECARGAMOS LA TABLA
          this.showMessage('FORMULARIO ELIMINADO CORRECTAMENTE');
        },
        error: (err) => {
          console.error('ERROR AL ELIMINAR FORMULARIO:', err);
          this.showMessage('ERROR AL ELIMINAR EL FORMULARIO');
        }
      });
    }
  }

  // EDITAR UN FORMULARIO
  editForm(id: number) {
    this.router.navigate(['homeAdmin/formularios'], { queryParams: { id } });
    this.showMessage('CARGANDO FORMULARIO PARA EDITAR...');
  }

  // MOSTRAR MENSAJE TEMPORAL (SNACKBAR)
  showMessage(message: string) {
    this.snackBar.open(message, 'Cerrar', {
      duration: 3000,
      horizontalPosition: 'right',
      verticalPosition: 'top'
    });
  }

  // PUBLICAR UN FORMULARIO (SOLO UNO A LA VEZ)
  publicarFormulario(formId: number): void {
    this.isLoading = true;

    // PRIMERO DESPUBLICAMOS OTRO FORMULARIO PUBLICADO, SI HAY
    const formPublicado = this.dataSource.data.find(f => f.is_published);

    const despublicar$ = formPublicado && formPublicado.id !== formId
      ? this.formService.unpublishForm(formPublicado.id)
      : null;

    const publicar$ = () => this.formService.publishForm(formId);

    if (despublicar$) {
      despublicar$.subscribe({
        next: () => {
          publicar$().subscribe({
            next: () => this.updateFormsAfterPublish(formId),
            error: (err) => this.handleError(err, 'ERROR AL PUBLICAR EL FORMULARIO.')
          });
        },
        error: (err) => this.handleError(err, 'ERROR AL DESPUBLICAR EL FORMULARIO ANTERIOR.')
      });
    } else {
      publicar$().subscribe({
        next: () => this.updateFormsAfterPublish(formId),
        error: (err) => this.handleError(err, 'ERROR AL PUBLICAR EL FORMULARIO.')
      });
    }
  }

  // ACTUALIZA LOS ESTADOS DE LOS FORMULARIOS DESPUÉS DE PUBLICAR
  updateFormsAfterPublish(formId: number) {
    this.dataSource.data = this.dataSource.data.map(f => ({
      ...f,
      is_published: f.id === formId
    }));
    this.isLoading = false;
    this.showMessage('FORMULARIO PUBLICADO CORRECTAMENTE. SOLO UNO PUEDE ESTAR PUBLICADO A LA VEZ.');
  }

  // DESPUBLICAR UN FORMULARIO
  despublicarFormulario(formId: number): void {
    this.isLoading = true;
    this.formService.unpublishForm(formId).subscribe({
      next: () => {
        const form = this.dataSource.data.find(f => f.id === formId);
        if (form) {
          form.is_published = false;
        }
        this.dataSource.data = [...this.dataSource.data]; // REFRESH DATASOURCE
        this.isLoading = false;
        this.showMessage('FORMULARIO DESPUBLICADO CORRECTAMENTE.');
      },
      error: (err) => {
        this.isLoading = false;
        console.error('ERROR AL DESPUBLICAR EL FORMULARIO:', err);
        this.showMessage('ERROR AL DESPUBLICAR EL FORMULARIO.');
      }
    });
  }

  // MANEJO DE ERRORES GENERAL
  handleError(error: any, message: string) {
    this.isLoading = false;
    console.error(error);
    this.showMessage(message);
  }

}
