<div class="project-management">
  <!-- 页面标题和操作按钮 -->
  <div class="page-header">
    <div class="header-left">
      <h2 class="page-title">项目管理</h2>
      <p class="page-description">管理所有项目的创建、分配和状态</p>
    </div>
    <div class="header-right">
      <button mat-raised-button color="primary" class="create-btn"
              (click)="openProjectDialog()">
        <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="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)]="searchTerm" (keyup.enter)="onSearch()"
             class="search-input">
      <button mat-button *ngIf="searchTerm" class="clear-search-btn"
              (click)="searchTerm = ''; onSearch()">
        <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="status-filter-wrapper">
        <mat-select [(ngModel)]="statusFilter" (selectionChange)="onStatusFilterChange()"
                   placeholder="项目状态" class="status-filter">
          <mat-option value="">全部状态</mat-option>
          <mat-option value="pending">待开始</mat-option>
          <mat-option value="in-progress">进行中</mat-option>
          <mat-option value="completed">已完成</mat-option>
          <mat-option value="on-hold">暂停中</mat-option>
        </mat-select>
      </div>
      
      <button mat-button class="filter-btn" (click)="onSearch()">
        <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>
    </div>
  </div>

  <!-- 项目统计卡片 -->
  <div class="stats-cards">
    <div class="stat-card">
      <div class="stat-value">{{ projects().length }}</div>
      <div class="stat-label">总项目数</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">{{ inProgressProjectsCount }}</div>
      <div class="stat-label">进行中</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">{{ completedProjectsCount }}</div>
      <div class="stat-label">已完成</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">{{ pendingProjectsCount }}</div>
      <div class="stat-label">待开始</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">{{ formatCurrency(totalProjectsBudget) }}</div>
      <div class="stat-label">总预算</div>
    </div>
  </div>

  <!-- 项目列表表格 -->
  <div class="project-table-container">
    <table mat-table [dataSource]="paginatedProjects" class="project-table">
      <!-- 项目名称列 -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('name')">
          <div class="header-content">
            <span>项目名称</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === '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 project" class="table-cell">
          <div class="project-name">
            <a [routerLink]="['/admin/project-detail', project.id]">{{ project.name }}</a>
          </div>
        </td>
      </ng-container>

      <!-- 客户列 -->
      <ng-container matColumnDef="customer">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('customer')">
          <div class="header-content">
            <span>客户</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'customer'" 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 project" class="table-cell">
          {{ project.customer }}
        </td>
      </ng-container>

      <!-- 设计师列 -->
      <ng-container matColumnDef="designer">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('designer')">
          <div class="header-content">
            <span>设计师</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'designer'" 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 project" class="table-cell">
          {{ project.designer }}
        </td>
      </ng-container>

      <!-- 状态列 -->
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('status')">
          <div class="header-content">
            <span>状态</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === '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 project" class="table-cell">
          <div class="status-badge" [style.backgroundColor]="statusColors[project.status]">
            {{ statusTexts[project.status] }}
          </div>
        </td>
      </ng-container>

      <!-- 进度列 -->
      <ng-container matColumnDef="progress">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('progress')">
          <div class="header-content">
            <span>进度</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'progress'" 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 project" class="table-cell">
          <div class="progress-container">
            <div class="progress-bar" [style.width]="project.progress + '%'" [style.backgroundColor]="statusColors[project.status]"></div>
            <span class="progress-text">{{ project.progress }}%</span>
          </div>
        </td>
      </ng-container>

      <!-- 预算列 -->
      <ng-container matColumnDef="budget">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('budget')">
          <div class="header-content">
            <span>预算</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'budget'" 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 project" class="table-cell">
          {{ formatCurrency(project.budget) }}
        </td>
      </ng-container>

      <!-- 开始日期列 -->
      <ng-container matColumnDef="startDate">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('startDate')">
          <div class="header-content">
            <span>开始日期</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'startDate'" 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 project" class="table-cell">
          {{ project.startDate }}
        </td>
      </ng-container>

      <!-- 结束日期列 -->
      <ng-container matColumnDef="endDate">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('endDate')">
          <div class="header-content">
            <span>结束日期</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'endDate'" 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 project" class="table-cell">
          {{ project.endDate }}
        </td>
      </ng-container>

      <!-- 操作列 -->
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef class="table-header">操作</th>
        <td mat-cell *matCellDef="let project" class="table-cell">
          <div class="action-buttons">
            <button mat-icon-button class="action-btn" color="primary"
                    title="查看详情"
                    [routerLink]="['/admin/project-detail', project.id]">
              <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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
              </svg>
            </button>
            <button mat-icon-button class="action-btn" color="accent"
                    title="编辑项目"
                    (click)="openProjectDialog(project)">
              <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)="deleteProject(project.id)">
              <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', 'customer', 'designer', 'status', 'progress', 'budget', 'startDate', 'endDate', 'actions']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['name', 'customer', 'designer', 'status', 'progress', 'budget', 'startDate', 'endDate', 'actions']"></tr>
    </table>

    <!-- 无数据状态 -->
    <div *ngIf="paginatedProjects.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">
        <line x1="8" y1="6" x2="21" y2="6"></line>
        <line x1="8" y1="12" x2="21" y2="12"></line>
        <line x1="8" y1="18" x2="21" y2="18"></line>
        <line x1="3" y1="6" x2="3.01" y2="6"></line>
        <line x1="3" y1="12" x2="3.01" y2="12"></line>
        <line x1="3" y1="18" x2="3.01" y2="18"></line>
      </svg>
      <p>没有找到符合条件的项目</p>
      <button mat-button color="primary" (click)="searchTerm = ''; statusFilter = ''; onSearch()">
        清除筛选条件
      </button>
    </div>
  </div>

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