<template>
	<div class="crew-sidebar">
		<div class="sidebar-header">
			<span class="title">Agent 列表</span>
			<el-input
				v-model="searchText"
				placeholder="搜索 Agent"
				size="small"
				clearable
				prefix-icon="Search"
			/>
		</div>
		<div class="sidebar-list">
			<div
				v-for="agent in filteredAgents"
				:key="agent.id"
				class="agent-item"
				:class="{ 'is-member': isMember(agent.id) }"
				draggable="true"
				@dragstart="onDragStart($event, agent)"
			>
				<el-icon :size="20"><UserFilled /></el-icon>
				<div class="agent-info">
					<div class="agent-name">{{ agent.label || agent.name }}</div>
					<div class="agent-desc">{{ agent.description || '无描述' }}</div>
				</div>
				<el-icon v-if="isMember(agent.id)" class="check-icon" color="#67c23a">
					<Check />
				</el-icon>
			</div>
			<el-empty v-if="!filteredAgents.length" description="暂无可用 Agent" :image-size="60" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { UserFilled, Check } from "@element-plus/icons-vue";

const props = defineProps<{
	agents: any[];
	isMember: (agentId: number) => boolean;
}>();

const emit = defineEmits<{
	(e: "add-agent", agent: any, position?: { x: number; y: number }): void;
}>();

const searchText = ref("");

const filteredAgents = computed(() => {
	if (!searchText.value) return props.agents;
	const kw = searchText.value.toLowerCase();
	return props.agents.filter(
		(a) => a.name?.toLowerCase().includes(kw) || a.label?.toLowerCase().includes(kw)
	);
});

function onDragStart(event: DragEvent, agent: any) {
	event.dataTransfer?.setData("application/crew-agent", JSON.stringify(agent));
}
</script>

<style scoped lang="scss">
.crew-sidebar {
	width: 240px;
	border-right: 1px solid #ebeef5;
	display: flex;
	flex-direction: column;
	background: #fafafa;
}
.sidebar-header {
	padding: 12px;
	border-bottom: 1px solid #ebeef5;
	.title {
		font-weight: 600;
		font-size: 14px;
		display: block;
		margin-bottom: 8px;
	}
}
.sidebar-list {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}
.agent-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: grab;
	margin-bottom: 4px;
	transition: background 0.2s;
	&:hover {
		background: #ecf5ff;
	}
	&.is-member {
		background: #f0f9eb;
	}
}
.agent-info {
	flex: 1;
	min-width: 0;
}
.agent-name {
	font-size: 13px;
	font-weight: 500;
}
.agent-desc {
	font-size: 11px;
	color: #909399;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.check-icon {
	flex-shrink: 0;
}
</style>
