<template>
  <div class="send-record-page">
    <!-- 统计卡片 -->
    <el-row :gutter="16" class="stat-row">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <el-statistic title="今日发送总数" :value="statistics.total" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <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" class="stat-card">
          <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" class="stat-card">
          <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>

    <PageCard>
      <template #toolbar-left>
        <el-form :model="query" inline class="search-form">
          <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>
      </template>
      <template #toolbar-right>
        <el-button type="primary" @click="openTestDialog">测试发送</el-button>
      </template>

      <el-table
        :data="records"
        v-loading="loading"
        @row-click="openDetail"
        class="sino-table"
      >
        <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>

      <template #pagination>
        <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"
        />
      </template>
    </PageCard>

    <!-- 测试发送弹窗 -->
    <el-dialog v-model="testDialogVisible" title="测试发送" width="760px">
      <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-option label="标签" value="tag" />
            <el-option label="规则" value="rule" />
          </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="目标" v-if="testForm.targetType === 'tag'" style="width: 220px">
          <el-select v-model="selectedTagId" placeholder="选择标签" clearable>
            <el-option
              v-for="t in tags"
              :key="t.id"
              :label="t.tagName"
              :value="t.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="范围" v-if="testForm.targetType === 'tag'" style="width: 200px">
          <el-select v-model="tagScope" style="width: 120px">
            <el-option label="全部" value="all" />
            <el-option label="会话" value="conversation" />
            <el-option label="人员" value="person" />
          </el-select>
        </el-form-item>
        <el-form-item label="目标" v-if="testForm.targetType === 'rule'" style="width: 420px">
          <el-input
            v-model="ruleJson"
            type="textarea"
            :rows="2"
            placeholder="输入规则 JSON"
          />
        </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>
      <template #footer>
        <el-button @click="testDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleTestSend">确认发送</el-button>
      </template>
    </el-dialog>

    <!-- 详情抽屉 -->
    <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>
      <template #footer v-if="currentRecord && currentRecord.sendStatus === 0">
        <div class="drawer-footer">
          <el-button type="danger" @click="handleCancel(currentRecord.taskId)">取消任务</el-button>
          <el-button @click="detailVisible = false">关闭</el-button>
        </div>
      </template>
    </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'
import { listTags } from '@/api/crm'
import PageCard from '@/components/PageCard.vue'

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 testDialogVisible = ref(false)

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

function openTestDialog() {
  testDialogVisible.value = true
}

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) }
  }
  if (testForm.targetType === 'tag' && selectedTagId.value != null) {
    return { tag_id: selectedTagId.value, scope: tagScope.value }
  }
  if (testForm.targetType === 'rule') {
    const raw = ruleJson.value.trim()
    if (!raw) return {}
    try {
      return JSON.parse(raw)
    } catch {
      ElMessage.warning('规则 JSON 格式错误')
      return {}
    }
  }
  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 = ''
    testDialogVisible.value = false
    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('取消成功')
    detailVisible.value = false
    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)
  }
}

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

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

<style scoped>
.send-record-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stat-row {
  margin: 0 !important;
}
.stat-card {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.search-form {
  margin-bottom: 0;
}
.search-form :deep(.el-form-item) {
  margin-bottom: 0;
}
.detail-content {
  font-size: 14px;
}
.detail-item {
  margin-bottom: 16px;
}
.detail-label {
  display: block;
  color: #64748b;
  font-size: 13px;
  margin-bottom: 6px;
}
.detail-value {
  color: #0f172a;
  word-break: break-all;
}
pre {
  margin: 0;
  padding: 12px;
  background: #f1f5f9;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 13px;
}
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
