<template>
  <PageCard>
    <template #toolbar-left>
      <el-input
        v-model="searchKeyword"
        placeholder="搜索主体名称 / 编码 / CorpID"
        clearable
        class="search-input"
        @keyup.enter="handleSearch"
      />
      <el-button @click="handleSearch">查询</el-button>
    </template>
    <template #toolbar-right>
      <el-button type="primary" @click="openCreateDialog">新增主体</el-button>
    </template>

    <el-table
      :data="pagedSubjects"
      class="sino-table"
      @row-click="handleRowClick"
    >
      <el-table-column prop="subjectName" label="主体名称" min-width="160" show-overflow-tooltip />
      <el-table-column prop="channelType" label="渠道类型" width="100">
        <template #default="{ row }">
          <el-tag :type="row.channelType === 'wecom' ? 'primary' : 'info'" size="small">
            {{ channelLabel(row.channelType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="subjectCode" label="主体编码" min-width="140" show-overflow-tooltip />
      <el-table-column prop="corpId" label="CorpID" min-width="220" show-overflow-tooltip />
      <el-table-column label="状态" width="120">
        <template #default="{ row }">
          <div class="status-cell" @click.stop>
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="(val: any) => handleStatusChange(row, val)"
            />
            <span class="status-text">{{ row.status === 1 ? '启用' : '禁用' }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <template #pagination>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="filteredSubjects.length"
        layout="total, prev, pager, next"
        background
      />
    </template>

    <!-- 新增：弹窗 -->
    <el-dialog v-model="dialogVisible" title="新增渠道主体" width="600px" destroy-on-close>
      <el-form :model="dialogForm" label-width="120px">
        <el-form-item label="渠道">
          <el-select v-model="dialogForm.channelType" placeholder="选择渠道" style="width: 100%">
            <el-option label="企微" value="wecom" />
            <el-option label="钉钉" value="dingtalk" />
            <el-option label="飞书" value="feishu" />
          </el-select>
        </el-form-item>
        <el-form-item label="主体编码">
          <el-input v-model="dialogForm.subjectCode" placeholder="主体编码" />
        </el-form-item>
        <el-form-item label="主体名称">
          <el-input v-model="dialogForm.subjectName" placeholder="主体名称" />
        </el-form-item>
        <el-form-item label="CorpID">
          <el-input v-model="dialogForm.corpId" placeholder="CorpID" />
        </el-form-item>
        <el-form-item label="AgentID">
          <el-input v-model="dialogForm.agentId" placeholder="AgentID" />
        </el-form-item>
        <el-form-item label="AgentSecret">
          <el-input v-model="dialogForm.agentSecret" placeholder="AgentSecret" />
        </el-form-item>
        <el-form-item label="会话存档">
          <el-switch v-model="dialogForm.sessionArchiveEnabled" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="会话存档私钥">
          <el-input v-model="dialogForm.sessionArchivePrivateKey" type="textarea" :rows="3" placeholder="会话存档私钥" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 详情/编辑：右侧抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      :title="`渠道主体详情${currentSubject.subjectName ? ' - ' + currentSubject.subjectName : ''}`"
      size="480px"
      destroy-on-close
    >
      <el-form :model="dialogForm" label-width="120px">
        <el-form-item label="渠道">
          <el-select v-model="dialogForm.channelType" placeholder="选择渠道" style="width: 100%">
            <el-option label="企微" value="wecom" />
            <el-option label="钉钉" value="dingtalk" />
            <el-option label="飞书" value="feishu" />
          </el-select>
        </el-form-item>
        <el-form-item label="主体编码">
          <el-input v-model="dialogForm.subjectCode" placeholder="主体编码" />
        </el-form-item>
        <el-form-item label="主体名称">
          <el-input v-model="dialogForm.subjectName" placeholder="主体名称" />
        </el-form-item>
        <el-form-item label="CorpID">
          <el-input v-model="dialogForm.corpId" placeholder="CorpID" />
        </el-form-item>
        <el-form-item label="AgentID">
          <el-input v-model="dialogForm.agentId" placeholder="AgentID" />
        </el-form-item>
        <el-form-item label="AgentSecret">
          <el-input v-model="dialogForm.agentSecret" placeholder="AgentSecret" />
        </el-form-item>
        <el-form-item label="会话存档">
          <el-switch v-model="dialogForm.sessionArchiveEnabled" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="会话存档私钥">
          <el-input v-model="dialogForm.sessionArchivePrivateKey" type="textarea" :rows="3" placeholder="会话存档私钥" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="drawer-footer">
          <div class="drawer-actions-left">
            <el-button v-if="currentSubject.channelType === 'wecom'" type="warning" plain @click="handleSyncEnterpriseContacts(currentSubject)">同步企业通讯录</el-button>
            <el-button type="danger" plain @click="handleDrawerDelete">删除</el-button>
          </div>
          <div class="drawer-actions">
            <el-button @click="drawerVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSave">保存</el-button>
          </div>
        </div>
      </template>
    </el-drawer>
  </PageCard>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  createChannelSubject,
  listChannelSubjects,
  updateChannelSubject,
  deleteChannelSubject,
  updateChannelSubjectStatus,
} from '@/api/channelSubject'
import { syncSubjectEnterpriseContacts } from '@/api/syncTask'
import { getSyncTask } from '@/api/syncTask'
import PageCard from '@/components/PageCard.vue'

const subjects = ref<any[]>([])
const dialogVisible = ref(false)
const isEdit = ref(false)
const editingId = ref<number | null>(null)

const dialogForm = reactive({
  channelType: 'wecom',
  subjectCode: '',
  subjectName: '',
  corpId: '',
  agentId: '',
  agentSecret: '',
  sessionArchiveEnabled: 0,
  sessionArchivePrivateKey: '',
})

const drawerVisible = ref(false)
const currentSubject = ref<any>({})

const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

const filteredSubjects = computed(() => {
  const kw = searchKeyword.value.trim().toLowerCase()
  if (!kw) return subjects.value
  return subjects.value.filter(
    (s) =>
      (s.subjectName || '').toLowerCase().includes(kw) ||
      (s.subjectCode || '').toLowerCase().includes(kw) ||
      (s.corpId || '').toLowerCase().includes(kw)
  )
})

const pagedSubjects = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return filteredSubjects.value.slice(start, start + pageSize.value)
})

function handleSearch() {
  currentPage.value = 1
}

function resetDialogForm() {
  dialogForm.channelType = 'wecom'
  dialogForm.subjectCode = ''
  dialogForm.subjectName = ''
  dialogForm.corpId = ''
  dialogForm.agentId = ''
  dialogForm.agentSecret = ''
  dialogForm.sessionArchiveEnabled = 0
  dialogForm.sessionArchivePrivateKey = ''
}

function fillDialogForm(row: any) {
  dialogForm.channelType = row.channelType ?? 'wecom'
  dialogForm.subjectCode = row.subjectCode ?? ''
  dialogForm.subjectName = row.subjectName ?? ''
  dialogForm.corpId = row.corpId ?? ''
  dialogForm.agentId = row.agentId ?? ''
  dialogForm.agentSecret = row.agentSecret ?? ''
  dialogForm.sessionArchiveEnabled = row.sessionArchiveEnabled ?? 0
  dialogForm.sessionArchivePrivateKey = row.sessionArchivePrivateKey ?? ''
}

function openCreateDialog() {
  isEdit.value = false
  editingId.value = null
  resetDialogForm()
  dialogVisible.value = true
}

function handleRowClick(row: any) {
  isEdit.value = true
  editingId.value = row.id
  currentSubject.value = { ...row }
  fillDialogForm(row)
  drawerVisible.value = true
}

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

async function handleSave() {
  try {
    if (isEdit.value && editingId.value != null) {
      await updateChannelSubject(editingId.value, dialogForm)
      ElMessage.success('更新成功')
    } else {
      await createChannelSubject(dialogForm)
      ElMessage.success('创建成功')
    }
    dialogVisible.value = false
    drawerVisible.value = false
    await loadSubjects()
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

async function handleDelete(row: any) {
  try {
    await ElMessageBox.confirm('确认删除该渠道主体？', '提示', { type: 'warning' })
    await deleteChannelSubject(row.id)
    ElMessage.success('删除成功')
    await loadSubjects()
  } catch (e: any) {
    if (e !== 'cancel') {
      ElMessage.error(e.message)
    }
  }
}

async function handleDrawerDelete() {
  if (!currentSubject.value?.id) return
  await handleDelete(currentSubject.value)
  drawerVisible.value = false
}

async function handleStatusChange(row: any, val: any) {
  try {
    await updateChannelSubjectStatus(row.id, { status: val })
    ElMessage.success('状态更新成功')
    await loadSubjects()
  } catch (e: any) {
    ElMessage.error(e.message)
    await loadSubjects()
  }
}

async function pollTask(taskId: number, label: string) {
  const maxAttempts = 60
  for (let i = 0; i < maxAttempts; i++) {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    try {
      const res: any = await getSyncTask(taskId)
      const task = res.data
      if (!task) continue
      if (task.taskStatus === 2) {
        ElMessage.success(`${label}同步完成，共 ${task.syncedCount ?? 0} 条`)
        return
      }
      if (task.taskStatus === 3) {
        ElMessage.error(`${label}同步失败：${task.errorMessage || '未知错误'}`)
        return
      }
    } catch (e: any) {
      // ignore polling error
    }
  }
  ElMessage.warning(`${label}同步时间较长，请稍后到列表查看`)
}

async function handleSyncEnterpriseContacts(row: any) {
  try {
    const res: any = await syncSubjectEnterpriseContacts(row.id)
    const taskId = res.data?.id
    if (taskId) {
      ElMessage.info('企业通讯录同步任务已提交')
      await pollTask(taskId, '企业通讯录')
    }
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

function channelLabel(type: string) {
  const map: Record<string, string> = {
    wecom: '企微',
    dingtalk: '钉钉',
    feishu: '飞书',
  }
  return map[type] || type
}

function mask(value: string) {
  if (!value) return '-'
  if (value.length <= 4) return '****'
  return value.slice(0, 2) + '****' + value.slice(-2)
}

onMounted(loadSubjects)
</script>

<style scoped>
.search-input {
  width: 280px;
}

.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>
