<div class="logs">
  <!-- 页面标题 -->
  <div class="page-header">
    <h2 class="page-title">系统日志</h2>
    <p class="page-description">查看系统操作日志和审计记录，支持筛选、搜索和导出功能</p>
  </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="搜索用户、操作、资源、详情或IP地址..."
             [(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>
      <button mat-button class="search-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="advanced-filters">
    <div class="filter-grid">
      <div class="filter-item">
        <mat-form-field appearance="outline" class="filter-field">
          <mat-label>操作类型</mat-label>
          <mat-select [(ngModel)]="actionFilter" (selectionChange)="onFilterChange()">
            <mat-option value="">全部操作</mat-option>
            <mat-option *ngFor="let action of actionOptions" [value]="action">
              {{ action }}
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>filter_list</mat-icon>
        </mat-form-field>
      </div>
      
      <div class="filter-item">
        <mat-form-field appearance="outline" class="filter-field">
          <mat-label>资源类型</mat-label>
          <mat-select [(ngModel)]="resourceFilter" (selectionChange)="onFilterChange()">
            <mat-option value="">全部资源</mat-option>
            <mat-option *ngFor="let resource of resourceOptions" [value]="resource">
              {{ resource }}
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>category</mat-icon>
        </mat-form-field>
      </div>
      
      <div class="filter-item">
        <mat-form-field appearance="outline" class="filter-field">
          <mat-label>状态</mat-label>
          <mat-select [(ngModel)]="statusFilter" (selectionChange)="onFilterChange()">
            <mat-option value="">全部状态</mat-option>
            <mat-option *ngFor="let status of statusOptions" [value]="status.value">
              {{ status.label }}
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>flag</mat-icon>
        </mat-form-field>
      </div>
      
      <div class="filter-item">
        <mat-form-field appearance="outline" class="filter-field">
          <mat-label>操作用户</mat-label>
          <mat-select [(ngModel)]="userFilter" (selectionChange)="onFilterChange()">
            <mat-option value="">全部用户</mat-option>
            <mat-option *ngFor="let user of userOptions" [value]="user">
              {{ user }}
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>person</mat-icon>
        </mat-form-field>
      </div>
    </div>
    
    <div class="date-range-filter">
      <div class="date-filter-item">
        <mat-form-field appearance="outline" class="date-field">
          <mat-label>开始日期</mat-label>
          <input matInput [matDatepicker]="startDatePicker" [(ngModel)]="startDate" (dateChange)="onFilterChange()">
          <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #startDatePicker></mat-datepicker>
        </mat-form-field>
      </div>
      
      <div class="date-filter-item">
        <mat-form-field appearance="outline" class="date-field">
          <mat-label>结束日期</mat-label>
          <input matInput [matDatepicker]="endDatePicker" [(ngModel)]="endDate" (dateChange)="onFilterChange()">
          <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #endDatePicker></mat-datepicker>
        </mat-form-field>
      </div>
    </div>
    
    <div class="filter-actions">
      <button mat-button class="clear-btn" (click)="clearFilters()">
        <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="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
        清除筛选
      </button>
      
      <button mat-button class="expand-btn">
        <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="4 20 12 12 20 20"></polyline>
          <polyline points="4 12 12 4 20 12"></polyline>
          <polyline points="4 4 12 12 20 4"></polyline>
        </svg>
        高级筛选
      </button>
    </div>
  </div>

  <!-- 操作按钮 -->
  <div class="log-actions">
    <div class="logs-summary">
      共找到 <span class="highlight">{{ filteredLogs().length }}</span> 条日志记录
    </div>
    
    <div class="action-buttons">
      <button mat-raised-button color="primary" class="export-btn"
              (click)="exportLogs()" [disabled]="filteredLogs().length === 0">
        <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="7 10 12 15 17 10"></polyline>
          <line x1="12" y1="15" x2="12" y2="3"></line>
        </svg>
        导出日志
      </button>
    </div>
  </div>

  <!-- 日志表格 -->
  <div class="logs-table-container">
    <table mat-table [dataSource]="paginatedLogs" class="logs-table">
      <!-- 时间戳列 -->
      <ng-container matColumnDef="timestamp">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('timestamp')">
          <div class="header-content">
            <span>时间戳</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'timestamp'" 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 log" class="table-cell">
          {{ formatDate(log.timestamp) }}
        </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 log" class="table-cell">
          <div class="status-badge" [style.backgroundColor]="statusColors[log.status]">
            <mat-icon class="status-icon">{{ statusIcons[log.status] }}</mat-icon>
            {{ getStatusText(log.status) }}
          </div>
        </td>
      </ng-container>

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

      <!-- 操作列 -->
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('action')">
          <div class="header-content">
            <span>操作类型</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'action'" 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 log" class="table-cell">
          <div class="action-badge">{{ log.action }}</div>
        </td>
      </ng-container>

      <!-- 资源列 -->
      <ng-container matColumnDef="resource">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('resource')">
          <div class="header-content">
            <span>操作资源</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'resource'" 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 log" class="table-cell">
          <div class="resource-badge">{{ log.resource }}</div>
        </td>
      </ng-container>

      <!-- 详情列 -->
      <ng-container matColumnDef="details">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('details')">
          <div class="header-content">
            <span>操作详情</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'details'" 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 log" class="table-cell details-cell">
          <div class="details-content" [title]="log.details">{{ log.details }}</div>
        </td>
      </ng-container>

      <!-- IP地址列 -->
      <ng-container matColumnDef="ipAddress">
        <th mat-header-cell *matHeaderCellDef class="table-header"
            (click)="onSort('ipAddress')">
          <div class="header-content">
            <span>IP地址</span>
            <div class="sort-icon">
              <svg *ngIf="sortColumn === 'ipAddress'" 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 log" class="table-cell">
          <div class="ip-address">{{ log.ipAddress }}</div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['timestamp', 'status', 'user', 'action', 'resource', 'details', 'ipAddress']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['timestamp', 'status', 'user', 'action', 'resource', 'details', 'ipAddress']"></tr>
    </table>

    <!-- 无数据状态 -->
    <div *ngIf="paginatedLogs.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="M14 2H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <line x1="16" y1="13" x2="8" y2="13"></line>
        <line x1="16" y1="17" x2="8" y2="17"></line>
        <polyline points="10 9 9 9 8 9"></polyline>
      </svg>
      <p>没有找到符合条件的日志记录</p>
      <button mat-button color="primary" (click)="clearFilters()">
        清除筛选条件
      </button>
    </div>
  </div>

  <!-- 分页控件 -->
  <div class="pagination-controls">
    <div class="pagination-info">
      显示 {{ mathMin(currentPage * pageSize + 1, filteredLogs().length) }} -
      {{ mathMin((currentPage + 1) * pageSize, filteredLogs().length) }} 共 
      {{ filteredLogs().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 class="log-stats-cards">
    <div class="stat-card">
      <div class="stat-icon primary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ logs().length }}</div>
        <div class="stat-label">总日志数</div>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon success">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ successLogsCount }}</div>
        <div class="stat-label">成功操作</div>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon error">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="12"></line>
          <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ errorLogsCount }}</div>
        <div class="stat-label">错误操作</div>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon warning">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
          <line x1="12" y1="9" x2="12" y2="13"></line>
          <line x1="12" y1="17" x2="12.01" y2="17"></line>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ warningLogsCount }}</div>
        <div class="stat-label">警告信息</div>
      </div>
    </div>
  </div>
</div>