<div class="api-dialog">
  <!-- 对话框标题 -->
  <div class="dialog-header">
    <h2 class="dialog-title">{{ dialogTitle }}</h2>
    <button mat-icon-button class="close-btn" (click)="onCancel()">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </div>

  <!-- 表单内容 -->
  <div class="dialog-content">
    <form class="api-form">
      <!-- 基本信息标签页 -->
      <div class="form-section">
        <h3 class="section-title">基本信息</h3>
        
        <!-- 集成名称 -->
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>集成名称 *</mat-label>
            <input matInput type="text" [(ngModel)]="integration.name" name="name"
                   placeholder="请输入集成名称">
            <mat-icon matSuffix>label</mat-icon>
            <mat-error *ngIf="errors['name']">{{ errors['name'] }}</mat-error>
          </mat-form-field>
        </div>

        <!-- 集成类型 -->
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>集成类型 *</mat-label>
            <mat-select [(ngModel)]="integration.type" name="type">
              <mat-option value="">请选择集成类型</mat-option>
              <mat-option *ngFor="let type of integrationTypes" [value]="type">
                {{ type }}
              </mat-option>
            </mat-select>
            <mat-icon matSuffix>category</mat-icon>
            <mat-error *ngIf="errors['type']">{{ errors['type'] }}</mat-error>
          </mat-form-field>
        </div>

        <!-- API端点 -->
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>API端点 *</mat-label>
            <input matInput type="text" [(ngModel)]="integration.endpoint" name="endpoint"
                   placeholder="例如：https://api.example.com/v1">
            <mat-icon matSuffix>public</mat-icon>
            <mat-error *ngIf="errors['endpoint']">{{ errors['endpoint'] }}</mat-error>
          </mat-form-field>
        </div>

        <!-- 认证方式 -->
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>认证方式 *</mat-label>
            <mat-select [(ngModel)]="integration.authentication" name="authentication">
              <mat-option value="">请选择认证方式</mat-option>
              <mat-option *ngFor="let method of authenticationMethods" [value]="method">
                {{ method }}
              </mat-option>
            </mat-select>
            <mat-icon matSuffix>lock</mat-icon>
            <mat-error *ngIf="errors['authentication']">{{ errors['authentication'] }}</mat-error>
          </mat-form-field>
        </div>

        <!-- 描述 -->
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>描述 *</mat-label>
            <textarea matInput [(ngModel)]="integration.description" name="description"
                      placeholder="请输入集成描述" rows="3"></textarea>
            <mat-icon matSuffix>description</mat-icon>
            <mat-error *ngIf="errors['description']">{{ errors['description'] }}</mat-error>
          </mat-form-field>
        </div>

        <!-- 激活状态 -->
        <div class="form-group">
          <div class="toggle-wrapper">
            <mat-slide-toggle
              [checked]="integration.status === 'active'"
              (change)="integration.status = $event.checked ? 'active' : 'inactive'"
              class="active-toggle">
              <span class="toggle-label">启用集成</span>
            </mat-slide-toggle>
          </div>
        </div>
      </div>

      <!-- 配置详情标签页 -->
      <div class="form-section">
        <h3 class="section-title">配置详情</h3>
        
        <!-- 配置字段说明 -->
        <div class="config-description">
          <p>添加API集成所需的配置参数。根据不同的认证方式，可能需要配置API密钥、OAuth客户端信息等。</p>
        </div>

        <!-- 配置字段列表 -->
        <div class="config-fields">
          <div *ngFor="let key of configKeys; let i = index" class="config-field-item">
            <div class="config-field-header">
              <span class="field-index">配置项 {{ i + 1 }}</span>
              <button mat-icon-button class="remove-btn"
                      title="删除配置项"
                      (click)="removeConfigField(i)">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="3,6 5,6 21,6"></polyline>
                  <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                </svg>
              </button>
            </div>
            
            <div class="config-field-content">
              <mat-form-field appearance="outline" class="key-field">
                <mat-label>配置键</mat-label>
                <input matInput type="text" [(ngModel)]="configKeys[i]" 
                       placeholder="例如：apiKey">
                <mat-error *ngIf="errors[`config_key_${i}`]">{{ errors[`config_key_${i}`] }}</mat-error>
              </mat-form-field>
              
              <mat-form-field appearance="outline" class="value-field">
                <mat-label>配置值</mat-label>
                <textarea matInput [(ngModel)]="configValues[i]" 
                          placeholder="例如：abcdef123456" rows="2"></textarea>
                <mat-error *ngIf="errors[`config_value_${i}`]">{{ errors[`config_value_${i}`] }}</mat-error>
              </mat-form-field>
            </div>
          </div>

          <!-- 添加新配置字段 -->
          <div class="add-config-field">
            <div class="add-field-content">
              <mat-form-field appearance="outline" class="key-field">
                <mat-label>新配置键</mat-label>
                <input matInput type="text" [(ngModel)]="newConfigKey" 
                       placeholder="输入配置键">
              </mat-form-field>
              
              <mat-form-field appearance="outline" class="value-field">
                <mat-label>新配置值</mat-label>
                <input matInput type="text" [(ngModel)]="newConfigValue" 
                       placeholder="输入配置值">
              </mat-form-field>
              
              <button mat-button color="primary" class="add-btn"
                      (click)="addConfigField()" [disabled]="!newConfigKey.trim() || !newConfigValue.trim()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <line x1="12" y1="5" x2="12" y2="19"></line>
                  <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
                添加配置
              </button>
            </div>
          </div>

          <!-- 无配置提示 -->
          <div *ngIf="configKeys.length === 0" class="empty-config">
            <p>暂无配置项，请点击上方添加按钮添加配置参数</p>
          </div>
        </div>

        <!-- 配置提示 -->
        <div class="config-tips">
          <h4 class="tips-title">配置提示</h4>
          <ul class="tips-list">
            <li>敏感信息（如密码、密钥）将被加密存储</li>
            <li>对于嵌套的JSON配置，可以在值中输入JSON格式字符串</li>
            <li>配置参数将在API调用时作为请求参数或头部信息传递</li>
          </ul>
        </div>
      </div>

      <!-- 信息展示区（编辑模式） -->
      <div class="form-section" *ngIf="isEditMode">
        <h3 class="section-title">元信息</h3>
        
        <div class="meta-info">
          <div class="meta-item">
            <label>创建人：</label>
            <span class="meta-value">{{ integration.createdBy }}</span>
          </div>
          
          <div class="meta-item">
            <label>创建时间：</label>
            <span class="meta-value">{{ integration.createdAt }}</span>
          </div>
          
          <div class="meta-item">
            <label>更新时间：</label>
            <span class="meta-value">{{ integration.updatedAt }}</span>
          </div>
          
          <div class="meta-item" *ngIf="integration.lastTested">
            <label>最后测试：</label>
            <span class="meta-value">{{ integration.lastTested }}</span>
          </div>
        </div>
      </div>
    </form>
  </div>

  <!-- 操作按钮 -->
  <div class="dialog-footer">
    <button mat-button class="cancel-btn" (click)="onCancel()">
      取消
    </button>
    <button mat-raised-button color="primary" class="save-btn" 
            (click)="onSave()">
      {{ isEditMode ? '保存修改' : '创建集成' }}
    </button>
  </div>
</div>