<div class="designer-profile-container" *ngIf="designer() as d">
  <div class="profile-header">
    <div class="header-content">
      <div class="avatar-section">
        <img [src]="d.avatar || 'assets/images/default-avatar.svg'" alt="设计师头像" class="avatar">
      </div>
      <div class="info-section">
        <h1>{{ d.name }} <span class="position-badge">{{ d.position }}</span></h1>
        <div class="basic-info">
          <!-- 头部信息：补充联系电话 -->
          <div class="info-item">
            <mat-icon>phone</mat-icon>
            <span>{{ maskPhone(d.phone) }}</span>
          </div>
          <div class="info-item">
            <mat-icon>business</mat-icon>
            <span>{{ d.department }}</span>
          </div>
          <div class="info-item">
            <mat-icon>school</mat-icon>
            <span>{{ d.level }}设计师</span>
          </div>
          <div class="info-item">
            <mat-icon>event</mat-icon>
            <span>入职时间: {{ d.joinDate }}</span>
          </div>
        </div>
      </div>
      <div class="action-section">
        <button mat-raised-button color="primary" (click)="openPortfolioPreview()">
          <mat-icon>collections</mat-icon>
          查看作品集
        </button>
      </div>
    </div>
  </div>

  <mat-tab-group [selectedIndex]="activeTab()" (selectedIndexChange)="changeTab($event)" animationDuration="0ms" class="profile-tabs">
    <!-- 基础信息标签页 -->
    <mat-tab label="基础信息">
      <div class="tab-content">
        <div class="info-grid">
          <!-- 技能与风格卡片 -->
          <mat-card class="info-card skills-card">
            <mat-card-header>
              <mat-card-title>技能与专长</mat-card-title>
            </mat-card-header>
            <mat-card-content>
              <div class="section-title">技术技能</div>
              <div class="skill-chips">
                <mat-chip-set>
                  <!-- 技能与风格：改用 @for -->
                  @for (skill of d.skills; track skill) {
                    <mat-chip>{{ skill }}</mat-chip>
                  }
                </mat-chip-set>
              </div>
              
              <div class="section-title">擅长风格</div>
              <div class="style-chips">
                <mat-chip-set>
                  <!-- 技能与风格：改用 @for -->
                  @for (style of d.styles; track style) {
                    <mat-chip color="accent" selected>{{ style }}</mat-chip>
                  }
                </mat-chip-set>
              </div>
            </mat-card-content>
          </mat-card>

          <!-- 简历初筛卡片 -->
          <mat-card class="info-card screening-card">
            <mat-card-header>
              <mat-card-title>简历初筛</mat-card-title>
              <div class="spacer"></div>
              @if (!editingScreening()) {
                <button mat-stroked-button color="primary" (click)="startEditScreening()">
                  <mat-icon>edit</mat-icon>
                  编辑
                </button>
              } @else {
                <button mat-stroked-button color="primary" (click)="saveScreening()">
                  <mat-icon>save</mat-icon>
                  保存
                </button>
                <button mat-button color="basic" (click)="cancelEditScreening()">取消</button>
              }
            </mat-card-header>
            <mat-card-content>
              <div class="resume-section">
                <div class="section-title">基本信息</div>
                <div class="kv-list">
                  <div class="kv-item"><span class="k">姓名</span><span class="v">{{ d.name }}</span></div>
                  <div class="kv-item"><span class="k">年龄</span><span class="v">{{ d.screening?.basic?.age || '-' }}</span></div>
                  <div class="kv-item"><span class="k">学历</span><span class="v">{{ d.screening?.basic?.education || '-' }}</span></div>
                  <div class="kv-item"><span class="k">工作年限</span><span class="v">{{ d.screening?.basic?.years || '-' }}</span></div>
                  <div class="kv-item"><span class="k">求职岗位</span><span class="v">{{ d.screening?.basic?.targetRole || d.position }}</span></div>
                </div>

                <div class="section-title mt">核心能力</div>
                <div class="kv-list">
                  <div class="kv-item full">
                    <span class="k">技能匹配度</span>
                    <span class="v">
                      @if (d.screening?.core?.skills?.length) {
                        @for (s of d.screening?.core?.skills || []; track s) {
                          <mat-chip color="primary" selected>{{ s }}</mat-chip>
                        }
                      } @else {
                        暂无
                      }
                    </span>
                  </div>
                  <div class="kv-item"><span class="k">相关项目经验</span><span class="v">{{ d.screening?.core?.projects || '-' }}</span></div>
                  <div class="kv-item"><span class="k">证书资质</span><span class="v">{{ d.screening?.core?.certs || '-' }}</span></div>
                </div>

                <div class="section-title mt">求职意向</div>
                <div class="kv-list">
                  <div class="kv-item"><span class="k">期望薪资</span><span class="v">{{ d.screening?.intent?.salary || '-' }}</span></div>
                  <div class="kv-item"><span class="k">到岗时间</span><span class="v">{{ d.screening?.intent?.onboard || '-' }}</span></div>
                  <div class="kv-item"><span class="k">工作地点</span><span class="v">{{ d.screening?.intent?.location || '-' }}</span></div>
                </div>

                <div class="section-title mt">初筛结果</div>

                @if (!editingScreening()) {
                  <div class="result-row">
                    <div class="result-status" [ngClass]="getScreeningStatusClass(d.screening?.result?.status)">
                      <mat-icon>{{ getScreeningStatusIcon(d.screening?.result?.status) }}</mat-icon>
                      <span>{{ getScreeningStatusText(d.screening?.result?.status) }}</span>
                    </div>
                    @if (d.screening?.result?.comment) {
                      <div class="result-comment">{{ d.screening?.result?.comment }}</div>
                    }
                  </div>
                } @else {
                  <form [formGroup]="screeningForm" class="screening-form">
                    <div class="form-row">
                      <mat-button-toggle-group formControlName="status" class="status-toggle">
                        <mat-button-toggle value="pass">通过</mat-button-toggle>
                        <mat-button-toggle value="reject">不通过</mat-button-toggle>
                        <mat-button-toggle value="pending">待定</mat-button-toggle>
                      </mat-button-toggle-group>
                    </div>
                    
                    @if (screeningForm.get('status')?.value === 'reject') {
                      <div class="form-row">
                        <mat-form-field appearance="outline" class="full-width">
                          <mat-label>不通过原因</mat-label>
                          <input matInput formControlName="reason" placeholder="请输入不通过的具体原因">
                        </mat-form-field>
                      </div>
                    }
                    
                    <div class="form-row">
                      <mat-form-field appearance="outline" class="full-width">
                        <mat-label>备注说明</mat-label>
                        <textarea matInput formControlName="comment" rows="3" placeholder="请输入初筛备注或建议"></textarea>
                      </mat-form-field>
                    </div>
                  </form>
                }
              </div>
            </mat-card-content>
          </mat-card>

          <!-- 资质证书卡片 -->
          <mat-card class="info-card certificates-card">
            <mat-card-header>
              <mat-card-title>资质证书</mat-card-title>
            </mat-card-header>
            <mat-card-content>
              <div class="certificate-list">
                <div class="certificate-item" *ngFor="let cert of d.certificates || []">
                  <div class="cert-icon">
                    <mat-icon>verified</mat-icon>
                  </div>
                  <div class="cert-details">
                    <div class="cert-name">{{ cert.name }}</div>
                    <div class="cert-meta">
                      <span class="cert-type">{{ cert.type }}</span>
                      <span class="cert-date">{{ cert.date }}</span>
                    </div>
                  </div>
                </div>
                <div class="add-certificate" *ngIf="(d.certificates?.length || 0) === 0">
                  <button mat-stroked-button color="primary">
                    <mat-icon>add</mat-icon>
                    添加证书
                  </button>
                </div>
              </div>
            </mat-card-content>
          </mat-card>

          <!-- 空档期卡片 -->
          <mat-card class="info-card availability-card">
            <mat-card-header>
              <mat-card-title>技术空档期</mat-card-title>
            </mat-card-header>
            <mat-card-content>
              <div class="availability-info">
                <div class="availability-status" [ngClass]="{'available': (d.availableDates.length || 0) > 0}">
                  <mat-icon>{{ (d.availableDates.length || 0) > 0 ? 'check_circle' : 'schedule' }}</mat-icon>
                  <span>{{ (d.availableDates.length || 0) > 0 ? '当前有空档期' : '当前无空档期' }}</span>
                </div>
                <div class="available-dates" *ngIf="(d.availableDates.length || 0) > 0">
                  <div class="section-title">可接单日期</div>
                  <div class="date-chips">
                    <mat-chip-set>
                      <!-- 空档期：改用 @if/@for -->
                      <div class="available-dates">
                        <div class="section-title">可接单日期</div>
                        <div class="date-chips">
                          <mat-chip-set>
                            @for (date of d.availableDates || []; track date) {
                              <mat-chip color="primary" selected>{{ date }}</mat-chip>
                            }
                          </mat-chip-set>
                        </div>
                      </div>
                    </mat-chip-set>
                  </div>
                </div>
              </div>
            </mat-card-content>
            <mat-card-actions>
              <button mat-button color="primary">更新空档期</button>
            </mat-card-actions>
          </mat-card>

          <!-- 权限配置卡片 -->
          <mat-card class="info-card permissions-card">
            <mat-card-header>
              <mat-card-title>权限配置</mat-card-title>
            </mat-card-header>
            <mat-card-content>
              <div class="permission-list">
                <div class="permission-item">
                  <div class="permission-name">项目数据查看权限</div>
                  <div class="permission-status granted">已授权</div>
                </div>
                <div class="permission-item">
                  <div class="permission-name">业务费用数据查看</div>
                  <div class="permission-status denied">未授权</div>
                </div>
                <div class="permission-item">
                  <div class="permission-name">团队绩效数据查看</div>
                  <div class="permission-status granted">已授权</div>
                </div>
                <div class="permission-item">
                  <div class="permission-name">客户联系信息查看</div>
                  <div class="permission-status granted">已授权</div>
                </div>
              </div>
            </mat-card-content>
            <mat-card-actions>
              <button mat-button color="primary">调整权限</button>
            </mat-card-actions>
          </mat-card>
        </div>
      </div>
    </mat-tab>

    <!-- 工作记录标签页 -->
    <mat-tab label="工作记录">
      <div class="tab-content">
        <div class="project-filters">
          <mat-chip-set>
            <mat-chip selected>全部项目</mat-chip>
            <mat-chip>装修公司</mat-chip>
            <mat-chip>设计工作室</mat-chip>
            <mat-chip>效果图设计</mat-chip>
            <mat-chip>建模+渲染</mat-chip>
          </mat-chip-set>
        </div>

        <table mat-table [dataSource]="d.projects || []" class="project-table">
          <!-- 项目名称列 -->
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef>项目名称</th>
            <td mat-cell *matCellDef="let project">
              <div class="project-name">{{ project.name }}</div>
              <div class="project-tags">
                <span class="tag" *ngFor="let tag of project.tags">{{ tag }}</span>
              </div>
            </td>
          </ng-container>

          <!-- 客户类型列 -->
          <ng-container matColumnDef="clientType">
            <th mat-header-cell *matHeaderCellDef>客户类型</th>
            <td mat-cell *matCellDef="let project">{{ project.clientType }}</td>
          </ng-container>

          <!-- 项目角色列 -->
          <ng-container matColumnDef="role">
            <th mat-header-cell *matHeaderCellDef>项目角色</th>
            <td mat-cell *matCellDef="let project">{{ project.role }}</td>
          </ng-container>

          <!-- 交付日期列 -->
          <ng-container matColumnDef="deliveryDate">
            <th mat-header-cell *matHeaderCellDef>交付日期</th>
            <td mat-cell *matCellDef="let project">{{ project.deliveryDate }}</td>
          </ng-container>

          <!-- 客户评分列 -->
          <ng-container matColumnDef="clientRating">
            <th mat-header-cell *matHeaderCellDef>客户评分</th>
            <td mat-cell *matCellDef="let project">
              <div class="rating-stars">
                <mat-icon *ngFor="let star of getRatingStars(project.clientRating)">{{ star }}</mat-icon>
                <span class="rating-value">{{ project.clientRating }}</span>
              </div>
            </td>
          </ng-container>

          <!-- 操作列 -->
          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef>操作</th>
            <td mat-cell *matCellDef="let project">
              <button mat-icon-button matTooltip="查看反馈">
                <mat-icon>feedback</mat-icon>
              </button>
              <button mat-icon-button matTooltip="查看详情">
                <mat-icon>visibility</mat-icon>
              </button>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="projectColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: projectColumns;"></tr>
        </table>

        <div class="substitute-records-section">
          <h3>代班记录</h3>
          <div class="empty-state">
            <mat-icon>event_busy</mat-icon>
            <p>暂无代班记录</p>
            <button mat-stroked-button color="primary">
              <mat-icon>add</mat-icon>
              添加代班记录
            </button>
          </div>
        </div>
        </div>
      </mat-tab>

    <!-- 绩效详情标签页 -->
    <mat-tab label="绩效详情">
      <div class="tab-content">
        <ng-container *ngIf="(d.performance?.length || 0) > 0; else perfEmpty">
          <div class="performance-summary">
            <div class="summary-card">
              <div class="summary-title">客户满意度</div>
              <div class="summary-value">
                {{ d.performance[0].customerSatisfaction }}%
                <mat-icon class="trend-icon" [ngClass]="getPerformanceTrend('customerSatisfaction')">
                  {{ getPerformanceTrend('customerSatisfaction') === 'up' ? 'trending_up' : 
                     getPerformanceTrend('customerSatisfaction') === 'down' ? 'trending_down' : 'trending_flat' }}
                </mat-icon>
              </div>
              <mat-progress-bar mode="determinate" [value]="d.performance[0].customerSatisfaction || 0"></mat-progress-bar>
            </div>
            
            <div class="summary-card">
              <div class="summary-title">优秀作品率</div>
              <div class="summary-value">
                {{ d.performance[0].excellentWorkRate }}%
                <mat-icon class="trend-icon" [ngClass]="getPerformanceTrend('excellentWorkRate')">
                  {{ getPerformanceTrend('excellentWorkRate') === 'up' ? 'trending_up' : 
                     getPerformanceTrend('excellentWorkRate') === 'down' ? 'trending_down' : 'trending_flat' }}
                </mat-icon>
              </div>
              <mat-progress-bar mode="determinate" [value]="d.performance[0].excellentWorkRate || 0"></mat-progress-bar>
            </div>
            
            <div class="summary-card">
              <div class="summary-title">业绩值</div>
              <div class="summary-value">
                {{ d.performance[0].performanceValue }}
                <mat-icon class="trend-icon" [ngClass]="getPerformanceTrend('performanceValue')">
                  {{ getPerformanceTrend('performanceValue') === 'up' ? 'trending_up' : 
                     getPerformanceTrend('performanceValue') === 'down' ? 'trending_down' : 'trending_flat' }}
                </mat-icon>
              </div>
              <mat-progress-bar mode="determinate" [value]="d.performance[0].performanceValue || 0"></mat-progress-bar>
            </div>
          </div>
      
          <div class="performance-comparison">
            <h3>绩效对比分析</h3>
            <div class="comparison-chart">
              <div class="chart-placeholder">
                <div class="chart-bars">
                  <div class="chart-bar">
                    <div class="bar-label">客户满意度</div>
                    <div class="bar-container">
                      <div class="bar designer-bar" [style.height.%]="d.performance[0].customerSatisfaction || 0"></div>
                      <div class="bar average-bar" style="height: 80%;"></div>
                    </div>
                    <div class="bar-legend">
                      <div class="legend-item"><span class="legend-color designer"></span> 设计师</div>
                      <div class="legend-item"><span class="legend-color average"></span> 部门平均</div>
                    </div>
                  </div>
                  <div class="chart-bar">
                    <div class="bar-label">优秀作品率</div>
                    <div class="bar-container">
                      <div class="bar designer-bar" [style.height.%]="d.performance[0].excellentWorkRate || 0"></div>
                      <div class="bar average-bar" style="height: 75%;"></div>
                    </div>
                  </div>
                  <div class="chart-bar">
                    <div class="bar-label">业绩值</div>
                    <div class="bar-container">
                      <div class="bar designer-bar" [style.height.%]="d.performance[0].performanceValue || 0"></div>
                      <div class="bar average-bar" style="height: 78%;"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      
          <div class="performance-details">
            <h3>绩效明细记录</h3>
            <table mat-table [dataSource]="d.performance || []" class="performance-table">
              <!-- 季度列 -->
              <ng-container matColumnDef="quarter">
                <th mat-header-cell *matHeaderCellDef>季度</th>
                <td mat-cell *matCellDef="let item">{{ item.quarter }}</td>
              </ng-container>
      
              <!-- 客户满意度列 -->
              <ng-container matColumnDef="customerSatisfaction">
                <th mat-header-cell *matHeaderCellDef>客户满意度</th>
                <td mat-cell *matCellDef="let item">{{ item.customerSatisfaction }}%</td>
              </ng-container>
      
              <!-- 优秀作品率列 -->
              <ng-container matColumnDef="excellentWorkRate">
                <th mat-header-cell *matHeaderCellDef>优秀作品率</th>
                <td mat-cell *matCellDef="let item">{{ item.excellentWorkRate }}%</td>
              </ng-container>
      
              <!-- 业绩值列 -->
              <ng-container matColumnDef="performanceValue">
                <th mat-header-cell *matHeaderCellDef>业绩值</th>
                <td mat-cell *matCellDef="let item">{{ item.performanceValue }}</td>
              </ng-container>
      
              <!-- 绩效等级列 -->
              <ng-container matColumnDef="finalGrade">
                <th mat-header-cell *matHeaderCellDef>绩效等级</th>
                <td mat-cell *matCellDef="let item">
                  <span class="grade-badge" [style.background-color]="getPerformanceColor(item.finalGrade)">
                    {{ item.finalGrade }}
                  </span>
                </td>
              </ng-container>
      
              <!-- 操作列 -->
              <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef>操作</th>
                <td mat-cell *matCellDef="let item">
                  <button mat-icon-button matTooltip="查看扣分项" [matBadge]="item.deductions.length" 
                    [matBadgeHidden]="item.deductions.length === 0" matBadgeColor="warn">
                    <mat-icon>error_outline</mat-icon>
                  </button>
                  <button mat-icon-button matTooltip="查看详情">
                    <mat-icon>visibility</mat-icon>
                  </button>
                </td>
              </ng-container>
      
              <tr mat-header-row *matHeaderRowDef="performanceColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: performanceColumns;"></tr>
            </table>
          </div>
      
          <div class="promotion-history">
            <h3>晋级记录</h3>
            <div class="timeline">
              <div class="timeline-item">
                <div class="timeline-point"></div>
                <div class="timeline-content">
                  <div class="timeline-date">2022-01-15</div>
                  <div class="timeline-title">晋升为高级设计师</div>
                  <div class="timeline-description">基于优秀的项目表现和客户满意度，晋升为高级设计师</div>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-point"></div>
                <div class="timeline-content">
                  <div class="timeline-date">2021-03-10</div>
                  <div class="timeline-title">晋升为中级设计师</div>
                  <div class="timeline-description">完成技能认证，项目质量稳定，晋升为中级设计师</div>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-point"></div>
                <div class="timeline-content">
                  <div class="timeline-date">2020-05-15</div>
                  <div class="timeline-title">入职</div>
                  <div class="timeline-description">作为初级设计师加入公司</div>
                </div>
              </div>
            </div>
          </div>
        </ng-container>
        <ng-template #perfEmpty>
          <div class="empty-state">
            <mat-icon>insights</mat-icon>
            <p>暂无绩效数据</p>
          </div>
        </ng-template>
      </div>
     </mat-tab>
  </mat-tab-group>
</div>

<!-- 加载状态 -->
<div class="loading-container" *ngIf="!designer()">
  <mat-spinner diameter="40"></mat-spinner>
  <p>加载设计师信息中...</p>
</div>