<script setup lang="ts">
import type { AdminNotificationTestResult } from '@/types/admin'

type NotificationForm = {
  enabled: boolean
  barkEnabled: boolean
  barkServerUrl: string
  testTitle: string
  testBody: string
  testUrl: string
}

type NotificationStats = {
  configuredRecipientCount: number
  enabledRecipientCount: number
  barkReady: boolean
  lastSuccessCount: number
  lastFailedCount: number
  scheduledJobEnabledCount: number
}

type Props = {
  notificationForm: NotificationForm
  notificationTesting: boolean
  notificationTestResult: AdminNotificationTestResult | null
  notificationStats: NotificationStats
  handleNotificationTest: () => void | Promise<void>
}

defineProps<Props>()
</script>

<template>
  <el-card class="section-card">
    <template #header>
      <div class="card-header">
        <div>
          <span class="card-title">测试发送</span>
          <p class="card-desc">测试会发送给所有已启用且填写了 Device Key 的接收人。</p>
        </div>
        <div class="card-actions">
          <el-button
            :disabled="!notificationStats.barkReady"
            :loading="notificationTesting"
            type="primary"
            @click="handleNotificationTest"
          >
            发送测试
          </el-button>
        </div>
      </div>
    </template>

    <el-form label-width="auto" label-position="top">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="标题">
            <el-input v-model="notificationForm.testTitle" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="内容">
            <el-input v-model="notificationForm.testBody" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="跳转链接">
            <el-input v-model="notificationForm.testUrl" placeholder="可选" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div v-if="notificationTestResult" class="result-grid">
      <el-card shadow="never" class="stat-card">
        <div class="stat-label">成功</div>
        <div class="stat-value">{{ notificationTestResult.successCount }}</div>
      </el-card>
      <el-card shadow="never" class="stat-card">
        <div class="stat-label">失败</div>
        <div class="stat-value">{{ notificationTestResult.failedCount }}</div>
      </el-card>
      <el-card shadow="never" class="stat-card">
        <div class="stat-label">通道</div>
        <div class="stat-value">{{ notificationTestResult.channel || '-' }}</div>
      </el-card>
    </div>

    <el-table
      v-if="notificationTestResult"
      :data="notificationTestResult.results"
      stripe
      size="small"
      class="mt-4"
    >
      <el-table-column label="接收人">
        <template #default="{ row }">{{
          row.recipientName || row.recipientKeyMasked || '-'
        }}</template>
      </el-table-column>
      <el-table-column label="结果" width="80">
        <template #default="{ row }">
          <el-tag :type="row.ok ? 'success' : 'danger'" size="small">{{
            row.ok ? '成功' : '失败'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态码" width="80" align="center" />
      <el-table-column label="说明">
        <template #default="{ row }">{{ row.errorMessage || '-' }}</template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>
.section-card {
  border-radius: var(--radius-lg);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.card-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.card-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.stat-card {
  text-align: center;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 700;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: var(--space-1);
}
</style>
