<div class="settlement-card">
  <!-- 自动化控制头部 -->
  @if (showAutomationControls) {
    <div class="automation-header">
      <div class="automation-title">
        <mat-icon>auto_awesome</mat-icon>
        <span>自动化结算处理</span>
      </div>
      <div class="automation-actions">
        <button 
          mat-raised-button 
          color="primary"
          [disabled]="isProcessing()"
          (click)="processAllAutomation()"
          matTooltip="批量处理所有待结算项"
          matTooltipPosition="above"
          [matTooltipShowDelay]="500">
          @if (isProcessing()) {
            <mat-spinner diameter="16"></mat-spinner>
            <span>处理中...</span>
          } @else {
            <ng-container>
              <mat-icon>play_arrow</mat-icon>
              <span>批量处理</span>
            </ng-container>
          }
        </button>
      </div>
    </div>
  }

  <!-- 统计概览 -->
  <div class="stats-overview">
    <div class="stats-title">
      <mat-icon>account_balance_wallet</mat-icon>
      <span>尾款结算统计</span>
    </div>
    <div class="stats-grid">
      <div class="stat-item total">
        <div class="stat-value">{{ formatAmount(stats().totalAmount) }}</div>
        <div class="stat-label">总金额 ({{ stats().totalCount }}项)</div>
      </div>
      <div class="stat-item pending">
        <div class="stat-value">{{ formatAmount(stats().pendingAmount) }}</div>
        <div class="stat-label">待结算 ({{ stats().pendingCount }}项)</div>
      </div>
      <div class="stat-item overdue">
        <div class="stat-value">{{ formatAmount(stats().overdueAmount) }}</div>
        <div class="stat-label">逾期 ({{ stats().overdueCount }}项)</div>
      </div>
      <div class="stat-item completed">
        <div class="stat-value">{{ formatAmount(stats().completedAmount) }}</div>
        <div class="stat-label">已结算 ({{ stats().completedCount }}项)</div>
      </div>
    </div>
  </div>

  <!-- 筛选区域 -->
  <div class="filter-section">
    <div class="search-box">
      <mat-icon>search</mat-icon>
      <input 
        type="text" 
        placeholder="搜索项目名称或阶段..."
        [value]="searchKeyword()"
        (input)="onSearchInput($event)">
    </div>
    <div class="filter-buttons">
      <button 
        class="filter-btn"
        [class.active]="statusFilter() === 'all'"
        (click)="updateStatusFilter('all')">
        全部
      </button>
      <button 
        class="filter-btn"
        [class.active]="statusFilter() === '待结算'"
        (click)="updateStatusFilter('待结算')">
        待结算
      </button>
      <button 
        class="filter-btn"
        [class.active]="statusFilter() === '已结算'"
        (click)="updateStatusFilter('已结算')">
        已结算
      </button>
      <button 
        class="filter-btn overdue"
        [class.active]="statusFilter() === 'overdue'"
        (click)="updateStatusFilter('overdue')">
        逾期
      </button>
    </div>
  </div>

  <!-- 结算列表 -->
  <div class="settlement-list">
    @if (filteredSettlements().length > 0) {
      <div class="list-header">
        <span class="col-project">项目信息</span>
        <span class="col-amount">金额</span>
        <span class="col-status">状态</span>
        <span class="col-actions">操作</span>
        <span class="col-date">日期</span>
      </div>
      <div class="list-body">
        @for (settlement of filteredSettlements(); track settlement.id) {
          <div class="settlement-item" [ngClass]="getStatusClass(settlement)">
            <div class="col-project">
              <div class="project-name">{{ settlement.projectName || '结算项' }}</div>
              <div class="stage-name">{{ settlement.stage || '阶段' }}</div>
            </div>
            
            <div class="col-amount">
              <div class="amount">{{ formatAmount(settlement.amount || 0) }}</div>
              <div class="percentage">{{ settlement.percentage }}%</div>
            </div>
            
            <div class="col-status">
              <span class="status-badge" [ngClass]="getStatusClass(settlement)">
                {{ settlement.status }}
              </span>
              @if (isOverdue(settlement)) {
                <div class="overdue-days">逾期 {{ getDaysOverdue(settlement) }} 天</div>
              }
              
              <!-- 自动化处理按钮 -->
              @if (showAutomationControls && settlement.status === '待结算' && !isOverdue(settlement)) {
                <button 
                  class="auto-process-btn"
                  mat-icon-button
                  color="primary"
                  [disabled]="isProcessing() && processingSettlementId() !== settlement.id"
                  (click)="processSettlementAutomation(settlement); $event.stopPropagation()"
                  matTooltip="自动处理此结算"
                  matTooltipPosition="above"
                  [matTooltipShowDelay]="500">
                  @if (processingSettlementId() === settlement.id) {
                    <mat-spinner diameter="16"></mat-spinner>
                  } @else {
                    <mat-icon>auto_awesome</mat-icon>
                  }
                </button>
              }
            </div>
            
            <!-- 操作列 -->
            <div class="col-actions">
              <div class="action-buttons">
                <!-- 项目验收确认按钮 -->
                @if (settlement.status === '待结算') {
                  <button 
                    mat-stroked-button
                    [color]="getAcceptanceStatus(settlement.projectId) === 'confirmed' ? 'primary' : 'accent'"
                    [disabled]="getAcceptanceStatus(settlement.projectId) === 'confirming'"
                    (click)="confirmProjectAcceptance(settlement)"
                    matTooltip="技术确认项目验收"
                    matTooltipPosition="above"
                    [matTooltipShowDelay]="500"
                    class="acceptance-btn">
                    @if (getAcceptanceStatus(settlement.projectId) === 'confirming') {
                      <mat-spinner diameter="16"></mat-spinner>
                      <span>确认中</span>
                    } @else if (getAcceptanceStatus(settlement.projectId) === 'confirmed') {
                      <ng-container>
                        <mat-icon>check_circle</mat-icon>
                        <span>已验收</span>
                      </ng-container>
                    } @else {
                      <ng-container>
                        <mat-icon>task_alt</mat-icon>
                        <span>确认验收</span>
                      </ng-container>
                    }
                  </button>
                }
                
                <!-- 客服跟进提醒按钮 -->
                @if (settlement.status === '待结算' && getAcceptanceStatus(settlement.projectId) === 'confirmed') {
                  <button 
                    mat-stroked-button
                    color="warn"
                    [disabled]="getReminderStatus(settlement.projectId) === 'creating' || getReminderStatus(settlement.projectId) === 'created'"
                    (click)="createCustomerServiceReminder(settlement, 'payment_follow_up')"
                    matTooltip="创建客服跟进尾款提醒"
                    matTooltipPosition="above"
                    [matTooltipShowDelay]="500"
                    class="reminder-btn">
                    @if (getReminderStatus(settlement.projectId) === 'creating') {
                      <mat-spinner diameter="16"></mat-spinner>
                      <span>创建中</span>
                    } @else if (getReminderStatus(settlement.projectId) === 'created') {
                      <ng-container>
                        <mat-icon>notifications_active</mat-icon>
                        <span>已提醒</span>
                      </ng-container>
                    } @else {
                      <ng-container>
                        <mat-icon>notification_add</mat-icon>
                        <span>跟进尾款</span>
                      </ng-container>
                    }
                  </button>
                }
                
                <!-- 一键发图到企业微信群按钮 -->
                @if (canSendImages(settlement)) {
                  <button 
                    mat-raised-button
                    color="primary"
                    [disabled]="isSendingImagesForProject(settlement.projectId)"
                    (click)="sendImagesToWeChatGroup(settlement)"
                    matTooltip="收款后一键发送大图到企业微信群"
                    matTooltipPosition="above"
                    [matTooltipShowDelay]="500"
                    class="wechat-send-btn">
                    @if (isSendingImagesForProject(settlement.projectId)) {
                      <mat-spinner diameter="16"></mat-spinner>
                      <span>发送中</span>
                    } @else {
                      <ng-container>
                        <mat-icon>send</mat-icon>
                        <span>发图到群</span>
                      </ng-container>
                    }
                  </button>
                }
                
                <!-- 原有的处理结算按钮 -->
                <button 
                  mat-raised-button
                  color="primary"
                  [disabled]="settlement.status === '已结算'"
                  (click)="processSettlement(settlement.id)"
                  class="process-btn">
                  @if (settlement.status === '待结算') {
                    处理结算
                  } @else if (settlement.status === '逾期') {
                    逾期处理
                  } @else {
                    已完成
                  }
                </button>
                
                @if (isOverdue(settlement)) {
                  <button 
                    mat-stroked-button
                    color="warn"
                    (click)="sendReminder(settlement.id)"
                    class="reminder-btn">
                    发送催款
                  </button>
                }
              </div>
            </div>
            
            <div class="col-date">
              @if (settlement.settledAt) {
                <div class="settled-date">{{ settlement.settledAt | date:'yyyy-MM-dd' }}</div>
                <div class="date-label">结算日期</div>
              } @else {
                <div class="due-date">{{ settlement.createdAt | date:'yyyy-MM-dd' }}</div>
                <div class="date-label">创建日期</div>
              }
            </div>
          </div>
        }
      </div>
    } @else {
      <div class="empty-state">
        <div class="empty-icon">💰</div>
        <div class="empty-title">暂无结算信息</div>
        <div class="empty-desc">当前筛选条件下没有找到相关的结算记录</div>
      </div>
    }
  </div>
</div>