<script setup lang="ts">
import type { Agent } from '@/composables/useChat'

defineProps<{
  show: boolean
  selectMode: 'single' | 'group'
  chatAgents: Agent[]
  selectedAgents: Agent[]
  groupChatName: string
}>()

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'toggleSelect', agent: Agent): void
  (e: 'confirm'): void
  (e: 'update:groupChatName', value: string): void
}>()
</script>

<template>
  <Teleport to="body">
    <Transition name="fade">
      <div v-if="show" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50" @click="emit('close')">
        <div class="bg-dark-800 rounded-xl w-full max-w-md border border-dark-600 shadow-2xl" @click.stop>
          <div class="p-4 border-b border-dark-600">
            <h3 class="text-lg font-semibold text-white">
              {{ selectMode === 'single' ? '选择智能体' : '选择群聊成员' }}
            </h3>
            <p class="text-sm text-gray-400 mt-1">
              {{ selectMode === 'single' ? '选择一个智能体开始对话' : '选择多个智能体创建群聊' }}
            </p>
          </div>

          <div class="p-4 max-h-80 overflow-y-auto">
            <!-- 群聊名称输入框 -->
            <div v-if="selectMode === 'group'" class="mb-4">
              <input
                :value="groupChatName"
                @input="emit('update:groupChatName', ($event.target as HTMLInputElement).value)"
                type="text"
                placeholder="Enter group name..."
                class="w-full bg-dark-700 border border-dark-500 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
              >
            </div>

            <div class="space-y-2">
              <button
                v-for="agent in chatAgents"
                :key="agent.id"
                @click="emit('toggleSelect', agent)"
                class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200"
                :class="selectedAgents.some(a => a.id === agent.id)
                  ? 'bg-orange-500/20 border border-orange-500/50'
                  : 'bg-dark-700 hover:bg-dark-600 border border-transparent'"
              >
                <span class="text-xl">{{ agent.avatar }}</span>
                <div class="flex-1 text-left">
                  <div class="text-white font-medium">{{ agent.name }}</div>
                  <div class="text-xs text-gray-400">{{ agent.description }}</div>
                </div>
                <span
                  v-if="agent.status === 'online'"
                  class="w-2 h-2 rounded-full bg-emerald-400"
                ></span>
                <span
                  v-if="selectMode === 'group' && selectedAgents.some(a => a.id === agent.id)"
                  class="w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center"
                >
                  <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                  </svg>
                </span>
              </button>
            </div>
          </div>

          <div class="p-4 border-t border-dark-600 flex gap-3">
            <button
              @click="emit('close')"
              class="flex-1 py-2.5 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-lg transition-colors"
            >
              Cancel
            </button>
            <button
              v-if="selectMode === 'group'"
              @click="emit('confirm')"
              :disabled="selectedAgents.length < 2"
              class="flex-1 py-2.5 bg-orange-500 hover:bg-orange-400 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Create Group ({{ selectedAgents.length }})
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
