<div class="chart-config-manager">
  <h2>Chart Configuration Manager</h2>
  
  <!-- Test message to verify component is loading -->
  <div class="alert alert-info">
    <div class="alert-item">
      <span class="alert-text">Chart Config Manager Component Loaded Successfully</span>
    </div>
  </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>
  
  <!-- Chart Types Section -->
  <clr-tab>
    <button clrTabLink>Chart Types</button>
    <clr-tab-content>
      <div class="card">
        <div class="card-header">
          <h3>Chart Types</h3>
          <button class="btn btn-sm btn-primary" (click)="showAddChartTypeForm = true">
            <cds-icon shape="plus"></cds-icon> Add Chart Type
          </button>
        </div>
        
        <!-- Add Chart Type Form -->
        <div class="card-block" *ngIf="showAddChartTypeForm">
          <app-chart-type-form 
            [chartType]="newChartType" 
            (save)="createChartType()" 
            (cancel)="showAddChartTypeForm = false">
          </app-chart-type-form>
        </div>
        
        <!-- Chart Types Table -->
        <div class="card-block">
          <clr-datagrid [clrDgLoading]="chartTypeLoadingState === ClrLoadingState.LOADING">
            <clr-dg-column>Name</clr-dg-column>
            <clr-dg-column>Display Name</clr-dg-column>
            <clr-dg-column>Description</clr-dg-column>
            <clr-dg-column>Status</clr-dg-column>
            <clr-dg-column>Created At</clr-dg-column>
            <clr-dg-column>Updated At</clr-dg-column>
            <clr-dg-column>Actions</clr-dg-column>
            
            <clr-dg-row *clrDgItems="let chartType of chartTypes" [clrDgItem]="chartType">
              <clr-dg-cell>{{chartType.name}}</clr-dg-cell>
              <clr-dg-cell>{{chartType.displayName}}</clr-dg-cell>
              <clr-dg-cell>{{chartType.description}}</clr-dg-cell>
              <clr-dg-cell>
                <span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
                  {{chartType.isActive ? 'Active' : 'Inactive'}}
                </span>
              </clr-dg-cell>
              <clr-dg-cell>{{chartType.createdAt | date:'short'}}</clr-dg-cell>
              <clr-dg-cell>{{chartType.updatedAt | date:'short'}}</clr-dg-cell>
              <clr-dg-cell>
                <button class="btn btn-sm btn-icon" (click)="selectChartTypeForEdit(chartType)" title="Edit" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
                  <clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                  <cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
                </button>
                <button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)" title="Delete" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
                  <clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                  <cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
                </button>
                <button class="btn btn-sm btn-icon" (click)="onChartTypeSelect(chartType)" title="View Details" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
                  <clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                  <cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="eye"></cds-icon>
                </button>
              </clr-dg-cell>
            </clr-dg-row>
            
            <clr-dg-footer>
              {{chartTypes.length}} chart type(s)
            </clr-dg-footer>
          </clr-datagrid>
        </div>
        
        <!-- Edit Chart Type Form -->
        <div class="card-block" *ngIf="selectedChartType">
          <h4>Edit Chart Type</h4>
          <app-chart-type-form 
            [chartType]="selectedChartType" 
            [isEdit]="true"
            (save)="updateChartType()" 
            (cancel)="selectedChartType = null">
          </app-chart-type-form>
        </div>
      </div>
    </clr-tab-content>
  </clr-tab>
  
  <!-- UI Components Section -->
  <clr-tab *ngIf="selectedChartType">
    <button clrTabLink>UI Components</button>
    <clr-tab-content>
      <div class="card">
        <div class="card-header">
          <h3>UI Components for {{selectedChartType?.name}}</h3>
          <button class="btn btn-sm btn-primary" (click)="showAddUiComponentForm = true">
            <cds-icon shape="plus"></cds-icon> Add UI Component
          </button>
        </div>
        
        <!-- Add UI Component Form -->
        <div class="card-block" *ngIf="showAddUiComponentForm">
          <app-ui-component-form 
            [uiComponent]="newUiComponent" 
            (save)="createUiComponent()" 
            (cancel)="showAddUiComponentForm = false">
          </app-ui-component-form>
        </div>
        
        <!-- UI Components Table -->
        <div class="card-block">
          <clr-datagrid [clrDgLoading]="uiComponentLoadingState === ClrLoadingState.LOADING">
            <clr-dg-column>Component Name</clr-dg-column>
            <clr-dg-column>Component Type</clr-dg-column>
            <clr-dg-column>Display Label</clr-dg-column>
            <clr-dg-column>Required</clr-dg-column>
            <clr-dg-column>Actions</clr-dg-column>
            
            <clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
              <clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
              <clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
              <clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
              <clr-dg-cell>
                <span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
                  {{uiComponent.isRequired ? 'Yes' : 'No'}}
                </span>
              </clr-dg-cell>
              <clr-dg-cell class="action-cell">
                <div class="action-buttons">
                  <button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)" title="Edit" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
                    <clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                    <cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="pencil" aria-label="Edit"></cds-icon>
                  </button>
                  <button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)" title="Delete" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
                    <clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                    <cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="trash" aria-label="Delete"></cds-icon>
                  </button>
                  <button class="btn btn-sm btn-icon" (click)="onUiComponentSelect(uiComponent)" title="View Properties" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
                    <clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                    <cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="eye" aria-label="View Properties"></cds-icon>
                  </button>
                </div>
              </clr-dg-cell>
            </clr-dg-row>
            
            <clr-dg-footer>
              {{uiComponents.length}} UI component(s)
            </clr-dg-footer>
          </clr-datagrid>
        </div>
        
        <!-- Edit UI Component Form -->
        <div class="card-block" *ngIf="selectedUiComponent">
          <h4>Edit UI Component</h4>
          <app-ui-component-form 
            [uiComponent]="selectedUiComponent" 
            [isEdit]="true"
            (save)="updateUiComponent()" 
            (cancel)="selectedUiComponent = null">
          </app-ui-component-form>
        </div>
      </div>
    </clr-tab-content>
  </clr-tab>
  
  <!-- Component Properties Section -->
  <clr-tab *ngIf="selectedUiComponent">
    <button clrTabLink>Component Properties</button>
    <clr-tab-content>
      <div class="card">
        <div class="card-header">
          <h3>Properties for {{selectedUiComponent?.componentName}}</h3>
          <button class="btn btn-sm btn-primary" (click)="showAddComponentPropertyForm = true">
            <cds-icon shape="plus"></cds-icon> Add Property
          </button>
        </div>
        
        <!-- Add Component Property Form -->
        <div class="card-block" *ngIf="showAddComponentPropertyForm">
          <app-component-property-form 
            [componentProperty]="newComponentProperty" 
            (save)="createComponentProperty()" 
            (cancel)="showAddComponentPropertyForm = false">
          </app-component-property-form>
        </div>
        
        <!-- Component Properties Table -->
        <div class="card-block">
          <clr-datagrid [clrDgLoading]="componentPropertyLoadingState === ClrLoadingState.LOADING">
            <clr-dg-column>Property Name</clr-dg-column>
            <clr-dg-column>Property Value</clr-dg-column>
            <clr-dg-column>Property Type</clr-dg-column>
            <clr-dg-column>Created At</clr-dg-column>
            <clr-dg-column>Updated At</clr-dg-column>
            <clr-dg-column>Actions</clr-dg-column>
            
            <clr-dg-row *clrDgItems="let property of componentProperties" [clrDgItem]="property">
              <clr-dg-cell>{{property.propertyName}}</clr-dg-cell>
              <clr-dg-cell>{{property.propertyValue}}</clr-dg-cell>
              <clr-dg-cell>{{property.propertyType}}</clr-dg-cell>
              <clr-dg-cell>{{property.createdAt | date:'short'}}</clr-dg-cell>
              <clr-dg-cell>{{property.updatedAt | date:'short'}}</clr-dg-cell>
              <clr-dg-cell>
                <button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)" title="Edit" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
                  <clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                  <cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
                </button>
                <button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)" title="Delete" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
                  <clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                  <cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
                </button>
              </clr-dg-cell>
            </clr-dg-row>
            
            <clr-dg-footer>
              {{componentProperties.length}} propertie(s)
            </clr-dg-footer>
          </clr-datagrid>
        </div>
        
        <!-- Edit Component Property Form -->
        <div class="card-block" *ngIf="selectedComponentProperty">
          <h4>Edit Component Property</h4>
          <app-component-property-form 
            [componentProperty]="selectedComponentProperty" 
            [isEdit]="true"
            (save)="updateComponentProperty()" 
            (cancel)="selectedComponentProperty = null">
          </app-component-property-form>
        </div>
      </div>
    </clr-tab-content>
  </clr-tab>
  
  <!-- Chart Templates Section -->
  <clr-tab *ngIf="selectedChartType">
    <button clrTabLink>Chart Templates</button>
    <clr-tab-content>
      <div class="card">
        <div class="card-header">
          <h3>Templates for {{selectedChartType?.name}}</h3>
          <button class="btn btn-sm btn-primary" (click)="showAddChartTemplateForm = true">
            <cds-icon shape="plus"></cds-icon> Add Template
          </button>
        </div>
        
        <!-- Add Chart Template Form -->
        <div class="card-block" *ngIf="showAddChartTemplateForm">
          <app-chart-template-form 
            [chartTemplate]="newChartTemplate" 
            (save)="createChartTemplate()" 
            (cancel)="showAddChartTemplateForm = false">
          </app-chart-template-form>
        </div>
        
        <!-- Chart Templates Table -->
        <div class="card-block">
          <clr-datagrid [clrDgLoading]="chartTemplateLoadingState === ClrLoadingState.LOADING">
            <clr-dg-column>Template Name</clr-dg-column>
            <clr-dg-column>Is Default</clr-dg-column>
            <clr-dg-column>Created At</clr-dg-column>
            <clr-dg-column>Updated At</clr-dg-column>
            <clr-dg-column>Actions</clr-dg-column>
            
            <clr-dg-row *clrDgItems="let template of chartTemplates" [clrDgItem]="template">
              <clr-dg-cell>{{template.templateName}}</clr-dg-cell>
              <clr-dg-cell>
                <span class="label" [class.label-success]="template.isDefault" [class.label-danger]="!template.isDefault">
                  {{template.isDefault ? 'Yes' : 'No'}}
                </span>
              </clr-dg-cell>
              <clr-dg-cell>{{template.createdAt | date:'short'}}</clr-dg-cell>
              <clr-dg-cell>{{template.updatedAt | date:'short'}}</clr-dg-cell>
              <clr-dg-cell>
                <button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(template)" title="Edit" [disabled]="chartTemplateLoadingState === ClrLoadingState.LOADING">
                  <clr-spinner *ngIf="chartTemplateLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                  <cds-icon *ngIf="chartTemplateLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
                </button>
                <button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(template.id)" title="Delete" [disabled]="chartTemplateLoadingState === ClrLoadingState.LOADING">
                  <clr-spinner *ngIf="chartTemplateLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                  <cds-icon *ngIf="chartTemplateLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
                </button>
              </clr-dg-cell>
            </clr-dg-row>
            
            <clr-dg-footer>
              {{chartTemplates.length}} template(s)
            </clr-dg-footer>
          </clr-datagrid>
        </div>
        
        <!-- Edit Chart Template Form -->
        <div class="card-block" *ngIf="selectedChartTemplate">
          <h4>Edit Chart Template</h4>
          <app-chart-template-form 
            [chartTemplate]="selectedChartTemplate" 
            [isEdit]="true"
            (save)="updateChartTemplate()" 
            (cancel)="selectedChartTemplate = null">
          </app-chart-template-form>
        </div>
      </div>
    </clr-tab-content>
  </clr-tab>
  
  <!-- Dynamic Fields Section -->
  <clr-tab *ngIf="selectedChartType">
    <button clrTabLink>Dynamic Fields</button>
    <clr-tab-content>
      <div class="card">
        <div class="card-header">
          <h3>Dynamic Fields for {{selectedChartType?.name}}</h3>
          <button class="btn btn-sm btn-primary" (click)="showAddDynamicFieldForm = true">
            <cds-icon shape="plus"></cds-icon> Add Field
          </button>
        </div>
        
        <!-- Add Dynamic Field Form -->
        <div class="card-block" *ngIf="showAddDynamicFieldForm">
          <form clrForm>
            <clr-input-container>
              <label>Field Name <span class="required">*</span></label>
              <input clrInput type="text" [(ngModel)]="newDynamicField.fieldName" name="fieldName" required />
            </clr-input-container>
            
            <clr-input-container>
              <label>Field Label</label>
              <input clrInput type="text" [(ngModel)]="newDynamicField.fieldLabel" name="fieldLabel" />
            </clr-input-container>
            
            <clr-input-container>
              <label>Field Type</label>
              <input clrInput type="text" [(ngModel)]="newDynamicField.fieldType" name="fieldType" />
            </clr-input-container>
            
            <clr-textarea-container>
              <label>Field Options</label>
              <textarea clrTextarea [(ngModel)]="newDynamicField.fieldOptions" name="fieldOptions"></textarea>
            </clr-textarea-container>
            
            <clr-input-container>
              <label>Sort Order</label>
              <input clrInput type="number" [(ngModel)]="newDynamicField.sortOrder" name="fieldSortOrder" />
            </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-checkbox-container>
            
            <clr-checkbox-container>
              <label>Show in UI</label>
              <clr-checkbox-wrapper>
                <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.showInUi" name="fieldShowInUi" />
                <label>Show in UI</label>
              </clr-checkbox-wrapper>
            </clr-checkbox-container>
            
            <div class="form-actions">
              <button class="btn btn-primary" (click)="createDynamicField()" [disabled]="!newDynamicField.fieldName || dynamicFieldLoadingState === ClrLoadingState.LOADING">
                <clr-spinner *ngIf="dynamicFieldLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                Save
              </button>
              <button class="btn" (click)="showAddDynamicFieldForm = false">Cancel</button>
            </div>
          </form>
        </div>
        
        <!-- Dynamic Fields Table -->
        <div class="card-block">
          <clr-datagrid [clrDgLoading]="dynamicFieldLoadingState === 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>Show in UI</clr-dg-column>
            <clr-dg-column>Sort Order</clr-dg-column>
            <clr-dg-column>Created At</clr-dg-column>
            <clr-dg-column>Updated At</clr-dg-column>
            <clr-dg-column>Actions</clr-dg-column>
            
            <clr-dg-row *clrDgItems="let field of dynamicFields" [clrDgItem]="field">
              <clr-dg-cell>{{field.fieldName}}</clr-dg-cell>
              <clr-dg-cell>{{field.fieldLabel}}</clr-dg-cell>
              <clr-dg-cell>{{field.fieldType}}</clr-dg-cell>
              <clr-dg-cell>
                <span class="label" [class.label-success]="field.isRequired" [class.label-danger]="!field.isRequired">
                  {{field.isRequired ? 'Yes' : 'No'}}
                </span>
              </clr-dg-cell>
              <clr-dg-cell>
                <span class="label" [class.label-success]="field.showInUi" [class.label-danger]="!field.showInUi">
                  {{field.showInUi ? 'Yes' : 'No'}}
                </span>
              </clr-dg-cell>
              <clr-dg-cell>{{field.sortOrder}}</clr-dg-cell>
              <clr-dg-cell>{{field.createdAt | date:'short'}}</clr-dg-cell>
              <clr-dg-cell>{{field.updatedAt | date:'short'}}</clr-dg-cell>
              <clr-dg-cell>
                <button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(field)" title="Edit">
                  <cds-icon shape="pencil"></cds-icon>
                </button>
                <button class="btn btn-sm btn-icon" (click)="deleteDynamicField(field.id)" title="Delete">
                  <cds-icon shape="trash"></cds-icon>
                </button>
              </clr-dg-cell>
            </clr-dg-row>
            
            <clr-dg-footer>
              {{dynamicFields.length}} field(s)
            </clr-dg-footer>
          </clr-datagrid>
        </div>
        
        <!-- Edit Dynamic Field Form -->
        <div class="card-block" *ngIf="selectedDynamicField">
          <h4>Edit Dynamic Field</h4>
          <form clrForm>
            <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"></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>Show in UI</label>
              </clr-checkbox-wrapper>
            </clr-checkbox-container>
            
            <div class="form-actions">
              <button class="btn btn-primary" (click)="updateDynamicField()" [disabled]="!selectedDynamicField.fieldName || dynamicFieldLoadingState === ClrLoadingState.LOADING">
                <clr-spinner *ngIf="dynamicFieldLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                Update
              </button>
              <button class="btn" (click)="selectedDynamicField = null">Cancel</button>
            </div>
          </form>
        </div>
      </div>
    </clr-tab-content>
  </clr-tab>
</div>