<div class="chart-type-ui-components-page">
  <div class="header">
    <h2>
      <button class="btn btn-link back-button" (click)="goBack()">
        <cds-icon shape="arrow" direction="left"></cds-icon>
      </button>
      UI Components 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 UI Component Form -->
  <div class="card" *ngIf="showAddForm">
    <div class="card-header">
      <h3>Add New UI Component</h3>
    </div>
    <div class="card-block">
      <form clrForm (ngSubmit)="createUiComponent()" #addUiComponentForm="ngForm">
        <clr-input-container>
          <label>Component Name <span class="required">*</span></label>
          <input clrInput type="text" [(ngModel)]="newUiComponent.componentName" name="componentName" required />
          <clr-control-helper>Enter a unique name for the UI component (e.g., "title-config", "axis-config")</clr-control-helper>
        </clr-input-container>

        <clr-input-container>
          <label>Component Type</label>
          <input clrInput type="text" [(ngModel)]="newUiComponent.componentType" name="componentType" />
          <clr-control-helper>Type of the component (e.g., "input", "select", "checkbox")</clr-control-helper>
        </clr-input-container>

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

        <clr-input-container>
          <label>Placeholder</label>
          <input clrInput type="text" [(ngModel)]="newUiComponent.placeholder" name="placeholder" />
          <clr-control-helper>Placeholder text for input fields</clr-control-helper>
        </clr-input-container>

        <clr-input-container>
          <label>Sort Order</label>
          <input clrInput type="number" [(ngModel)]="newUiComponent.sortOrder" name="sortOrder" />
          <clr-control-helper>Order in which components 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)]="newUiComponent.isRequired" name="isRequired" />
            <label>Required</label>
          </clr-checkbox-wrapper>
          <clr-control-helper>Mark as required if this component must be filled</clr-control-helper>
        </clr-checkbox-container>

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

  <!-- UI Components Grid -->
  <div class="card">
    <div class="card-header">
      <div class="clr-row">
        <div class="clr-col">
          <h3>UI Components</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 UI Component
          </button>
        </div>
      </div>
    </div>

    <div class="card-block">
      <clr-datagrid [clrDgLoading]="loadingState === 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]="loadingState === ClrLoadingState.LOADING">
                <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                <cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="pencil" aria-label="Edit"></cds-icon>
              </button>
              <button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)" title="Delete" [disabled]="loadingState === ClrLoadingState.LOADING">
                <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                <cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="trash" aria-label="Delete"></cds-icon>
              </button>
              <button class="btn btn-sm btn-icon btn-primary" (click)="onViewComponentProperties(uiComponent)" title="View Properties" [disabled]="loadingState === ClrLoadingState.LOADING">
                <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
                <cds-icon *ngIf="loadingState !== 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>
  </div>

  <!-- Edit UI Component Form -->
  <div class="card" *ngIf="selectedUiComponent && !showAddComponentPropertyForm && !selectedComponentProperty">
    <div class="card-header">
      <h3>Edit UI Component</h3>
    </div>
    <div class="card-block">
      <form clrForm (ngSubmit)="updateUiComponent()" #editUiComponentForm="ngForm">
        <clr-input-container>
          <label>Component Name <span class="required">*</span></label>
          <input clrInput type="text" [(ngModel)]="selectedUiComponent.componentName" name="editComponentName" required />
        </clr-input-container>

        <clr-input-container>
          <label>Component Type</label>
          <input clrInput type="text" [(ngModel)]="selectedUiComponent.componentType" name="editComponentType" />
        </clr-input-container>

        <clr-input-container>
          <label>Display Label</label>
          <input clrInput type="text" [(ngModel)]="selectedUiComponent.displayLabel" name="editDisplayLabel" />
        </clr-input-container>

        <clr-input-container>
          <label>Placeholder</label>
          <input clrInput type="text" [(ngModel)]="selectedUiComponent.placeholder" name="editPlaceholder" />
        </clr-input-container>

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

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

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

  <!-- Component Properties Section -->
  <div class="card" *ngIf="selectedUiComponent">
    <div class="card-header">
      <div class="clr-row">
        <div class="clr-col">
          <h3>Properties for {{selectedUiComponent?.componentName}}</h3>
        </div>
        <div class="clr-col" style="text-align: right;">
          <button class="btn btn-primary" (click)="showAddComponentPropertyForm = true">
            <cds-icon shape="plus"></cds-icon> Add Property
          </button>
        </div>
      </div>
    </div>

    <!-- Add Component Property Form -->
    <div class="card-block" *ngIf="showAddComponentPropertyForm">
      <form clrForm (ngSubmit)="createComponentProperty()" #addComponentPropertyForm="ngForm">
        <clr-input-container>
          <label>Property Name <span class="required">*</span></label>
          <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyName" name="propertyName" required />
        </clr-input-container>
        
        <clr-input-container>
          <label>Property Value</label>
          <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyValue" name="propertyValue" />
        </clr-input-container>
        
        <clr-input-container>
          <label>Property Type</label>
          <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyType" name="propertyType" />
        </clr-input-container>
        
        <div class="form-actions">
          <button class="btn btn-primary" type="submit" [disabled]="!newComponentProperty.propertyName || componentPropertyLoadingState === ClrLoadingState.LOADING">
            <clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
            Create Property
          </button>
          <button class="btn" type="button" (click)="showAddComponentPropertyForm = false">Cancel</button>
        </div>
      </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>
      <form clrForm (ngSubmit)="updateComponentProperty()" #editComponentPropertyForm="ngForm">
        <clr-input-container>
          <label>Property Name <span class="required">*</span></label>
          <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyName" name="editPropertyName" required />
        </clr-input-container>
        
        <clr-input-container>
          <label>Property Value</label>
          <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyValue" name="editPropertyValue" />
        </clr-input-container>
        
        <clr-input-container>
          <label>Property Type</label>
          <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyType" name="editPropertyType" />
        </clr-input-container>
        
        <div class="form-actions">
          <button class="btn btn-primary" type="submit" [disabled]="!selectedComponentProperty.propertyName || componentPropertyLoadingState === ClrLoadingState.LOADING">
            <clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
            Update Property
          </button>
          <button class="btn" type="button" (click)="selectedComponentProperty = null">Cancel</button>
        </div>
      </form>
    </div>
  </div>

  <div class="info-section">
    <h4>About UI Components</h4>
    <p>UI components define the configuration form elements for a chart type. Each component represents:</p>
    <ul>
      <li>A form field that appears when configuring a chart of this type</li>
      <li>Metadata like label, placeholder, and validation rules</li>
      <li>An order in which they appear in the configuration form</li>
    </ul>
    <p>After creating UI components, you can define their properties using the "View Properties" button.</p>
  </div>
</div>