<div class="designers-page">
  <!-- 页面标题和操作按钮 -->
  <div class="page-header">
    <div class="header-left">
      <h2 class="page-title">设计师管理</h2>
      <p class="page-description">管理设计师档案、技能等级与项目绩效</p>
    </div>
    <div class="header-actions">
      <button class="btn primary" (click)="addDesigner()">+ 新建设计师</button>
      <button class="btn" (click)="exportDesigners()">导出</button>
    </div>
  </div>

  <!-- 统计卡片 -->
  <div class="stats-cards">
    <div class="stat-card">
      <div class="stat-label">设计师总数</div>
      <div class="stat-value">{{ totalDesigners() }}</div>
    </div>
    <div class="stat-card green">
      <div class="stat-label">在线</div>
      <div class="stat-value">{{ activeDesigners() }}</div>
    </div>
    <div class="stat-card orange">
      <div class="stat-label">忙碌</div>
      <div class="stat-value">{{ busyDesigners() }}</div>
    </div>
    <div class="stat-card gray">
      <div class="stat-label">离线</div>
      <div class="stat-value">{{ inactiveDesigners() }}</div>
    </div>
  </div>

  <!-- 工具栏：搜索与筛选 -->
  <div class="toolbar">
    <div class="search">
      <input placeholder="搜索姓名/邮箱" (input)="searchTerm.set($any($event.target).value)" [value]="searchTerm()" />
    </div>
    <div class="filters">
      <select (change)="selectedDepartment.set($any($event.target).value)">
        <option value="all">全部部门</option>
        <option *ngFor="let d of departments" [value]="d">{{ d }}</option>
      </select>
      <select (change)="selectedLevel.set($any($event.target).value)">
        <option value="all">全部级别</option>
        <option value="junior">初级</option>
        <option value="intermediate">中级</option>
        <option value="senior">高级</option>
        <option value="expert">专家</option>
      </select>
      <select (change)="selectedStatus.set($any($event.target).value)">
        <option value="all">全部状态</option>
        <option value="active">在线</option>
        <option value="busy">忙碌</option>
        <option value="inactive">离线</option>
      </select>
      <button class="btn" (click)="resetFilters()">重置</button>
    </div>
  </div>

  <!-- 表格 -->
  <div class="table-card">
    <div class="table header">
      <div class="th name">设计师</div>
      <div class="th dept">部门</div>
      <div class="th level">级别</div>
      <div class="th status">状态</div>
      <div class="th projects">项目数</div>
      <div class="th rate">完工率</div>
      <div class="th score">满意度</div>
      <div class="th join">入职日期</div>
      <div class="th active">最近活跃</div>
      <div class="th actions">操作</div>
    </div>

    <div class="table row" *ngFor="let d of filteredDesigners">
      <div class="cell name">
        <img [src]="d.avatar" class="avatar" alt="头像" />
        <div class="info">
          <div class="title">{{ d.name }}</div>
          <div class="sub">{{ d.email }} · {{ d.phone }}</div>
        </div>
      </div>
      <div class="cell">{{ d.department }}</div>
      <div class="cell"><span class="tag">{{ getLevelText(d.level) }}</span></div>
      <div class="cell">
        <span class="status-dot" [class.online]="d.status==='active'" [class.busy]="d.status==='busy'" [class.offline]="d.status==='inactive'"></span>
        {{ getStatusText(d.status) }}
      </div>
      <div class="cell">{{ d.projectCount }}</div>
      <div class="cell">{{ d.completionRate }}%</div>
      <div class="cell">{{ d.satisfactionScore }}</div>
      <div class="cell">{{ d.joinDate | date:'yyyy-MM-dd' }}</div>
      <div class="cell">{{ d.lastActiveDate | date:'yyyy-MM-dd' }}</div>
      <div class="cell actions">
        <button class="icon" title="查看" (click)="viewDesigner(d)">详</button>
        <button class="icon" title="编辑" (click)="editDesigner(d)">编</button>
        <button class="icon danger" title="删除" (click)="deleteDesigner(d)">删</button>
      </div>
    </div>

    <div class="empty" *ngIf="filteredDesigners.length === 0">暂无符合条件的数据</div>
  </div>

  <!-- 侧边面板 -->
  <div class="panel-overlay" *ngIf="showPanel" (click)="closePanel()">
    <div class="side-panel" (click)="$event.stopPropagation()">
      <!-- 面板标题 -->
      <div class="panel-header">
        <h3>
          {{ panelMode === 'add' ? '新建设计师' : panelMode === 'detail' ? '设计师详情' : '编辑设计师' }}
        </h3>
        <button class="close-btn" (click)="closePanel()">×</button>
      </div>

      <!-- 详情模式 -->
      <div class="panel-content" *ngIf="panelMode === 'detail' && currentDesigner">
        <div class="detail-card">
          <div class="detail-avatar">
            <img [src]="currentDesigner.avatar" alt="头像" />
          </div>
          <div class="detail-info">
            <h4>{{ currentDesigner.name }}</h4>
            <p class="detail-email">{{ currentDesigner.email }}</p>
            <p class="detail-phone">{{ currentDesigner.phone }}</p>
          </div>
        </div>
        <div class="detail-section">
          <label>部门</label>
          <span>{{ currentDesigner.department }}</span>
        </div>
        <div class="detail-section">
          <label>级别</label>
          <span class="tag">{{ getLevelText(currentDesigner.level) }}</span>
        </div>
        <div class="detail-section">
          <label>状态</label>
          <span class="status-dot" [class.online]="currentDesigner.status==='active'" [class.busy]="currentDesigner.status==='busy'" [class.offline]="currentDesigner.status==='inactive'"></span>
          {{ getStatusText(currentDesigner.status) }}
        </div>
        <div class="detail-section">
          <label>技能</label>
          <div class="skills-tags">
            <span class="skill-tag" *ngFor="let skill of currentDesigner.skills">{{ skill }}</span>
          </div>
        </div>
        <div class="detail-section">
          <label>项目数</label>
          <span>{{ currentDesigner.projectCount }}</span>
        </div>
        <div class="detail-section">
          <label>完成率</label>
          <span>{{ currentDesigner.completionRate }}%</span>
        </div>
        <div class="detail-section">
          <label>满意度</label>
          <span>{{ currentDesigner.satisfactionScore }}/5</span>
        </div>
        <div class="detail-section">
          <label>入职日期</label>
          <span>{{ currentDesigner.joinDate | date:'yyyy-MM-dd' }}</span>
        </div>
        <div class="detail-section">
          <label>最近活跃</label>
          <span>{{ currentDesigner.lastActiveDate | date:'yyyy-MM-dd HH:mm' }}</span>
        </div>
      </div>

      <!-- 新增/编辑模式 -->
      <div class="panel-content" *ngIf="panelMode === 'add' || panelMode === 'edit'">
        <form class="designer-form">
          <div class="form-group">
            <label>姓名 *</label>
            <input type="text" [(ngModel)]="formModel.name" name="name" placeholder="请输入姓名" required>
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input type="email" [(ngModel)]="formModel.email" name="email" placeholder="请输入邮箱">
          </div>
          <div class="form-group">
            <label>电话</label>
            <input type="text" [(ngModel)]="formModel.phone" name="phone" placeholder="请输入电话">
          </div>
          <div class="form-group">
            <label>部门</label>
            <select [(ngModel)]="formModel.department" name="department">
              <option *ngFor="let d of departments" [value]="d">{{ d }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>级别</label>
            <select [(ngModel)]="formModel.level" name="level">
              <option value="junior">初级</option>
              <option value="intermediate">中级</option>
              <option value="senior">高级</option>
              <option value="expert">专家</option>
            </select>
          </div>
          <div class="form-group">
            <label>状态</label>
            <select [(ngModel)]="formModel.status" name="status">
              <option value="active">在线</option>
              <option value="busy">忙碌</option>
              <option value="inactive">离线</option>
            </select>
          </div>
          <div class="form-group">
            <label>技能</label>
            <input type="text" [(ngModel)]="formModel.skillsInput" name="skillsInput" placeholder="请输入技能，用逗号分隔">
          </div>
          <div class="form-group">
            <label>项目数</label>
            <input type="number" [(ngModel)]="formModel.projectCount" name="projectCount" placeholder="0" min="0">
          </div>
          <div class="form-group">
            <label>完成率(%)</label>
            <input type="number" [(ngModel)]="formModel.completionRate" name="completionRate" placeholder="0" min="0" max="100">
          </div>
          <div class="form-group">
            <label>满意度(1-5)</label>
            <input type="number" [(ngModel)]="formModel.satisfactionScore" name="satisfactionScore" placeholder="5" min="1" max="5" step="0.1">
          </div>
        </form>
      </div>

      <!-- 面板操作按钮 -->
      <div class="panel-footer">
        <button class="btn" (click)="closePanel()">取消</button>
        <button class="btn primary" *ngIf="panelMode === 'add'" (click)="saveDesigner()">保存</button>
        <button class="btn primary" *ngIf="panelMode === 'edit'" (click)="updateDesigner()">更新</button>
      </div>
    </div>
  </div>
</div>