import { Component, Input, Output, EventEmitter } from '@angular/core';

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

@Component({
  selector: 'app-configuration-panel',
  templateUrl: './configuration-panel.component.html',
  styleUrls: ['./configuration-panel.component.css']
})
export class ConfigurationPanelComponent {
  @Input() formTitle = '';
  @Input() rows = 3;
  @Input() columns = 3;
  @Input() showTooltip = '';
  @Input() tabs: Tab[] = [];
  @Input() currentTab: Tab | null = null;

  @Output() formTitleChange = new EventEmitter<string>();
  @Output() rowsChange = new EventEmitter<number>();
  @Output() columnsChange = new EventEmitter<number>();
  @Output() showTooltipChange = new EventEmitter<string>();
  @Output() generateClick = new EventEmitter<void>();
  @Output() addTabClick = new EventEmitter<void>();
  @Output() removeTabClick = new EventEmitter<number>();
  @Output() gridConfigChange = new EventEmitter<void>();
  @Output() tabDimensionsChange = new EventEmitter<{ tab: Tab, rows: number, columns: number }>();

  showHelp(field: string) {
    this.showTooltipChange.emit(this.showTooltip === field ? '' : field);
  }

 onRowsChange(value: number) {
  const validValue = this.validateMin(value);
  this.rowsChange.emit(validValue);
  this.gridConfigChange.emit();
}

onColumnsChange(value: number) {
  const validValue = this.validateMin(value);
  this.columnsChange.emit(validValue);
  this.gridConfigChange.emit();
}


 onTabRowsChange(tab: Tab, value: number) {
  const validValue = this.validateMin(value);

  if (validValue < tab.rows && this.checkIfElementsWillBeLost(tab, validValue, tab.columns)) {
    if (!confirm('Al reducir las filas, se perderán algunos elementos. ¿Deseas continuar?')) return;
  }

  this.tabDimensionsChange.emit({ tab, rows: validValue, columns: tab.columns });
}

onTabColumnsChange(tab: Tab, value: number) {
  const validValue = this.validateMin(value);

  if (validValue < tab.columns && this.checkIfElementsWillBeLost(tab, tab.rows, validValue)) {
    if (!confirm('Al reducir las columnas, se perderán algunos elementos. ¿Deseas continuar?')) return;
  }

  this.tabDimensionsChange.emit({ tab, rows: tab.rows, columns: validValue });
}


  private isValidDimension(value: number): boolean {
    return value >= 1 && value <= 20;
  }

  private checkIfElementsWillBeLost(tab: Tab, newRows: number, newColumns: number): boolean {
    return tab.grid?.some((row, r) =>
      row?.some((cell, c) => cell?.element && (r >= newRows || c >= newColumns))
    ) ?? false;
  }

  addTab() {
    this.addTabClick.emit();
  }

  removeTab(index: number) {
    this.removeTabClick.emit(index);
  }

  onFormTitleChange(value: string) {
    this.formTitleChange.emit(value);
  }

  generateConfiguration() {
    this.generateClick.emit();
  }

  getActiveTab(): Tab | null {
    return this.currentTab;
  }

  isTabActive(tab: Tab): boolean {
    return this.currentTab?.id === tab.id;
  }

  getElementsCount(tab: Tab): number {
    return tab.grid?.flat().filter(cell => cell?.element).length ?? 0;
  }
  validateMin(value: number): number {
  return value < 1 ? 1 : value;
}
forceMinValue(tab: Tab, field: 'rows' | 'columns') {
  if (tab[field] < 1) {
    tab[field] = 1;
    this.tabDimensionsChange.emit({ tab, rows: tab.rows, columns: tab.columns });
  }
}


}
