<script setup lang="ts">
import { computed, ref } from 'vue'

import { useAdminListPage } from '@/composables/useAdminListPage'
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import { fetchAdminMessageDeliveries } from '@/services/admin'
import type { AdminMessageDeliveryListItem } from '@/types/admin'
import { formatAdminDateTime } from '@/utils/admin-time'
import { adminMessageDeliveryStatusOptions } from '@/utils/admin-options'

const provider = ref('agiso')
const platform = ref('xianyu')
const status = ref('')
const shopId = ref('')
const platformOrderId = ref('')
const taskNo = ref('')
const dateFrom = ref('')
const dateTo = ref('')

const {
  loading,
  errorMessage,
  items,
  pagination,
  loadPage: loadMessageDeliveries,
} = useAdminListPage<AdminMessageDeliveryListItem>({
  defaultErrorMessage: '读取消息发送记录失败',
  fetchPage: (page, pageSize) =>
    fetchAdminMessageDeliveries({
      page,
      pageSize,
      provider: provider.value.trim(),
      platform: platform.value.trim(),
      status: status.value.trim(),
      shopId: shopId.value.trim(),
      platformOrderId: platformOrderId.value.trim(),
      taskNo: taskNo.value.trim(),
      dateFrom: dateFrom.value.trim(),
      dateTo: dateTo.value.trim(),
    }),
})

const summary = computed(() => ({
  successCount: items.value.filter((item) => item.status === 'success').length,
  failedCount: items.value.filter((item) => item.status === 'failed').length,
  pendingCount: items.value.filter((item) => item.status === 'pending').length,
}))

function resetFilters() {
  provider.value = 'agiso'
  platform.value = 'xianyu'
  status.value = ''
  shopId.value = ''
  platformOrderId.value = ''
  taskNo.value = ''
  dateFrom.value = ''
  dateTo.value = ''
  void loadMessageDeliveries(1)
}
</script>

<template>
  <div class="deliveries-page list-page">
    <AdminPageHeader
      title="消息发送记录"
      description="查看领取链接消息是否真正发出、平台返回了什么、失败原因是什么。"
    >
      <template #extra>
        <span class="total-badge">共 {{ pagination.total }} 条记录</span>
      </template>
    </AdminPageHeader>

    <!-- 筛选 -->
    <el-card shadow="never" class="section-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">筛选消息</span>
          <span class="card-desc">按服务商、平台、发送状态、店铺等条件筛选。</span>
        </div>
      </template>
      <div class="filter-grid">
        <el-input
          v-model="provider"
          class="filter-control"
          placeholder="服务商，如 agiso"
          clearable
          @keyup.enter="loadMessageDeliveries(1)"
        />
        <el-input
          v-model="platform"
          class="filter-control"
          placeholder="业务平台，如 xianyu"
          clearable
          @keyup.enter="loadMessageDeliveries(1)"
        />
        <el-select v-model="status" class="filter-control" placeholder="发送状态" clearable>
          <el-option
            v-for="opt in adminMessageDeliveryStatusOptions"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
        <el-input
          v-model="shopId"
          class="filter-control"
          placeholder="店铺 ID（精确匹配）"
          clearable
          @keyup.enter="loadMessageDeliveries(1)"
        />
        <el-input
          v-model="platformOrderId"
          class="filter-control"
          placeholder="平台订单号"
          clearable
          @keyup.enter="loadMessageDeliveries(1)"
        />
        <el-input
          v-model="taskNo"
          class="filter-control"
          placeholder="任务编号"
          clearable
          @keyup.enter="loadMessageDeliveries(1)"
        />
        <el-date-picker
          v-model="dateFrom"
          class="filter-control"
          type="date"
          placeholder="开始日期"
          value-format="YYYY-MM-DD"
        />
        <el-date-picker
          v-model="dateTo"
          class="filter-control"
          type="date"
          placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
        <div class="filter-buttons">
          <el-button round @click="resetFilters">重置</el-button>
          <el-button round type="primary" @click="loadMessageDeliveries(1)">查询</el-button>
        </div>
      </div>
    </el-card>

    <!-- 摘要 -->
    <div v-if="!loading && items.length > 0" class="summary-strip">
      <span class="summary-title">当前页</span>
      <span class="summary-metric" data-tone="success"
        >发送成功 <strong>{{ summary.successCount }}</strong></span
      >
      <span class="summary-metric" data-tone="danger"
        >发送失败 <strong>{{ summary.failedCount }}</strong></span
      >
      <span class="summary-metric" data-tone="warning"
        >等待中 <strong>{{ summary.pendingCount }}</strong></span
      >
    </div>

    <el-alert
      v-if="errorMessage"
      :title="errorMessage"
      type="error"
      show-icon
      :closable="false"
      class="mt-4"
    />

    <!-- 列表 -->
    <el-card
      shadow="never"
      class="section-card"
      v-loading="loading"
      element-loading-text="消息发送记录加载中"
    >
      <template v-if="items.length === 0 && !loading">
        <el-empty description="当前筛选下还没有消息发送记录。" :image-size="60" />
      </template>

      <template v-else>
        <div class="orders-toolbar table-toolbar">
          <strong>发送明细</strong>
          <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
        </div>

        <el-table :data="items" stripe size="small" class="orders-table data-table">
          <el-table-column label="消息ID" width="100">
            <template #default="{ row }">
              <span class="order-no id-link">#{{ row.deliveryId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="接收者" min-width="160">
            <template #default="{ row }">
              <div class="cell-stack">
                <span class="cell-title">{{
                  row.recipientKey || row.shopName || row.shopId || '-'
                }}</span>
                <span class="cell-subline">{{ row.shopName || row.shopId || '-' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="消息类型" min-width="140">
            <template #default="{ row }">
              <div class="cell-stack">
                <span class="cell-title">{{ row.channel || '-' }}</span>
                <div class="cell-meta-row">
                  <span class="compact-chip">{{ row.provider || '-' }}</span>
                  <span class="compact-chip">{{ row.platform || '-' }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              <AdminStatusTag :status="row.status" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="160">
            <template #default="{ row }">
              <div class="cell-stack">
                <span class="cell-title">{{ formatAdminDateTime(row.createdAt) }}</span>
                <span v-if="row.sentAt" class="cell-subline"
                  >发送 {{ formatAdminDateTime(row.sentAt) }}</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="140">
            <template #default="{ row }">
              <div class="action-stack">
                <a
                  v-if="row.claimUrl"
                  class="detail-link"
                  :href="row.claimUrl"
                  target="_blank"
                  rel="noreferrer"
                  >Claim 链接</a
                >
                <RouterLink
                  v-if="row.orderId"
                  class="detail-link"
                  :to="`/admin/orders/${row.orderId}`"
                  >订单 #{{ row.orderId }}</RouterLink
                >
                <RouterLink v-if="row.taskId" class="detail-link" :to="`/admin/tasks/${row.taskId}`"
                  >任务 {{ row.taskNo || row.taskId }}</RouterLink
                >
                <span v-if="!row.claimUrl && !row.orderId && !row.taskId" class="cell-subline"
                  >-</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-if="pagination.total > 0"
          v-model:current-page="pagination.page"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          layout="total, prev, pager, next"
          class="pagination-center"
          @current-change="loadMessageDeliveries"
        />
      </template>
    </el-card>
  </div>
</template>

<style scoped>
@import '../../../styles/admin-list-pages.css';

.filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
</style>
