<div class="assets-stats-container">
  <header class="page-header">
    <h1>资产管理与统计</h1>
    <p class="page-description">管理企业全类型资产，查看资产使用状态和统计数据</p>
  </header>

  <!-- 资产分类筛选栏 -->
  <div class="filter-bar">
    <div class="search-container">
      <mat-icon class="search-icon">search</mat-icon>
      <input 
        matInput 
        placeholder="搜索资产名称、序列号、使用人..."
        [value]="searchTerm()"
        (input)="searchTerm.set($event.target.value)"
        class="search-input"
      >
      <button mat-icon-button *ngIf="searchTerm()" (click)="searchTerm.set('')" class="clear-search">
        <mat-icon>close</mat-icon>
      </button>
    </div>
    
    <div class="filter-controls">
      <div class="filter-group">
        <label>资产类型:</label>
        <select [value]="typeFilter()" (change)="typeFilter.set($any($event.target).value)" class="filter-select">
          <option value="">全部类型</option>
          <option *ngFor="let type of assetTypes()" [value]="type">{{ type }}</option>
        </select>
      </div>
      
      <div class="filter-group">
        <label>资产状态:</label>
        <select [value]="statusFilter()" (change)="statusFilter.set($any($event.target).value)" class="filter-select">
          <option value="">全部状态</option>
          <option value="空闲">空闲</option>
          <option value="占用">占用</option>
          <option value="故障">故障</option>
          <option value="报修中">报修中</option>
        </select>
      </div>
      
      <div class="filter-group">
        <label>所属部门:</label>
        <select [value]="departmentFilter()" (change)="departmentFilter.set($any($event.target).value)" class="filter-select">
          <option value="">全部部门</option>
          <option *ngFor="let dept of departments()" [value]="dept">{{ dept }}</option>
        </select>
      </div>
      
      <button mat-button color="primary" (click)="resetFilters()" class="reset-btn">
        <mat-icon>refresh</mat-icon>
        重置筛选
      </button>
      
      <button mat-raised-button color="primary" (click)="exportAssetLedger()" class="export-btn">
        <mat-icon>file_download</mat-icon>
        导出台账
      </button>
    </div>
  </div>

  <!-- 视图切换和统计卡片 -->
  <div class="view-stats-section">
    <div class="view-toggle">
      <button 
        mat-button 
        [class.active]="selectedView() === 'grid'"
        (click)="switchView('grid')"
        class="view-btn"
      >
        <mat-icon>grid_view</mat-icon>
        卡片视图
      </button>
      <button 
        mat-button 
        [class.active]="selectedView() === 'list'"
        (click)="switchView('list')"
        class="view-btn"
      >
        <mat-icon>list</mat-icon>
        列表视图
      </button>
      <div class="asset-count">
        共 {{ filteredAssets().length }} 项资产
      </div>
    </div>
    
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <mat-icon>category</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ assetStats().total }}</div>
          <div class="stat-label">资产总数</div>
        </div>
      </div>
      <div class="stat-card occupied">
        <div class="stat-icon">
          <mat-icon>person</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ assetStats().occupied }}</div>
          <div class="stat-label">占用中</div>
          <div class="stat-percentage">{{ Math.round(assetStats().occupied / assetStats().total * 100) }}%</div>
        </div>
      </div>
      <div class="stat-card idle">
        <div class="stat-icon">
          <mat-icon>schedule</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ assetStats().idle }}</div>
          <div class="stat-label">空闲</div>
          <div class="stat-percentage">{{ Math.round(assetStats().idle / assetStats().total * 100) }}%</div>
        </div>
      </div>
      <div class="stat-card faulty">
        <div class="stat-icon">
          <mat-icon>error</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ assetStats().faulty }}</div>
          <div class="stat-label">故障</div>
          <div class="stat-percentage">{{ Math.round(assetStats().faulty / assetStats().total * 100) }}%</div>
        </div>
      </div>
      <div class="stat-card repairing">
        <div class="stat-icon">
          <mat-icon>build</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ assetStats().repairing }}</div>
          <div class="stat-label">报修中</div>
          <div class="stat-percentage">{{ Math.round(assetStats().repairing / assetStats().total * 100) }}%</div>
        </div>
      </div>
      <div class="stat-card value">
        <div class="stat-icon">
          <mat-icon>monetization_on</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ formatCurrency(assetStats().totalValue) }}</div>
          <div class="stat-label">资产总值</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 资产列表/网格视图 -->
  <div class="assets-view">
    <!-- 网格视图 -->
    <div *ngIf="selectedView() === 'grid'" class="assets-grid">
      <div 
        *ngFor="let asset of filteredAssets()"
        class="asset-card"
        [class.faulty]="asset.status === '故障' || asset.status === '报修中'"
      >
        <div class="asset-header">
          <div class="asset-type-icon" [class]="asset.type">
            <mat-icon>{{ getTypeIcon(asset.type) }}</mat-icon>
          </div>
          <div class="asset-status" [class]="getStatusClass(asset.status)">
            {{ asset.status }}
          </div>
        </div>
        <div class="asset-content">
          <h3 class="asset-name">{{ asset.name }}</h3>
          <div class="asset-info">
            <div class="info-item">
              <span class="info-label">序列号:</span>
              <span class="info-value">{{ asset.serialNumber }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">购买日期:</span>
              <span class="info-value">{{ formatDate(asset.purchaseDate) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">价值:</span>
              <span class="info-value">{{ formatCurrency(asset.value) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">部门:</span>
              <span class="info-value">{{ asset.department }}</span>
            </div>
            <div *ngIf="asset.assignedToName" class="info-item">
              <span class="info-label">使用人:</span>
              <span class="info-value">{{ asset.assignedToName }}</span>
            </div>
            <div *ngIf="asset.status === '故障' || asset.status === '报修中'" class="info-item faulty-notice">
              <span class="info-label">故障描述:</span>
              <span class="info-value">需要维修</span>
            </div>
          </div>
        </div>
        <div class="asset-actions">
          <button mat-icon-button matTooltip="查看详情" class="action-btn">
            <mat-icon>visibility</mat-icon>
          </button>
          <button 
            mat-icon-button 
            matTooltip="编辑信息"
            class="action-btn"
          >
            <mat-icon>edit</mat-icon>
          </button>
          <ng-container *ngIf="asset.status === '空闲'">
            <button 
              mat-icon-button 
              matTooltip="分配资产"
              class="action-btn primary"
              (click)="openAssignmentDialog(asset)"
            >
              <mat-icon>assignment_ind</mat-icon>
            </button>
          </ng-container>
          <ng-container *ngIf="asset.status === '占用'">
            <button 
              mat-icon-button 
              matTooltip="归还资产"
              class="action-btn primary"
              (click)="openAssignmentDialog(asset, true)"
            >
              <mat-icon>undo</mat-icon>
            </button>
          </ng-container>
          <ng-container *ngIf="asset.status === '故障'">
            <button 
              mat-icon-button 
              matTooltip="申请报修"
              class="action-btn warning"
              (click)="openRepairDialog(asset)"
            >
              <mat-icon>build</mat-icon>
            </button>
          </ng-container>
        </div>
      </div>
    </div>
    
    <!-- 列表视图 -->
    <div *ngIf="selectedView() === 'list'" class="assets-list">
      <table mat-table [dataSource]="filteredAssets()" class="assets-table">
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>资产名称</th>
          <td mat-cell *matCellDef="let asset">
            <div class="asset-name-list">
              <div class="asset-type-icon-small" [class]="asset.type">
                <mat-icon>{{ getTypeIcon(asset.type) }}</mat-icon>
              </div>
              <span>{{ asset.name }}</span>
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef>类型</th>
          <td mat-cell *matCellDef="let asset">{{ asset.type }}</td>
        </ng-container>
        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef>状态</th>
          <td mat-cell *matCellDef="let asset">
            <span class="status-badge" [class]="getStatusClass(asset.status)">
              {{ asset.status }}
            </span>
          </td>
        </ng-container>
        <ng-container matColumnDef="department">
          <th mat-header-cell *matHeaderCellDef>部门</th>
          <td mat-cell *matCellDef="let asset">{{ asset.department }}</td>
        </ng-container>
        <ng-container matColumnDef="assignedTo">
          <th mat-header-cell *matHeaderCellDef>使用人</th>
          <td mat-cell *matCellDef="let asset">{{ asset.assignedToName || '-' }}</td>
        </ng-container>
        <ng-container matColumnDef="purchaseDate">
          <th mat-header-cell *matHeaderCellDef>购买日期</th>
          <td mat-cell *matCellDef="let asset">{{ formatDate(asset.purchaseDate) }}</td>
        </ng-container>
        <ng-container matColumnDef="value">
          <th mat-header-cell *matHeaderCellDef>价值</th>
          <td mat-cell *matCellDef="let asset">{{ formatCurrency(asset.value) }}</td>
        </ng-container>
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef>操作</th>
          <td mat-cell *matCellDef="let asset" class="actions-column">
            <div class="action-buttons-list">
              <button mat-icon-button matTooltip="查看详情" class="action-btn">
                <mat-icon>visibility</mat-icon>
              </button>
              <button mat-icon-button matTooltip="编辑信息" class="action-btn">
                <mat-icon>edit</mat-icon>
              </button>
              <ng-container *ngIf="asset.status === '空闲'">
                <button 
                  mat-icon-button 
                  matTooltip="分配资产"
                  class="action-btn primary"
                  (click)="openAssignmentDialog(asset)"
                >
                  <mat-icon>assignment_ind</mat-icon>
                </button>
              </ng-container>
              <ng-container *ngIf="asset.status === '占用'">
                <button 
                  mat-icon-button 
                  matTooltip="归还资产"
                  class="action-btn primary"
                  (click)="openAssignmentDialog(asset, true)"
                >
                  <mat-icon>undo</mat-icon>
                </button>
              </ng-container>
              <ng-container *ngIf="asset.status === '故障'">
                <button 
                  mat-icon-button 
                  matTooltip="申请报修"
                  class="action-btn warning"
                  (click)="openRepairDialog(asset)"
                >
                  <mat-icon>build</mat-icon>
                </button>
              </ng-container>
            </div>
          </td>
        </ng-container>
        
        <tr mat-header-row *matHeaderRowDef="['name', 'type', 'status', 'department', 'assignedTo', 'purchaseDate', 'value', 'actions']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['name', 'type', 'status', 'department', 'assignedTo', 'purchaseDate', 'value', 'actions']"></tr>
        
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="8" class="no-data">
            <div class="empty-state">
              <mat-icon>search_off</mat-icon>
              <p>没有找到符合条件的资产</p>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <!-- 统计图表区 -->
  <div class="stats-section">
    <!-- 按类型统计 -->
    <div class="stats-card">
      <div class="card-header">
        <h2>资产类型统计</h2>
      </div>
      <div class="chart-content">
        <div class="type-stats">
          <div *ngFor="let typeStat of assetStats().typeStatsArray" class="type-stat-item">
            <div class="type-info">
              <span class="type-name">{{ typeStat.type }}</span>
              <span class="type-count">{{ typeStat.count }}台</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" [style.width]="(typeStat.count / assetStats().total * 100) + '%'"></div>
            </div>
            <div class="type-value">{{ formatCurrency(typeStat.value) }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 按部门统计 -->
    <div class="stats-card">
      <div class="card-header">
        <h2>部门资产统计</h2>
      </div>
      <div class="chart-content">
        <div class="department-stats">
          <div *ngFor="let deptStat of assetStats().departmentStatsArray" class="department-stat-item">
            <div class="department-info">
              <span class="department-name">{{ deptStat.department }}</span>
              <span class="department-count">{{ deptStat.count }}台</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" [style.width]="(deptStat.count / assetStats().total * 100) + '%'"></div>
            </div>
            <div class="department-value">{{ formatCurrency(deptStat.value) }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 资产使用时长统计 -->
    <div class="stats-card">
      <div class="card-header">
        <h2>资产平均使用时长（小时/月）</h2>
      </div>
      <div class="chart-content">
        <div class="usage-stats">
          <div *ngFor="let usage of assetStats().usageStats" class="usage-stat-item">
            <div class="usage-info">
              <span class="usage-type">{{ usage.type }}</span>
            </div>
            <div class="bar-container">
              <div class="usage-bar" [style.height]="(usage.avgHours / 200 * 100) + '%'">
                <span class="usage-value">{{ usage.avgHours }}h</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>