<div class="departments-container">
  <!-- 头部 -->
  <div class="page-header">
    <div class="header-left">
      <h1>项目组管理</h1>
      <p class="subtitle">管理设计团队的项目组划分</p>
    </div>
    <div class="header-right">
      <button class="btn btn-secondary" (click)="exportDepartments()">
        <i class="fa-solid fa-arrow-up-from-bracket"></i> 导出
      </button>
      <button class="btn btn-primary" (click)="addDepartment()">
        <i class="fa-solid fa-plus"></i> 新建项目组
      </button>
    </div>
  </div>

  <!-- 统计卡片 -->
  <div class="stats-cards">
    <div class="stat-card">
      <div class="stat-icon" style="background: #E6F7FF">
        <i class="fa-solid fa-users" style="color: #165DFF"></i>
      </div>
      <div class="stat-info">
        <div class="stat-value">{{ total() }}</div>
        <div class="stat-label">项目组总数</div>
      </div>
    </div>
  </div>

  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-left">
      <input
        type="text"
        class="search-input"
        placeholder="搜索项目组名称或组长..."
        [ngModel]="keyword()"
        (ngModelChange)="keyword.set($event)"
      />
    </div>
    <div class="filter-right">
      <button class="btn btn-text" (click)="resetFilters()">重置</button>
    </div>
  </div>

  <!-- 加载状态 -->
  <div *ngIf="loading()" class="loading-state">
    <div class="spinner"></div>
    <p>加载中...</p>
  </div>

  <!-- 数据列表 -->
  <div *ngIf="!loading()" class="data-table">
    <table>
      <thead>
        <tr>
          <th>项目组名称</th>
          <th>组长</th>
          <th>成员数</th>
          <th>创建时间</th>
          <th width="160">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let dept of filtered">
          <td>{{ dept.name }}</td>
          <td>{{ dept.leaderName }}</td>
          <td>{{ dept.memberCount }}</td>
          <td>
            {{
              dept.createdAt
                ? (dept.createdAt | date: 'yyyy-MM-dd HH:mm')
                : '-'
            }}
          </td>
          <td>
            <div class="action-buttons">
              <button
                class="btn-icon"
                (click)="viewDepartment(dept)"
                title="查看"
              >
                <i class="fa-solid fa-eye"></i>
              </button>
              <button
                class="btn-icon"
                (click)="editDepartment(dept)"
                title="编辑"
              >
                <i class="fa-solid fa-edit"></i>
              </button>
              <button
                class="btn-icon btn-danger"
                (click)="deleteDepartment(dept)"
                title="删除"
              >
                <i class="fa-solid fa-trash"></i>
              </button>
            </div>
          </td>
        </tr>
        <tr *ngIf="filtered.length === 0">
          <td colspan="5" 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 === 'add'
              ? '新建项目组'
              : panelMode === 'edit'
              ? '编辑项目组'
              : '项目组详情'
          }}
        </h2>
        <button class="btn-close" (click)="closePanel()">×</button>
      </div>

      <div class="panel-body">
        <!-- 详情模式 -->
        <div *ngIf="panelMode === 'detail' && currentDepartment" class="detail-view">
          <div class="detail-item">
            <label>项目组名称</label>
            <div class="detail-value">{{ currentDepartment.name }}</div>
          </div>
          <div class="detail-item">
            <label>组长</label>
            <div class="detail-value">{{ currentDepartment.leader.get("name") }}</div>
          </div>
          <div class="detail-item">
            <label>成员数</label>
            <div class="detail-value">{{ currentDepartment.memberCount }}</div>
          </div>
          <div class="detail-item">
            <label>创建时间</label>
            <div class="detail-value">
              {{
                currentDepartment.createdAt
                  ? (currentDepartment.createdAt | date: 'yyyy-MM-dd HH:mm')
                  : '-'
              }}
            </div>
          </div>
        </div>

        <!-- 编辑/新增模式 -->
        <div *ngIf="panelMode !== 'detail'" class="form-view">
          <div class="form-group">
            <label class="required">项目组名称</label>
            <input
              type="text"
              class="form-control"
              placeholder="请输入项目组名称"
              [(ngModel)]="formModel.name"
            />
          </div>

          <div class="form-group">
            <label class="required">组长</label>
            <select class="form-control" [(ngModel)]="formModel.leaderId">
              <option [value]="undefined">请选择组长</option>
              <option *ngFor="let emp of employees()" [value]="emp.id">
                {{ emp.name }}
              </option>
            </select>
          </div>
        </div>
      </div>

      <div class="panel-footer">
        <button class="btn btn-default" (click)="closePanel()">取消</button>
        <button
          *ngIf="panelMode === 'add'"
          class="btn btn-primary"
          (click)="saveDepartment()"
        >
          保存
        </button>
        <button
          *ngIf="panelMode === 'edit'"
          class="btn btn-primary"
          (click)="updateDepartment()"
        >
          更新
        </button>
      </div>
    </div>
  </div>
</div>
