<template>
	<div class="crew-agent-node" :class="nodeClasses">
		<div v-if="data.isMaster" class="master-badge">★</div>
		<div v-if="data.groupName" class="group-ribbon" :style="{ background: groupColor }">
			{{ data.groupName }}
		</div>
		<div class="node-icon">
			<el-icon :size="28"><UserFilled /></el-icon>
		</div>
		<div class="node-label">{{ data.label || data.name }}</div>
		<div v-if="data.role" class="node-role">{{ data.role }}</div>
		<Handle type="source" :position="Position.Right" />
		<Handle type="source" :position="Position.Bottom" />
		<Handle type="target" :position="Position.Left" />
		<Handle type="target" :position="Position.Top" />
	</div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { Handle, Position } from "@vue-flow/core";
import { UserFilled } from "@element-plus/icons-vue";

const props = defineProps<{
	data: {
		agentId: number;
		name: string;
		label: string;
		icon?: string;
		description?: string;
		role?: string;
		groupName?: string;
		isMaster?: boolean;
		liveStatus?: string;
	};
}>();

const nodeClasses = computed(() => ({
	"is-master": props.data.isMaster,
	"is-running": props.data.liveStatus === "running",
	"is-completed": props.data.liveStatus === "completed",
	"is-failed": props.data.liveStatus === "failed",
}));

const groupColor = computed(() => {
	if (!props.data.groupName) return "";
	const hash = [...props.data.groupName].reduce((acc, c) => acc + c.charCodeAt(0), 0);
	return `hsl(${hash % 360}, 60%, 85%)`;
});
</script>

<style scoped lang="scss">
.crew-agent-node {
	padding: 12px 16px;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	background: white;
	min-width: 140px;
	text-align: center;
	position: relative;
	transition: all 0.3s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

	&:hover {
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	}
	&.is-master {
		border-color: #e6a23c;
		background: linear-gradient(135deg, #fffbf0, #fff8e6);
	}
	&.is-running {
		border-color: #409eff;
		animation: breathe 2s ease-in-out infinite;
	}
	&.is-completed {
		border-color: #67c23a;
	}
	&.is-failed {
		border-color: #f56c6c;
	}
}

.master-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px;
	height: 24px;
	background: #e6a23c;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.group-ribbon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 2px 8px;
	font-size: 10px;
	border-radius: 10px 10px 0 0;
	text-align: center;
}

.node-icon {
	margin-bottom: 6px;
}
.node-label {
	font-weight: 600;
	font-size: 14px;
}
.node-role {
	font-size: 11px;
	color: #909399;
	margin-top: 4px;
}

@keyframes breathe {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(64, 158, 255, 0);
	}
}
</style>
