<div class="admin-dashboard">
  <!-- 页面标题 -->
  <div class="page-header">
    <h2 class="page-title">总览看板</h2>
    <p class="page-description">系统运营数据总览和趋势分析</p>
  </div>

  <!-- 统计卡片区域 -->
  <div class="stats-grid">
    <!-- 总项目数 -->
    <div class="stat-card clickable" (click)="showPanel('totalProjects')">
      <div class="stat-icon primary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <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>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.totalProjects() }}</div>
        <div class="stat-label">总项目数</div>
      </div>
      <div class="stat-trend positive">
        <span>+12%</span>
      </div>
    </div>

    <!-- 进行中项目 -->
    <div class="stat-card clickable" (click)="showPanel('active')">
      <div class="stat-icon secondary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.activeProjects() }}</div>
        <div class="stat-label">进行中项目</div>
      </div>
      <div class="stat-trend positive">
        <span>+8%</span>
      </div>
    </div>

    <!-- 已完成项目 -->
    <div class="stat-card clickable" (click)="showPanel('completed')">
      <div class="stat-icon success">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.completedProjects() }}</div>
        <div class="stat-label">已完成项目</div>
      </div>
      <div class="stat-trend positive">
        <span>+15%</span>
      </div>
    </div>

    <!-- 设计师总数 -->
    <div class="stat-card clickable" (click)="showPanel('designers')">
      <div class="stat-icon primary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <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>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.totalDesigners() }}</div>
        <div class="stat-label">设计师总数</div>
      </div>
      <div class="stat-trend neutral">
        <span>持平</span>
      </div>
    </div>

    <!-- 客户总数 -->
    <div class="stat-card clickable" (click)="showPanel('customers')">
      <div class="stat-icon secondary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
          <circle cx="12" cy="7" r="4"></circle>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.totalCustomers() }}</div>
        <div class="stat-label">客户总数</div>
      </div>
      <div class="stat-trend positive">
        <span>+20%</span>
      </div>
    </div>

    <!-- 总收入 -->
    <div class="stat-card clickable" (click)="showPanel('revenue')">
      <div class="stat-icon success">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <line x1="12" y1="1" x2="12" y2="23"></line>
          <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ formatCurrency(stats.totalRevenue()) }}</div>
        <div class="stat-label">总收入</div>
      </div>
      <div class="stat-trend positive">
        <span>+28%</span>
      </div>
    </div>
  </div>

  <!-- 图表区域 -->
  <div class="charts-grid">
    <!-- 项目趋势图 -->
    <div class="chart-card">
      <div class="chart-header">
        <h3>项目数量趋势</h3>
        <div class="chart-period">
          <button class="period-btn" [class.active]="projectPeriod() === '6m'" (click)="setProjectPeriod('6m')">近6个月</button>
          <button class="period-btn" [class.active]="projectPeriod() === '12m'" (click)="setProjectPeriod('12m')">近12个月</button>
        </div>
      </div>
      <div id="projectTrendChart" class="chart-container"></div>
    </div>

    <!-- 收入统计图 -->
    <div class="chart-card">
      <div class="chart-header">
        <h3>季度收入统计</h3>
        <div class="chart-period">
          <button class="period-btn" [class.active]="revenuePeriod() === 'quarter'" (click)="setRevenuePeriod('quarter')">本季度</button>
          <button class="period-btn" [class.active]="revenuePeriod() === 'year'" (click)="setRevenuePeriod('year')">全年</button>
        </div>
      </div>
      <div id="revenueChart" class="chart-container"></div>
    </div>
  </div>

  <!-- 最近活动 -->
  <div class="recent-activities">
    <div class="section-header">
      <h3>最近活动</h3>
      <a href="/admin/logs" class="view-all-link">查看全部</a>
    </div>
    
    <div class="activities-list">
      <div class="activity-item">
        <div class="activity-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
          </svg>
        </div>
        <div class="activity-content">
          <div class="activity-text">
            <span class="activity-user">系统</span> 创建了新项目 <span class="activity-project">现代简约风格三居室设计</span>
          </div>
          <div class="activity-time">今天 10:30</div>
        </div>
      </div>
      
      <div class="activity-item">
        <div class="activity-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
          </svg>
        </div>
        <div class="activity-content">
          <div class="activity-text">
            <span class="activity-user">张设计师</span> 完成了任务 <span class="activity-task">设计初稿</span>
          </div>
          <div class="activity-time">今天 09:15</div>
        </div>
      </div>
      
      <div class="activity-item">
        <div class="activity-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <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>
          </svg>
        </div>
        <div class="activity-content">
          <div class="activity-text">
            <span class="activity-user">客服小李</span> 新增了客户 <span class="activity-customer">王先生</span>
          </div>
          <div class="activity-time">昨天 16:45</div>
        </div>
      </div>
      
      <div class="activity-item">
        <div class="activity-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
        </div>
        <div class="activity-content">
          <div class="activity-text">
            <span class="activity-user">系统</span> 完成了项目 <span class="activity-project">北欧风格两居室设计</span>
          </div>
          <div class="activity-time">昨天 15:30</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 详情抽屉 -->
  <div class="drawer" *ngIf="detailOpen()" (click)="closeDetailPanel()">
    <div class="drawer-panel" (click)="$event.stopPropagation()">
      <div class="drawer-header">
        <h3 class="drawer-title">{{ detailTitle() }}</h3>
        <button class="drawer-close" (click)="closeDetailPanel()">✕</button>
      </div>
      <div class="drawer-body">
        <div id="detailChart" class="chart-container"></div>
    
        <div class="drawer-toolbar">
          <div class="filters">
            <input type="text" placeholder="关键字搜索"
                   [value]="keyword()"
                   (input)="setKeyword($any($event.target).value)" />
    
            <select [value]="statusFilter()" (change)="setStatus($any($event.target).value)">
              <option *ngFor="let opt of getStatusOptions()" [value]="opt.value">{{ opt.label }}</option>
            </select>
    
            <input type="date" [value]="dateFrom() || ''" (change)="setDateFrom($any($event.target).value)" />
            <span class="date-sep">-</span>
            <input type="date" [value]="dateTo() || ''" (change)="setDateTo($any($event.target).value)" />
    
            <button class="btn reset" (click)="resetFilters()">重置</button>
          </div>
          <div class="actions">
            <button class="btn export" (click)="exportCSV()">导出 CSV</button>
          </div>
        </div>
    
        <div class="detail-table-wrapper">
          <table class="detail-table">
            <thead>
              <tr>
                <th *ngFor="let col of getColumns()">{{ col.label }}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let row of pagedData(); let i = index">
                <td *ngFor="let col of getColumns()">{{ col.formatter ? col.formatter(row[col.field]) : row[col.field] }}</td>
              </tr>
              <tr *ngIf="pagedData().length === 0">
                <td class="empty" [attr.colspan]="getColumns().length">暂无数据</td>
              </tr>
            </tbody>
          </table>
    
          <div class="pagination">
            <div class="info">共 {{ totalItems() }} 条 • 第 {{ pageIndex() }} / {{ totalPages }} 页</div>
            <div class="pager">
              <button (click)="prevPage()" [disabled]="pageIndex() <= 1">上一页</button>
              <ng-container *ngFor="let n of getPages()">
                <button class="num" [class.active]="pageIndex() === n" (click)="goToPage(n)">{{ n }}</button>
              </ng-container>
              <button (click)="nextPage()" [disabled]="pageIndex() >= totalPages">下一页</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>