<!--
=============================================================================
企微IT智能服务台 — 消息分配模式页
=============================================================================
说明：展示6个消息分配模式，手动接单可选，其余灰化+锁图标+阶段标签
  阶段一仅支持手动接单，后续模式按坐席规模自动解锁
-->
<template>
  <div class="assignment-mode-page">
    <!-- 页面标题 -->
    <div class="page-title">消息分配模式</div>
    <div class="page-desc">当前坐席1人足以承担，手动接单完全满足。后续模式按坐席规模自动解锁。</div>

    <!-- 分配模式卡片列表 -->
    <div class="mode-list">
      <div
        v-for="mode in modes"
        :key="mode.id"
        class="mode-card"
        :class="{
          'mode-selected': mode.id === currentMode,
          'mode-locked': mode.locked,
        }"
        @click="selectMode(mode)"
      >
        <!-- 单选圆点 -->
        <div class="mode-radio" :class="{ selected: mode.id === currentMode }"></div>

        <!-- 模式信息 -->
        <div class="mode-info">
          <div class="mode-title">
            {{ mode.name }}
            <el-tag
              v-if="mode.id === currentMode"
              type="success"
              size="small"
              class="mode-badge"
            >
              当前启用
            </el-tag>
            <el-tag
              v-else-if="mode.locked"
              :type="mode.unlock_at === '阶段三' ? 'info' : 'warning'"
              size="small"
              class="mode-badge"
            >
              {{ mode.unlock_at || '后续' }}
            </el-tag>
          </div>
          <div class="mode-desc">{{ getModeDescription(mode.id) }}</div>
          <div v-if="mode.locked" class="mode-lock-text">
            <el-icon :size="12"><Lock /></el-icon>
            {{ getLockReason(mode.id) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getAssignmentMode, updateAssignmentMode as apiUpdateMode } from '@/api/admin'
import type { AssignmentMode } from '@/types'

// ==========================================================================
// 状态
// ==========================================================================
const modes = ref<AssignmentMode[]>([
  { id: 'manual', name: '手动接单', enabled: true, locked: false },
  { id: 'round_robin', name: '轮询分配', enabled: false, locked: true, unlock_at: '阶段二' },
  { id: 'least_active', name: '最少活跃优先', enabled: false, locked: true, unlock_at: '阶段二' },
  { id: 'weighted', name: '加权比例分配', enabled: false, locked: true, unlock_at: '阶段三' },
  { id: 'skill_match', name: '技能匹配分配', enabled: false, locked: true, unlock_at: '阶段三' },
  { id: 'priority_queue', name: '优先队列', enabled: false, locked: true, unlock_at: '阶段三' },
])

const currentMode = ref<string>('manual')

// ==========================================================================
// 初始化
// ==========================================================================
onMounted(async () => {
  try {
    const response = await getAssignmentMode()
    const data = response.data.data
    currentMode.value = data.current_mode
    if (data.modes && data.modes.length > 0) {
      modes.value = data.modes
    }
  } catch {
    // 使用默认数据
  }
})

// ==========================================================================
// 选择模式
// ==========================================================================
async function selectMode(mode: AssignmentMode): Promise<void> {
  if (mode.locked) {
    ElMessage.warning(`${mode.name}暂未开放，${mode.unlock_at || '后续版本'}解锁`)
    return
  }
  if (mode.id === currentMode.value) return

  try {
    await apiUpdateMode(mode.id)
    currentMode.value = mode.id
    ElMessage.success(`已切换为「${mode.name}」`)
  } catch {
    ElMessage.error('切换分配模式失败')
  }
}

// ==========================================================================
// 模式描述
// ==========================================================================
function getModeDescription(id: string): string {
  const descs: Record<string, string> = {
    manual: '坐席在待办列表中自行选择接单。AB 角色冗余设计，1 人即可承担。',
    round_robin: '按坐席列表顺序依次分配，循环往复。',
    least_active: '自动分配给当前活跃会话数最少的坐席。',
    weighted: '按坐席权重分配（如高级权重2、初级权重1）。',
    skill_match: '根据问题类别匹配坐席技能标签。',
    priority_queue: '紧急/阻断性问题优先路由到高级坐席/组长。',
  }
  return descs[id] || ''
}

// ==========================================================================
// 锁定原因
// ==========================================================================
function getLockReason(id: string): string {
  const reasons: Record<string, string> = {
    round_robin: '坐席人数不足3人，暂不需要',
    least_active: '坐席人数不足3人，暂不需要',
    weighted: '坐席人数不足5人，暂不需要',
    skill_match: '需坐席≥5人 + 技能标签体系成熟',
    priority_queue: '需坐席≥5人 + 紧急度评分上线',
  }
  return reasons[id] || '后续阶段解锁'
}
</script>

<style scoped>
/* 模式列表 */
.mode-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 模式卡片 */
.mode-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.mode-card:hover {
  border-color: var(--border-hover);
}
.mode-card.mode-selected {
  border-color: var(--accent);
}
.mode-card.mode-locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.mode-card.mode-locked:hover {
  border-color: var(--border);
}

/* 单选圆点 */
.mode-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.mode-radio.selected {
  border-color: var(--accent);
}
.mode-radio.selected::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* 模式信息 */
.mode-info {
  flex: 1;
}
.mode-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}
.mode-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.mode-badge {
  flex-shrink: 0;
}
.mode-lock-text {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
</style>
