<nz-page-header [nzGhost]="false">
  <nz-page-header-title>多维消息统计分析</nz-page-header-title>
  <nz-page-header-content>
    灵活组合不同维度，深入分析消息推送效果
  </nz-page-header-content>
</nz-page-header>

<!-- 筛选区域 -->
<nz-card class="filter-card">
  <div nz-row [nzGutter]="[16, 16]">
    <!-- 日期范围 -->
    <nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>日期范围</nz-form-label>
        <nz-form-control>
          <nz-range-picker
            [(ngModel)]="dateRange"
            (ngModelChange)="onDateRangeChange($event)"
            style="width: 300px; margin-right: 16px"
          ></nz-range-picker>
        </nz-form-control>
      </nz-form-item>
    </nz-col>

    <!-- 模板筛选 -->
    <nz-col [nzSpan]="4">
      <nz-form-item>
        <nz-form-label>模板</nz-form-label>
        <nz-form-control>
          <nz-select
            [(ngModel)]="filters.templateName"
            nzPlaceHolder="选择模板"
            nzAllowClear
            (ngModelChange)="loadStatistics()"
          >
            <nz-option
              *ngFor="let template of availableTemplates"
              [nzLabel]="template"
              [nzValue]="template"
            ></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </nz-col>

    <!-- 策略筛选 -->
    <nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>策略</nz-form-label>
        <nz-form-control>
          <nz-select
            [(ngModel)]="filters.strategyName"
            nzPlaceHolder="选择策略"
            nzAllowClear
            (ngModelChange)="loadStatistics()"
          >
            <nz-option
              *ngFor="let strategy of availableStrategies"
              [nzLabel]="strategy"
              [nzValue]="strategy"
            ></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </nz-col>

    <!-- 国家筛选 -->
    <nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>国家</nz-form-label>
        <nz-form-control>
          <nz-select
            [(ngModel)]="filters.cc"
            nzPlaceHolder="选择国家"
            nzAllowClear
            (ngModelChange)="loadStatistics()"
          >
            <nz-option
              *ngFor="let cc of availableCountries"
              [nzLabel]="formatCountry(cc)"
              [nzValue]="cc"
            ></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </nz-col>

    <!-- 图片筛选 -->
    <nz-col [nzSpan]="4">
      <nz-form-item>
        <nz-form-label>图片</nz-form-label>
        <nz-form-control>
          <nz-select
            [(ngModel)]="filters.image"
            nzPlaceHolder="选择图片"
            nzAllowClear
            (ngModelChange)="loadStatistics()"
            [nzDropdownMatchSelectWidth]="false"
          >
            <nz-option
              nzCustomContent
              *ngFor="let image of availableImages"
              [nzLabel]="getImageId(image)"
              [nzValue]="image"
            >
              <div
                class="image-option"
                nz-tooltip
                [nzTooltipTitle]="getImageId(image)"
              >
                <!-- 图片预览 -->
                <img
                  [src]="image"
                  alt="图片预览"
                  class="image-thumbnail"
                  (error)="handleImageError($event)"
                />
                <!-- 图片ID作为辅助标识 -->
                <!-- <span class="image-id">{{
                  getImageId(image) || "未知ID"
                }}</span> -->
              </div>
            </nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </nz-col>

    <!-- 维度选择 -->
    <!-- <nz-col [nzSpan]="12">
      <nz-form-item>
        <nz-form-label>分析维度</nz-form-label>
        <nz-form-control>
          <nz-checkbox-group
            [(ngModel)]="dimensionOptions"
            (ngModelChange)="onDimensionChange()"
            [nzOptions]="dimensionOptions"
          ></nz-checkbox-group>
          <div class="dimension-hint">
            选择需要分析的维度组合，数据将按所选维度进行聚合
          </div>
        </nz-form-control>
      </nz-form-item>
    </nz-col> -->

    <!-- 操作按钮 -->
    <nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-control [nzOffset]="4">
          <button nz-button nzType="primary" (click)="loadStatistics()">
            <i nz-icon nzType="search"></i> 查询
          </button>
          <button
            nz-button
            nzType="default"
            (click)="resetFilters()"
            style="margin-left: 8px"
          >
            重置
          </button>
        </nz-form-control>
      </nz-form-item>
    </nz-col>
  </div>
</nz-card>

<!-- 加载状态 -->
<div *ngIf="isLoading" class="loading-overlay">
  <nz-spin nzSize="large"></nz-spin>
</div>

<!-- 汇总统计卡片 -->
<div
  nz-row
  [nzGutter]="[16, 16]"
  class="summary-stats"
  *ngIf="summaryStats && !isLoading"
>
  <nz-col [nzSpan]="6">
    <nz-card>
      <nz-statistic
        nzTitle="总发送量"
        [nzValue]="summaryStats.totalRecords"
        [nzValueStyle]="{ color: '#1890ff' }"
      ></nz-statistic>
    </nz-card>
  </nz-col>
  <nz-col [nzSpan]="6">
    <nz-card>
      <nz-statistic
        nzTitle="成功发送率"
        [nzValue]="formatPercentage(summaryStats.sentSuccessRate)"
        [nzValueStyle]="{ color: '#52c41a' }"
      ></nz-statistic>
      <nz-progress
        [nzPercent]="summaryStats.sentSuccessRate * 100"
        nzSize="small"
        nzStatus="success"
        style="margin-top: 10px"
      ></nz-progress>
    </nz-card>
  </nz-col>
  <nz-col [nzSpan]="6">
    <nz-card>
      <nz-statistic
        nzTitle="送达率"
        [nzValue]="formatPercentage(summaryStats.deliveredRate)"
        [nzValueStyle]="{ color: '#13c2c2' }"
      ></nz-statistic>
      <nz-progress
        [nzPercent]="summaryStats.deliveredRate * 100"
        nzSize="small"
        style="margin-top: 10px"
      ></nz-progress>
    </nz-card>
  </nz-col>
  <nz-col [nzSpan]="6">
    <nz-card>
      <nz-statistic
        nzTitle="点击率"
        [nzValue]="formatPercentage(summaryStats.clickThroughRate)"
        [nzValueStyle]="{ color: '#722ed1' }"
      ></nz-statistic>
      <nz-progress
        [nzPercent]="summaryStats.clickThroughRate * 100"
        nzSize="small"
        nzStatus="active"
        style="margin-top: 10px"
      ></nz-progress>
    </nz-card>
  </nz-col>
</div>

<!-- 图表区域 -->
<nz-card class="chart-card" *ngIf="filteredStats.length && !isLoading">
  <div nz-card-header>趋势分析</div>
  <div nz-card-body>
    <div class="chart-container">
      <canvas
        baseChart
        [data]="chartData"
        [options]="chartOptions"
        [type]="'bar'"
      >
      </canvas>
    </div>
  </div>
</nz-card>

<!-- 数据表格 -->
<nz-card class="data-table" *ngIf="!isLoading">
  <div nz-card-header>详细数据</div>
  <div nz-card-body>
    <nz-empty
      *ngIf="!filteredStats.length"
      [nzNotFoundContent]="'没有找到匹配的数据'"
    ></nz-empty>

    <nz-table
      *ngIf="filteredStats.length"
      #basicTable
      [nzData]="filteredStats"
      [nzSize]="'middle'"
    >
      <thead>
        <tr>
          <th nzShowSort nzSortKey="date" (nzSort)="sortTable('date')">
            日期
            <nz-icon
              *ngIf="getSortIcon('date')"
              [nzType]="getSortIcon('date')!"
            ></nz-icon>
          </th>
          <th
            *ngIf="isDimensionOptionExists('templateName')"
            nzShowSort
            nzSortKey="templateName"
            (nzSort)="sortTable('templateName')"
          >
            模板
            <nz-icon
              *ngIf="getSortIcon('templateName')"
              [nzType]="getSortIcon('templateName')!"
            ></nz-icon>
          </th>
          <th
            *ngIf="isDimensionOptionExists('strategyName')"
            nzShowSort
            nzSortKey="strategyName"
            (nzSort)="sortTable('strategyName')"
          >
            策略
            <nz-icon
              *ngIf="getSortIcon('strategyName')"
              [nzType]="getSortIcon('strategyName')!"
            ></nz-icon>
          </th>
          <th
            *ngIf="isDimensionOptionExists('cc')"
            nzShowSort
            nzSortKey="cc"
            (nzSort)="sortTable('cc')"
          >
            国家
            <nz-icon
              *ngIf="getSortIcon('cc')"
              [nzType]="getSortIcon('cc')!"
            ></nz-icon>
          </th>
          <th
            *ngIf="isDimensionOptionExists('image')"
            nzShowSort
            nzSortKey="image"
            (nzSort)="sortTable('image')"
          >
            图片
            <nz-icon
              *ngIf="getSortIcon('image')"
              [nzType]="getSortIcon('image')!"
            ></nz-icon>
          </th>
          <th
            nzShowSort
            nzSortKey="totalRecords"
            (nzSort)="sortTable('totalRecords')"
          >
            总发送量
            <nz-icon
              *ngIf="getSortIcon('totalRecords')"
              [nzType]="getSortIcon('totalRecords')!"
            ></nz-icon>
          </th>
          <th
            nzShowSort
            nzSortKey="deliveredRate"
            (nzSort)="sortTable('deliveredRate')"
          >
            送达率
            <nz-icon
              *ngIf="getSortIcon('deliveredRate')"
              [nzType]="getSortIcon('deliveredRate')!"
            ></nz-icon>
          </th>
          <th
            nzShowSort
            nzSortKey="clickThroughRate"
            (nzSort)="sortTable('clickThroughRate')"
          >
            点击率
            <nz-icon
              *ngIf="getSortIcon('clickThroughRate')"
              [nzType]="getSortIcon('clickThroughRate')!"
            ></nz-icon>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td>{{ data.date | date : "yyyy-MM-dd" }}</td>
          <td *ngIf="isDimensionOptionExists('templateName')">
            {{ data.templateName || "-" }}
          </td>
          <td *ngIf="isDimensionOptionExists('strategyName')">
            {{ data.strategyName || "-" }}
          </td>
          <td *ngIf="isDimensionOptionExists('cc')">
            {{ data.cc ? formatCountry(data.cc) : "-" }}
          </td>
          <td *ngIf="isDimensionOptionExists('image')">
            <img
              nz-image
              width="60px"
              height="60px"
              *ngIf="data.image"
              [nzSrc]="data.image"
              alt="统计图片"
            />
            <!-- <span nz-tooltip [nzTooltipTitle]="data.image">
              {{
                data.image
                  ? (data.image | slice : 0 : 20) +
                    (data.image.length > 20 ? "..." : "")
                  : "-"
              }}
            </span> -->
          </td>
          <td>{{ data.totalRecords }}</td>
          <td>
            <nz-tag
              [nzColor]="
                data.deliveredRate > 0.8
                  ? 'green'
                  : data.deliveredRate > 0.5
                  ? 'orange'
                  : 'red'
              "
            >
              {{ formatPercentage(data.deliveredRate) }}
            </nz-tag>
          </td>
          <td>
            <nz-tag
              [nzColor]="
                data.clickThroughRate > 0.3
                  ? 'green'
                  : data.clickThroughRate > 0.1
                  ? 'orange'
                  : 'red'
              "
            >
              {{ formatPercentage(data.clickThroughRate) }}
            </nz-tag>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>
