<div class="edit-chart-type-page">
  <div class="header">
    <h2>Edit Chart Type</h2>
  </div>

  <!-- Loading State -->
  <div *ngIf="loadingState === ClrLoadingState.LOADING" class="loading-spinner">
    <clr-spinner clrMedium></clr-spinner>
    <span>Loading chart type...</span>
  </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 Type Form -->
  <div class="card" *ngIf="chartType && loadingState !== ClrLoadingState.LOADING">
    <div class="card-header">
      <div class="chart-type-header">
        <h3>{{ chartType.name }}</h3>
        <span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
          {{ chartType.isActive ? 'Active' : 'Inactive' }}
        </span>
      </div>
    </div>
    <div class="card-block">
      <form clrForm (ngSubmit)="updateChartType()" #editChartTypeForm="ngForm">
        <clr-input-container>
          <label>Name <span class="required">*</span></label>
          <input clrInput type="text" [(ngModel)]="chartType.name" name="chartTypeName" required />
          <clr-control-helper>Enter a unique name for the chart type (e.g., "line-chart", "bar-chart")</clr-control-helper>
        </clr-input-container>

        <clr-input-container>
          <label>Display Name</label>
          <input clrInput type="text" [(ngModel)]="chartType.displayName" name="chartTypeDisplayName" />
          <clr-control-helper>This is the user-friendly name shown in the UI</clr-control-helper>
        </clr-input-container>

        <clr-textarea-container>
          <label>Description</label>
          <textarea clrTextarea [(ngModel)]="chartType.description" name="chartTypeDescription" rows="3"></textarea>
          <clr-control-helper>Provide a detailed description of this chart type and when to use it</clr-control-helper>
        </clr-textarea-container>

        <clr-checkbox-container>
          <label>Is Active</label>
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [(ngModel)]="chartType.isActive" name="chartTypeIsActive" />
            <label>Active</label>
          </clr-checkbox-wrapper>
          <clr-control-helper>Deactivate chart types that should not be available for selection</clr-control-helper>
        </clr-checkbox-container>

        <div class="form-actions">
          <button class="btn btn-primary" type="submit" [disabled]="!chartType.name || loadingState === ClrLoadingState.LOADING">
            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
            Update Chart Type
          </button>
          <button class="btn" type="button" (click)="onCancel()">Cancel</button>
          <button class="btn btn-danger" type="button" (click)="onDelete()" style="margin-left: auto;">
            <cds-icon shape="trash"></cds-icon> Delete
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Related Entities Management -->
  <div class="card" *ngIf="chartType && loadingState !== ClrLoadingState.LOADING">
    <div class="card-header">
      <h3>Related Configuration</h3>
    </div>
    <div class="card-block">
      <div class="related-entities-grid">
        <div class="entity-card">
          <div class="entity-header">
            <cds-icon shape="view-list" size="24"></cds-icon>
            <h4>UI Components</h4>
          </div>
          <p>Manage the UI components that define the configuration form for this chart type.</p>
          <button class="btn btn-sm btn-link" [routerLink]="['/cns-portal/dashboardbuilder/chart-types', chartType.id, 'ui-components']">
            Manage UI Components
          </button>
        </div>
        
        <div class="entity-card">
          <div class="entity-header">
            <cds-icon shape="template" size="24"></cds-icon>
            <h4>Chart Templates</h4>
          </div>
          <p>Manage the templates that define how this chart type is rendered.</p>
          <button class="btn btn-sm btn-link" [routerLink]="['/cns-portal/dashboardbuilder/chart-types', chartType.id, 'templates']">
            Manage Templates
          </button>
        </div>
        
        <div class="entity-card">
          <div class="entity-header">
            <cds-icon shape="form" size="24"></cds-icon>
            <h4>Dynamic Fields</h4>
          </div>
          <p>Manage the dynamic fields that capture specific configuration parameters.</p>
          <button class="btn btn-sm btn-link" [routerLink]="['/cns-portal/dashboardbuilder/chart-types', chartType.id, 'fields']">
            Manage Fields
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Chart Type Details -->
  <div class="card" *ngIf="chartType && loadingState !== ClrLoadingState.LOADING">
    <div class="card-header">
      <h3>Chart Type Details</h3>
    </div>
    <div class="card-block">
      <div class="details-grid">
        <div class="detail-item">
          <label>ID:</label>
          <span>{{ chartType.id }}</span>
        </div>
        <div class="detail-item">
          <label>Created At:</label>
          <span>{{ chartType.createdAt ? (chartType.createdAt | date:'medium') : 'N/A' }}</span>
        </div>
        <div class="detail-item">
          <label>Updated At:</label>
          <span>{{ chartType.updatedAt ? (chartType.updatedAt | date:'medium') : 'N/A' }}</span>
        </div>
      </div>
    </div>
  </div>

  <div class="info-section">
    <h4>About Chart Types</h4>
    <p>Chart types define the different visualization options available in the dashboard builder. Each chart type can have:</p>
    <ul>
      <li>Associated UI components that define the configuration form</li>
      <li>Templates that define how the chart is rendered</li>
      <li>Dynamic fields that capture specific configuration parameters</li>
    </ul>
    <p>After creating a chart type, you can configure its components, templates, and fields using the management links above.</p>
  </div>
</div>