<template>
  <div>
    <!-- 统计卡片 -->
    <el-row :gutter="16">
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic title="今日发送总数" :value="statistics.total" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic title="成功" :value="statistics.successCount">
            <template #suffix>
              <el-tag type="success" size="small">成功</el-tag>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic title="失败" :value="statistics.failedCount">
            <template #suffix>
              <el-tag type="danger" size="small">失败</el-tag>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic title="待发送" :value="statistics.pendingCount">
            <template #suffix>
              <el-tag type="info" size="small">待发送</el-tag>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>

    <!-- 测试发送 -->
    <el-card class="mt-4" shadow="never">
      <template #header>
        <span>测试发送</span>
      </template>
      <el-form :model="testForm" label-width="80px" inline>
        <el-form-item label="目标类型">
          <el-select v-model="testForm.targetType" style="width: 140px">
            <el-option label="会话" value="conversation" />
            <el-option label="人员" value="person" />
          </el-select>
        </el-form-item>
        <el-form-item label="目标" v-if="testForm.targetType === 'conversation'" style="width: 280px">
          <el-select v-model="selectedConversationId" placeholder="选择会话" clearable>
            <el-option
              v-for="c in conversations"
              :key="c.id"
              :label="c.conversationName"
              :value="c.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目标" v-if="testForm.targetType === 'person'" style="width: 280px">
          <el-input v-model="personIdInput" placeholder="输入 person_id" />
        </el-form-item>
        <el-form-item label="渠道">
          <el-select v-model="testForm.channelStrategy.channel_type" style="width: 140px">
            <el-option label="企微" value="wecom" />
            <el-option label="微信个人号" value="wechat_personal" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="textContent" placeholder="输入文本消息" style="width: 260px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleTestSend">测试发送</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 筛选栏 -->
    <el-card class="mt-4" shadow="never">
      <el-form :model="query" inline>
        <el-form-item label="任务 ID">
          <el-input v-model="query.taskId" placeholder="SND..." clearable style="width: 220px" />
        </el-form-item>
        <el-form-item label="发送时间">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD[T]HH:mm:ss"
            style="width: 360px"
          />
        </el-form-item>
        <el-form-item label="渠道">
          <el-select v-model="query.channelType" placeholder="全部" clearable style="width: 140px">
            <el-option label="企微" value="wecom" />
            <el-option label="微信个人号" value="wechat_personal" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="query.status" placeholder="全部" clearable style="width: 120px">
            <el-option label="待发送" :value="0" />
            <el-option label="发送中" :value="1" />
            <el-option label="成功" :value="2" />
            <el-option label="失败" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 记录列表 -->
    <el-card class="mt-4" shadow="never">
      <el-table :data="records" border v-loading="loading">
        <el-table-column prop="taskId" label="任务 ID" min-width="180" show-overflow-tooltip />
        <el-table-column prop="targetType" label="目标类型" width="110" />
        <el-table-column prop="channelType" label="渠道" width="120" />
        <el-table-column prop="sendStatus" label="状态" width="100">
          <template #default="{ row }">
            <el-tag v-if="row.sendStatus === 0" type="info">待发送</el-tag>
            <el-tag v-else-if="row.sendStatus === 1" type="warning">发送中</el-tag>
            <el-tag v-else-if="row.sendStatus === 2" type="success">成功</el-tag>
            <el-tag v-else-if="row.sendStatus === 3" type="danger">失败</el-tag>
            <el-tag v-else type="info">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sendTime" label="发送时间" min-width="160" />
        <el-table-column prop="finishTime" label="完成时间" min-width="160" />
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="openDetail(row)">详情</el-button>
            <el-button
              v-if="row.sendStatus === 0"
              link
              type="danger"
              @click="handleCancel(row.taskId)"
            >
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-bar">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="loadRecords"
        />
      </div>
    </el-card>

    <!-- 详情抽屉 -->
    <el-drawer v-model="detailVisible" title="发送详情" size="520px">
      <div v-if="currentRecord" class="detail-content">
        <div class="detail-item">
          <span class="detail-label">任务 ID</span>
          <span class="detail-value">{{ currentRecord.taskId }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">目标类型</span>
          <span class="detail-value">{{ currentRecord.targetType }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">目标值</span>
          <pre>{{ formatJson(currentRecord.targetValue) }}</pre>
        </div>
        <div class="detail-item">
          <span class="detail-label">渠道</span>
          <span class="detail-value">{{ currentRecord.channelType }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">内容</span>
          <pre>{{ formatJson(currentRecord.contentBody) }}</pre>
        </div>
        <div class="detail-item">
          <span class="detail-label">渠道结果</span>
          <pre>{{ formatJson(currentRecord.channelResult) }}</pre>
        </div>
        <div class="detail-item">
          <span class="detail-label">回调地址</span>
          <span class="detail-value">{{ currentRecord.callbackUrl || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">发送时间</span>
          <span class="detail-value">{{ currentRecord.sendTime || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">完成时间</span>
          <span class="detail-value">{{ currentRecord.finishTime || '-' }}</span>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  queryRecords,
  getStatistics,
  cancelTask,
  testSend,
  type QueryRecordsParams,
} from '@/api/sendRecord'
import { listConversations } from '@/api/channel'

interface RecordItem {
  id: number
  taskId: string
  targetType: string
  targetValue?: string
  channelType: string
  sendStatus: number
  sendTime?: string
  finishTime?: string
  contentBody?: string
  channelResult?: string
  callbackUrl?: string
}

const statistics = reactive({
  total: 0,
  pendingCount: 0,
  sendingCount: 0,
  successCount: 0,
  failedCount: 0,
})

const query = reactive<QueryRecordsParams>({
  taskId: '',
  channelType: '',
  status: '',
})
const dateRange = ref<string[]>([])

const pagination = reactive({
  page: 1,
  size: 20,
  total: 0,
})

const records = ref<RecordItem[]>([])
const loading = ref(false)
const detailVisible = ref(false)
const currentRecord = ref<RecordItem | null>(null)

const testForm = reactive({
  targetType: 'conversation',
  contentType: 'text',
  channelStrategy: { channel_type: 'wecom', strategy: 'primary' },
})
const selectedConversationId = ref<number | null>(null)
const personIdInput = ref('')
const textContent = ref('')
const conversations = ref<any[]>([])

function buildTargetValue() {
  if (testForm.targetType === 'conversation' && selectedConversationId.value) {
    return { conversation_id: selectedConversationId.value }
  }
  if (testForm.targetType === 'person' && personIdInput.value) {
    return { person_id: Number(personIdInput.value) }
  }
  return {}
}

async function loadRecords() {
  loading.value = true
  try {
    const params: QueryRecordsParams = {
      page: pagination.page,
      size: pagination.size,
      taskId: query.taskId || undefined,
      channelType: query.channelType || undefined,
      status: query.status === '' ? undefined : query.status,
    }
    if (dateRange.value && dateRange.value.length === 2) {
      params.start = dateRange.value[0]
      params.end = dateRange.value[1]
    }
    const res: any = await queryRecords(params)
    const data = res.data || {}
    records.value = data.records || data || []
    pagination.total = data.total || records.value.length
  } catch (e: any) {
    ElMessage.error(e.message)
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  pagination.page = 1
  loadRecords()
}

function handleReset() {
  query.taskId = ''
  query.channelType = ''
  query.status = ''
  dateRange.value = []
  pagination.page = 1
  loadRecords()
}

function handleSizeChange() {
  pagination.page = 1
  loadRecords()
}

async function loadStatistics() {
  const now = new Date()
  const start = formatDateTime(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0))
  const end = formatDateTime(now)
  try {
    const res: any = await getStatistics(start, end)
    Object.assign(statistics, res.data || {})
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

async function handleTestSend() {
  const targetValue = buildTargetValue()
  if (Object.keys(targetValue).length === 0) {
    ElMessage.warning('请选择或填写目标')
    return
  }
  try {
    await testSend({
      targetType: testForm.targetType,
      targetValue,
      contentType: 'text',
      content: { text: textContent.value },
      channelStrategy: testForm.channelStrategy,
    })
    ElMessage.success('测试发送已提交')
    textContent.value = ''
    await loadRecords()
    await loadStatistics()
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

async function handleCancel(taskId: string) {
  try {
    await ElMessageBox.confirm('确定取消该任务的待发送记录？', '提示', { type: 'warning' })
    await cancelTask(taskId)
    ElMessage.success('取消成功')
    await loadRecords()
    await loadStatistics()
  } catch (e: any) {
    if (e !== 'cancel') {
      ElMessage.error(e.message || '取消失败')
    }
  }
}

function openDetail(row: RecordItem) {
  currentRecord.value = row
  detailVisible.value = true
}

function formatJson(value?: string) {
  if (!value) return '-'
  try {
    return JSON.stringify(JSON.parse(value), null, 2)
  } catch {
    return value
  }
}

function formatDateTime(date: Date): string {
  const pad = (n: number) => String(n).padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}

async function loadConversations() {
  try {
    const res: any = await listConversations()
    conversations.value = res.data || []
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

onMounted(() => {
  loadConversations()
  loadRecords()
  loadStatistics()
})
</script>

<style scoped>
.mt-4 {
  margin-top: 16px;
}
.pagination-bar {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.detail-content {
  font-size: 14px;
}
.detail-item {
  margin-bottom: 16px;
}
.detail-label {
  display: block;
  color: #606266;
  margin-bottom: 6px;
}
.detail-value {
  color: #303133;
  word-break: break-all;
}
pre {
  margin: 0;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>
