<div class="hr-dashboard-container">
  <!-- 顶部导航按钮 -->
  <div class="top-navigation">
    <div class="nav-buttons">
      <button 
        mat-raised-button 
        [class.active]="activeTab === 'visualization'"
        (click)="switchTab('visualization')"
        class="nav-button">
        <mat-icon>analytics</mat-icon>
        数据可视化
      </button>
      <button 
        mat-raised-button 
        [class.active]="activeTab === 'promotion'"
        (click)="switchTab('promotion')"
        class="nav-button">
        <mat-icon>trending_up</mat-icon>
        职级与晋升管理
      </button>
      <button 
        mat-raised-button 
        [class.active]="activeTab === 'onboarding'"
        (click)="switchTab('onboarding')"
        class="nav-button">
        <mat-icon>person_add</mat-icon>
        新人跟进管理
      </button>
    </div>
  </div>

  <!-- 数据可视化页面 -->
  @if (activeTab === 'visualization') {
    <div class="visualization-page">
      <div class="main-layout">
        <!-- 左侧数据展示区域 -->
        <div class="left-panel">
          <!-- 职级分布饼图 -->
          <mat-card class="chart-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>pie_chart</mat-icon>
                职级分布
              </mat-card-title>
              <mat-card-subtitle>设计师职级占比分析</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <div class="pie-chart-container">
                <canvas #pieChart></canvas>
              </div>
              <div class="chart-legend">
                @for (item of rankDistribution; track item.level) {
                  <div class="legend-item">
                    <div class="legend-color" [style.background-color]="item.color"></div>
                    <span>{{item.level}}: {{item.percentage}}% ({{item.count}}人)</span>
                  </div>
                }
              </div>
            </mat-card-content>
          </mat-card>

          <!-- 入职离职趋势折线图 -->
          <mat-card class="chart-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>trending_up</mat-icon>
                入职离职趋势
              </mat-card-title>
              <mat-card-subtitle>近6个月人员流动情况</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <div class="line-chart-container">
                <canvas #lineChart></canvas>
              </div>
              <div class="key-notes">
                <h4>关键节点</h4>
                @for (note of keyNotes; track note.month) {
                  <div class="note-item">
                    <mat-icon class="note-icon">info</mat-icon>
                    <span class="note-text">{{note.month}}：{{note.description}}</span>
                  </div>
                }
              </div>
            </mat-card-content>
          </mat-card>

          <!-- 绩效总览雷达图 -->
          <mat-card class="chart-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>radar</mat-icon>
                绩效总览
              </mat-card-title>
              <mat-card-subtitle>各部门4个维度绩效对比</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <div class="radar-chart-container">
                <canvas #radarChart></canvas>
              </div>
              <div class="radar-legend">
                @for (dept of departmentPerformance; track dept.department) {
                  <div class="legend-item">
                    <div class="legend-color" [style.background-color]="getDepartmentColor(dept.department)"></div>
                    <span>{{dept.department}}</span>
                  </div>
                }
              </div>
            </mat-card-content>
          </mat-card>

          <!-- 关键岗位空缺数 -->
          <mat-card class="chart-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>work_off</mat-icon>
                关键岗位空缺
              </mat-card-title>
              <mat-card-subtitle>紧急招聘需求</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <div class="vacancy-list">
                @for (vacancy of keyVacancies; track vacancy.position) {
                  <div class="vacancy-item" [class]="getPriorityClass(vacancy.priority)">
                    <div class="vacancy-icon">
                      <mat-icon>{{getVacancyIcon(vacancy.priority)}}</mat-icon>
                    </div>
                    <div class="vacancy-info">
                      <h4>{{vacancy.position}}</h4>
                      <p>空缺：{{vacancy.count}}人</p>
                      <span class="priority-badge" [class]="'priority-' + vacancy.priority">
                        {{vacancy.priority === 'high' ? '紧急' : vacancy.priority === 'medium' ? '一般' : '低'}}
                      </span>
                    </div>
                  </div>
                }
              </div>
            </mat-card-content>
          </mat-card>
        </div>

        <!-- 右侧待办事项区域 -->
        <div class="right-panel">
          <!-- 待办事项按钮卡片 -->
          <mat-card class="todo-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>assignment</mat-icon>
                待办事项列表
              </mat-card-title>
              <mat-card-subtitle>点击按钮查看详情</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <!-- 待办事项按钮卡片 -->
              <div class="todo-buttons">
                <button mat-raised-button 
                        class="todo-button priority-high" 
                        (click)="toggleTodoList()"
                        [class.expanded]="showTodoList">
                  <mat-icon>assignment_turned_in</mat-icon>
                  <span>查看待办事项</span>
                  <mat-icon class="expand-icon">{{showTodoList ? 'expand_less' : 'expand_more'}}</mat-icon>
                </button>
              </div>
              
              <!-- 可展开的待办事项列表 -->
              @if (showTodoList) {
                <div class="todo-list" [@slideInOut]>
                  @for (todo of todoList; track todo.id) {
                    <div class="todo-item" [class]="getPriorityClass(todo.priority)">
                      <div class="todo-content">
                        <h4>{{todo.title}}</h4>
                        <p>{{todo.description}}</p>
                        <div class="todo-meta">
                          <span class="priority-badge" [class]="'priority-' + todo.priority">
                            {{todo.priority === 'high' ? '紧急' : todo.priority === 'medium' ? '一般' : '低'}}
                          </span>
                          <span class="due-date">{{todo.dueDate}}</span>
                        </div>
                      </div>
                      <div class="todo-actions">
                        <button mat-icon-button color="primary">
                          <mat-icon>edit</mat-icon>
                        </button>
                        <button mat-icon-button color="accent">
                          <mat-icon>check</mat-icon>
                        </button>
                      </div>
                    </div>
                  }
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </div>
  }

  <!-- 职级与晋升管理页面 -->
  @if (activeTab === 'promotion') {
    <div class="promotion-page">
      <div class="content-layout">
        <!-- 晋升规则卡片 -->
        <div class="promotion-rules-section">
          <mat-card class="rules-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>rule</mat-icon>
                晋升规则
              </mat-card-title>
            </mat-card-header>
            <mat-card-content>
              @for (rule of promotionRules; track rule.id) {
                <div class="rule-item">
                  <h4 class="rule-title">{{rule.title}}</h4>
                  <p class="rule-description">{{rule.description}}</p>
                  <div class="rule-conditions">
                    @for (condition of rule.conditions; track condition) {
                      <mat-chip class="condition-chip">{{condition}}</mat-chip>
                    }
                  </div>
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>

        <!-- 部门绩效展示 -->
        <div class="performance-section">
          <mat-card class="performance-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>assessment</mat-icon>
                部门绩效概览
              </mat-card-title>
            </mat-card-header>
            <mat-card-content>
              @for (dept of departmentPerformance; track dept.department) {
                <div class="dept-performance-item">
                  <div class="dept-header">
                    <h4 class="dept-name">{{dept.department}}</h4>
                    <div class="overall-score">{{dept.completionRate}}%</div>
                  </div>
                  <div class="performance-metrics">
                    <div class="metric">
                      <span class="metric-label">项目完成率</span>
                      <mat-progress-bar mode="determinate" [value]="dept.completionRate"></mat-progress-bar>
                      <span class="metric-value">{{dept.completionRate}}%</span>
                    </div>
                    <div class="metric">
                      <span class="metric-label">优秀作品率</span>
                      <mat-progress-bar mode="determinate" [value]="dept.excellentWorkRate"></mat-progress-bar>
                      <span class="metric-value">{{dept.excellentWorkRate}}%</span>
                    </div>
                    <div class="metric">
                      <span class="metric-label">客户满意度</span>
                      <mat-progress-bar mode="determinate" [value]="dept.satisfactionRate"></mat-progress-bar>
                      <span class="metric-value">{{dept.satisfactionRate}}%</span>
                    </div>
                    <div class="metric">
                      <span class="metric-label">逾期率</span>
                      <mat-progress-bar mode="determinate" [value]="dept.overdueRate" color="warn"></mat-progress-bar>
                      <span class="metric-value">{{dept.overdueRate}}%</span>
                    </div>
                  </div>
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </div>
  }

  <!-- 新人跟进管理页面 -->
  @if (activeTab === 'onboarding') {
    <div class="onboarding-page">
      <div class="content-layout">
        <!-- 新人列表 -->
        <div class="newbie-list-section">
          <mat-card class="newbie-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>group_add</mat-icon>
                新人列表
              </mat-card-title>
            </mat-card-header>
            <mat-card-content>
              @for (newbie of newbieList; track newbie.id) {
                <div class="newbie-item">
                  <div class="newbie-avatar">
                    <mat-icon>person</mat-icon>
                  </div>
                  <div class="newbie-info">
                    <h4 class="newbie-name">{{newbie.name}}</h4>
                    <p class="newbie-position">{{newbie.position}}</p>
                    <p class="newbie-date">入职日期：{{newbie.joinDate}}</p>
                  </div>
                  <div class="newbie-progress">
                    <mat-progress-bar mode="determinate" [value]="newbie.progress"></mat-progress-bar>
                    <span class="progress-text">{{newbie.progress}}%</span>
                  </div>
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>

        <!-- 跟进检查点 -->
        <div class="checkpoint-section">
          <mat-card class="checkpoint-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>checklist</mat-icon>
                跟进检查点
              </mat-card-title>
            </mat-card-header>
            <mat-card-content>
              @for (checkpoint of onboardingCheckpoints; track checkpoint.id) {
                <div class="checkpoint-item">
                  <mat-checkbox
                    [checked]="checkpoint.completed"
                    (change)="checkpoint.completed = $any($event).checked">
                  </mat-checkbox>
                  <div class="checkpoint-content">
                    <h4 class="checkpoint-title">{{checkpoint.title}}</h4>
                    <p class="checkpoint-description">{{checkpoint.description}}</p>
                    <div class="checkpoint-timeline">
                      <mat-icon>schedule</mat-icon>
                      <span>{{checkpoint.dueDate | date:'yyyy-MM-dd'}}</span>
                    </div>
                  </div>
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </div>
  }
</div>