<div class="user-management">
  <!-- 页面标题和操作按钮 -->
  <div class="page-header">
    <div class="header-left">
      <h2 class="page-title">用户与角色管理</h2>
      <p class="page-description">管理系统用户账号和角色权限配置</p>
    </div>
  </div>

  <!-- 标签页导航 -->
  <div class="tab-navigation">
    <button class="tab-btn" [class.active]="activeTab === 'users'"
            (click)="switchTab('users')">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
        <circle cx="9" cy="7" r="4"></circle>
        <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
      </svg>
      用户管理
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'roles'"
            (click)="switchTab('roles')">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 14v4"></path>
        <path d="M16 2v4"></path>
        <path d="M8 2v4"></path>
        <path d="M3 10h18"></path>
        <path d="M12 14a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"></path>
        <path d="M12 22v-6"></path>
      </svg>
      角色管理
    </button>
  </div>

  <!-- 用户管理内容 -->
  <div *ngIf="activeTab === 'users'" class="tab-content">
    <!-- 搜索和筛选区域 -->
    <div class="search-filter-section">
      <div class="search-input-wrapper">
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input matInput type="text" placeholder="搜索用户名、姓名、邮箱或手机号..."
               [(ngModel)]="userSearchTerm" (keyup.enter)="onUserSearch()"
               class="search-input">
        <button mat-button *ngIf="userSearchTerm" class="clear-search-btn"
                (click)="userSearchTerm = ''; onUserSearch()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      
      <div class="filter-controls">
        <div class="filter-wrapper">
          <mat-select [(ngModel)]="userRoleFilter" (selectionChange)="onUserRoleFilterChange()"
                     placeholder="角色" class="filter-select">
            <mat-option value="">全部角色</mat-option>
            <mat-option *ngFor="let role of roleList" [value]="role">
              {{ role }}
            </mat-option>
          </mat-select>
        </div>
        
        <div class="filter-wrapper">
          <mat-select [(ngModel)]="userStatusFilter" (selectionChange)="onUserStatusFilterChange()"
                     placeholder="状态" class="filter-select">
            <mat-option value="">全部状态</mat-option>
            <mat-option value="active">激活</mat-option>
            <mat-option value="inactive">禁用</mat-option>
          </mat-select>
        </div>
        
        <button mat-button class="filter-btn" (click)="onUserSearch()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
          筛选
        </button>
        
        <button mat-raised-button color="primary" class="create-btn"
                (click)="openUserDialog()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          添加用户
        </button>
      </div>
    </div>

    <!-- 用户统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-value">{{ users().length }}</div>
        <div class="stat-label">总用户数</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ activeUsersCount }}</div>
        <div class="stat-label">活跃用户</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ roles().length }}</div>
        <div class="stat-label">角色总数</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ activeUsersPercentage }}%</div>
        <div class="stat-label">活跃率</div>
      </div>
    </div>

    <!-- 用户列表表格 -->
    <div class="user-table-container">
      <table mat-table [dataSource]="paginatedUsers" class="user-table">
        <!-- 用户名列 -->
        <ng-container matColumnDef="username">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onUserSort('username')">
            <div class="header-content">
              <span>用户名</span>
              <div class="sort-icon">
                <svg *ngIf="userSortColumn === 'username'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let user" class="table-cell">
            <div class="user-info">
              <div class="username">{{ user.username }}</div>
              <div class="real-name">{{ user.realName }}</div>
            </div>
          </td>
        </ng-container>

        <!-- 联系方式列 -->
        <ng-container matColumnDef="contact">
          <th mat-header-cell *matHeaderCellDef class="table-header">联系方式</th>
          <td mat-cell *matCellDef="let user" class="table-cell">
            <div class="contact-info">
              <div class="email">{{ user.email }}</div>
              <div class="phone">{{ user.phone }}</div>
            </div>
          </td>
        </ng-container>

        <!-- 角色列 -->
        <ng-container matColumnDef="role">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onUserSort('role')">
            <div class="header-content">
              <span>角色</span>
              <div class="sort-icon">
                <svg *ngIf="userSortColumn === 'role'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let user" class="table-cell">
            <div class="role-badge">{{ user.role }}</div>
          </td>
        </ng-container>

        <!-- 部门列 -->
        <ng-container matColumnDef="department">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onUserSort('department')">
            <div class="header-content">
              <span>部门</span>
              <div class="sort-icon">
                <svg *ngIf="userSortColumn === 'department'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let user" class="table-cell">
            {{ user.department }}
          </td>
        </ng-container>

        <!-- 状态列 -->
        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onUserSort('status')">
            <div class="header-content">
              <span>状态</span>
              <div class="sort-icon">
                <svg *ngIf="userSortColumn === 'status'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let user" class="table-cell">
            <div class="status-badge" [style.backgroundColor]="statusColors[user.status]">
              {{ statusTexts[user.status] }}
            </div>
          </td>
        </ng-container>

        <!-- 创建日期列 -->
        <ng-container matColumnDef="createdAt">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onUserSort('createdAt')">
            <div class="header-content">
              <span>创建日期</span>
              <div class="sort-icon">
                <svg *ngIf="userSortColumn === 'createdAt'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let user" class="table-cell">
            {{ user.createdAt }}
          </td>
        </ng-container>

        <!-- 最后登录列 -->
        <ng-container matColumnDef="lastLogin">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onUserSort('lastLogin')">
            <div class="header-content">
              <span>最后登录</span>
              <div class="sort-icon">
                <svg *ngIf="userSortColumn === 'lastLogin'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let user" class="table-cell">
            {{ user.lastLogin || '未登录' }}
          </td>
        </ng-container>

        <!-- 操作列 -->
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef class="table-header">操作</th>
          <td mat-cell *matCellDef="let user" class="table-cell">
            <div class="action-buttons">
              <button mat-icon-button class="action-btn" color="primary"
                      title="编辑用户"
                      (click)="openUserDialog(user)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
              </button>
              <button mat-icon-button class="action-btn" color="warn"
                      title="删除用户"
                      (click)="deleteUser(user.id)"
                      [disabled]="user.role === '超级管理员'">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="3,6 5,6 21,6"></polyline>
                  <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                </svg>
              </button>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['username', 'contact', 'role', 'department', 'status', 'createdAt', 'lastLogin', 'actions']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['username', 'contact', 'role', 'department', 'status', 'createdAt', 'lastLogin', 'actions']"></tr>
      </table>

      <!-- 无数据状态 -->
      <div *ngIf="paginatedUsers.length === 0" class="empty-state">
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
        </svg>
        <p>没有找到符合条件的用户</p>
        <button mat-button color="primary" (click)="userSearchTerm = ''; userRoleFilter = ''; userStatusFilter = ''; onUserSearch()">
          清除筛选条件
        </button>
      </div>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-controls">
      <div class="pagination-info">
        显示 {{ Math.min(userCurrentPage * userPageSize + 1, filteredUsers().length) }} - 
        {{ Math.min((userCurrentPage + 1) * userPageSize, filteredUsers().length) }} 共 
        {{ filteredUsers().length }} 项
      </div>
      <div class="pagination-buttons">
        <button mat-button [disabled]="userCurrentPage === 0" (click)="onUserPageChange(0)">
          首页
        </button>
        <button mat-button [disabled]="userCurrentPage === 0" (click)="onUserPageChange(userCurrentPage - 1)">
          上一页
        </button>
        
        <!-- 页码按钮 -->
        <div class="page-numbers">
          <button mat-button *ngFor="let page of getPageNumbers(totalUserPages, userCurrentPage)" [class.active]="page === userCurrentPage"
                  (click)="onUserPageChange(page)">
            {{ page + 1 }}
          </button>
        </div>
        
        <button mat-button [disabled]="userCurrentPage === totalUserPages - 1" (click)="onUserPageChange(userCurrentPage + 1)">
          下一页
        </button>
        <button mat-button [disabled]="userCurrentPage === totalUserPages - 1" (click)="onUserPageChange(totalUserPages - 1)">
          末页
        </button>
      </div>
    </div>
  </div>

  <!-- 角色管理内容 -->
  <div *ngIf="activeTab === 'roles'" class="tab-content">
    <!-- 搜索和筛选区域 -->
    <div class="search-filter-section">
      <div class="search-input-wrapper">
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input matInput type="text" placeholder="搜索角色名称或描述..."
               [(ngModel)]="roleSearchTerm" (keyup.enter)="onRoleSearch()"
               class="search-input">
        <button mat-button *ngIf="roleSearchTerm" class="clear-search-btn"
                (click)="roleSearchTerm = ''; onRoleSearch()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      
      <div class="filter-controls">
        <button mat-raised-button color="primary" class="create-btn"
                (click)="openRoleDialog()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          添加角色
        </button>
      </div>
    </div>

    <!-- 角色列表表格 -->
    <div class="role-table-container">
      <table mat-table [dataSource]="paginatedRoles" class="role-table">
        <!-- 角色名称列 -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onRoleSort('name')">
            <div class="header-content">
              <span>角色名称</span>
              <div class="sort-icon">
                <svg *ngIf="roleSortColumn === 'name'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let role" class="table-cell">
            <div class="role-info">
              <div class="role-name">{{ role.name }}</div>
              <div class="role-description">{{ role.description }}</div>
            </div>
          </td>
        </ng-container>

        <!-- 权限数量列 -->
        <ng-container matColumnDef="permissionsCount">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onRoleSort('permissionsCount')">
            <div class="header-content">
              <span>权限数量</span>
              <div class="sort-icon">
                <svg *ngIf="roleSortColumn === 'permissionsCount'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let role" class="table-cell">
            {{ role.permissions.length }}
          </td>
        </ng-container>

        <!-- 用户数量列 -->
        <ng-container matColumnDef="usersCount">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onRoleSort('usersCount')">
            <div class="header-content">
              <span>用户数量</span>
              <div class="sort-icon">
                <svg *ngIf="roleSortColumn === 'usersCount'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let role" class="table-cell">
            <div class="user-count-badge">{{ role.usersCount }}</div>
          </td>
        </ng-container>

        <!-- 操作列 -->
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef class="table-header">操作</th>
          <td mat-cell *matCellDef="let role" class="table-cell">
            <div class="action-buttons">
              <button mat-icon-button class="action-btn" color="primary"
                      title="编辑角色"
                      (click)="openRoleDialog(role)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
              </button>
              <button mat-icon-button class="action-btn" color="warn"
                      title="删除角色"
                      (click)="deleteRole(role.id)"
                      [disabled]="role.name === '超级管理员'">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="3,6 5,6 21,6"></polyline>
                  <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                </svg>
              </button>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['name', 'permissionsCount', 'usersCount', 'actions']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['name', 'permissionsCount', 'usersCount', 'actions']"></tr>
      </table>

      <!-- 无数据状态 -->
      <div *ngIf="paginatedRoles.length === 0" class="empty-state">
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 14v4"></path>
          <path d="M16 2v4"></path>
          <path d="M8 2v4"></path>
          <path d="M3 10h18"></path>
          <path d="M12 14a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"></path>
          <path d="M12 22v-6"></path>
        </svg>
        <p>没有找到符合条件的角色</p>
        <button mat-button color="primary" (click)="roleSearchTerm = ''; onRoleSearch()">
          清除筛选条件
        </button>
      </div>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-controls">
      <div class="pagination-info">
        显示 {{ Math.min(roleCurrentPage * rolePageSize + 1, filteredRoles().length) }} - 
        {{ Math.min((roleCurrentPage + 1) * rolePageSize, filteredRoles().length) }} 共 
        {{ filteredRoles().length }} 项
      </div>
      <div class="pagination-buttons">
        <button mat-button [disabled]="roleCurrentPage === 0" (click)="onRolePageChange(0)">
          首页
        </button>
        <button mat-button [disabled]="roleCurrentPage === 0" (click)="onRolePageChange(roleCurrentPage - 1)">
          上一页
        </button>
        
        <!-- 页码按钮 -->
        <div class="page-numbers">
          <button mat-button *ngFor="let page of getPageNumbers(totalRolePages, roleCurrentPage)" [class.active]="page === roleCurrentPage"
                  (click)="onRolePageChange(page)">
            {{ page + 1 }}
          </button>
        </div>
        
        <button mat-button [disabled]="roleCurrentPage === totalRolePages - 1" (click)="onRolePageChange(roleCurrentPage + 1)">
          下一页
        </button>
        <button mat-button [disabled]="roleCurrentPage === totalRolePages - 1" (click)="onRolePageChange(totalRolePages - 1)">
          末页
        </button>
      </div>
    </div>
  </div>
</div>