<nz-card nzTitle="消息推送统计概览" [nzBordered]="false">
  <div class="filter-controls">
    <nz-range-picker
      [(ngModel)]="dateRange"
      (ngModelChange)="refreshData()"
      style="width: 300px; margin-right: 16px"
    ></nz-range-picker>
    <button
      nz-button
      nzType="primary"
      (click)="refreshData()"
      [nzLoading]="isLoading"
    >
      <span nz-icon nzType="sync"></span>刷新数据
    </button>
  </div>

  <nz-spin [nzSpinning]="isLoading">
    <!-- 整体统计卡片 -->
    <nz-card nzTitle="整体统计" style="margin-top: 16px">
      <div nz-row [nzGutter]="16" *ngIf="overallStats">
        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="总发送量"
            [nzValue]="overallStats.totalRecords || 0"
          ></nz-statistic>
        </div>

        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="发送成功率"
            [nzValue]="formatPercentage(overallStats.sentSuccessRate || 0)"
          ></nz-statistic>
          <div class="statistic-subtext">
            成功数: {{ overallStats.sent || 0 }}
          </div>
        </div>

        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="送达率"
            [nzValue]="formatPercentage(overallStats.deliveredRate || 0)"
          ></nz-statistic>
          <div class="statistic-subtext">
            送达数: {{ overallStats.delivered || 0 }}
          </div>
        </div>

        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="展示率"
            [nzValue]="formatPercentage(overallStats.displayRate || 0)"
          ></nz-statistic>
          <div class="statistic-subtext">
            展示数: {{ overallStats.displayCount || 0 }}
          </div>
        </div>

        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="点击率"
            [nzValue]="formatPercentage(overallStats.clickThroughRate || 0)"
          ></nz-statistic>
        </div>

        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="失败率"
            [nzValue]="
              formatPercentage(overallStats.tokenInvalidationRate || 0)
            "
          ></nz-statistic>
          <div class="statistic-subtext">
            失败数: {{ overallStats.failed || 0 }}
          </div>
        </div>
      </div>
    </nz-card>

    <!-- 图表区域 -->
    <div nz-row [nzGutter]="16" style="margin-top: 16px">
      <div nz-col [nzSpan]="24">
        <nz-card nzTitle="每日消息量统计">
          <div class="chart-container">
            <canvas
              baseChart
              [type]="'bar'"
              [data]="combinedChartData"
              [options]="combinedChartOptions"
            ></canvas>
          </div>
        </nz-card>
      </div>
    </div>

    <div nz-row [nzGutter]="16" style="margin-top: 16px">
      <div nz-col [nzSpan]="24">
        <nz-card nzTitle="每日成功率趋势">
          <div class="chart-container">
            <canvas
              baseChart
              [type]="'line'"
              [data]="rateChartData"
              [options]="combinedChartOptions"
            ></canvas>
          </div>
        </nz-card>
      </div>
    </div>

    <!-- 统计表格标签页 -->
    <nz-tabset [(nzSelectedIndex)]="activeTab" style="margin-top: 16px">
      <nz-tab nzTitle="按策略统计">
        <nz-table
          #strategyTable
          [nzData]="strategyStats"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          [nzBordered]="true"
          [nzSize]="'small'"
        >
          <thead>
            <tr>
              <th>策略名称</th>
              <th>总发送量</th>
              <th>成功数</th>
              <th>送达数</th>
              <th>展示数</th>
              <th>打开数</th>
              <th>失败数</th>
              <th>送达率</th>
              <th>展示率</th>
              <th>点击率</th>
              <th>失败率</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of strategyTable.data">
              <td class="strategy-name-col">
                <a
                  (click)="navigateToStrategy(item.strategyName)"
                  *ngIf="item.strategyName"
                >
                  {{ item.strategyName || "-" }}
                </a>
                <span *ngIf="!item.strategyName">-</span>
              </td>
              <td>{{ item.totalRecords || 0 }}</td>
              <td>{{ item.sent || 0 }}</td>
              <td>{{ item.delivered || 0 }}</td>
              <td class="display-count-column">{{ item.displayCount || 0 }}</td>
              <td>{{ item.opened || 0 }}</td>
              <td>{{ item.failed || 0 }}</td>
              <td>
                <div class="progress-container">
                  <nz-progress
                    [nzPercent]="
                      formatPercentageToNumber(item.deliveredRate || 0)
                    "
                    nzSize="small"
                    nzStatus="normal"
                  ></nz-progress>
                  <!-- <span class="percentage-text">{{
                    formatPercentage(item.deliveredRate || 0)
                  }}</span> -->
                </div>
              </td>
              <td class="display-rate-column">
                <div class="progress-container">
                  <nz-progress
                    [nzPercent]="
                      formatPercentageToNumber(item.displayRate || 0)
                    "
                    nzSize="small"
                    nzStatus="active"
                  ></nz-progress>
                  <!-- <span class="percentage-text">{{
                    formatPercentage(item.displayRate || 0)
                  }}</span> -->
                </div>
              </td>
              <td class="click-rate-column">
                <div class="progress-container">
                  <nz-progress
                    [nzPercent]="
                      formatPercentageToNumber(item.clickThroughRate || 0)
                    "
                    nzSize="small"
                    nzStatus="active"
                  ></nz-progress>
                  <!-- <span class="percentage-text">{{
                    formatPercentage(item.clickThroughRate || 0)
                  }}</span> -->
                </div>
              </td>
              <td>
                <div class="progress-container">
                  <nz-progress
                    [nzPercent]="
                      formatPercentageToNumber(item.tokenInvalidationRate || 0)
                    "
                    nzSize="small"
                    nzStatus="exception"
                  ></nz-progress>
                  <span class="percentage-text">{{
                    formatPercentage(item.tokenInvalidationRate || 0)
                  }}</span>
                </div>
              </td>
            </tr>
          </tbody>
        </nz-table>
        <nz-empty *ngIf="strategyStats.length === 0 && !isLoading"></nz-empty>
      </nz-tab>

      <nz-tab nzTitle="按模板统计">
        <nz-table
          #templateTable
          [nzData]="templateStats"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          [nzBordered]="true"
          [nzSize]="'small'"
        >
          <thead>
            <tr>
              <th>模板名称</th>
              <th>总发送量</th>
              <th>成功数</th>
              <th>送达数</th>
              <th>展示数</th>
              <th>打开数</th>
              <th>失败数</th>
              <th>送达率</th>
              <th>展示率</th>
              <th>点击率</th>
              <th>失败率</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of templateTable.data">
              <td class="template-name-col">
                <a
                  (click)="navigateToTemplate(item.templateName)"
                  *ngIf="item.templateName"
                >
                  {{ item.templateName || "-" }}
                </a>
                <span *ngIf="!item.templateName">-</span>
              </td>
              <td>{{ item.totalRecords || 0 }}</td>
              <td>{{ item.sent || 0 }}</td>
              <td>{{ item.delivered || 0 }}</td>
              <td class="display-count-column">{{ item.displayCount || 0 }}</td>
              <td>{{ item.opened || 0 }}</td>
              <td>{{ item.failed || 0 }}</td>
              <td>
                <div class="progress-container">
                  <nz-progress
                    [nzPercent]="
                      formatPercentageToNumber(item.deliveredRate || 0)
                    "
                    nzSize="small"
                    nzStatus="normal"
                  ></nz-progress>
                  <!-- <span class="percentage-text">{{
                    formatPercentage(item.deliveredRate || 0)
                  }}</span> -->
                </div>
              </td>
              <td class="display-rate-column">
                <div class="progress-container">
                  <nz-progress
                    [nzPercent]="
                      formatPercentageToNumber(item.displayRate || 0)
                    "
                    nzSize="small"
                    nzStatus="active"
                  ></nz-progress>
                  <!-- <span class="percentage-text">{{
                    formatPercentage(item.displayRate || 0)
                  }}</span> -->
                </div>
              </td>
              <td class="click-rate-column">
                <div class="progress-container">
                  <nz-progress
                    [nzPercent]="
                      formatPercentageToNumber(item.clickThroughRate || 0)
                    "
                    nzSize="small"
                    nzStatus="active"
                  ></nz-progress>
                  <!-- <span class="percentage-text">{{
                    formatPercentage(item.clickThroughRate || 0)
                  }}</span> -->
                </div>
              </td>
              <td>
                <div class="progress-container">
                  <nz-progress
                    [nzPercent]="
                      formatPercentageToNumber(item.tokenInvalidationRate || 0)
                    "
                    nzSize="small"
                    nzStatus="exception"
                  ></nz-progress>
                  <span class="percentage-text">{{
                    formatPercentage(item.tokenInvalidationRate || 0)
                  }}</span>
                </div>
              </td>
            </tr>
          </tbody>
        </nz-table>
        <nz-empty *ngIf="templateStats.length === 0 && !isLoading"></nz-empty>
      </nz-tab>
    </nz-tabset>
  </nz-spin>
</nz-card>
