<div class="reports-container">
  <div class="reports-header">
    <div class="header-top">
      <button class="back-to-dashboard-btn" routerLink="/finance/dashboard">
        <i class="fa fa-arrow-left"></i> 返回工作台
      </button>
    </div>
    <h1>报表管理</h1>
    <p>生成、查看和导出各类财务报表</p>
  </div>

  <!-- 报表参数设置区域 -->
  <div class="reports-params">
    <div class="params-card">
      <h2>报表参数</h2>
      <div class="params-grid">
        <div class="param-item">
          <label for="report-type">报表类型</label>
          <select 
            id="report-type" 
            [ngModel]="selectedReportType()"
            (ngModelChange)="selectedReportType.set($event)"
            class="form-select"
          >
            <option *ngFor="let type of reportTypes" [value]="type.value">
              {{ type.label }}
            </option>
          </select>
        </div>

        <div class="param-item">
          <label for="time-period">时间周期</label>
          <select 
            id="time-period" 
            [ngModel]="selectedTimePeriod()"
            (ngModelChange)="selectedTimePeriod.set($event)"
            class="form-select"
          >
            <option *ngFor="let period of timePeriods" [value]="period.value">
              {{ period.label }}
            </option>
          </select>
        </div>

        <div class="param-item">
          <label for="start-date">开始日期</label>
          <input 
            id="start-date" 
            type="date" 
            [ngModel]="formatDate(dateRange().start)"
            (ngModelChange)="updateDateRangeStart($event)"
            class="form-input"
          >
        </div>

        <div class="param-item">
          <label for="end-date">结束日期</label>
          <input 
            id="end-date" 
            type="date" 
            [ngModel]="formatDate(dateRange().end)"
            (ngModelChange)="updateDateRangeEnd($event)"
            class="form-input"
          >
        </div>

        <div class="param-item">
          <label for="chart-type">图表类型</label>
          <select 
            id="chart-type" 
            [ngModel]="selectedChartType()"
            (ngModelChange)="selectedChartType.set($event)"
            class="form-select"
          >
            <option *ngFor="let chart of chartTypes" [value]="chart.value">
              {{ chart.label }}
            </option>
          </select>
        </div>

      <div class="params-actions">
        <button 
          class="btn-primary" 
          (click)="generateReport()"
          [disabled]="isLoading()"
        >
          <i class="fa fa-refresh" [class.fa-spin]="isLoading()"></i>
          {{ isLoading() ? '生成中...' : '生成报表' }}
        </button>
        <button 
          class="btn-secondary" 
          (click)="exportReport()"
          [disabled]="!reportData()"
        >
          <i class="fa fa-download"></i> 导出报表
        </button>
        <button 
          class="btn-outline" 
          (click)="resetParameters()"
        >
          <i class="fa fa-undo"></i> 重置
        </button>
      </div>
    </div>
  </div>

  <!-- 报表结果展示区域 -->
  <div class="reports-result" *ngIf="filteredReportData">
    <div class="result-header">
      <h2>{{ filteredReportData.title }}</h2>
      <div class="result-meta">
        <span>报表ID: {{ filteredReportData.id }}</span>
        <span>生成时间: {{ formatDate(filteredReportData.generatedAt) }}</span>
        <span>时间范围: {{ formatDate(filteredReportData.dateRange.start) }} - {{ formatDate(filteredReportData.dateRange.end) }}</span>
      </div>
    </div>

    <!-- 报表汇总信息 -->
      <div class="summary-cards">
        <div class="summary-card" *ngIf="filteredReportData.summary && filteredReportData.summary['totalRevenue'] !== undefined && userRole() === 'teamLead'">
          <div class="summary-icon">💰</div>
          <div class="summary-content">
            <div class="summary-label">总收入</div>
            <div class="summary-value">{{ formatAmount(filteredReportData.summary['totalRevenue'] || 0) }}</div>
          </div>
        </div>
        
        <div class="summary-card" *ngIf="filteredReportData.summary && filteredReportData.summary['totalExpense'] !== undefined && userRole() === 'teamLead'">
          <div class="summary-icon">📉</div>
          <div class="summary-content">
            <div class="summary-label">总支出</div>
            <div class="summary-value">{{ formatAmount(filteredReportData.summary['totalExpense'] || 0) }}</div>
          </div>
        </div>
        
        <div class="summary-card" *ngIf="filteredReportData.summary && filteredReportData.summary['netProfit'] !== undefined && userRole() === 'teamLead'">
          <div class="summary-icon">📊</div>
          <div class="summary-content">
            <div class="summary-label">净利润</div>
            <div class="summary-value profit">{{ formatAmount(filteredReportData.summary['netProfit'] || 0) }}</div>
          </div>
        </div>
        
        <div class="summary-card" *ngIf="filteredReportData.summary && filteredReportData.summary['profitMargin'] !== undefined && userRole() === 'teamLead'">
          <div class="summary-icon">📈</div>
          <div class="summary-content">
            <div class="summary-label">利润率</div>
            <div class="summary-value">{{ formatPercentage(filteredReportData.summary['profitMargin'] || 0) }}</div>
          </div>
        </div>
        
        <div class="summary-card" *ngIf="filteredReportData.summary && filteredReportData.summary['totalProjects'] !== undefined">
          <div class="summary-icon">📋</div>
          <div class="summary-content">
            <div class="summary-label">项目总数</div>
            <div class="summary-value">{{ filteredReportData.summary['totalProjects'] || 0 }}</div>
          </div>
        </div>
        
        <div class="summary-card" *ngIf="filteredReportData.summary && filteredReportData.summary['averageProfitMargin'] !== undefined && userRole() === 'teamLead'">
          <div class="summary-icon">💰</div>
          <div class="summary-content">
            <div class="summary-label">平均利润率</div>
            <div class="summary-value">{{ formatPercentage(filteredReportData.summary['averageProfitMargin'] || 0) }}</div>
          </div>
        </div>
        
        <div class="summary-card" *ngIf="filteredReportData.summary && filteredReportData.summary['profitableProjects'] !== undefined">
          <div class="summary-icon">✅</div>
          <div class="summary-content">
            <div class="summary-label">盈利项目数</div>
            <div class="summary-value">{{ filteredReportData.summary['profitableProjects'] || 0 }}</div>
          </div>
        </div>
      </div>

    <!-- 报表图表展示 -->
    <div class="chart-container">
      <div class="chart-header">
        <h3>数据可视化</h3>
      </div>
      
      <div class="role-warning" *ngIf="userRole() !== 'teamLead'">
        出于权限控制，图表数值已隐藏；如需查看完整数据，请使用组长账号。
      </div>
      
      <!-- ECharts 图表容器 -->
      <div id="echarts-container" #chartContainer style="width: 100%; height: 400px;"></div>
      
      <!-- 表格展示（仅在选择表格类型时显示） -->
      <div class="chart-content table-container" *ngIf="filteredReportData.chartType === 'table' && filteredReportData.chartData">
        <table class="data-table">
          <thead>
            <tr>
              <th>项目</th>
              <th *ngIf="userRole() === 'teamLead'">金额</th>
              <th *ngIf="userRole() === 'teamLead'">占比</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of filteredReportData.chartData">
              <td>
                <div class="table-label">
                  <span class="label-color" [style.backgroundColor]="data.color"></span>
                  {{ data.label }}
                </div>
              </td>
              <td *ngIf="userRole() === 'teamLead'">{{ formatAmount(data.value) }}</td>
              <td *ngIf="userRole() === 'teamLead'">{{ formatPercentage((data.value / totalValue(filteredReportData.chartData)) * 100) }}</td>
            </tr>
            <tr class="table-total" *ngIf="userRole() === 'teamLead'">
              <td>总计</td>
              <td>{{ formatAmount(totalValue(filteredReportData.chartData)) }}</td>
              <td>100%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- 历史报表记录 -->
  <div class="historical-reports">
    <div class="history-header">
      <h2>历史报表</h2>
      <div class="history-count">{{ historicalReports().length || 0 }} 份记录</div>
    </div>
    
    <div class="history-list">
      <div 
          *ngFor="let report of historicalReports()"
          class="history-item" 
          (click)="viewHistoricalReport(report)"
        >
        <div class="history-icon">{{ getReportTypeIcon(report.type) }}</div>
        <div class="history-content">
          <div class="history-title">{{ report.title }}</div>
          <div class="history-meta">
            <span>{{ report.id }}</span>
            <span>{{ formatDate(report.generatedAt) }}</span>
          </div>
        </div>
        <div class="history-actions">
          <button class="btn-icon" title="查看">
            <i class="fa fa-eye"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 角色权限提示 -->
  <div *ngIf="userRole() === 'juniorMember'" class="permission-tip">
    <div class="tip-icon">🔒</div>
    <div class="tip-content">
      <p>您当前以初级组员身份查看报表，部分敏感数据已隐藏。如需查看完整数据，请联系管理员提升权限。</p>
    </div>
  </div>
