<div class="chart-type-fields-page">
  <div class="header">
    <h2>
      <button class="btn btn-link back-button" (click)="goBack()">
        <cds-icon shape="arrow" direction="left"></cds-icon>
      </button>
      Dynamic Fields for {{ chartType?.name || 'Chart Type' }}
    </h2>
  </div>

  <!-- Error and Success Messages -->
  <div class="alert alert-danger" *ngIf="errorMessage">
    <button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
      <cds-icon shape="close"></cds-icon>
    </button>
    <div class="alert-item">
      <span class="alert-text">{{ errorMessage }}</span>
    </div>
  </div>

  <div class="alert alert-success" *ngIf="successMessage">
    <button type="button" class="close" aria-label="Close" (click)="successMessage = null">
      <cds-icon shape="close"></cds-icon>
    </button>
    <div class="alert-item">
      <span class="alert-text">{{ successMessage }}</span>
    </div>
  </div>

  <!-- Add Dynamic Field Form -->
  <div class="card" *ngIf="showAddForm">
    <div class="card-header">
      <h3>Add New Dynamic Field</h3>
    </div>
    <div class="card-block">
      <form clrForm (ngSubmit)="createDynamicField()" #addDynamicFieldForm="ngForm">
        <clr-input-container>
          <label>Field Name <span class="required">*</span></label>
          <input clrInput type="text" [(ngModel)]="newDynamicField.fieldName" name="fieldName" required />
          <clr-control-helper>Enter a unique name for the dynamic field (e.g., "chart-title", "x-axis-label")</clr-control-helper>
        </clr-input-container>

        <clr-input-container>
          <label>Field Label</label>
          <input clrInput type="text" [(ngModel)]="newDynamicField.fieldLabel" name="fieldLabel" />
          <clr-control-helper>User-friendly label shown in the configuration form</clr-control-helper>
        </clr-input-container>

        <clr-input-container>
          <label>Field Type</label>
          <input clrInput type="text" [(ngModel)]="newDynamicField.fieldType" name="fieldType" />
          <clr-control-helper>Type of the field (e.g., "string", "number", "boolean")</clr-control-helper>
        </clr-input-container>

        <clr-textarea-container>
          <label>Field Options</label>
          <textarea clrTextarea [(ngModel)]="newDynamicField.fieldOptions" name="fieldOptions" rows="3"></textarea>
          <clr-control-helper>JSON options for the field (for select fields, etc.)</clr-control-helper>
        </clr-textarea-container>

        <clr-input-container>
          <label>Sort Order</label>
          <input clrInput type="number" [(ngModel)]="newDynamicField.sortOrder" name="fieldSortOrder" />
          <clr-control-helper>Order in which fields appear in the form</clr-control-helper>
        </clr-input-container>

        <clr-checkbox-container>
          <label>Is Required</label>
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.isRequired" name="fieldIsRequired" />
            <label>Required</label>
          </clr-checkbox-wrapper>
          <clr-control-helper>Mark as required if this field must be filled</clr-control-helper>
        </clr-checkbox-container>

        <clr-checkbox-container>
          <label>Show in UI</label>
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.showInUi" name="fieldShowInUi" />
            <label>Visible</label>
          </clr-checkbox-wrapper>
          <clr-control-helper>Uncheck to hide this field in the configuration form</clr-control-helper>
        </clr-checkbox-container>

        <div class="form-actions">
          <button class="btn btn-primary" type="submit" [disabled]="!newDynamicField.fieldName || loadingState === ClrLoadingState.LOADING">
            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
            Create Dynamic Field
          </button>
          <button class="btn" type="button" (click)="showAddForm = false">Cancel</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Dynamic Fields Grid -->
  <div class="card">
    <div class="card-header">
      <div class="clr-row">
        <div class="clr-col">
          <h3>Dynamic Fields</h3>
        </div>
        <div class="clr-col" style="text-align: right;">
          <button class="btn btn-primary" (click)="showAddForm = true">
            <cds-icon shape="plus"></cds-icon> Add Dynamic Field
          </button>
        </div>
      </div>
    </div>

    <div class="card-block">
      <clr-datagrid [clrDgLoading]="loadingState === ClrLoadingState.LOADING">
        <clr-dg-column>Field Name</clr-dg-column>
        <clr-dg-column>Field Label</clr-dg-column>
        <clr-dg-column>Field Type</clr-dg-column>
        <clr-dg-column>Required</clr-dg-column>
        <clr-dg-column>Visible</clr-dg-column>
        <clr-dg-column>Sort Order</clr-dg-column>
        <clr-dg-column>Actions</clr-dg-column>

        <clr-dg-row *clrDgItems="let dynamicField of dynamicFields" [clrDgItem]="dynamicField">
          <clr-dg-cell>{{dynamicField.fieldName}}</clr-dg-cell>
          <clr-dg-cell>{{dynamicField.fieldLabel}}</clr-dg-cell>
          <clr-dg-cell>{{dynamicField.fieldType}}</clr-dg-cell>
          <clr-dg-cell>
            <span class="label" [class.label-success]="dynamicField.isRequired" [class.label-danger]="!dynamicField.isRequired">
              {{dynamicField.isRequired ? 'Yes' : 'No'}}
            </span>
          </clr-dg-cell>
          <clr-dg-cell>
            <span class="label" [class.label-success]="dynamicField.showInUi" [class.label-danger]="!dynamicField.showInUi">
              {{dynamicField.showInUi ? 'Yes' : 'No'}}
            </span>
          </clr-dg-cell>
          <clr-dg-cell>{{dynamicField.sortOrder}}</clr-dg-cell>
          <clr-dg-cell>
            <button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(dynamicField)" title="Edit">
              <cds-icon shape="pencil"></cds-icon>
            </button>
            <button class="btn btn-sm btn-icon" (click)="deleteDynamicField(dynamicField.id)" title="Delete">
              <cds-icon shape="trash"></cds-icon>
            </button>
          </clr-dg-cell>
        </clr-dg-row>

        <clr-dg-footer>
          {{dynamicFields.length}} dynamic field(s)
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </div>

  <!-- Edit Dynamic Field Form -->
  <div class="card" *ngIf="selectedDynamicField">
    <div class="card-header">
      <h3>Edit Dynamic Field</h3>
    </div>
    <div class="card-block">
      <form clrForm (ngSubmit)="updateDynamicField()" #editDynamicFieldForm="ngForm">
        <clr-input-container>
          <label>Field Name <span class="required">*</span></label>
          <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldName" name="editFieldName" required />
        </clr-input-container>

        <clr-input-container>
          <label>Field Label</label>
          <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldLabel" name="editFieldLabel" />
        </clr-input-container>

        <clr-input-container>
          <label>Field Type</label>
          <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldType" name="editFieldType" />
        </clr-input-container>

        <clr-textarea-container>
          <label>Field Options</label>
          <textarea clrTextarea [(ngModel)]="selectedDynamicField.fieldOptions" name="editFieldOptions" rows="3"></textarea>
        </clr-textarea-container>

        <clr-input-container>
          <label>Sort Order</label>
          <input clrInput type="number" [(ngModel)]="selectedDynamicField.sortOrder" name="editFieldSortOrder" />
        </clr-input-container>

        <clr-checkbox-container>
          <label>Is Required</label>
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.isRequired" name="editFieldIsRequired" />
            <label>Required</label>
          </clr-checkbox-wrapper>
        </clr-checkbox-container>

        <clr-checkbox-container>
          <label>Show in UI</label>
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.showInUi" name="editFieldShowInUi" />
            <label>Visible</label>
          </clr-checkbox-wrapper>
        </clr-checkbox-container>

        <div class="form-actions">
          <button class="btn btn-primary" type="submit" [disabled]="!selectedDynamicField.fieldName || loadingState === ClrLoadingState.LOADING">
            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
            Update Dynamic Field
          </button>
          <button class="btn" type="button" (click)="selectedDynamicField = null">Cancel</button>
        </div>
      </form>
    </div>
  </div>

  <div class="info-section">
    <h4>About Dynamic Fields</h4>
    <p>Dynamic fields define the configurable parameters for a chart type. Each field represents:</p>
    <ul>
      <li>A configuration option that can be set when creating or editing a chart</li>
      <li>Metadata like type, label, and validation rules</li>
      <li>Visibility and requirement settings</li>
    </ul>
    <p>Dynamic fields allow you to create flexible chart configurations that can be customized per instance.</p>
  </div>
</div>