<script setup lang="ts">
import { Check, Delete, Edit, Plus, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'

import {
  createPushChannel,
  deletePushChannel,
  fetchPushChannels,
  fetchPushRules,
  testPushChannel,
  updatePushChannel,
  updatePushRule,
  type CreateChannelPayload,
  type PushChannel,
  type PushRule,
} from '@/features/admin/api/adminPush'

// ── 渠道状态 ──
const channels = ref<PushChannel[]>([])
const channelsLoading = ref(false)
const channelDialogVisible = ref(false)
const editingChannel = ref<PushChannel | null>(null)
const channelForm = ref<CreateChannelPayload>({ name: '', type: 'bark', config: {} })

// ── 规则状态 ──
const rules = ref<PushRule[]>([])
const rulesLoading = ref(false)
const ruleDialogVisible = ref(false)
const editingRule = ref<PushRule | null>(null)
const ruleForm = ref({ enabled: true, threshold: 5, message_template: '' })

const channelTypeOptions = [
  { label: 'iOS Bark', value: 'bark' },
  { label: 'WPush', value: 'wpush' },
]

const channelTypeLabel: Record<string, string> = {
  bark: 'Bark',
  wpush: 'WPush',
}

const eventNameLabel: Record<string, string> = {
  qrcode_low_stock: '二维码库存预警',
}

onMounted(() => {
  loadChannels()
  loadRules()
})

// ── 渠道方法 ──

async function loadChannels() {
  channelsLoading.value = true
  try {
    channels.value = await fetchPushChannels()
  } finally {
    channelsLoading.value = false
  }
}

function openCreateChannel() {
  editingChannel.value = null
  channelForm.value = { name: '', type: 'bark', config: {} }
  channelDialogVisible.value = true
}

function openEditChannel(row: PushChannel) {
  editingChannel.value = row
  channelForm.value = {
    name: row.name,
    type: row.type,
    config: { ...row.config },
  }
  channelDialogVisible.value = true
}

async function saveChannel() {
  if (!channelForm.value.name) {
    ElMessage.warning('请输入渠道名称')
    return
  }
  try {
    if (editingChannel.value) {
      await updatePushChannel(editingChannel.value.id, {
        name: channelForm.value.name,
        config: channelForm.value.config,
      })
      ElMessage.success('更新成功')
    } else {
      await createPushChannel(channelForm.value)
      ElMessage.success('创建成功')
    }
    channelDialogVisible.value = false
    await loadChannels()
  } catch {
    ElMessage.error('操作失败')
  }
}

async function toggleChannel(row: PushChannel) {
  try {
    await updatePushChannel(row.id, { enabled: !row.enabled })
    ElMessage.success(row.enabled ? '已禁用' : '已启用')
    await loadChannels()
  } catch {
    ElMessage.error('操作失败')
  }
}

async function handleDeleteChannel(row: PushChannel) {
  try {
    await ElMessageBox.confirm(`确定删除渠道「${row.name}」？`, '确认删除', { type: 'warning' })
    await deletePushChannel(row.id)
    ElMessage.success('已删除')
    await loadChannels()
  } catch {
    // 取消
  }
}

async function handleTestChannel(row: PushChannel) {
  try {
    await testPushChannel(row.id)
    ElMessage.success('测试消息已发送，请检查是否收到')
  } catch {
    ElMessage.error('测试发送失败，请检查配置')
  }
}

function channelConfigFields(type: string) {
  if (type === 'bark') {
    return [
      { key: 'device_key', label: 'DeviceKey', placeholder: 'Bark 推送 DeviceKey' },
      { key: 'server', label: '服务地址', placeholder: 'https://api.day.app（可选）' },
    ]
  }
  if (type === 'wpush') {
    return [{ key: 'api_key', label: 'APIKey', placeholder: 'WPush 推送 APIKey' }]
  }
  return []
}

// ── 规则方法 ──

async function loadRules() {
  rulesLoading.value = true
  try {
    rules.value = await fetchPushRules()
  } finally {
    rulesLoading.value = false
  }
}

function openEditRule(row: PushRule) {
  editingRule.value = row
  ruleForm.value = {
    enabled: row.enabled,
    threshold: row.threshold,
    message_template: row.message_template,
  }
  ruleDialogVisible.value = true
}

async function saveRule() {
  if (!editingRule.value) return
  try {
    await updatePushRule(editingRule.value.id, ruleForm.value)
    ElMessage.success('更新成功')
    ruleDialogVisible.value = false
    await loadRules()
  } catch {
    ElMessage.error('操作失败')
  }
}
</script>

<template>
  <section class="page">
    <div class="page-header-row">
      <div class="page-header">
        <p class="eyebrow">Push Notifications</p>
        <h1>推送通知</h1>
        <p>配置站外推送渠道和通知规则，二维码库存不足时自动预警。</p>
      </div>
    </div>

    <!-- 渠道管理 -->
    <div class="section-header">
      <h2>推送渠道</h2>
      <div class="section-actions">
        <el-button :icon="Refresh" :loading="channelsLoading" @click="loadChannels">刷新</el-button>
        <el-button type="primary" :icon="Plus" @click="openCreateChannel">新增渠道</el-button>
      </div>
    </div>

    <el-table v-loading="channelsLoading" :data="channels" class="table-panel">
      <el-table-column label="名称" prop="name" min-width="120" />
      <el-table-column label="类型" width="100">
        <template #default="{ row }">
          <el-tag effect="plain">{{ channelTypeLabel[row.type] || row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="配置" min-width="200">
        <template #default="{ row }">
          <code class="config-preview">{{ JSON.stringify(row.config) }}</code>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80">
        <template #default="{ row }">
          <el-tag :type="row.enabled ? 'success' : 'info'" effect="plain">
            {{ row.enabled ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="primary" :icon="Edit" @click="openEditChannel(row)">编辑</el-button>
          <el-button size="small" type="primary" @click="handleTestChannel(row)">测试</el-button>
          <el-button size="small" :type="row.enabled ? 'warning' : 'success'" @click="toggleChannel(row)">
            {{ row.enabled ? '禁用' : '启用' }}
          </el-button>
          <el-button size="small" type="danger" :icon="Delete" @click="handleDeleteChannel(row)" />
        </template>
      </el-table-column>
    </el-table>

    <el-empty v-if="!channelsLoading && channels.length === 0" description="暂无推送渠道，点击上方按钮新增" />

    <!-- 规则管理 -->
    <div class="section-header" style="margin-top: 32px">
      <h2>通知规则</h2>
      <el-button :icon="Refresh" :loading="rulesLoading" @click="loadRules">刷新</el-button>
    </div>

    <el-table v-loading="rulesLoading" :data="rules" class="table-panel">
      <el-table-column label="事件" min-width="160">
        <template #default="{ row }">
          <span>{{ eventNameLabel[row.event] || row.event }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80">
        <template #default="{ row }">
          <el-tag :type="row.enabled ? 'success' : 'info'" effect="plain">
            {{ row.enabled ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="阈值" width="100" prop="threshold" />
      <el-table-column label="消息模板" min-width="250" prop="message_template" />
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="primary" :icon="Edit" @click="openEditRule(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 渠道编辑弹窗 -->
    <el-dialog
      v-model="channelDialogVisible"
      :title="editingChannel ? '编辑渠道' : '新增渠道'"
      width="500px"
    >
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="channelForm.name" placeholder="如：我的 Bark" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="channelForm.type" :disabled="!!editingChannel">
            <el-option
              v-for="opt in channelTypeOptions"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-for="field in channelConfigFields(channelForm.type)" :key="field.key" :label="field.label">
          <el-input
            v-model="channelForm.config[field.key]"
            :placeholder="field.placeholder"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="channelDialogVisible = false">取消</el-button>
        <el-button type="primary" :icon="Check" @click="saveChannel">保存</el-button>
      </template>
    </el-dialog>

    <!-- 规则编辑弹窗 -->
    <el-dialog v-model="ruleDialogVisible" title="编辑规则" width="500px">
      <el-form label-width="80px">
        <el-form-item label="启用">
          <el-switch v-model="ruleForm.enabled" />
        </el-form-item>
        <el-form-item label="阈值">
          <el-input-number v-model="ruleForm.threshold" :min="1" :max="999" />
          <span class="form-hint">库存低于此值时触发预警</span>
        </el-form-item>
        <el-form-item label="消息模板">
          <el-input v-model="ruleForm.message_template" type="textarea" :rows="3" placeholder="支持 {{.Count}} 占位符" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="ruleDialogVisible = false">取消</el-button>
        <el-button type="primary" :icon="Check" @click="saveRule">保存</el-button>
      </template>
    </el-dialog>
  </section>
</template>

<style scoped>
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.section-actions {
  display: flex;
  gap: 8px;
}

.config-preview {
  display: inline-block;
  max-width: 200px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f4f5f7;
  color: #5b6575;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-hint {
  margin-left: 8px;
  color: #9ca3af;
  font-size: 12px;
}
</style>
