<div class="centrar">
  <div class="fondo" [style.background-color]="color">
    <p class="content" [style.color]="textColor">Creación de formularios</p>
  </div>
</div>

<div class="container-main" [formGroup]="form">

  <!-- Panel de configuración general -->
  <div class="container-formConfig">
    <app-configuration-panel
      [formTitle]="formTitle"
      [rows]="rows"
      [columns]="columns"
      [showTooltip]="showTooltip"
      [tabs]="tabs"
      [currentTab]="currentTab"
      (formTitleChange)="onFormTitleChange($event)"
      (rowsChange)="onRowsChange($event)"
      (columnsChange)="onColumnsChange($event)"
      (showTooltipChange)="onShowTooltipChange($event)"
      (generateClick)="saveOrUpdateForm()"
      (addTabClick)="addTab()"
      (removeTabClick)="removeTab()"
      (gridConfigChange)="buildGrid()"
      (tabDimensionsChange)="onTabDimensionsChange($event)">
    </app-configuration-panel>
    <!-- Selector de tipos de campo -->
    <div *ngIf="showElementSelector && selectedCell" class="selector">
      <p>Selecciona un tipo de campo para agregar en posición {{ selectedCell.row + 1 }}, {{ selectedCell.col + 1 }} - {{ currentTab?.name }}</p>
      <div class="element-buttons">
        <button *ngFor="let el of availableElements" (click)="addElementToCell(el)">
          {{ el.label }}
        </button>
      </div>
    </div>
  </div>

  <!-- Contenedor principal con panel izquierdo y formulario -->
  <div class="main-content">

    <!-- Panel de propiedades del campo seleccionado - Movido a la izquierda -->


    <!-- Vista previa del formulario -->
    <div class="container-form">
      <div class="title-form">Vista Previa del Formulario</div>

      <!-- Navegación de tabs -->
      <div class="tabs-navigation" *ngIf="tabs.length">
        <div class="tab-header">
          <div *ngFor="let tab of tabs; let i = index"
               class="tab-item"
               [class.active]="tab.active"
               (click)="switchToTab(tab)">

            <input
              #tabInput
              type="text"
              class="tab-name-input"
              [value]="tab.name"
              (blur)="updateTabName(tab, tabInput.value)"
              (keyup.enter)="updateTabName(tab, tabInput.value)">

            <button *ngIf="tabs.length > 1"
                    class="tab-close-btn"
                    (click)="removeTab(); $event.stopPropagation()">
              &times;
            </button>
          </div>
        </div>
      </div>

      <!-- Cuadrícula de campos -->
      <div class="form-grid" [style.grid-template-columns]="'repeat(' + columns + ', 1fr)'">
        <div *ngFor="let row of grid; let i = index" class="grid-row">
          <div *ngFor="let cell of row; let j = index"
               class="grid-cell"
               [class.selected]="cell.selected"
               [class.has-element]="cell.element"
               (click)="selectCell(cell)"
               (dblclick)="selectElementForEditing(cell)">

            <div *ngIf="cell.element" class="cell-element">
              <label>{{ cell.element.label }}</label>

              <ng-container [ngSwitch]="cell.element.type">
                <input *ngSwitchCase="'text'" type="text" class="form__input"
                  [placeholder]="cell.element.placeholder"
                  [formControlName]="getSafeControlName(cell, i, j)">

                <input *ngSwitchCase="'number'" type="number" class="form__input"
                  [placeholder]="cell.element.placeholder"
                  [formControlName]="getSafeControlName(cell, i, j)">

                <input *ngSwitchCase="'email'" type="email" class="form__input"
                  [placeholder]="cell.element.placeholder"
                  [formControlName]="getSafeControlName(cell, i, j)">

                <input *ngSwitchCase="'date'" type="date" class="form__input"
                  [formControlName]="getSafeControlName(cell, i, j)">

                <textarea *ngSwitchCase="'textarea'" class="form__textarea"
                  [placeholder]="cell.element.placeholder"
                  [formControlName]="getSafeControlName(cell, i, j)"></textarea>

                <select *ngSwitchCase="'select'" class="form__select"
                  [formControlName]="getSafeControlName(cell, i, j)">
                  <option *ngFor="let option of cell.element.options">{{ option }}</option>
                </select>

                <div *ngSwitchCase="'radio'" class="form__radio-group">
                  <label *ngFor="let option of cell.element.options">
                    <input type="radio"
                      [formControlName]="getSafeControlName(cell, i, j)"
                      [value]="option"
                      [formControlName]="getSafeControlName(cell, i, j)">
                    {{ option }}
                  </label>
                </div>

                <label *ngSwitchCase="'checkbox'" class="form__checkbox">
                  <input type="checkbox" [formControlName]="getSafeControlName(cell, i, j)">
                  {{ cell.element.label }}
                </label>
              </ng-container>

              <button class="remove-btn" (click)="removeElementFromCell(cell); $event.stopPropagation()">
                &times;
              </button>
            </div>

            <div *ngIf="!cell.element" class="cell-placeholder">
              <span>Posición {{ i + 1 }},{{ j + 1 }}</span>
              <small>Haz clic para agregar un campo</small>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <!-- Panel de propiedades del campo seleccionado -->
    <div class="container-formPropiedades">
      <app-properties-panel
        [element]="editingElement"
        (elementChange)="onEditingElementChange($event)"
        (closePanel)="editingElement = null">
      </app-properties-panel>
    </div>
</div>
