<div class="quotation-approval-container">
  <!-- 页面头部 -->
  <div class="page-header">
    <div class="header-content">
      <h2>报价审核管理</h2>
      <p class="header-description">管理和审核设计师提交的项目报价</p>
    </div>
    <div class="header-actions">
      <button type="button" class="btn-secondary" (click)="showStatistics()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M2 14V10M8 14V6M14 14V2M2 10L8 6L14 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        统计报表
      </button>
      <button type="button" class="btn-primary back-to-dashboard" (click)="backToDashboard()">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M19 12H5"></path>
          <polyline points="12 19 5 12 12 5"></polyline>
        </svg>
        返回工作台
      </button>
    </div>
  </div>

  <!-- 统计卡片 -->
  <div class="stats-cards">
    <div class="stat-card">
      <div class="stat-icon pending">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
          <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ approvalStats.pending }}</div>
        <div class="stat-label">待审核</div>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon approved">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ approvalStats.approved }}</div>
        <div class="stat-label">已通过</div>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon rejected">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
          <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
          <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ approvalStats.rejected }}</div>
        <div class="stat-label">已拒绝</div>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon revision">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M3 3v5h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ approvalStats.revisionRequired }}</div>
        <div class="stat-label">需修改</div>
      </div>
    </div>
  </div>

  <!-- 筛选区域 -->
  <div class="filter-section">
    <div class="filter-row">
      <div class="filter-group">
        <label class="filter-label">状态筛选</label>
        <select [(ngModel)]="statusFilter" (ngModelChange)="applyFilters()" class="filter-select">
          <option value="all">全部状态</option>
          <option value="pending">待审核</option>
          <option value="approved">已通过</option>
          <option value="rejected">已拒绝</option>
          <option value="revision_required">需修改</option>
        </select>
      </div>
      
      <div class="filter-group">
        <label class="filter-label">关键词搜索</label>
        <input type="text" [(ngModel)]="searchKeyword" (ngModelChange)="applyFilters()" 
               class="filter-input" placeholder="搜索项目名称、客户名称或提交人">
      </div>
      
      <div class="filter-group">
        <label class="filter-label">提交日期</label>
        <div class="date-range">
          <input type="date" [(ngModel)]="dateRange.start" (ngModelChange)="applyFilters()" class="filter-input">
          <span class="date-separator">至</span>
          <input type="date" [(ngModel)]="dateRange.end" (ngModelChange)="applyFilters()" class="filter-input">
        </div>
      </div>
      
      <div class="filter-actions">
        <button type="button" class="btn-secondary" (click)="resetFilters()">重置</button>
      </div>
    </div>
  </div>

  <!-- 审核列表 -->
  <div class="approval-list">
    <div class="list-header">
      <h3>审核列表 ({{ filteredApprovals.length }})</h3>
    </div>
    
    @if (filteredApprovals.length === 0) {
      <div class="empty-state">
        <div class="empty-icon">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24 4L28.5 18H42L32 26.5L36.5 40L24 32L11.5 40L16 26.5L6 18H19.5L24 4Z" stroke="#D1D5DB" stroke-width="2" fill="none"/>
          </svg>
        </div>
        <p>暂无符合条件的审核项目</p>
        <p class="empty-hint">调整筛选条件或等待新的报价提交</p>
      </div>
    } @else {
      <div class="approval-table">
        <div class="table-header">
          <div class="table-cell">项目信息</div>
          <div class="table-cell">客户信息</div>
          <div class="table-cell">报价金额</div>
          <div class="table-cell">提交时间</div>
          <div class="table-cell">状态</div>
          <div class="table-cell">操作</div>
        </div>
        
        @for (approval of filteredApprovals; track approval.quotationId) {
          <div class="table-row">
            <div class="table-cell">
              <div class="project-info">
                <div class="project-name">{{ approval.projectName }}</div>
                <div class="project-id">ID: {{ approval.quotationId }}</div>
              </div>
            </div>
            <div class="table-cell">
              <div class="customer-info">
                <div class="customer-name">{{ approval.customerName }}</div>
                <div class="submitted-by">提交人: {{ approval.submittedBy }}</div>
              </div>
            </div>
            <div class="table-cell">
              <div class="amount">¥{{ formatAmount(approval.totalAmount) }}</div>
            </div>
            <div class="table-cell">
              <div class="date">{{ formatDate(approval.submittedAt) }}</div>
            </div>
            <div class="table-cell">
              <span class="status-badge" [class]="getStatusClass(approval.status)">
                {{ getStatusLabel(approval.status) }}
              </span>
            </div>
            <div class="table-cell">
              <button type="button" class="btn-primary btn-sm" (click)="viewApprovalDetails(approval)">
                审核
              </button>
            </div>
          </div>
        }
      </div>
    }
  </div>

  <!-- 审核详情模态框 -->
  @if (showApprovalModal && selectedApproval) {
    <div class="modal-overlay" (click)="closeApprovalModal()">
      <div class="modal-content approval-modal" (click)="$event.stopPropagation()">
        <div class="modal-header">
          <h4>报价审核 - {{ selectedApproval.projectName }}</h4>
          <button type="button" class="modal-close" (click)="closeApprovalModal()">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
        
        <div class="modal-body">
          <div class="approval-details">
            <div class="detail-section">
              <h5>基本信息</h5>
              <div class="detail-grid">
                <div class="detail-item">
                  <label>项目名称</label>
                  <span>{{ selectedApproval.projectName }}</span>
                </div>
                <div class="detail-item">
                  <label>客户名称</label>
                  <span>{{ selectedApproval.customerName }}</span>
                </div>
                <div class="detail-item">
                  <label>提交人</label>
                  <span>{{ selectedApproval.submittedBy }}</span>
                </div>
                <div class="detail-item">
                  <label>报价金额</label>
                  <span class="amount-highlight">¥{{ formatAmount(selectedApproval.totalAmount) }}</span>
                </div>
                <div class="detail-item">
                  <label>提交时间</label>
                  <span>{{ formatDate(selectedApproval.submittedAt) }}</span>
                </div>
                <div class="detail-item">
                  <label>当前状态</label>
                  <span class="status-badge" [class]="getStatusClass(selectedApproval.status)">
                    {{ getStatusLabel(selectedApproval.status) }}
                  </span>
                </div>
              </div>
            </div>
            
            @if (selectedApproval.scriptUsed) {
              <div class="detail-section">
                <h5>使用话术</h5>
                <div class="script-info">
                  <span class="script-id">话术ID: {{ selectedApproval.scriptUsed }}</span>
                </div>
              </div>
            }
            
            <div class="detail-section">
              <h5>审核意见</h5>
              <textarea [(ngModel)]="newComment" class="comment-textarea" 
                        placeholder="请输入审核意见..." rows="4"></textarea>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button type="button" class="btn-secondary" (click)="closeApprovalModal()">取消</button>
          @if (selectedApproval.status === 'pending') {
            <button type="button" class="btn-warning" (click)="requestRevision()" 
                    [disabled]="!newComment.trim()">要求修改</button>
            <button type="button" class="btn-danger" (click)="rejectQuotation()" 
                    [disabled]="!newComment.trim()">拒绝</button>
            <button type="button" class="btn-success" (click)="approveQuotation()">通过</button>
          }
        </div>
      </div>
    </div>
  }

  <!-- 统计报表模态框 -->
  @if (showStatsModal) {
    <div class="modal-overlay" (click)="closeStatsModal()">
      <div class="modal-content stats-modal" (click)="$event.stopPropagation()">
        <div class="modal-header">
          <h4>话术使用统计</h4>
          <button type="button" class="modal-close" (click)="closeStatsModal()">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
        
        <div class="modal-body">
          <div class="stats-content">
            <div class="stats-summary">
              <div class="summary-item">
                <label>平均审核时间</label>
                <span class="summary-value">{{ approvalStats.averageApprovalTime }} 小时</span>
              </div>
              <div class="summary-item">
                <label>总审核数量</label>
                <span class="summary-value">{{ approvalStats.total }}</span>
              </div>
            </div>
            
            @if (scriptUsageStats.length > 0) {
              <div class="script-stats">
                <h5>话术使用排行</h5>
                <div class="stats-list">
                  @for (stat of scriptUsageStats; track stat.scriptId) {
                    <div class="stat-item">
                      <div class="stat-info">
                        <span class="script-title">{{ stat.scriptTitle }}</span>
                        <span class="usage-count">使用 {{ stat.usageCount }} 次</span>
                      </div>
                      <div class="stat-bar">
                        <div class="bar-fill" [style.width.%]="(stat.usageCount / scriptUsageStats[0].usageCount) * 100"></div>
                      </div>
                    </div>
                  }
                </div>
              </div>
            }
          </div>
        </div>
        
        <div class="modal-footer">
          <button type="button" class="btn-secondary" (click)="closeStatsModal()">关闭</button>
        </div>
      </div>
    </div>
  }
</div>