import { Component } from '@angular/core';
import { CommonModule, DatePipe, JsonPipe } from '@angular/common';

// NG-ZORRO 组件
import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzSwitchModule } from 'ng-zorro-antd/switch';

// 类型
import { IMessageRecord } from '../services/message.service';
import { NzModalRef } from 'ng-zorro-antd/modal';

@Component({
  selector: 'app-message-record-detail',
  standalone: true,
  imports: [
    CommonModule,
    NzDescriptionsModule,
    NzTagModule,
    NzSwitchModule,
    DatePipe,
    JsonPipe,
  ],
  template: `
    <nz-descriptions nzBordered [nzColumn]="2">
      <nz-descriptions-item nzTitle="用户ID">{{
        record.uid
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="CC">{{ record.cc }}</nz-descriptions-item>

      <!-- 合并活动、策略、模板为一列 -->
      <nz-descriptions-item nzTitle="消息来源">
        <div class="source-item">
          @if(record.activityName) {
          <div><strong>活动:</strong> {{ record.activityName }}</div>
          } @if(record.strategyName) {
          <div><strong>策略:</strong> {{ record.strategyName }}</div>
          } @if(record.templateName) {
          <div><strong>模板:</strong> {{ record.templateName }}</div>
          }
        </div>
      </nz-descriptions-item>

      <nz-descriptions-item nzTitle="标题">{{
        record.title
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="内容">{{
        record.content
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="状态">
        <nz-tag [nzColor]="getStatusColor(record.status)">
          {{ getStatusName(record.status) }}
        </nz-tag>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="图片链接">{{
        record.image || ''
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="大图模式">
        {{ record.bigger }}
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="客户端行为">{{
        record.action || ''
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="行为参数">{{
        record.param || ''
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="扩展参数">
        <pre>{{ record.extend ? (record.extend | json) : '无' }}</pre>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="错误信息">{{
        record.errno || ''
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="FCM回执">{{
        record.fcmReceipt || ''
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="计划发送时间">
        {{ record.plannedSendAt | date : 'yyyy-MM-dd HH:mm:ss' }}
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="实际发送时间">
        {{ record.actualSendAt | date : 'yyyy-MM-dd HH:mm:ss' }}
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="送达时间">
        {{ record.deliveredAt | date : 'yyyy-MM-dd HH:mm:ss' }}
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="打开时间">
        {{ record.openedAt | date : 'yyyy-MM-dd HH:mm:ss' }}
      </nz-descriptions-item>
      @if(record.deliveredAt) {
      <nz-descriptions-item nzTitle="送达时">
        {{ record.inforeground ? '在前台' : '在后台' }}
      </nz-descriptions-item>
      }
      <nz-descriptions-item nzTitle="创建时间">
        {{ record.createdAt | date : 'yyyy-MM-dd HH:mm:ss' }}
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="更新时间">
        {{ record.updatedAt | date : 'yyyy-MM-dd HH:mm:ss' }}
      </nz-descriptions-item>
    </nz-descriptions>
  `,
  styles: [
    `
      pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
      }

      .source-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .source-item div {
        line-height: 1.5;
      }
    `,
  ],
})
export class MessageRecordDetailComponent {
  record: IMessageRecord;

  constructor(private modalRef: NzModalRef) {
    this.record = this.modalRef.getConfig().nzData?.record;
  }

  getStatusName(status: number): string {
    const statuses: Record<number, string> = {
      0: '未发送',
      1: '发送成功',
      2: '已送达',
      3: '已打开',
      [-1]: '发送失败',
    };
    return statuses[status] || '未知状态';
  }

  getStatusColor(status: number): string {
    const colors: Record<number, string> = {
      0: 'default',
      1: 'processing',
      2: 'success',
      3: 'green',
      [-1]: 'error',
    };
    return colors[status] || 'default';
  }
}