<div class="recruitment-performance-container hr-page">
  <!-- 页面顶部导航按钮 -->
  <div class="top-navigation">
    <div class="nav-buttons">
      <button 
        mat-raised-button 
        [class.active]="activeTab() === 0"
        (click)="switchTab(0)"
        class="nav-button">
        <mat-icon>psychology</mat-icon>
        招聘流程优化
      </button>
      <button 
        mat-raised-button 
        [class.active]="activeTab() === 1"
        (click)="switchTab(1)"
        class="nav-button">
        <mat-icon>analytics</mat-icon>
        绩效统计与分析
      </button>
    </div>
  </div>

  <!-- 招聘流程优化模块 -->
  @if (activeTab() === 0) {
    <div class="recruitment-optimization">
      <!-- AI简历分析功能区 -->
      <mat-card class="ai-analysis-section">
        <mat-card-header>
          <mat-card-title>
            <mat-icon>smart_toy</mat-icon>
            AI 简历分析
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <!-- 简历上传区域 -->
          <div class="upload-area">
            <div class="upload-zone" (click)="fileInput.click()">
              <mat-icon class="upload-icon">cloud_upload</mat-icon>
              <p>点击上传简历或拖拽文件到此处</p>
              <p class="upload-hint">支持 PDF、DOC、DOCX 格式</p>
              <input #fileInput type="file" hidden accept=".pdf,.doc,.docx" (change)="onResumeUpload($event)">
            </div>
          </div>

          <!-- 分析结果展示 -->
          @if (selectedResume()) {
            <div class="analysis-results">
              <div class="result-header">
                <h3>{{ selectedResume()!.fileName }}</h3>
                <span class="upload-time">上传时间：{{ selectedResume()!.uploadTime | date:'yyyy-MM-dd HH:mm' }}</span>
              </div>

              @if (selectedResume()!.status === 'processing') {
                <div class="processing-state">
                  <mat-spinner diameter="40"></mat-spinner>
                  <p>AI正在分析简历，请稍候...</p>
                </div>
              }

              @if (selectedResume()!.status === 'failed') {
                <div class="failed-state">
                  <mat-icon class="error-icon">error_outline</mat-icon>
                  <h4>分析失败</h4>
                  <p>简历分析过程中出现错误，请重试或检查文件格式</p>
                  <div class="failed-actions">
                    <button mat-raised-button color="primary" (click)="retryAnalysis(selectedResume()!.id)">
                      <mat-icon>refresh</mat-icon>
                      重新分析
                    </button>
                    <button mat-stroked-button color="warn" (click)="deleteAnalysis(selectedResume()!.id)">
                      <mat-icon>delete</mat-icon>
                      删除记录
                    </button>
                  </div>
                </div>
              }

              @if (selectedResume()!.status === 'completed' && selectedResume()!.analysisResult) {
                <div class="completed-analysis">
                  <!-- 推荐结论 -->
                  <div class="recommendation-section">
                    <div class="recommendation-badge" [class]="selectedResume()!.analysisResult!.recommendation">
                      {{ selectedResume()!.analysisResult!.recommendation }}
                    </div>
                    <p class="recommendation-reason">{{ selectedResume()!.analysisResult!.reason }}</p>
                  </div>

                  <!-- 岗位匹配维度标签 -->
                  <div class="skills-analysis">
                    <h4>核心技能分析</h4>
                    <div class="skills-grid">
                      @for (skill of selectedResume()!.analysisResult!.coreSkills; track skill.name) {
                        <div class="skill-item" [class.matched]="skill.matched">
                          <span class="skill-name">{{ skill.name }}</span>
                          <div class="skill-score">
                            <mat-progress-bar mode="determinate" [value]="skill.score"></mat-progress-bar>
                            <span class="score-text">{{ skill.score }}%</span>
                          </div>
                        </div>
                      }
                    </div>
                    <div class="skills-summary">
                      <span class="average-score">平均分：{{ calculateAverageScore(selectedResume()!.analysisResult!.coreSkills) }}%</span>
                      <span class="matched-count">匹配技能：{{ getMatchedSkillsCount(selectedResume()!) }}/{{ selectedResume()!.analysisResult!.coreSkills.length }}</span>
                    </div>
                  </div>

                  <!-- 简历初筛信息 -->
                  <div class="screening-info">
                    <h4>简历初筛信息</h4>
                    <div class="info-grid">
                      <div class="info-item">
                        <label>学历背景：</label>
                        <span>{{ selectedResume()!.analysisResult!.screeningInfo.education }}</span>
                      </div>
                      <div class="info-item">
                        <label>工作年限：</label>
                        <span>{{ selectedResume()!.analysisResult!.screeningInfo.workYears }}</span>
                      </div>
                      <div class="info-item">
                        <label>核心技能：</label>
                        <mat-chip-set>
                          @for (skill of selectedResume()!.analysisResult!.screeningInfo.coreSkills; track skill) {
                            <mat-chip>{{ skill }}</mat-chip>
                          }
                        </mat-chip-set>
                      </div>
                    </div>
                  </div>
                </div>
              }
            </div>
          }

          <!-- 历史分析记录 -->
          @if (resumeAnalyses().length > 0) {
            <div class="analysis-history">
              <h4>分析记录</h4>
              <div class="history-list">
                @for (analysis of resumeAnalyses(); track analysis.id) {
                  <div class="history-item" [class.selected]="selectedResume()?.id === analysis.id">
                    <div class="item-info" (click)="selectedResume.set(analysis)">
                      <span class="file-name">{{ analysis.fileName }}</span>
                      <span class="upload-time">{{ analysis.uploadTime | date:'MM-dd HH:mm' }}</span>
                    </div>
                    <div class="item-status">
                      @if (analysis.status === 'processing') {
                        <mat-icon class="status-icon processing">hourglass_empty</mat-icon>
                      }
                      @if (analysis.status === 'completed') {
                        <mat-icon class="status-icon completed">check_circle</mat-icon>
                      }
                      @if (analysis.status === 'failed') {
                        <div class="failed-status">
                          <mat-icon class="status-icon failed">error</mat-icon>
                          <div class="failed-actions">
                            <button mat-icon-button color="primary" 
                                    (click)="retryAnalysis(analysis.id); $event.stopPropagation()"
                                    matTooltip="重新分析">
                              <mat-icon>refresh</mat-icon>
                            </button>
                            <button mat-icon-button color="warn" 
                                    (click)="deleteAnalysis(analysis.id); $event.stopPropagation()"
                                    matTooltip="删除记录">
                              <mat-icon>delete</mat-icon>
                            </button>
                          </div>
                        </div>
                      }
                    </div>
                  </div>
                }
              </div>
            </div>
          }
        </mat-card-content>
      </mat-card>

      <!-- 招聘四阶段进度展示 -->
      <mat-card class="recruitment-phases">
        <mat-card-header>
          <mat-card-title>
            <mat-icon>analytics</mat-icon>
            招聘四阶段进度统计
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <div class="phases-overview">
            @for (phase of recruitmentPhases; track phase.name) {
              <div class="phase-card" [class]="getPhaseStatus(phase.name)">
                <div class="phase-header">
                  <mat-icon [style.color]="phase.color">{{ phase.icon }}</mat-icon>
                  <h4>{{ phase.name }}</h4>
                </div>
                <div class="phase-content">
                  <div class="phase-stats">
                    <div class="stat-item">
                      <span class="stat-label">候选人数</span>
                      <span class="stat-value">{{ getPhaseCount(phase.name) }}</span>
                    </div>
                    <div class="stat-item">
                      <span class="stat-label">通过率</span>
                      <span class="stat-value">{{ getPhasePassRate(phase.name) }}%</span>
                    </div>
                  </div>
                  <mat-progress-bar 
                    mode="determinate" 
                    [value]="getPhasePassRate(phase.name)"
                    [color]="getPhaseStatus(phase.name) === 'completed' ? 'primary' : 'accent'">
                  </mat-progress-bar>
                  <p class="phase-description">{{ phase.description }}</p>
                </div>
                <div class="phase-status">
                  @if (getPhaseStatus(phase.name) === 'completed') {
                    <mat-icon class="status-icon completed">check_circle</mat-icon>
                    <span>已完成</span>
                  } @else if (getPhaseStatus(phase.name) === 'in-progress') {
                    <mat-icon class="status-icon in-progress">schedule</mat-icon>
                    <span>进行中</span>
                  } @else {
                    <mat-icon class="status-icon pending">radio_button_unchecked</mat-icon>
                    <span>待开始</span>
                  }
                </div>
              </div>
            }
          </div>
        </mat-card-content>
      </mat-card>

      <!-- 招聘流程跟踪 -->
      <mat-card class="recruitment-stages">
        <mat-card-header>
          <mat-card-title>
            <mat-icon>timeline</mat-icon>
            招聘流程跟踪
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <!-- 当前状态概览 -->
          <div class="current-status">
            <div class="status-info">
              <h4>当前状态：{{ getCurrentStageStatus() }}</h4>
              <mat-progress-bar mode="determinate" [value]="getStageProgress()" class="progress-bar"></mat-progress-bar>
              <span class="progress-text">进度：{{ getStageProgress() }}%</span>
            </div>
          </div>

          <!-- 阶段时间线 -->
          <div class="stages-timeline">
            @for (stage of recruitmentStages(); let i = $index; track i) {
              <div class="timeline-item" 
                   [class]="getStageStatusClass(stage, i)"
                   (click)="onStageClick(stage, i)">
                <div class="timeline-marker">
                  <mat-icon>{{ getStageIcon(stage.stage) }}</mat-icon>
                </div>
                <div class="timeline-content">
                  <div class="stage-header">
                    <h5>{{ stage.stage }}</h5>
                    <span class="stage-result" [class]="stage.result">{{ stage.result }}</span>
                  </div>
                  <div class="stage-details">
                    <p><strong>评估人：</strong>{{ stage.evaluator }}</p>
                    <p><strong>评估时间：</strong>{{ stage.evaluationTime | date:'yyyy-MM-dd HH:mm' }}</p>
                    @if (stage.comments) {
                      <p><strong>备注：</strong>{{ stage.comments }}</p>
                    }
                  </div>
                  @if (selectedStage() && selectedStage()?.evaluationTime === stage.evaluationTime) {
                    <div class="stage-actions">
                      <button mat-stroked-button color="primary" size="small">
                        <mat-icon>edit</mat-icon>
                        编辑
                      </button>
                      <button mat-stroked-button color="accent" size="small">
                        <mat-icon>visibility</mat-icon>
                        详情
                      </button>
                    </div>
                  }
                </div>
                @if (!$last) {
                  <div class="timeline-connector"></div>
                }
              </div>
            }
            
            @if (recruitmentStages().length === 0) {
              <div class="empty-timeline">
                <mat-icon>timeline</mat-icon>
                <p>暂无招聘流程记录，请添加第一个阶段</p>
              </div>
            }
          </div>

          <!-- 进度控制区域 -->
          <div class="progress-controls">
            <div class="progress-info">
              <h4>流程进度控制</h4>
              <div class="progress-stats">
                <div class="stat-item">
                  <span class="label">当前阶段：</span>
                  <span class="value">{{ getCurrentStageStatus() }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">整体进度：</span>
                  <span class="value">{{ getStageProgress() }}%</span>
                </div>
                @if (canProceedToNext()) {
                  <div class="stat-item">
                    <span class="label">下一阶段：</span>
                    <span class="value">{{ getNextStageName() }}</span>
                  </div>
                }
              </div>
            </div>
            
            <div class="progress-actions">
              @if (canProceedToNext()) {
                <button mat-raised-button color="primary" (click)="proceedToNextStage()">
                  <mat-icon>arrow_forward</mat-icon>
                  进入下一阶段
                </button>
              }
              <button mat-stroked-button color="warn" (click)="resetStageProgress()">
                <mat-icon>refresh</mat-icon>
                重置进度
              </button>
            </div>
          </div>

          <!-- 招聘流程环节操作 -->
          <div class="recruitment-stage-actions">
            <h4>流程环节操作</h4>
            <div class="stage-buttons">
              <button mat-raised-button color="primary" (click)="openStagePanel('interview')" class="stage-action-btn">
                <mat-icon>person_search</mat-icon>
                进入面试环节
              </button>
              <button mat-raised-button color="accent" (click)="openStagePanel('technical')" class="stage-action-btn">
                <mat-icon>code</mat-icon>
                安排技术面试
              </button>
              <button mat-raised-button color="warn" (click)="openStagePanel('onboarding')" class="stage-action-btn">
                <mat-icon>assignment</mat-icon>
                准备入职材料
              </button>
              <button mat-raised-button (click)="openStagePanel('evaluation')" class="stage-action-btn">
                <mat-icon>assessment</mat-icon>
                月度评估
              </button>
            </div>
          </div>

          <!-- 添加新阶段 -->
          <div class="add-stage-form">
            <h4>添加流程记录</h4>
            <div class="form-row">
              <mat-form-field appearance="outline">
                <mat-label>阶段</mat-label>
                <mat-select [(ngModel)]="newStage.stage">
                  <mat-option value="简历初筛">简历初筛</mat-option>
                  <mat-option value="面试评估">面试评估</mat-option>
                  <mat-option value="入职评定">入职评定</mat-option>
                  <mat-option value="试用期跟踪">试用期跟踪</mat-option>
                </mat-select>
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>结果</mat-label>
                <mat-select [(ngModel)]="newStage.result">
                  <mat-option value="通过">通过</mat-option>
                  <mat-option value="待定">待定</mat-option>
                  <mat-option value="不通过">不通过</mat-option>
                </mat-select>
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>评估人</mat-label>
                <input matInput [(ngModel)]="newStage.evaluator">
              </mat-form-field>
            </div>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>备注</mat-label>
              <textarea matInput rows="3" [(ngModel)]="newStage.comments"></textarea>
            </mat-form-field>

            <div class="form-actions">
              <button mat-raised-button color="primary" (click)="addRecruitmentStage()" [disabled]="!newStage.evaluator.trim()">
                <mat-icon>add</mat-icon>
                添加记录
              </button>
            </div>
          </div>

          <!-- 试用期跟踪关联 -->
          <div class="probation-tracking">
            <h4>试用期跟踪</h4>
            <div class="tracking-info">
              <p>与新人跟进模块关联，实时跟踪试用期表现</p>
              <div class="tracking-metrics">
                <div class="metric-item">
                  <span class="metric-label">绩效得分：</span>
                  <span class="metric-value">85分</span>
                </div>
                <div class="metric-item">
                  <span class="metric-label">改进记录：</span>
                  <span class="metric-value">3条</span>
                </div>
              </div>
              <button mat-stroked-button color="primary">
                <mat-icon>open_in_new</mat-icon>
                查看详细跟进
              </button>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  }

  <!-- 绩效统计与分析模块 -->
  @if (activeTab() === 1) {
    <div class="performance-analysis">
      <!-- 筛选控件 -->
      <mat-card class="filter-section">
        <mat-card-content>
          <div class="filter-controls">
            <mat-form-field appearance="outline">
              <mat-label>部门</mat-label>
              <mat-select [(ngModel)]="filterDepartment" (selectionChange)="applyFilters()">
                <mat-option value="">全部部门</mat-option>
                @for (dept of getDepartments(); track dept) {
                  <mat-option [value]="dept">{{ dept }}</mat-option>
                }
              </mat-select>
            </mat-form-field>

            <mat-form-field appearance="outline">
              <mat-label>职级</mat-label>
              <mat-select [(ngModel)]="filterPositionLevel" (selectionChange)="applyFilters()">
                <mat-option value="">全部职级</mat-option>
                <mat-option value="高级">高级</mat-option>
                <mat-option value="中级">中级</mat-option>
                <mat-option value="初级">初级</mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field appearance="outline">
              <mat-label>入职时间</mat-label>
              <input matInput type="month" [(ngModel)]="filterHireDate" (change)="applyFilters()">
            </mat-form-field>

            <div class="filter-actions">
              <button mat-raised-button color="primary" (click)="applyFilters()">
                <mat-icon>search</mat-icon>
                筛选
              </button>
              <button mat-stroked-button (click)="resetFilters()">
                <mat-icon>refresh</mat-icon>
                重置
              </button>
            </div>
          </div>
        </mat-card-content>
      </mat-card>

      <!-- 核心指标展示区 -->
      <div class="metrics-overview">
        <div class="metrics-grid">
          <mat-card class="metric-card">
            <mat-card-content>
              <div class="metric-header">
                <mat-icon>assignment_turned_in</mat-icon>
                <h3>项目完成率</h3>
              </div>
              <div class="metric-value">{{ calculateOverallAverage().projectCompletionRate | number:'1.0-0' }}%</div>
              <div class="metric-trend positive">
                <mat-icon>trending_up</mat-icon>
                <span>+5.2%</span>
              </div>
            </mat-card-content>
          </mat-card>

          <mat-card class="metric-card">
            <mat-card-content>
              <div class="metric-header">
                <mat-icon>star</mat-icon>
                <h3>优秀工作率</h3>
              </div>
              <div class="metric-value">{{ calculateOverallAverage().excellentWorkRate | number:'1.0-0' }}%</div>
              <div class="metric-trend positive">
                <mat-icon>trending_up</mat-icon>
                <span>+2.1%</span>
              </div>
            </mat-card-content>
          </mat-card>

          <mat-card class="metric-card">
            <mat-card-content>
              <div class="metric-header">
                <mat-icon>sentiment_satisfied</mat-icon>
                <h3>客户满意度</h3>
              </div>
              <div class="metric-value">{{ calculateOverallAverage().customerSatisfaction | number:'1.0-0' }}%</div>
              <div class="metric-trend neutral">
                <mat-icon>trending_flat</mat-icon>
                <span>0%</span>
              </div>
            </mat-card-content>
          </mat-card>

          <mat-card class="metric-card">
            <mat-card-content>
              <div class="metric-header">
                <mat-icon>schedule</mat-icon>
                <h3>逾期率</h3>
              </div>
              <div class="metric-value">{{ calculateOverallAverage().overdueRate | number:'1.0-1' }}%</div>
              <div class="metric-trend negative">
                <mat-icon>trending_down</mat-icon>
                <span>-1.5%</span>
              </div>
            </mat-card-content>
          </mat-card>

          <mat-card class="metric-card">
            <mat-card-content>
              <div class="metric-header">
                <mat-icon>school</mat-icon>
                <h3>培训完成率</h3>
              </div>
              <div class="metric-value">{{ calculateOverallAverage().trainingCompletionRate | number:'1.0-0' }}%</div>
              <div class="metric-trend positive">
                <mat-icon>trending_up</mat-icon>
                <span>+3.8%</span>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
      </div>

      <!-- 绩效对比表 -->
      <mat-card class="comparison-table">
        <mat-card-header>
          <mat-card-title>
            <mat-icon>compare_arrows</mat-icon>
            绩效对比分析
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <div class="comparison-tabs">
            <button mat-stroked-button class="active">同职级对比</button>
            <button mat-stroked-button>历史对比</button>
          </div>

          <div class="comparison-content">
            <div class="department-comparison">
              @for (dept of getDepartments(); track dept) {
                <div class="dept-section">
                  <h4>{{ dept }}</h4>
                  <div class="metrics-comparison">
                    <div class="comparison-item">
                      <span class="metric-name">项目完成率</span>
                      <div class="comparison-bar">
                        <mat-progress-bar mode="determinate" [value]="calculateDepartmentAverage(dept).projectCompletionRate"></mat-progress-bar>
                        <span class="value">{{ calculateDepartmentAverage(dept).projectCompletionRate }}%</span>
                      </div>
                    </div>
                    <div class="comparison-item">
                      <span class="metric-name">优秀工作率</span>
                      <div class="comparison-bar">
                        <mat-progress-bar mode="determinate" [value]="calculateDepartmentAverage(dept).excellentWorkRate"></mat-progress-bar>
                        <span class="value">{{ calculateDepartmentAverage(dept).excellentWorkRate }}%</span>
                      </div>
                    </div>
                    <div class="comparison-item">
                      <span class="metric-name">客户满意度</span>
                      <div class="comparison-bar">
                        <mat-progress-bar mode="determinate" [value]="calculateDepartmentAverage(dept).customerSatisfaction"></mat-progress-bar>
                        <span class="value">{{ calculateDepartmentAverage(dept).customerSatisfaction }}%</span>
                      </div>
                    </div>
                  </div>
                </div>
              }
            </div>
          </div>
        </mat-card-content>
      </mat-card>

      <!-- 离职原因分析 -->
      <mat-card class="turnover-analysis">
        <mat-card-header>
          <mat-card-title>
            <mat-icon>exit_to_app</mat-icon>
            离职原因分析
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <!-- 筛选控件 -->
          <div class="turnover-filters">
            <mat-form-field appearance="outline">
              <mat-label>部门</mat-label>
              <mat-select [(ngModel)]="filterTurnoverDepartment">
                <mat-option value="">全部部门</mat-option>
                @for (dept of getDepartments(); track dept) {
                  <mat-option [value]="dept">{{ dept }}</mat-option>
                }
              </mat-select>
            </mat-form-field>

            <mat-form-field appearance="outline">
              <mat-label>时间范围</mat-label>
              <mat-select [(ngModel)]="filterTurnoverDateRange">
                <mat-option value="">全部时间</mat-option>
                <mat-option value="last3months">近3个月</mat-option>
                <mat-option value="last6months">近6个月</mat-option>
                <mat-option value="lastyear">近1年</mat-option>
              </mat-select>
            </mat-form-field>

            <div class="filter-actions">
              <button mat-raised-button color="primary" (click)="applyTurnoverFilters()">
                <mat-icon>filter_list</mat-icon>
                应用筛选
              </button>
              <button mat-stroked-button (click)="resetTurnoverFilters()">
                <mat-icon>clear</mat-icon>
                重置
              </button>
            </div>
          </div>

          <!-- 分类筛选 -->
          <div class="category-filters">
            <mat-chip-set>
              <mat-chip selected>全部员工</mat-chip>
              <mat-chip>新人离职</mat-chip>
              <mat-chip>资深员工离职</mat-chip>
            </mat-chip-set>
          </div>

          <!-- 总体离职情况 -->
          <div class="overall-turnover">
            <h4>总体离职情况</h4>
            <div class="turnover-stats">
              @for (stat of getTurnoverStats(); track stat.reason) {
                <div class="stat-item">
                  <div class="stat-header">
                    <span class="reason-name">{{ stat.reason }}</span>
                    <span class="reason-count">{{ stat.totalCount }}人</span>
                  </div>
                  <div class="stat-bar">
                    <mat-progress-bar 
                      mode="determinate" 
                      [value]="stat.totalPercentage"
                      [style.--mdc-linear-progress-active-indicator-color]="getReasonColor(stat.reason)">
                    </mat-progress-bar>
                    <span class="percentage">{{ stat.totalPercentage }}%</span>
                  </div>
                </div>
              }
            </div>
          </div>

          <!-- 分类离职分析 -->
          <div class="category-analysis">
            <h4>分类离职分析</h4>
            <div class="analysis-grid">
              @for (analysis of turnoverAnalyses(); track analysis.category) {
                <div class="analysis-section">
                  <h5>{{ analysis.category }}</h5>
                  <div class="reasons-list">
                    @for (reason of analysis.reasons; track reason.reason) {
                      <div class="reason-item">
                        <span class="reason-label">{{ reason.reason }}</span>
                        <div class="reason-stats">
                          <mat-progress-bar 
                            mode="determinate" 
                            [value]="reason.percentage"
                            [style.--mdc-linear-progress-active-indicator-color]="getReasonColor(reason.reason)">
                          </mat-progress-bar>
                          <span class="stats-text">{{ reason.count }}人 ({{ reason.percentage }}%)</span>
                        </div>
                      </div>
                    }
                  </div>
                </div>
              }
            </div>
          </div>

          <!-- 图表展示 -->
          <div class="charts-section">
            <div class="charts-grid">
              <div class="chart-container">
                <div #turnoverPieChart class="pie-chart"></div>
              </div>
              <div class="chart-container">
                <div #categoryPieChart class="pie-chart"></div>
              </div>
            </div>
          </div>

          <!-- 导出操作 -->
          <div class="export-actions">
            <button mat-raised-button color="primary" (click)="generateTurnoverReport()">
              <mat-icon>file_download</mat-icon>
              导出离职分析报告
            </button>
            <button mat-stroked-button (click)="generatePerformanceReport()">
              <mat-icon>assessment</mat-icon>
              生成绩效报告
            </button>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  }
</div>

<!-- 流程环节面板 -->
@if (showStagePanel()) {
  <div class="stage-panel-overlay" (click)="closeStagePanel()">
    <div class="stage-panel" (click)="$event.stopPropagation()">
      <div class="panel-header">
        <h3>{{ getStagePanelTitle() }}</h3>
        <button mat-icon-button (click)="closeStagePanel()">
          <mat-icon>close</mat-icon>
        </button>
      </div>
      
      <div class="panel-content">
        @switch (currentStageType()) {
          @case ('interview') {
            <div class="interview-panel">
              <div class="section">
                <h4>面试安排</h4>
                <div class="form-row">
                  <mat-form-field appearance="outline">
                    <mat-label>候选人姓名</mat-label>
                    <input matInput [(ngModel)]="stageData.candidateName">
                  </mat-form-field>
                  <mat-form-field appearance="outline">
                    <mat-label>面试时间</mat-label>
                    <input matInput type="datetime-local" [(ngModel)]="stageData.interviewTime">
                  </mat-form-field>
                </div>
                <div class="form-row">
                  <mat-form-field appearance="outline">
                    <mat-label>面试官</mat-label>
                    <mat-select [(ngModel)]="stageData.interviewer">
                      <mat-option value="张经理">张经理</mat-option>
                      <mat-option value="李主管">李主管</mat-option>
                      <mat-option value="王总监">王总监</mat-option>
                    </mat-select>
                  </mat-form-field>
                  <mat-form-field appearance="outline">
                    <mat-label>面试类型</mat-label>
                    <mat-select [(ngModel)]="stageData.interviewType">
                      <mat-option value="初面">初面</mat-option>
                      <mat-option value="复试">复试</mat-option>
                      <mat-option value="终面">终面</mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
                <mat-form-field appearance="outline" class="full-width">
                  <mat-label>面试要求</mat-label>
                  <textarea matInput rows="3" [(ngModel)]="stageData.requirements"></textarea>
                </mat-form-field>
              </div>
            </div>
          }
          @case ('technical') {
            <div class="technical-panel">
              <div class="section">
                <h4>技术面试安排</h4>
                <div class="form-row">
                  <mat-form-field appearance="outline">
                    <mat-label>技术栈</mat-label>
                    <mat-select [(ngModel)]="stageData.techStack" multiple>
                      <mat-option value="JavaScript">JavaScript</mat-option>
                      <mat-option value="TypeScript">TypeScript</mat-option>
                      <mat-option value="Angular">Angular</mat-option>
                      <mat-option value="React">React</mat-option>
                      <mat-option value="Vue">Vue</mat-option>
                      <mat-option value="Node.js">Node.js</mat-option>
                    </mat-select>
                  </mat-form-field>
                  <mat-form-field appearance="outline">
                    <mat-label>难度等级</mat-label>
                    <mat-select [(ngModel)]="stageData.difficulty">
                      <mat-option value="初级">初级</mat-option>
                      <mat-option value="中级">中级</mat-option>
                      <mat-option value="高级">高级</mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
                <div class="form-row">
                  <mat-form-field appearance="outline">
                    <mat-label>面试时长（分钟）</mat-label>
                    <input matInput type="number" [(ngModel)]="stageData.duration">
                  </mat-form-field>
                  <mat-form-field appearance="outline">
                    <mat-label>技术面试官</mat-label>
                    <input matInput [(ngModel)]="stageData.techInterviewer">
                  </mat-form-field>
                </div>
                <mat-form-field appearance="outline" class="full-width">
                  <mat-label>技术要求说明</mat-label>
                  <textarea matInput rows="4" [(ngModel)]="stageData.techRequirements"></textarea>
                </mat-form-field>
              </div>
            </div>
          }
          @case ('onboarding') {
            <div class="onboarding-panel">
              <div class="section">
                <h4>入职材料准备</h4>
                <div class="checklist">
                  <mat-checkbox [(ngModel)]="stageData.documents.contract">劳动合同</mat-checkbox>
                  <mat-checkbox [(ngModel)]="stageData.documents.handbook">员工手册</mat-checkbox>
                  <mat-checkbox [(ngModel)]="stageData.documents.equipment">设备清单</mat-checkbox>
                  <mat-checkbox [(ngModel)]="stageData.documents.access">门禁卡</mat-checkbox>
                  <mat-checkbox [(ngModel)]="stageData.documents.account">系统账号</mat-checkbox>
                  <mat-checkbox [(ngModel)]="stageData.documents.training">培训计划</mat-checkbox>
                </div>
                <div class="form-row">
                  <mat-form-field appearance="outline">
                    <mat-label>预计入职日期</mat-label>
                    <input matInput type="date" [(ngModel)]="stageData.startDate">
                  </mat-form-field>
                  <mat-form-field appearance="outline">
                    <mat-label>负责HR</mat-label>
                    <input matInput [(ngModel)]="stageData.hrResponsible">
                  </mat-form-field>
                </div>
                <mat-form-field appearance="outline" class="full-width">
                  <mat-label>特殊说明</mat-label>
                  <textarea matInput rows="3" [(ngModel)]="stageData.specialNotes"></textarea>
                </mat-form-field>
              </div>
            </div>
          }
          @case ('evaluation') {
            <div class="evaluation-panel">
              <div class="section">
                <h4>月度评估</h4>
                <div class="form-row">
                  <mat-form-field appearance="outline">
                    <mat-label>评估月份</mat-label>
                    <input matInput type="month" [(ngModel)]="stageData.evaluationMonth">
                  </mat-form-field>
                  <mat-form-field appearance="outline">
                    <mat-label>评估人</mat-label>
                    <input matInput [(ngModel)]="stageData.evaluator">
                  </mat-form-field>
                </div>
                <div class="evaluation-items">
                  <div class="eval-item">
                    <label>工作表现</label>
                    <mat-slider min="1" max="10" step="1" [(ngModel)]="stageData.performance">
                      <input matSliderThumb>
                    </mat-slider>
                    <span>{{ stageData.performance }}/10</span>
                  </div>
                  <div class="eval-item">
                    <label>团队协作</label>
                    <mat-slider min="1" max="10" step="1" [(ngModel)]="stageData.teamwork">
                      <input matSliderThumb>
                    </mat-slider>
                    <span>{{ stageData.teamwork }}/10</span>
                  </div>
                  <div class="eval-item">
                    <label>学习能力</label>
                    <mat-slider min="1" max="10" step="1" [(ngModel)]="stageData.learning">
                      <input matSliderThumb>
                    </mat-slider>
                    <span>{{ stageData.learning }}/10</span>
                  </div>
                </div>
                <mat-form-field appearance="outline" class="full-width">
                  <mat-label>评估意见</mat-label>
                  <textarea matInput rows="4" [(ngModel)]="stageData.evaluationComments"></textarea>
                </mat-form-field>
              </div>
            </div>
          }
        }
      </div>
      
      <div class="panel-footer">
        <button mat-stroked-button (click)="closeStagePanel()">取消</button>
        <button mat-raised-button color="primary" (click)="saveStageData()">保存</button>
      </div>
    </div>
  </div>
}