<div class="dashboard-container">
  <header class="page-header">
    <h1>人事看板</h1>
    <p class="page-description">人事数据总览，聚焦入职/离职动态、绩效核心指标、风险预警三大维度</p>
  </header>

  <!-- 时间维度筛选 -->
  <div class="filter-bar">
    <div class="time-filter">
      <span class="filter-label">时间维度：</span>
      <div class="filter-buttons">
        <button mat-button [class.active]="timeFilter() === 'day'" (click)="changeTimeFilter('day')">日</button>
        <button mat-button [class.active]="timeFilter() === 'week'" (click)="changeTimeFilter('week')">周</button>
        <button mat-button [class.active]="timeFilter() === 'month'" (click)="changeTimeFilter('month')">月</button>
      </div>
    </div>
  </div>

  <!-- 主内容区 -->
  <div class="dashboard-content">
    <!-- 入职离职看板 -->
    <mat-card class="dashboard-card">
      <mat-card-header>
        <mat-card-title>
          <div class="card-title-container">
            <mat-icon>trending_up</mat-icon>
            <span>入职离职看板</span>
          </div>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div class="card-section">
          <h3>月度入职离职数据</h3>
          <!-- 用 ECharts 展示分组柱状图（入职/离职） -->
          <div id="hrMovementChart" class="chart-container"></div>
        </div>

        <div class="card-section">
          <h3>流程进度追踪</h3>
          <div class="process-tracking">
            <div *ngFor="let process of pendingProcesses()" class="process-item">
              <div class="process-header">
                <span class="process-title">
                  {{process.type === 'hire' ? '待审核入职申请' : '待办理离职手续'}}
                </span>
                <span class="process-count">{{process.count}}个</span>
              </div>
              <mat-progress-bar [value]="process.progress" color="primary"></mat-progress-bar>
              <button mat-button color="primary" class="process-action" (click)="navigateToProcess(process.type)">
                查看详情
              </button>
            </div>
          </div>
        </div>

        <div class="card-section">
          <h3>风险预警</h3>
          <div class="risk-alerts">
            <div *ngFor="let alert of riskAlerts()" class="risk-alert">
              <div class="alert-header">
                <mat-icon color="warn">warning</mat-icon>
                <span class="alert-title">{{alert.type}}</span>
                <span class="alert-count">{{alert.count}}人</span>
              </div>
              <div class="alert-employees">
                <div *ngFor="let employee of alert.employees" class="employee-item">
                  <span class="employee-name">{{employee.name}}</span>
                  <span class="employee-position">{{employee.position}}</span>
                  <span class="employee-department">{{employee.department}}</span>
                  <span *ngIf="employee.daysLeft" class="days-left">剩余{{employee.daysLeft}}天</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </mat-card-content>
    </mat-card>

    <!-- 绩效总览看板 -->
    <mat-card class="dashboard-card">
      <mat-card-header>
        <mat-card-title>
          <div class="card-title-container">
            <mat-icon>assessment</mat-icon>
            <span>绩效总览看板</span>
          </div>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div class="card-section">
          <h3>核心指标展示</h3>
          <div class="metrics-container">
            <div *ngFor="let metric of performanceMetrics()" class="metric-item">
              <div class="metric-header">
                <span class="metric-name">{{metric.name}}</span>
                <div class="metric-values">
                  <span class="metric-actual">{{metric.actual}}{{metric.unit}}</span>
                  <span class="metric-target">目标: {{metric.target}}{{metric.unit}}</span>
                </div>
              </div>
              <mat-progress-bar 
                [value]="(metric.actual / metric.target) * 100" 
                [color]="getProgressColor(metric.actual, metric.target)">
              </mat-progress-bar>
            </div>
          </div>

          <div class="department-performance">
            <h4>部门绩效对比</h4>
            <div class="department-table">
              <div class="table-header">
                <div class="table-cell">部门</div>
                <div class="table-cell">优秀作品率</div>
                <div class="table-cell">准时交付率</div>
                <div class="table-cell">客户满意度</div>
              </div>
              <div *ngFor="let dept of departmentPerformance()" class="table-row">
                <div class="table-cell">{{dept.name}}</div>
                <div class="table-cell">{{dept.excellentWorkRate}}%</div>
                <div class="table-cell">{{dept.deliveryOnTimeRate}}%</div>
                <div class="table-cell">{{dept.customerSatisfaction}}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="card-section">
          <h3>绩效等级分布</h3>
          <!-- 用 ECharts 饼图替换占位块 -->
          <div id="hrPerformanceDistributionChart" class="chart-container"></div>
        </div>

        <div class="card-section">
          <h3>扣分项预警</h3>
          <div class="penalty-warnings">
            <div *ngFor="let warning of penaltyWarnings()" class="warning-item">
              <div class="warning-header">
                <mat-icon color="warn">error</mat-icon>
                <span class="warning-issue">{{warning.issue}}</span>
              </div>
              <div class="warning-details">
                <div class="warning-departments">
                  <h4>高发部门</h4>
                  <div *ngFor="let dept of warning.departments" class="department-item">
                    <span class="department-name">{{dept.name}}</span>
                    <span class="department-count">{{dept.count}}次</span>
                  </div>
                </div>
                <div class="warning-employees">
                  <h4>高发个人</h4>
                  <div *ngFor="let emp of warning.employees" class="employee-item">
                    <span class="employee-name">{{emp.name}}</span>
                    <span class="employee-department">{{emp.department}}</span>
                    <span class="employee-count">{{emp.count}}次</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </mat-card-content>
    </mat-card>

    <!-- 关键数据看板 -->
    <mat-card class="dashboard-card">
      <mat-card-header>
        <mat-card-title>
          <div class="card-title-container">
            <mat-icon>insights</mat-icon>
            <span>关键数据看板</span>
          </div>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div class="card-section">
          <h3>员工结构分析</h3>
          <div class="structure-analysis">
            <mat-tab-group>
              <mat-tab *ngFor="let structure of employeeStructures()" [label]="structure.category">
                <div class="structure-data">
                  <div *ngFor="let item of structure.data" class="structure-item">
                    <div class="structure-header">
                      <span class="structure-name">{{item.name}}</span>
                      <span class="structure-count">{{item.count}}人</span>
                    </div>
                    <mat-progress-bar value="{{item.percentage}}" color="primary"></mat-progress-bar>
                    <span class="structure-percentage">{{item.percentage}}%</span>
                  </div>
                </div>
              </mat-tab>
            </mat-tab-group>
          </div>
        </div>

        <div class="card-section">
          <h3>异动趋势</h3>
          <!-- 用 ECharts 折线图替换占位块 -->
          <div id="hrTrendChart" class="chart-container"></div>
        </div>

        <div class="card-section">
          <h3>待办事项提醒</h3>
          <div class="todo-items">
            <div *ngFor="let item of todoItems()" class="todo-item" [ngClass]="getPriorityClass(item.priority)">
              <div class="todo-header">
                <span class="todo-task">{{item.task}}</span>
                <mat-chip-set>
                  <mat-chip>{{item.type}}</mat-chip>
                </mat-chip-set>
              </div>
              <div class="todo-footer">
                <span class="todo-due-date">截止日期: {{item.dueDate | date:'yyyy-MM-dd'}}</span>
                <span class="todo-priority">{{item.priority === 'high' ? '紧急' : item.priority === 'medium' ? '中等' : '普通'}}</span>
              </div>
            </div>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
</div>