<div class="employee-detail-container" *ngIf="employee() as emp">
  <!-- iOS风格导航栏 -->
  <div class="ios-navbar">
    <button class="nav-back-btn" (click)="goBack()">
      <mat-icon>chevron_left</mat-icon>
      <span>返回</span>
    </button>
    <h1 class="nav-title">员工详情</h1>
    <button class="nav-more-btn" [matMenuTriggerFor]="headerMenu">
      <mat-icon>more_horiz</mat-icon>
    </button>
    <mat-menu #headerMenu="matMenu" class="ios-action-menu">
      <button mat-menu-item (click)="editEmployee()" class="ios-menu-item">
        <mat-icon>edit</mat-icon>
        <span>编辑信息</span>
      </button>
      <button mat-menu-item (click)="exportEmployee()" class="ios-menu-item">
        <mat-icon>file_download</mat-icon>
        <span>导出档案</span>
      </button>
      <mat-divider></mat-divider>
      <button mat-menu-item (click)="deleteEmployee()" class="ios-menu-item danger">
        <mat-icon>delete</mat-icon>
        <span>删除员工</span>
      </button>
    </mat-menu>
  </div>

  <!-- iOS风格员工头像区域 -->
  <div class="ios-profile-header">
    <div class="profile-avatar">
      <img [src]="emp.avatar || 'assets/images/default-avatar.svg'" alt="员工头像" class="avatar-image">
      <div class="status-dot" [ngClass]="getStatusClass(emp.status)"></div>
    </div>
    <h2 class="profile-name">{{emp.name}}</h2>
    <p class="profile-title">{{emp.position}} · {{emp.department}}</p>
    <div class="profile-actions">
      <button class="action-btn call-btn" (click)="callEmployee(emp.phone)">
        <mat-icon>phone</mat-icon>
      </button>
      <button class="action-btn message-btn" (click)="emailEmployee(emp.email)">
        <mat-icon>email</mat-icon>
      </button>
      <button class="action-btn share-btn" (click)="shareEmployee()">
        <mat-icon>share</mat-icon>
      </button>
    </div>
  </div>

  <!-- iOS风格基础信息列表 -->
  <div class="ios-section">
    <div class="section-header">
      <h3>基础信息</h3>
    </div>
    <div class="ios-list">
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">姓名</span>
          <span class="item-value">{{emp.name}}</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">年龄</span>
          <span class="item-value">{{calculateAge(emp.birthDate)}}岁</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">学历</span>
          <span class="item-value">{{emp.education || '未填写'}}</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">工作年限</span>
          <span class="item-value">{{emp.workYears || '未填写'}}</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">求职岗位</span>
          <span class="item-value">{{emp.position}}</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">身份证号</span>
          <span class="item-value">{{maskIdCard(emp.idCard)}}</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">银行卡号</span>
          <span class="item-value">{{maskBankCard(emp.bankCard)}}</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">手机号码</span>
          <span class="item-value">{{emp.phone}}</span>
        </div>
      </div>
    </div>
  </div>

  <!-- iOS风格审核初筛列表 -->
  <div class="ios-section">
    <div class="section-header">
      <h3>审核初筛</h3>
    </div>
    <div class="ios-list">
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">审核状态</span>
          <div class="status-badge" [ngClass]="getScreeningStatusClass(emp.screeningStatus)">
            <mat-icon>{{getScreeningStatusIcon(emp.screeningStatus)}}</mat-icon>
            <span>{{getScreeningStatusText(emp.screeningStatus)}}</span>
          </div>
        </div>
      </div>
      @if (emp.screeningComment) {
        <div class="list-item">
          <div class="item-content">
            <span class="item-label">审核备注</span>
            <span class="item-value">{{emp.screeningComment}}</span>
          </div>
        </div>
      }
      @if (emp.screeningTime) {
        <div class="list-item">
          <div class="item-content">
            <span class="item-label">审核时间</span>
            <span class="item-value">{{emp.screeningTime | date:'yyyy-MM-dd HH:mm'}}</span>
          </div>
        </div>
      }
    </div>
    
    @if (emp.screeningStatus === 'pending') {
      <div class="ios-actions">
        <button class="ios-btn primary" (click)="approveScreening()">
          <mat-icon>check_circle</mat-icon>
          通过初筛
        </button>
        <button class="ios-btn secondary" (click)="rejectScreening()">
          <mat-icon>cancel</mat-icon>
          不通过
        </button>
      </div>
    }
  </div>

  <!-- iOS风格联系信息列表 -->
  <div class="ios-section">
    <div class="section-header">
      <h3>联系信息</h3>
    </div>
    <div class="ios-list">
      <div class="list-item clickable" (click)="callEmployee(emp.phone)">
        <div class="item-icon">
          <mat-icon>phone</mat-icon>
        </div>
        <div class="item-content">
          <span class="item-label">手机号码</span>
          <span class="item-value">{{emp.phone}}</span>
        </div>
        <div class="item-action">
          <mat-icon>chevron_right</mat-icon>
        </div>
      </div>
      <div class="list-item clickable" (click)="emailEmployee(emp.email)" [class.disabled]="!emp.email">
        <div class="item-icon">
          <mat-icon>email</mat-icon>
        </div>
        <div class="item-content">
          <span class="item-label">邮箱地址</span>
          <span class="item-value">{{emp.email || '未填写'}}</span>
        </div>
        <div class="item-action">
          <mat-icon>chevron_right</mat-icon>
        </div>
      </div>
      <div class="list-item">
        <div class="item-icon">
          <mat-icon>location_on</mat-icon>
        </div>
        <div class="item-content">
          <span class="item-label">家庭住址</span>
          <span class="item-value">{{emp.address || '未填写'}}</span>
        </div>
      </div>
    </div>
  </div>

  <!-- iOS风格工作信息列表 -->
  <div class="ios-section">
    <div class="section-header">
      <h3>工作信息</h3>
    </div>
    <div class="ios-list">
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">所属部门</span>
          <span class="item-value">{{emp.department}}</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">职位</span>
          <span class="item-value">{{emp.position}}</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">员工状态</span>
          <div class="status-badge" [ngClass]="getStatusClass(emp.status)">
            {{emp.status}}
          </div>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">入职日期</span>
          <span class="item-value">{{emp.hireDate | date:'yyyy年MM月dd日'}}</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">工作年限</span>
          <span class="item-value">{{calculateWorkYears(emp.hireDate)}}年</span>
        </div>
      </div>
      <div class="list-item">
        <div class="item-content">
          <span class="item-label">直属上级</span>
          <span class="item-value">{{emp.supervisor || '未指定'}}</span>
        </div>
      </div>
    </div>
  </div>

  <!-- iOS风格底部操作按钮 -->
  <div class="ios-actions">
    <button class="ios-action-button primary" (click)="editEmployee()">
      <mat-icon>edit</mat-icon>
      <span>编辑员工</span>
    </button>
    <button class="ios-action-button" (click)="viewAttendance()">
      <mat-icon>schedule</mat-icon>
      <span>考勤记录</span>
    </button>
    <button class="ios-action-button" (click)="viewSalary()">
      <mat-icon>attach_money</mat-icon>
      <span>薪资记录</span>
    </button>
  </div>
</div>

<!-- iOS风格审核对话框 -->
<div class="ios-modal" [class.show]="showReviewDialog">
  <div class="modal-backdrop" (click)="closeReviewDialog()"></div>
  <div class="modal-content">
    <div class="modal-header">
      <h3>审核员工</h3>
      <button class="close-button" (click)="closeReviewDialog()">
        <mat-icon>close</mat-icon>
      </button>
    </div>
    <div class="modal-body">
      <div class="ios-section">
        <div class="section-header">
          <h4>审核结果</h4>
        </div>
        <div class="ios-list">
          <div class="list-item clickable" [class.selected]="reviewResult === 'approved'" (click)="reviewResult = 'approved'">
            <div class="item-content">
              <span class="item-label">通过</span>
            </div>
            <div class="item-action" *ngIf="reviewResult === 'approved'">
              <mat-icon>check</mat-icon>
            </div>
          </div>
          <div class="list-item clickable" [class.selected]="reviewResult === 'rejected'" (click)="reviewResult = 'rejected'">
            <div class="item-content">
              <span class="item-label">拒绝</span>
            </div>
            <div class="item-action" *ngIf="reviewResult === 'rejected'">
              <mat-icon>check</mat-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="ios-section">
        <div class="section-header">
          <h4>审核备注</h4>
        </div>
        <div class="ios-textarea">
          <textarea [(ngModel)]="reviewComment" rows="4" placeholder="请输入审核意见..."></textarea>
        </div>
      </div>
    </div>
    <div class="modal-actions">
      <button class="ios-button secondary" (click)="closeReviewDialog()">取消</button>
      <button class="ios-button primary" (click)="submitReview()">提交审核</button>
    </div>
  </div>
</div>