<!-- =============================================================================
// 企微IT智能服务台 — 摇人选人弹窗组件
// =============================================================================
// 说明：坐席点击「摇人」后弹出，供其搜索并选择要邀请的在线坐席
// 功能：
//   1. 搜索框：按坐席姓名模糊搜索
//   2. 坐席列表：显示在线/忙碌状态、当前负载
//   3. 选中确认：选中目标坐席后点击「确认」触发邀请
//   4. 排除自己、主责坐席和已在协作中的坐席
// ============================================================================= -->

<template>
  <el-dialog
    v-model="visible"
    title="🤝 摇人 — 邀请坐席协作"
    width="450px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <!-- 搜索框 -->
    <el-input
      v-model="searchText"
      placeholder="搜索坐席姓名..."
      prefix-icon="Search"
      clearable
      style="margin-bottom: 12px;"
    />

    <!-- 坐席列表 -->
    <div class="agent-list">
      <div v-if="filteredAgents.length === 0" class="empty-hint">
        暂无可邀请的在线坐席
      </div>
      <div
        v-for="agent in filteredAgents"
        :key="agent.user_id"
        class="agent-item"
        :class="{ selected: selectedAgentId === agent.user_id, busy: agent.current_load >= agent.max_load }"
        @click="selectAgent(agent)"
      >
        <div class="agent-avatar">{{ getAvatar(agent.name) }}</div>
        <div class="agent-info">
          <div class="agent-name">
            {{ agent.name }}
            <el-tag
              v-if="agent.current_load >= agent.max_load"
              type="danger"
              size="small"
              effect="plain"
            >
              忙碌
            </el-tag>
            <el-tag
              v-else-if="agent.current_load === 0"
              type="success"
              size="small"
              effect="plain"
            >
              空闲
            </el-tag>
            <span v-else class="load-text">
              负载 {{ agent.current_load }}/{{ agent.max_load }}
            </span>
          </div>
          <div class="agent-sub" v-if="agent.current_load <= agent.max_load * 0.6">
            <el-icon><Star /></el-icon> 推荐
          </div>
        </div>
        <el-icon v-if="selectedAgentId === agent.user_id" class="check-icon" color="var(--accent)">
          <Check />
        </el-icon>
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <div class="selected-hint" v-if="selectedAgent">
          已选：{{ selectedAgent.name }}
        </div>
        <div>
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" :disabled="!selectedAgentId" :loading="submitting" @click="handleConfirm">
            确认邀请
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { ref, computed, watch } from 'vue'
import { useAgentStore } from '@/stores/agent'
import type { Agent } from '@/api/agent'

// ============================================================================
// Props & Emits
// ============================================================================

interface Props {
  /** 弹窗是否可见（由父组件通过 v-model 控制） */
  modelValue: boolean
  /** 排除的坐席ID列表（主责坐席 + 已在协作中的坐席） */
  excludeAgentIds?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  excludeAgentIds: () => [],
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'confirm': [agentId: string]
}>()

// ============================================================================
// 状态
// ============================================================================

const agentStore = useAgentStore()

/** 弹窗可见性（双向绑定） */
const visible = ref(props.modelValue)

/** 搜索关键词 */
const searchText = ref('')

/** 选中的坐席ID */
const selectedAgentId = ref<string | null>(null)

/** 是否正在提交 */
const submitting = ref(false)

// ============================================================================
// 监听
// ============================================================================

/** 监听弹窗打开：刷新坐席列表 */
watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val) {
    // 打开弹窗时重置搜索和选中状态
    searchText.value = ''
    selectedAgentId.value = null
    // 刷新在线坐席列表
    agentStore.loadAvailableAgents()
  }
})

/** 同步内部 visible 变化到外部 */
watch(visible, (val) => {
  emit('update:modelValue', val)
})

// ============================================================================
// 计算属性
// ============================================================================

/** 当前选中的坐席对象 */
const selectedAgent = computed(() => {
  if (!selectedAgentId.value) return null
  return agentStore.availableAgents.find(a => a.user_id === selectedAgentId.value) || null
})

/** 过滤后的坐席列表（排除已过滤的 + 按搜索词筛选） */
const filteredAgents = computed(() => {
  const excludeSet = new Set(props.excludeAgentIds)
  let agents = agentStore.availableAgents.filter(a =>
    // 排除已过滤的坐席
    !excludeSet.has(a.user_id) &&
    // 仅显示在线坐席
    a.status === 'online'
  )

  // 按搜索词过滤
  const keyword = searchText.value.trim().toLowerCase()
  if (keyword) {
    agents = agents.filter(a => a.name.toLowerCase().includes(keyword))
  }

  // 排序：空闲优先 → 负载低优先
  return agents.sort((a, b) => {
    if (a.current_load === 0 && b.current_load > 0) return -1
    if (b.current_load === 0 && a.current_load > 0) return 1
    return a.current_load - b.current_load
  })
})

// ============================================================================
// 方法
// ============================================================================

/** 头像文字（取姓名最后一个字） */
function getAvatar(name: string): string {
  if (!name) return '?'
  return name.charAt(name.length - 1)
}

/** 选中坐席 */
function selectAgent(agent: Agent): void {
  selectedAgentId.value = agent.user_id
}

/** 确认邀请 */
async function handleConfirm(): Promise<void> {
  if (!selectedAgentId.value) return
  submitting.value = true
  emit('confirm', selectedAgentId.value)
  // 父组件负责调用 store.inviteToConversation，成功后关闭弹窗
  // 这里先不关闭，等父组件确认成功后再关
}
</script>

<style scoped>
.agent-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 6px;
}

.agent-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
}

.agent-item:last-child {
  border-bottom: none;
}

.agent-item:hover {
  background: var(--bg-tertiary);
}

.agent-item.selected {
  background: var(--accent-soft);
}

.agent-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
  margin-right: 10px;
}

.agent-info {
  flex: 1;
  min-width: 0;
}

.agent-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.load-text {
  font-size: 12px;
  color: var(--text-tertiary);
}

.agent-sub {
  font-size: 12px;
  color: var(--color-success);
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
}

.check-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.empty-hint {
  padding: 24px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

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

.selected-hint {
  font-size: 13px;
  color: var(--accent);
}
</style>
