<div class="employees-container">
  <div class="page-header">
    <div>
      <h1>员工管理</h1>
      <p class="subtitle">根据身份管理企业员工 (数据从企业微信同步)</p>
    </div>
    <button class="btn btn-secondary" (click)="exportEmployees()">导出</button>
  </div>

  <!-- 统计卡片 - 按身份统计 -->
  <div class="stats-cards">
    <div class="stat-card" (click)="setRoleFilter('all')" [class.active]="roleFilter() === 'all'">
      <div class="stat-value">{{ stats.total() }}</div>
      <div class="stat-label">全部员工</div>
    </div>
    <div class="stat-card" (click)="setRoleFilter('客服')" [class.active]="roleFilter() === '客服'">
      <div class="stat-value">{{ stats.service() }}</div>
      <div class="stat-label">客服</div>
    </div>
    <div class="stat-card" (click)="setRoleFilter('组员')" [class.active]="roleFilter() === '组员'">
      <div class="stat-value">{{ stats.designer() }}</div>
      <div class="stat-label">设计师(组员)</div>
    </div>
    <div class="stat-card" (click)="setRoleFilter('组长')" [class.active]="roleFilter() === '组长'">
      <div class="stat-value">{{ stats.leader() }}</div>
      <div class="stat-label">组长</div>
    </div>
    <div class="stat-card" (click)="setRoleFilter('人事')" [class.active]="roleFilter() === '人事'">
      <div class="stat-value">{{ stats.hr() }}</div>
      <div class="stat-label">人事</div>
    </div>
    <div class="stat-card" (click)="setRoleFilter('财务')" [class.active]="roleFilter() === '财务'">
      <div class="stat-value">{{ stats.finance() }}</div>
      <div class="stat-label">财务</div>
    </div>
  </div>

  <!-- 筛选栏 -->
  <div class="filter-bar">
    <input
      type="text"
      class="search-input"
      placeholder="搜索姓名、手机号或企微ID..."
      [ngModel]="keyword()"
      (ngModelChange)="keyword.set($event)"
    />
    <button class="btn btn-text" (click)="resetFilters()">重置</button>
  </div>

  <!-- 数据表格 -->
  <div *ngIf="loading()" class="loading-state">加载中...</div>
  <div *ngIf="!loading()" class="data-table">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>手机号</th>
          <th>企微ID</th>
          <th>身份</th>
          <th>部门</th>
          <th>状态</th>
          <th width="120">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let emp of filtered" [class.disabled]="emp.isDisabled">
          <td>{{ emp.name }}</td>
          <td>{{ emp.mobile }}</td>
          <td>{{ emp.userid }}</td>
          <td><span class="badge">{{ emp.roleName }}</span></td>
          <td>
            @if(emp.roleName=="客服"){
              客服部
            }@else if(emp.roleName=="管理员"){
              总部
            }@else{
              {{ emp.department }}
            }
           </td>
          <td><span [class]="'status ' + (emp.isDisabled ? 'disabled' : 'active')">{{ emp.isDisabled ? '已禁用' : '正常' }}</span></td>
          <td>
            <button class="btn-icon" (click)="viewEmployee(emp)" title="查看">👁</button>
            <button class="btn-icon" (click)="editEmployee(emp)" title="编辑">✏️</button>
            <button class="btn-icon" (click)="toggleEmployee(emp)" [title]="emp.isDisabled ? '启用' : '禁用'">
              {{ emp.isDisabled ? '✓' : '🚫' }}
            </button>
          </td>
        </tr>
        <tr *ngIf="filtered.length === 0">
          <td colspan="7" class="empty-state">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 侧边面板 -->
  <div class="side-panel" [class.open]="showPanel">
    <div class="panel-overlay" (click)="closePanel()"></div>
    <div class="panel-content">
      <div class="panel-header">
        <h2>{{ panelMode === 'edit' ? '编辑员工' : '员工详情' }}</h2>
        <button class="btn-close" (click)="closePanel()">×</button>
      </div>
      <div class="panel-body" *ngIf="currentEmployee">
        <div *ngIf="panelMode === 'detail'" class="detail-view">
          <div class="detail-item"><label>姓名</label><div>{{ currentEmployee.name }}</div></div>
          <div class="detail-item"><label>手机号</label><div>{{ currentEmployee.mobile }}</div></div>
          <div class="detail-item"><label>企微ID</label><div>{{ currentEmployee.userid }}</div></div>
          <div class="detail-item"><label>身份</label><div>{{ currentEmployee.roleName }}</div></div>
          <div class="detail-item"><label>部门</label><div>
          @if(currentEmployee.roleName=="客服"){
            客服部
          }@else if(currentEmployee.roleName=="管理员"){
            总部
          }@else{
            {{ currentEmployee.department }}
          }
          </div></div>
          <div class="detail-item"><label>状态</label><div>{{ currentEmployee.isDisabled ? '已禁用' : '正常' }}</div></div>
        </div>
        <div *ngIf="panelMode === 'edit'" class="form-view">
          <div class="form-group">
            <label>身份</label>
            <select class="form-control" [(ngModel)]="formModel.roleName">
              <option *ngFor="let role of roles" [value]="role">{{ role }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>部门</label>
            <select class="form-control" [(ngModel)]="formModel.departmentId">
              <option [value]="undefined">未分配</option>
              <option *ngFor="let dept of departments()" [value]="dept.id">{{ dept.name }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>
              <input type="checkbox" [(ngModel)]="formModel.isDisabled" />
              禁用此员工
            </label>
          </div>
        </div>
      </div>
      <div class="panel-footer" *ngIf="panelMode === 'edit'">
        <button class="btn btn-default" (click)="closePanel()">取消</button>
        <button class="btn btn-primary" (click)="updateEmployee()">更新</button>
      </div>
    </div>
  </div>
</div>
