import { FormApiService, FormConfiguration, FormListItem } from './../../services/FormApiService.service';
import { Component, OnInit } from '@angular/core';
import { EnviarInfoService } from '../../services/enviar-info.service';
import { FormService } from '../../services/FormService.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormArray, Validators } from '@angular/forms';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { ChangeDetectorRef } from '@angular/core';

//aqui es para agregar popiedades a las celdas que se generan el el build grid
interface GridCell {
  row: number;
  col: number;
  selected: boolean;
  element?: FormElement;

  //   rowspan?: number;
  // colspan?: number;  por ejemplo estas seria en caso de que se aplicara la funcion de unir celdas
  // merged?: boolean;
}

//Aqui es para agregar tipos de elementos o inputs al selector de campos del admin Form
interface FormElement {
  type: 'text' | 'select' | 'radio' | 'checkbox' | 'textarea' | 'number' | 'email' | 'date';
  label: string;
  placeholder?: string;
  required: boolean;
  options?: string[];
  id?: string;
  name?: string;
  value?: string;
  min?: number;
  max?: number;
  pattern?: string;
  description?: string;
}

interface Tab {
  id: string;
  name: string;
  active: boolean;
  rows: number;
  columns: number;
  grid: GridCell[][];
}

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

  color: string = '';
  textColor: string = '';
  formTitle: string = '';

  // Nuevas propiedades para manejar formularios
  currentFormId: number | null = null;
  savedForms: FormListItem[] = [];
  isLoading = false;
  saveStatus = '';

  defaultRows = 3;
  defaultColumns = 3;
  showTooltip = '';

  tabs: Tab[] = [];
  currentTab: Tab | null = null;
  grid: GridCell[][] = [];
  editingElement: FormElement | null = null;

  showElementSelector = false;
  selectedCell: GridCell | null = null;


  // si quieres agregar una restrccion para los elemtos que se construyen el grid es desde aqui:
  availableElements: FormElement[] = [
    { type: 'text', label: 'Texto Corto', required: false },
    { type: 'number', label: 'Número', required: false },
    { type: 'email', label: 'Correo Electrónico', required: false },
    { type: 'date', label: 'Fecha', required: false },
    { type: 'textarea', label: 'Texto Largo', required: false },
    { type: 'select', label: 'Lista de Opciones', required: false, options: ['Opción 1'] },
    { type: 'radio', label: 'Selección Única', required: false, options: ['A', 'B'] },
    { type: 'checkbox', label: 'Casilla', required: false },
     {
    type: 'select',
    label: 'LADA Telefónica',
    required: false,
    options: ['+52 (MX)', '+1 (US)']
  },

  {
    type: 'text',
    label: 'Nombre completo del alumno',
    name: 'nombre_alumno',
    placeholder: 'Ej. Juan Pérez',
    required: true,
    pattern: "^[a-zA-ZáéíóúÁÉÍÓÚñÑ ]{3,50}$", // solo letras y espacios, min 3 max 50
    description: 'Ingrese el nombre completo sin números ni caracteres especiales.'
  },

  {
    type: 'date',
    label: 'Fecha de nacimiento',
    name: 'fecha_nacimiento',
    required: true,
    min: 1900,
    max: new Date().getFullYear() - 3,
    description: 'Seleccione la fecha de nacimiento del alumno.'
  },

  {
    type: 'email',
    label: 'Correo electrónico del padre o tutor',
    name: 'correo_tutor',
    placeholder: 'correo@ejemplo.com',
    required: true,
    pattern: "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$",
    description: 'Correo válido para notificaciones.'
  },

  {
    type: 'select',
    label: 'Grado escolar',
    name: 'grado',
    required: true,
    options: ['Preescolar', '1° Primaria', '2° Primaria', '3° Primaria', '4° Primaria', '5° Primaria', '6° Primaria', '1° Secundaria', '2° Secundaria', '3° Secundaria'],
    description: 'Seleccione el grado que cursa el alumno.'
  },

  {
    type: 'radio',
    label: 'Sexo',
    name: 'sexo',
    required: true,
    options: ['Masculino', 'Femenino', 'Otro'],
    description: 'Seleccione el sexo del alumno.'
  },

  {
    type: 'checkbox',
    label: 'Acepto las políticas de privacidad',
    name: 'acepto_politicas',
    required: true,
    description: 'Debe aceptar para continuar.'
  },

  {
    type: 'textarea',
    label: 'Dirección completa',
    name: 'direccion',
    placeholder: 'Calle, número, colonia, ciudad...',
    required: true,
    description: 'Ingrese la dirección completa del alumno.'
  },

 {
  "type": "text",
  "label": "CURP",
  "name": "curp",
  "required": true,
  "pattern": "^[A-Z]{4}\\d{6}[HM][A-Z]{5}[A-Z0-9]\\d$",
  "placeholder": "AAAA000000HAAAAAA00",
  "description": "Ingrese CURP válido (formato oficial mexicano)."
},
{
  type: 'text',
  label: 'Número telefónico',
  name: 'telefono',
  placeholder: '7771234567',
  required: true,
  pattern: '^[0-9]{7,10}$',
  description: 'Número telefónico válido (solo números).'
}



  ];
  formData: any;
  form: any;
  // Dentro del AdminFormComponent (fuera de métodos)

showModalIdentificador = false;
nombreIdentificadorControl = new FormControl('', [
  Validators.required,
  Validators.pattern('^[a-zA-Z_][a-zA-Z0-9_]*$')
]);
pendingTemplate: FormElement | null = null;
showModal: boolean = false;


constructor(
  private _enviarInfo: EnviarInfoService,
  private formApiService: FormApiService,
  private formService: FormService,
  private route: ActivatedRoute,
  private router: Router,
  private fb: FormBuilder,
    private cdr: ChangeDetectorRef


) {}


 // MÉTODO QUE SE EJECUTA AL INICIAR EL COMPONENTE
ngOnInit() {
  // SUSCRIPCIÓN PARA RECIBIR COLOR DEL TEXTO DESDE EL SERVICIO
  this._enviarInfo.currentTextColor.subscribe(color => this.textColor = color);

  // SUSCRIPCIÓN PARA RECIBIR COLOR DE FONDO DESDE EL SERVICIO
  this._enviarInfo.currentColor.subscribe(color => this.color = color);

  // AÑADIR UNA NUEVA TAB POR DEFECTO AL INICIAR
  this.addTab();

  // LEER EL ID DEL FORMULARIO SI VIENE POR QUERY PARAMS PARA CARGARLO
  this.route.queryParams.subscribe(params => {
    const id = params['id'];
    if (id) {
      this.cargarFormulario(+id);
      console.log('ID RECIBIDO:', id);
    }
  });

  // this.loadSavedForms(); // OPCIONAL: CARGAR FORMULARIOS GUARDADOS AL INICIO
}

// MÉTODO PARA INICIALIZAR EL FORMULARIO DINÁMICO CON TODOS LOS CONTROLES
initializeForm(): void {
  const formControls: { [key: string]: FormControl } = {};

  // ITERAR POR TODAS LAS TABS Y SUS CUADRÍCULAS
  for (const tab of this.tabs) {
    for (let rowIndex = 0; rowIndex < tab.grid.length; rowIndex++) {
      const row = tab.grid[rowIndex];
      for (let colIndex = 0; colIndex < row.length; colIndex++) {
        const cell = row[colIndex];
        if (cell?.element) {
          // CREAR EL NOMBRE DEL CONTROL Y AGREGARLO AL FORM
          const controlName = this.getControlName(tab, { ...cell, row: rowIndex, col: colIndex });
          formControls[controlName] = new FormControl('');
        }
      }
    }
  }

  // ASIGNAR LOS CONTROLES AL FORM GROUP PRINCIPAL
  this.form = this.fb.group(formControls);
}

// MÉTODO PARA OBTENER UN NOMBRE DE CONTROL SEGURO (SI NO HAY TAB ACTIVA)
getSafeControlName(cell: any, rowIndex: number, colIndex: number): string {
  if (!this.currentTab) {
    return `campo_${rowIndex}_${colIndex}`;
  }
  return this.getControlName(this.currentTab, { ...cell, row: rowIndex, col: colIndex });
}


// CARGAR FORMULARIOS GUARDADOS
loadSavedForms() {
  this.isLoading = true;
  this.formApiService.getForms().subscribe({
    next: (forms) => {
      this.savedForms = forms;
      this.isLoading = false;
    },
    error: (error) => {
      console.error('ERROR AL CARGAR FORMULARIOS:', error);
      this.saveStatus = 'ERROR AL CARGAR FORMULARIOS';
      this.isLoading = false;
    }
  });
}

// GUARDAR FORMULARIO NUEVO O EXISTENTE
saveForm() {
  // VALIDAR QUE HAYA TÍTULO
  if (!this.formTitle.trim()) {
    alert('POR FAVOR, INGRESA UN TÍTULO PARA EL FORMULARIO');
    return;
  }

  // VALIDAR QUE NINGUNA TAB TENGA FILAS O COLUMNAS EN 0
  const tabConError = this.tabs.find(tab => tab.rows < 1 || tab.columns < 1);
  if (tabConError) {
    alert(`LA SECCIÓN "${tabConError.name}" TIENE UN NÚMERO INVÁLIDO DE FILAS O COLUMNAS.\n\nNO SE PERMITE 0.\nUSA AL MENOS 1 FILA Y 1 COLUMNA.`);
    return;
  }

  // GUARDAR LA CUADRÍCULA DEL TAB ACTIVO ACTUAL
  if (this.currentTab) {
    this.currentTab.grid = [...this.grid];
  }

  // CONSTRUIR CONFIGURACIÓN PARA EL SERVICIO
  const config = this.buildFormConfiguration();
  this.isLoading = true;
  this.saveStatus = 'GUARDANDO...';

  // LLAMAR AL SERVICIO PARA GUARDAR EL FORMULARIO
  this.formApiService.createForm(config).subscribe({
    next: (response) => {
      console.log('FORMULARIO GUARDADO:', response);
      this.currentFormId = response.id;
      this.saveStatus = 'FORMULARIO GUARDADO EXITOSAMENTE';
      this.isLoading = false;
      this.router.navigate(['/homeAdmin/verFormulario']);
    },
    error: (error) => {
      console.error('ERROR AL GUARDAR FORMULARIO:', error);
      this.saveStatus = 'ERROR AL GUARDAR EL FORMULARIO';
      this.isLoading = false;
    }
  });
}

// CARGAR UN FORMULARIO EXISTENTE POR ID
loadForm(formId: number) {
  this.isLoading = true;
  this.formApiService.getForm(formId).subscribe({
    next: (formData) => {
      this.loadFormConfiguration(formData);
      this.currentFormId = formId;
      this.isLoading = false;
    },
    error: (error) => {
      console.error('ERROR AL CARGAR FORMULARIO:', error);
      this.saveStatus = 'ERROR AL CARGAR EL FORMULARIO';
      this.isLoading = false;
    }
  });
}

// PUBLICAR FORMULARIO (SOLO UNO PUEDE ESTAR PUBLICADO)
publishForm(formId: number) {
  if (!confirm('¿ESTÁS SEGURO DE QUE QUIERES PUBLICAR ESTE FORMULARIO?')) {
    return;
  }

  this.isLoading = true;
  this.formApiService.publishForm(formId).subscribe({
    next: (response) => {
      this.saveStatus = 'FORMULARIO PUBLICADO EXITOSAMENTE';
      this.loadSavedForms();
      this.isLoading = false;

      // LIMPIAR MENSAJE DESPUÉS DE 3 SEGUNDOS
      setTimeout(() => {
        this.saveStatus = '';
      }, 3000);
    },
    error: (error) => {
      console.error('ERROR AL PUBLICAR FORMULARIO:', error);
      this.saveStatus = 'ERROR AL PUBLICAR EL FORMULARIO';
      this.isLoading = false;
    }
  });
}

// CONSTRUIR LA CONFIGURACIÓN DEL FORMULARIO PARA EL SERVICIO
buildFormConfiguration(): FormConfiguration {
  return {
    title: this.formTitle,
    tabs: this.tabs.map(tab => ({
      id: tab.id,
      title: tab.name,
      rows: tab.rows,
      columns: tab.columns,
      elements: this.extractElementsFromGrid(tab.grid)
    }))
  };
}

// CARGAR CONFIGURACIÓN DEL FORMULARIO DESDE LA API
loadFormConfiguration(formData: any) {
  this.formTitle = formData.title || '';
  this.tabs = [];

  if (formData.tabs && formData.tabs.length > 0) {
    formData.tabs.forEach((tabData: any) => {
      const newTab: Tab = {
        id: tabData.id,
        name: tabData.title,
        active: false,
        rows: tabData.rows,
        columns: tabData.columns,
        grid: this.buildNewGrid(tabData.rows, tabData.columns)
      };

      // CARGAR ELEMENTOS EN LA CUADRÍCULA
      if (tabData.elements && tabData.elements.length > 0) {
        tabData.elements.forEach((elementData: any) => {
          const { row, col } = elementData.position;
          if (row < newTab.rows && col < newTab.columns) {
            newTab.grid[row][col].element = { ...elementData.element };
          }
        });
      }

      this.tabs.push(newTab);
    });

    this.switchToTab(this.tabs[0]);
    this.initializeForm();
  } else {
    this.addTab();
  }
}

// CREAR UN NUEVO FORMULARIO (SE PIERDEN CAMBIOS NO GUARDADOS)
newForm() {
  if (confirm('¿ESTÁS SEGURO DE QUE QUIERES CREAR UN NUEVO FORMULARIO? SE PERDERÁN LOS CAMBIOS NO GUARDADOS.')) {
    this.formTitle = '';
    this.currentFormId = null;
    this.tabs = [];
    this.addTab();
    this.saveStatus = '';
  }
}

// ELIMINAR UN FORMULARIO EXISTENTE
deleteForm(formId: number) {
  if (!confirm('¿ESTÁS SEGURO DE QUE QUIERES ELIMINAR ESTE FORMULARIO? ESTA ACCIÓN NO SE PUEDE DESHACER.')) {
    return;
  }

  // AQUÍ IRÍA LLAMADO AL SERVICIO PARA ELIMINAR
  this.loadSavedForms();
}


  // MÉTODOS EXISTENTES (sin cambios)

  get rows(): number {
    return this.currentTab?.rows ?? this.defaultRows;
  }

  get columns(): number {
    return this.currentTab?.columns ?? this.defaultColumns;
  }

  // TABS
 // ====================== TABS / SECCIONES ======================

// AÑADE UNA NUEVA TAB (SECCIÓN) AL FORMULARIO
addTab(rows = this.defaultRows, columns = this.defaultColumns) {
  const newTab: Tab = {
    id: `tab_${this.tabs.length + 1}`,       // ID ÚNICO
    name: `Sección ${this.tabs.length + 1}`, // NOMBRE POR DEFECTO
    active: false,
    rows,
    columns,
    grid: this.buildNewGrid(rows, columns)   // GENERAR GRID VACÍO
  };
  this.tabs.push(newTab);                    // AGREGAR A ARRAY DE TABS
  this.switchToTab(newTab);                  // ACTIVAR LA TAB NUEVA
}

// ELIMINA LA TAB ACTIVA
removeTab() {
  if (this.tabs.length <= 1) return;         // SI SOLO QUEDA 1 TAB, NO HACE NADA

  const activeIndex = this.tabs.findIndex(tab => tab.active);
  if (activeIndex === -1) return;

  this.tabs.splice(activeIndex, 1);          // ELIMINAR TAB ACTIVA
  const newActiveIndex = activeIndex === 0 ? 0 : activeIndex - 1;

  // ACTIVAR TAB ADYACENTE
  this.tabs.forEach((tab, index) => {
    tab.active = index === newActiveIndex;
  });
}

// CAMBIA A LA TAB SELECCIONADA
switchToTab(tab: Tab) {
  if (this.currentTab) this.currentTab.grid = [...this.grid]; // GUARDAR GRID ACTUAL
  this.tabs.forEach(t => t.active = false);
  tab.active = true;
  this.currentTab = tab;
  this.grid = [...tab.grid];                  // CARGAR GRID DE LA TAB
  this.clearSelection();                      // LIMPIAR SELECCIÓN DE CELDAS
  this.buildFormGroup();                      // RECONSTRUIR FORM GROUP PARA EL TAB
  this.cdr.detectChanges();                   // DETECTAR CAMBIOS
}

// ====================== FORM GROUP DINÁMICO ======================

// CONSTRUYE EL FORM GROUP BASADO EN LA CUADRÍCULA ACTUAL
buildFormGroup() {
  const group: any = {};
  this.grid.forEach((row, i) => {
    row.forEach((cell, j) => {
      if (cell.element && cell.element.name) {
        const controlName = this.getSafeControlName(cell, i, j);
        group[controlName] = new FormControl(''); // CONTROL VACÍO
      }
    });
  });
  this.form = new FormGroup(group);
}

// TRACKBY PARA RENDEREAR FILAS Y CELDAS EFICIENTEMENTE
trackByRowIndex(index: number, row: GridCell[]): number {
  return index;
}
trackByCellIndex(index: number, cell: GridCell): string {
  return `${cell.row}_${cell.col}`;
}

// ACTUALIZA EL NOMBRE DE UNA TAB
updateTabName(tab: Tab, name: string) {
  tab.name = name;
}

// ====================== GRID ======================

// CREA UN GRID VACÍO
buildNewGrid(rows: number, columns: number): GridCell[][] {
  return Array.from({ length: rows }, (_, r) =>
    Array.from({ length: columns }, (_, c) => ({
      row: r, col: c, selected: false
    }))
  );
}

// ACTUALIZA DIMENSIONES DE UNA TAB (FILAS Y COLUMNAS)
updateTabDimensions(tab: Tab, newRows: number, newColumns: number) {
  const oldGrid = tab.grid.map(row => row.map(cell => ({ ...cell, element: cell.element ? { ...cell.element } : undefined })));
  tab.rows = newRows;
  tab.columns = newColumns;
  tab.grid = this.buildNewGrid(newRows, newColumns);

  // PRESERVAR ELEMENTOS YA EXISTENTES DENTRO DEL NUEVO GRID
  this.preserveElementsInNewGrid(oldGrid, tab.grid, newRows, newColumns);

  if (this.currentTab?.id === tab.id) {
    this.grid = tab.grid.map(row => row.map(cell => ({ ...cell, element: cell.element ? { ...cell.element } : undefined })));
  }
}

// PRESERVA ELEMENTOS EN EL GRID AL CAMBIAR DIMENSIONES
preserveElementsInNewGrid(oldGrid: GridCell[][], newGrid: GridCell[][], maxR: number, maxC: number) {
  for (let r = 0; r < oldGrid.length; r++) {
    for (let c = 0; c < oldGrid[r]?.length; c++) {
      const cell = oldGrid[r][c];
      if (cell?.element && r < maxR && c < maxC) {
        newGrid[r][c].element = { ...cell.element };
      }
    }
  }
}

// ESCUCHA CAMBIOS DE DIMENSIONES DESDE EL PANEL DE CONFIGURACIÓN
onTabDimensionsChange(event: { tab: Tab, rows: number, columns: number }) {
  this.updateTabDimensions(event.tab, event.rows, event.columns);
}

// RECONSTRUYE EL GRID DE LA TAB ACTUAL
buildGrid() {
  if (this.currentTab) {
    this.currentTab.grid = this.grid = this.buildNewGrid(this.currentTab.rows, this.currentTab.columns);
  }
}

// VERIFICA INTEGRIDAD DEL GRID (FILAS Y COLUMNAS CORRECTAS)
verifyGridIntegrity(grid: GridCell[][]): boolean {
  return grid.every((row, r) => row.every((cell, c) => {
    cell.row = r;
    cell.col = c;
    return true;
  }));
}

// ====================== FORM CONFIG ======================
onFormTitleChange(title: string) { this.formTitle = title; }
onRowsChange(rows: number) { if (this.currentTab) this.updateTabDimensions(this.currentTab, rows, this.currentTab.columns); }
onColumnsChange(cols: number) { if (this.currentTab) this.updateTabDimensions(this.currentTab, this.currentTab.rows, cols); }
onShowTooltipChange(field: string) { this.showTooltip = field; }

// ====================== SERIALIZACIÓN ======================
logConfiguration() {
  const config = this.buildFormConfiguration();
  console.log('CONFIGURACIÓN COMPLETA:', config);
  return config;
}

extractElementsFromGrid(grid: GridCell[][]) {
  return grid.flatMap(row => row
    .filter(cell => cell.element)
    .map(cell => ({
      position: { row: cell.row, col: cell.col },
      element: this.serializeElement(cell.element!)
    }))
  );
}

// SERIALIZA UN ELEMENTO INDIVIDUAL PARA GUARDAR EN API
serializeElement(el: FormElement) {
  const base: any = { type: el.type, label: el.label, required: el.required };
  if (el.placeholder) base.placeholder = el.placeholder;
  if (el.id) base.id = el.id;
  if (el.name) base.name = el.name;
  if (el.value) base.value = el.value;
  if (el.description) base.description = el.description;
  if (el.options?.length) base.options = el.options;
  if (el.min !== undefined) base.min = el.min;
  if (el.max !== undefined) base.max = el.max;
  if (el.pattern) base.pattern = el.pattern;
  return base;
}

// ====================== INTERACCIÓN CELDAS ======================

// SELECCIONA UNA CELDA
selectCell(cell: GridCell) {
  this.clearSelection();
  cell.selected = true;
  this.selectedCell = cell;
  this.showElementSelector = true;
}

// LIMPIA SELECCIÓN DE CELDAS Y ELEMENTOS
clearSelection() {
  this.grid.forEach(row => row.forEach(c => c.selected = false));
  this.selectedCell = null;
  this.showElementSelector = false;
  this.editingElement = null;
}

// CONFIRMA IDENTIFICADOR DEL NUEVO ELEMENTO
confirmarIdentificador() {
  if (this.nombreIdentificadorControl.invalid || !this.pendingTemplate) {
    this.nombreIdentificadorControl.markAsTouched();
    return;
  }

  const nombreClave = this.nombreIdentificadorControl.value!.trim().toLowerCase().replace(/\s+/g, '_');
  const element = { ...this.pendingTemplate };

  element.id = `${this.currentTab?.id}_${nombreClave}`;
  element.name = nombreClave;
  element.label = this.capitalizeWords(nombreClave.replace(/_/g, ' '));

  // APLICA VALIDACIONES SEGÚN TIPO
  switch (element.type) {
    case 'email':
      Object.assign(element, { required: true, pattern: '^[\\w.-]+@[\\w.-]+\\.[a-zA-Z]{2,}$', placeholder: 'ejemplo@correo.com' });
      break;
    case 'number':
      Object.assign(element, { required: true, min: 1, max: 100 });
      break;
    case 'text':
      element.required = true;
      element.min = element.min ?? 1;
      element.max = element.max ?? 20;
      if (!element.pattern) element.pattern = '^\\b(\\w+\\b\\s*){1,20}$';
      break;
  }

  // ASIGNA ELEMENTO A LA CELDA SELECCIONADA
  this.selectedCell!.element = element;
  this.editingElement = element;
  this.showElementSelector = false;
  this.updateCurrentTabGrid();
  this.showModalIdentificador = false;
  this.pendingTemplate = null;
}

// AGREGA ELEMENTO A LA CELDA (ABRE MODAL SI YA HAY ELEMENTO)
addElementToCell(template: FormElement) {
  if (!this.selectedCell || this.selectedCell.element) {
    this.showModal = true;  // MODAL AVISO DE CELDA OCUPADA
    return;
  }
  this.pendingTemplate = template;
  this.nombreIdentificadorControl.reset();
  this.showModalIdentificador = true;






  // // Solicita un "nombre clave" legible para el input, ejemplo: "nombre_alumno"
  // let nombreClave = prompt('Ingresa el identificador único para este campo (ej. nombre_alumno):');
  // if (!nombreClave) {
  //   alert('Debes ingresar un identificador válido.');
  //   return;
  // }

  // // Limpia espacios y pasa a minúsculas para usar como key
  // nombreClave = nombreClave.trim().toLowerCase().replace(/\s+/g, '_');

  // const element = { ...template };

  // element.id = `${this.currentTab?.id}_${nombreClave}`;
  // element.name = nombreClave;          // <--- Aquí asignamos el key legible
  // element.label = this.capitalizeWords(nombreClave.replace(/_/g, ' ')); // etiqueta legible: "Nombre Alumno"

  // Aplica validaciones según tipo, igual que antes
  // switch (element.type) {
  //   case 'email':
  //     Object.assign(element, {
  //       required: true,
  //       pattern: '^[\\w.-]+@[\\w.-]+\\.[a-zA-Z]{2,}$',
  //       placeholder: 'ejemplo@correo.com'
  //     });
  //     break;
  //   case 'number':
  //     Object.assign(element, { required: true, min: 1, max: 100 });
  //     break;
  //   case 'text':
  //   element.required = true;
  // element.min = element.min ?? 1;
  // element.max = element.max ?? 20;
  // if (!element.pattern) {
  //   element.pattern = '^\\b(\\w+\\b\\s*){1,20}$';
  // }
  //     break;
  // }

  // this.selectedCell.element = element;
  // this.editingElement = element;
  this.showElementSelector = false;
  this.updateCurrentTabGrid();
}
  closeModal() {
  this.showModal = false;
}


// DEVUELVE EL NOMBRE DEL CONTROL DE FORMULARIO PARA UNA CELDA
getControlName(tab: Tab | null, cell: any): string {
  const row = cell.row ?? 0;
  const col = cell.col ?? 0;

  const rawName = cell.element?.name;
  const cleaned = rawName?.trim().replace(/\s+/g, '_').toLowerCase();

  // SI NO HAY NOMBRE DEFINIDO, USAR FORMATO POR DEFECTO "campo_row_col"
  return cleaned && cleaned !== '' ? cleaned : `campo_${row}_${col}`;
}

// CAPITALIZA CADA PALABRA DE UN TEXTO
capitalizeWords(text: string): string {
  return text.replace(/\b\w/g, c => c.toUpperCase());
}


// ACTUALIZA EL GRID DE LA TAB ACTIVA CON LOS CAMBIOS DEL GRID VISIBLE
updateCurrentTabGrid() {
  if (this.currentTab) this.currentTab.grid = [...this.grid];
}

// ELIMINA EL ELEMENTO DE UNA CELDA
removeElementFromCell(cell: GridCell) {
  cell.element = undefined;
  this.updateCurrentTabGrid();
}

// SELECCIONA UN ELEMENTO PARA EDITARLO EN EL PANEL DE PROPIEDADES
selectElementForEditing(cell: GridCell) {
  this.editingElement = cell.element || null;
}

// ACTUALIZA EL ELEMENTO EDITADO DESDE EL PANEL DE PROPIEDADES
onEditingElementChange(updated: FormElement) {
  if (this.selectedCell) {
    this.selectedCell.element = updated;
    this.updateCurrentTabGrid();
  }
}

// ACTUALIZA EL ELEMENTO EDITADO DIRECTAMENTE (sin necesidad de selección de celda)
onElementChange(updated: FormElement) {
  if (this.editingElement) {
    Object.assign(this.editingElement, updated);
    this.updateCurrentTabGrid();
  }
}


// CARGA UN FORMULARIO EXISTENTE DESDE LA API PARA EDITARLO
cargarFormulario(id: number): void {
  this.formService.getFormById(id).subscribe(data => {
    this.formData = data;
    console.log('Form a editar:', this.formData);

    // CARGA LA CONFIGURACIÓN DEL FORMULARIO EN EL COMPONENTE
    this.loadFormConfiguration(this.formData.form.configuration);
    this.formTitle = this.formData.form.title;
    this.currentFormId = this.formData.form.id;

    // INICIALIZA EL FORMULARIO REACTIVO CON LOS CAMPOS
    this.initializeForm();
  });
}


// ACTUALIZA UN FORMULARIO YA EXISTENTE
updateForm() {
  if (!this.formTitle.trim()) {
    alert('Por favor, ingresa un título para el formulario');
    return;
  }

  if (!this.currentFormId) {
    alert('No se ha cargado ningún formulario para editar');
    return;
  }

  // VALIDACIÓN DE DIMENSIONES MÍNIMAS
  const tabConError = this.tabs.find(tab => tab.rows < 1 || tab.columns < 1);
  if (tabConError) {
    alert(`La sección "${tabConError.name}" tiene dimensiones inválidas (mínimo 1 fila y 1 columna).`);
    return;
  }

  // ACTUALIZA EL GRID DEL TAB ACTUAL
  if (this.currentTab) {
    this.currentTab.grid = [...this.grid];
  }

  const config = this.buildFormConfiguration();
  this.isLoading = true;
  this.saveStatus = 'Actualizando formulario...';

  // LLAMADA A API PARA ACTUALIZAR
  this.formService.updateForm(this.currentFormId, config).subscribe({
    next: (response) => {
      console.log('Formulario actualizado:', response);
      this.saveStatus = 'Formulario actualizado correctamente';
      this.isLoading = false;
      this.router.navigate(['/homeAdmin/verFormulario']);
    },
    error: (error) => {
      console.error('Error al actualizar formulario:', error);
      this.saveStatus = 'Error al actualizar el formulario';
      this.isLoading = false;
    }
  });
}


// DECIDE SI SE DEBE GUARDAR O ACTUALIZAR
saveOrUpdateForm() {
  if (this.currentFormId) {
    this.updateForm();
  } else {
    this.saveForm();
  }
}

}

// joinCell(cell: GridCell, rowSpan: number = 1, colSpan: number = 1) {
//   if (!this.currentTab) return;

//   const maxRow = cell.row + rowSpan - 1;
//   const maxCol = cell.col + colSpan - 1;

//   // Verifica que no se salga del grid
//   if (maxRow >= this.rows || maxCol >= this.columns) {
//     alert('La unión excede los límites de la cuadrícula');
//     return;
//   }

//   // Verifica que las celdas destino estén vacías
//   for (let r = cell.row; r <= maxRow; r++) {
//     for (let c = cell.col; c <= maxCol; c++) {
//       const target = this.grid[r][c];
//       if ((r !== cell.row || c !== cell.col) && (target.element || target.merged)) {
//         alert('Una o más celdas ya están ocupadas o unidas. No se puede hacer la unión.');
//         return;
//       }
//     }
//   }

//   // Marca las celdas como unidas (excepto la principal)
//   for (let r = cell.row; r <= maxRow; r++) {
//     for (let c = cell.col; c <= maxCol; c++) {
//       if (r === cell.row && c === cell.col) continue;
//       this.grid[r][c].merged = true;
//     }
//   }

//   // Marca el tamaño en la celda principal
//   cell.rowspan = rowSpan;
//   cell.colspan = colSpan;

//   // Actualiza la cuadrícula
//   this.updateCurrentTabGrid();
// }
// unmergeCell(cell: GridCell) {
//   if (!cell.rowspan || !cell.colspan) return;

//   for (let r = cell.row; r < cell.row + cell.rowspan; r++) {
//     for (let c = cell.col; c < cell.col + cell.colspan; c++) {
//       if (r === cell.row && c === cell.col) continue;
//       this.grid[r][c].merged = false;
//     }
//   }

//   cell.rowspan = 1;
//   cell.colspan = 1;

//   this.updateCurrentTabGrid();
// }



