<div class="reconciliation-container">
  <!-- 页面标题和操作按钮 -->
  <div class="page-header" style="display: flex !important; flex-direction: row !important; align-items: center !important;">
    <div class="header-top" style="width: auto !important; margin-right: 20px;">
      <a class="back-to-dashboard-btn" routerLink="/finance/dashboard">
        <i class="fa fa-arrow-left"></i> 返回工作台
      </a>
    </div>
    <h2 style="margin-right: 20px; margin-bottom: 0 !important;">对账管理</h2>
    <button class="btn btn-primary" (click)="startReconciliation()" *ngIf="userRole() === 'teamLead'">
      <i class="fa fa-plus-circle"></i> 开始新对账
    </button>
  </div>

  <!-- 过滤和搜索区域 -->
  <div class="filter-section">
    <div class="filter-group">
      <label>对账状态:</label>
      <select [ngModel]="statusFilter()" (ngModelChange)="applyStatusFilter($event)" class="form-control">
        <option value="all">全部</option>
        <option value="pending">待对账</option>
        <option value="partial">部分对账</option>
        <option value="completed">已完成</option>
        <option value="discrepancy">有差异</option>
      </select>
    </div>
    
    <div class="filter-group">
      <label>对账期间:</label>
      <div class="date-range">
        <input type="date" [ngModel]="dateRangeFilter().start ? (dateRangeFilter().start | date:'yyyy-MM-dd') : ''" (ngModelChange)="updateDateRangeStart($event)" class="form-control date-input">
        <span>至</span>
        <input type="date" [ngModel]="dateRangeFilter().end ? (dateRangeFilter().end | date:'yyyy-MM-dd') : ''" (ngModelChange)="updateDateRangeEnd($event)" class="form-control date-input">
      </div>
    </div>
  </div>

  <!-- 对账记录表格 -->
  <div class="section-card">
    <div class="section-header">
      <h3>对账记录</h3>
    </div>
    
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>对账ID</th>
            <th>对账日期</th>
            <th>对账期间</th>
            <th>状态</th>
            <th *ngIf="userRole() === 'teamLead'">总金额</th>
            <th *ngIf="userRole() === 'teamLead'">已对账金额</th>
            <th *ngIf="userRole() === 'teamLead'">差异金额</th>
            <th>对账人</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
            <tr *ngFor="let record of reconciliationRecords() || []" (click)="viewReconciliationDetail(record)">
            <td>{{ record.id }}</td>
            <td>{{ formatDate(record.date) }}</td>
            <td>{{ formatDate(record.periodStart) }} - {{ formatDate(record.periodEnd) }}</td>
            <td><span class="status-badge {{ getStatusClass(record.status) }}">{{ getStatusText(record.status) }}</span></td>
            <td *ngIf="userRole() === 'teamLead'">{{ formatAmount(record.totalAmount) }}</td>
            <td *ngIf="userRole() === 'teamLead'">{{ formatAmount(record.reconciledAmount) }}</td>
            <td *ngIf="userRole() === 'teamLead'">{{ formatAmount(record.discrepancyAmount) }}</td>
            <td>{{ record.reconciledBy || '-' }}</td>
            <td>
              <button class="btn btn-sm btn-view" (click)="$event.stopPropagation(); viewReconciliationDetail(record)">
                查看详情
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- 未对账交易表格 -->
  <div class="section-card">
    <div class="section-header">
      <h3>未对账交易 ({{ unreconciledTransactions().length || 0 }} 笔)</h3>
    </div>
    
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>交易ID</th>
            <th>交易日期</th>
            <th>交易类型</th>
            <th *ngIf="userRole() === 'teamLead'">金额</th>
            <th>项目名称</th>
            <th>客户名称</th>
            <th>描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
            <tr *ngFor="let transaction of unreconciledTransactions() || []">
            <td>{{ transaction.id }}</td>
            <td>{{ formatDate(transaction.date) }}</td>
            <td><span class="transaction-type {{ getTransactionTypeClass(transaction.type) }}">{{ getTransactionTypeText(transaction.type) }}</span></td>
            <td *ngIf="userRole() === 'teamLead'">{{ formatAmount(transaction.amount) }}</td>
            <td>{{ transaction.projectName }}</td>
            <td>{{ transaction.clientName }}</td>
            <td>{{ transaction.description }}</td>
            <td>
              <button class="btn btn-sm btn-primary" (click)="markTransactionAsReconciled(transaction)" *ngIf="userRole() === 'teamLead'">
                标记为已对账
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- 对账详情模态框 -->
  <div class="modal-overlay" *ngIf="showDetailModal()" (click)="showDetailModal.set(false)">
    <div class="modal-content" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h3>对账详情 - {{ selectedRecord()?.id || '' }}</h3>
        <button class="modal-close" (click)="showDetailModal.set(false)">&times;</button>
      </div>
      
      <div class="modal-body" *ngIf="selectedRecord()">
        <div class="detail-grid">
          <div class="detail-item">
            <label>对账日期:</label>
            <span>{{ selectedRecord()?.date ? formatDate(selectedRecord()?.date) : '-' }}</span>
          </div>
          <div class="detail-item">
            <label>对账期间:</label>
            <span>{{ selectedRecord()?.periodStart ? formatDate(selectedRecord()?.periodStart) : '-' }} - {{ selectedRecord()?.periodEnd ? formatDate(selectedRecord()?.periodEnd) : '-' }}</span>
          </div>
          <div class="detail-item">
            <label>状态:</label>
            <span class="status-badge {{ getStatusClass(selectedRecord()?.status || 'pending') }}">{{ getStatusText(selectedRecord()?.status || 'pending') }}</span>
          </div>
          <div class="detail-item" *ngIf="userRole() === 'teamLead'">
            <label>总金额:</label>
            <span>{{ formatAmount(selectedRecord()?.totalAmount || 0) }}</span>
          </div>
          <div class="detail-item" *ngIf="userRole() === 'teamLead'">
            <label>已对账金额:</label>
            <span>{{ formatAmount(selectedRecord()?.reconciledAmount || 0) }}</span>
          </div>
          <div class="detail-item" *ngIf="userRole() === 'teamLead'">
            <label>差异金额:</label>
            <span>{{ formatAmount(selectedRecord()?.discrepancyAmount || 0) }}</span>
          </div>
          <div class="detail-item">
            <label>对账人:</label>
            <span>{{ selectedRecord()?.reconciledBy || '-' }}</span>
          </div>
          <div class="detail-item full-width">
            <label>备注:</label>
            <span>{{ selectedRecord()?.notes || '-' }}</span>
          </div>
        </div>
        
        <div class="transactions-section">
          <h4>相关交易记录</h4>
          <div class="table-responsive">
            <table class="table table-small">
              <thead>
                <tr>
                  <th>交易ID</th>
                  <th>日期</th>
                  <th>类型</th>
                  <th *ngIf="userRole() === 'teamLead'">金额</th>
                  <th>项目</th>
                  <th>描述</th>
                </tr>
              </thead>
              <tbody>
                <ng-container *ngIf="selectedRecord()?.transactions && selectedRecord()!.transactions!.length > 0; else noTransactions">
                  <tr *ngFor="let transaction of (selectedRecord()?.transactions || [])">
                    <td>{{ transaction.id }}</td>
                    <td>{{ formatDate(transaction.date) }}</td>
                    <td><span class="transaction-type {{ getTransactionTypeClass(transaction.type) }}">{{ getTransactionTypeText(transaction.type) }}</span></td>
                    <td *ngIf="userRole() === 'teamLead'">{{ formatAmount(transaction.amount) }}</td>
                    <td>{{ transaction.projectName }}</td>
                    <td>{{ transaction.description }}</td>
                  </tr>
                </ng-container>
                <ng-template #noTransactions>
                  <tr>
                    <td colspan="6" class="no-data">暂无交易记录</td>
                  </tr>
                </ng-template>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button class="btn btn-secondary" (click)="showDetailModal.set(false)">关闭</button>
      </div>
    </div>
  </div>

  <!-- 新建对账模态框 -->
  <div class="modal-overlay" *ngIf="showReconcileModal()" (click)="showReconcileModal.set(false)">
    <div class="modal-content reconcile-modal" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h3>开始新对账</h3>
        <button class="modal-close" (click)="showReconcileModal.set(false)">&times;</button>
      </div>
      
      <div class="modal-body">
        <form [formGroup]="reconciliationForm">
          <div class="form-group">
            <label>对账开始日期:</label>
            <input type="date" formControlName="periodStart" class="form-control" required>
          </div>
          
          <div class="form-group">
            <label>对账结束日期:</label>
            <input type="date" formControlName="periodEnd" class="form-control" required>
          </div>
          
          <div class="form-group">
            <label>备注:</label>
            <textarea formControlName="notes" class="form-control" rows="3"></textarea>
          </div>
        </form>
        
        <div class="reconciliation-preview">
          <h4>待对账交易 ({{ getFilteredUnreconciledTransactions().length }} 笔)</h4>
          <div class="table-responsive">
            <table class="table table-small">
              <thead>
                <tr>
                  <th>交易ID</th>
                  <th>日期</th>
                  <th>类型</th>
                  <th *ngIf="userRole() === 'teamLead'">金额</th>
                  <th>项目</th>
                </tr>
              </thead>
              <tbody>
                <ng-container *ngIf="getFilteredUnreconciledTransactions().length > 0; else noFilteredTransactions">
                  <tr *ngFor="let transaction of (getFilteredUnreconciledTransactions() || [])">
                    <td>{{ transaction.id }}</td>
                    <td>{{ formatDate(transaction.date) }}</td>
                    <td><span class="transaction-type {{ getTransactionTypeClass(transaction.type) }}">{{ getTransactionTypeText(transaction.type) }}</span></td>
                    <td *ngIf="userRole() === 'teamLead'">{{ formatAmount(transaction.amount) }}</td>
                    <td>{{ transaction.projectName }}</td>
                  </tr>
                </ng-container>
                <ng-template #noFilteredTransactions>
                  <tr>
                    <td colspan="5" class="no-data">暂无符合条件的交易</td>
                  </tr>
                </ng-template>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button class="btn btn-secondary" (click)="showReconcileModal.set(false)">取消</button>
        <button class="btn btn-primary" (click)="performReconciliation()" [disabled]="reconciliationForm.invalid">
          确认对账
        </button>
      </div>
    </div>
  </div>
  
  <!-- 角色权限提示 -->
  <div *ngIf="userRole() === 'juniorMember'" class="permission-tip">
    <div class="tip-icon">🔒</div>
    <div class="tip-content">
      <p>您当前以初级组员身份查看对账管理，部分敏感数据已隐藏。如需查看完整数据，请联系管理员提升权限。</p>
    </div>
  </div>
</div>