<template>
	<div v-if="batches.length" class="subagent-card">
		<div class="subagent-card__header" @click="collapsed = !collapsed">
			<div class="subagent-card__mark">
				<span class="subagent-card__pulse" :class="{ 'is-running': runningCount > 0 }" />
			</div>
			<span class="subagent-card__title">子 Agent 协作</span>
			<span class="subagent-card__summary">
				{{ completedCount }}/{{ totalCount }} 完成
			</span>
			<div class="subagent-card__progress-bar">
				<div class="subagent-card__progress-fill" :style="{ width: progressPercent + '%' }" />
			</div>
			<el-icon class="subagent-card__toggle">
				<ArrowUp v-if="!collapsed" />
				<ArrowDown v-else />
			</el-icon>
		</div>

		<el-collapse-transition>
			<div v-if="!collapsed" class="subagent-card__body">
				<div v-for="batch in batches" :key="batch.batchId" class="subagent-card__batch">
					<div class="subagent-card__batch-head">
						<span class="subagent-card__mode">{{ batch.mode === 'parallel' ? '并行委派' : '单任务委派' }}</span>
						<span class="subagent-card__state" :class="`is-${batch.status}`">
							{{ batch.status === 'completed' ? '已结束' : '运行中' }}
						</span>
					</div>
					<div
						v-for="(item, index) in displayItems(batch)"
						:key="item.key"
						class="subagent-card__item"
						:class="`is-${item.status}`"
					>
						<span class="subagent-card__status">
							<span v-if="item.status === 'completed'">✓</span>
							<span v-else-if="item.status === 'failed'">!</span>
							<span v-else class="subagent-card__spinner" />
						</span>
						<div class="subagent-card__content">
							<div class="subagent-card__name">
								{{ item.name || `子 Agent ${index + 1}` }}
							</div>
							<div class="subagent-card__goal">{{ item.goal || '等待任务目标' }}</div>
							<div v-if="item.summary" class="subagent-card__summary-text">{{ item.summary }}</div>
							<div v-if="item.error" class="subagent-card__error">{{ item.error }}</div>
						</div>
					</div>
				</div>
			</div>
		</el-collapse-transition>
	</div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import type { SubagentBatch, SubagentRecord } from '../types/index.d';

const props = defineProps<{
	batches?: SubagentBatch[];
}>();

const collapsed = ref(false);

const batches = computed(() => props.batches || []);

const totalCount = computed(() => batches.value.reduce((sum, batch) => {
	return sum + Math.max(batch.tasks?.length || 0, batch.results?.length || 0);
}, 0));

const completedCount = computed(() => batches.value.reduce((sum, batch) => {
	return sum + (batch.results || []).filter(item => item.status === 'completed').length;
}, 0));

const runningCount = computed(() => batches.value.reduce((sum, batch) => {
	if (batch.status !== 'completed') return sum + 1;
	return sum;
}, 0));

const progressPercent = computed(() => {
	return totalCount.value > 0 ? Math.round((completedCount.value / totalCount.value) * 100) : 0;
});

function displayItems(batch: SubagentBatch): Array<SubagentRecord & { key: string }> {
	const max = Math.max(batch.tasks?.length || 0, batch.results?.length || 0);
	const items: Array<SubagentRecord & { key: string }> = [];
	for (let i = 0; i < max; i++) {
		const task = batch.tasks?.[i] || {};
		const result = batch.results?.[i];
		items.push({
			key: String(result?.id ?? result?.sortOrder ?? `${batch.batchId}:${i}`),
			sortOrder: i,
			name: result?.name || task.agentName || null,
			goal: result?.goal || task.goal || null,
			status: result?.status || 'running',
			summary: result?.summary || null,
			error: result?.error || null,
		});
	}
	return items;
}
</script>

<style lang="scss" scoped>
.subagent-card {
	width: min(100%, var(--chat-content-max-width, 760px));
	margin: 8px 0 10px;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--el-color-primary) 18%, var(--el-border-color-lighter));
	background:
		radial-gradient(circle at 16px 16px, color-mix(in srgb, var(--el-color-primary) 14%, transparent) 0, transparent 28px),
		linear-gradient(180deg, var(--el-bg-color) 0%, var(--el-fill-color-lighter) 100%);
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
	overflow: hidden;
	box-sizing: border-box;
}

.subagent-card__header {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 12px;
	cursor: pointer;
	user-select: none;
	font-size: 13px;

	&:hover {
		background: rgba(255, 255, 255, 0.5);
	}
}

.subagent-card__mark {
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
}

.subagent-card__pulse {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--el-color-success);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--el-color-success) 14%, transparent);

	&.is-running {
		background: var(--el-color-primary);
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--el-color-primary) 14%, transparent);
		animation: subagent-pulse 1.4s ease-out infinite;
	}
}

.subagent-card__title {
	font-weight: 650;
	white-space: nowrap;
}

.subagent-card__summary {
	font-size: 11px;
	color: var(--el-color-primary-dark-2);
	background: var(--el-color-primary-light-9);
	border: 1px solid var(--el-color-primary-light-7);
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
}

.subagent-card__progress-bar {
	flex: 1;
	height: 6px;
	min-width: 48px;
	background: color-mix(in srgb, var(--el-color-primary) 10%, var(--el-fill-color));
	border-radius: 999px;
	overflow: hidden;
}

.subagent-card__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--el-color-primary-light-3), var(--el-color-primary));
	border-radius: 999px;
	transition: width 0.3s ease;
}

.subagent-card__toggle {
	font-size: 14px;
	color: var(--el-text-color-secondary);
	flex-shrink: 0;
}

.subagent-card__body {
	padding: 0 12px 12px;
}

.subagent-card__batch {
	display: grid;
	gap: 7px;
}

.subagent-card__batch + .subagent-card__batch {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--el-border-color-lighter);
}

.subagent-card__batch-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--el-text-color-secondary);
	font-size: 12px;
}

.subagent-card__mode {
	font-weight: 600;
}

.subagent-card__state {
	font-size: 11px;

	&.is-running {
		color: var(--el-color-primary);
	}

	&.is-completed {
		color: var(--el-color-success);
	}
}

.subagent-card__item {
	display: flex;
	gap: 9px;
	padding: 9px 10px;
	border-radius: 11px;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.52);
	font-size: 13px;

	&.is-running {
		border-color: color-mix(in srgb, var(--el-color-primary) 16%, transparent);
		background: color-mix(in srgb, var(--el-color-primary) 7%, transparent);
	}

	&.is-completed {
		background: color-mix(in srgb, var(--el-color-success) 7%, transparent);
	}

	&.is-failed {
		border-color: color-mix(in srgb, var(--el-color-danger) 18%, transparent);
		background: color-mix(in srgb, var(--el-color-danger) 7%, transparent);
	}
}

.subagent-card__status {
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	color: var(--el-bg-color);
	background: var(--el-color-success);
}

.is-failed .subagent-card__status {
	background: var(--el-color-danger);
}

.is-running .subagent-card__status {
	background: transparent;
}

.subagent-card__spinner {
	width: 14px;
	height: 14px;
	border: 2px solid var(--el-color-primary);
	border-top-color: transparent;
	border-radius: 50%;
	animation: subagent-spin 1s linear infinite;
}

.subagent-card__content {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: 3px;
}

.subagent-card__name {
	font-weight: 650;
	color: var(--el-text-color-primary);
}

.subagent-card__goal {
	color: var(--el-text-color-secondary);
	line-height: 1.45;
}

.subagent-card__summary-text {
	margin-top: 2px;
	color: var(--el-text-color-primary);
	line-height: 1.55;
	white-space: pre-wrap;
}

.subagent-card__error {
	margin-top: 2px;
	color: var(--el-color-danger);
	line-height: 1.45;
}

@keyframes subagent-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes subagent-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--el-color-primary) 26%, transparent);
	}
	100% {
		box-shadow: 0 0 0 10px transparent;
	}
}
</style>
