<template>
	<div class="orchestration-container">
		<div class="header">
			<div>
				<h1>{{ t('pages.orchestration.title') }}</h1>
				<p class="subtitle">{{ t('pages.orchestration.subtitle') }}</p>
			</div>
			<div class="header-actions">
				<el-button type="primary" @click="createWorkflow">
					<SvgIcon name="workflow" size="16" />
					{{ t('pages.orchestration.createWorkflow') }}
				</el-button>
				<el-button @click="openTemplateModal">
					<SvgIcon name="box" size="16" />
					{{ t('pages.orchestration.importTemplate') }}
				</el-button>
			</div>
		</div>

		<!-- 编排核心概念 -->
		<div class="core-concepts">
			<div v-for="concept in concepts" :key="concept.key" class="concept-card" :class="concept.key">
				<div class="concept-icon">
					<SvgIcon :name="conceptIcons[concept.key] as string" size="24" />
				</div>
				<div class="concept-info">
					<div class="concept-title">{{ concept.title }}</div>
					<div class="concept-desc">{{ concept.desc }}</div>
				</div>
				<div class="concept-example">{{ concept.example }}</div>
			</div>
		</div>

		<div class="stats-grid">
			<div class="stat-card">
				<div class="stat-icon">
					<SvgIcon name="workflow" size="22" />
				</div>
				<div class="stat-info">
					<div class="stat-value">28</div>
					<div class="stat-label">{{ t('pages.orchestration.stats.workflowTotal') }}</div>
				</div>
			</div>
			<div class="stat-card">
				<div class="stat-icon green">
					<SvgIcon name="clock" size="22" />
				</div>
				<div class="stat-info">
					<div class="stat-value">6</div>
					<div class="stat-label">{{ t('pages.orchestration.stats.updatedLast7Days') }}</div>
				</div>
			</div>
			<div class="stat-card">
				<div class="stat-icon purple">
					<SvgIcon name="box" size="22" />
				</div>
				<div class="stat-info">
					<div class="stat-value">12</div>
					<div class="stat-label">{{ t('pages.orchestration.stats.templatesAvailable') }}</div>
				</div>
			</div>
			<div class="stat-card">
				<div class="stat-icon orange">
					<SvgIcon name="sparkle" size="22" />
				</div>
				<div class="stat-info">
					<div class="stat-value">18</div>
					<div class="stat-label">{{ t('pages.orchestration.stats.nodeTypes') }}</div>
				</div>
			</div>
		</div>

		<div class="content-grid">
			<div class="panel">
				<div class="panel-title">{{ t('pages.orchestration.recentTitle') }}</div>
				<div class="workflow-list">
					<div class="workflow-item" v-for="item in recentWorkflows" :key="item.id">
						<div class="workflow-main">
							<div class="workflow-title">{{ item.name }}</div>
							<div class="workflow-meta">{{ item.updatedAt }} · {{ item.owner }}</div>
						</div>
						<div class="workflow-tags">
							<el-tag size="small" type="info">{{ item.tag }}</el-tag>
							<el-button text size="small" @click="openWorkflow(item.id)">
								{{ t('pages.orchestration.open') }}
							</el-button>
						</div>
					</div>
				</div>
			</div>

			<div class="panel">
				<div class="panel-title">{{ t('pages.orchestration.nodeTypesTitle') }}</div>
				<div class="node-types">
					<div v-for="group in nodeGroups" :key="group.label" class="node-type-group">
						<div class="node-type-label">{{ group.label }}</div>
						<div class="node-type-tags">
							<el-tag v-for="tag in group.tags" :key="tag" size="small">{{ tag }}</el-tag>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="panel full">
			<div class="panel-title">{{ t('pages.orchestration.recommendedTemplatesTitle') }}</div>
			<div class="template-grid">
				<div class="template-card" v-for="item in templates" :key="item.id">
					<div class="template-title">{{ item.name }}</div>
					<div class="template-desc">{{ item.desc }}</div>
					<div class="template-footer">
						<el-tag size="small">{{ item.category }}</el-tag>
						<el-button text size="small" @click="useTemplate(item.id)">
							{{ t('pages.orchestration.viewTemplate') }}
						</el-button>
					</div>
				</div>
			</div>
		</div>

		<!-- 模板弹窗 -->
		<TemplateModal :visible="templateModalVisible" @close="closeTemplateModal" @select="selectTemplate" />

		<!-- 新建工作流弹窗 -->
		<CreateWorkflowModal :visible="createModalVisible" @close="createModalVisible = false"
			@success="handleCreateSuccess" />
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/SvgIcon/index.vue'
import TemplateModal from '@/components/TemplateModal/index.vue'
import CreateWorkflowModal from '@/features/createModal/index.vue'
import { useI18n } from '@/composables/useI18n'
import { v4 } from 'uuid'

const router = useRouter()
const { tm, t } = useI18n()

const templateModalVisible = ref(false)
const conceptIcons: Record<string, string> = {
	sequence: 'chain',
	condition: 'branch',
	rule: 'settings-gear'
}
const concepts = computed(
	() =>
		(tm('pages.orchestration.concepts') as Array<{
			key: string
			title: string
			desc: string
			example: string
		}>) || []
)
const recentWorkflows = computed(
	() =>
		(tm('pages.orchestration.recentWorkflows') as Array<{
			id: string
			name: string
			updatedAt: string
			owner: string
			tag: string
		}>) || []
)
const nodeGroups = computed(
	() => (tm('pages.orchestration.nodeGroups') as Array<{ label: string; tags: string[] }>) || []
)
const templates = computed(
	() =>
		(tm('pages.orchestration.templates') as Array<{
			id: string
			name: string
			desc: string
			category: string
		}>) || []
)

// 新建工作流弹窗
const createModalVisible = ref(false)

const createWorkflow = () => {
	createModalVisible.value = true
}

// 新建工作流成功回调
const handleCreateSuccess = (id: string) => {
	createModalVisible.value = false
	// router.push(`/workflow/${id}`)
	window.open(`#/workflow/${id}`, '_blank')
}

const openTemplateModal = () => {
	templateModalVisible.value = true
}

const closeTemplateModal = () => {
	templateModalVisible.value = false
}

const selectTemplate = () => {
	templateModalVisible.value = false
	// 根据模板ID创建新工作流
	const id = v4()
	router.push(`/templates/${id}`)
}

const openWorkflow = (id: string) => {
	// router.push(`/workflow/${id}`)
	window.open(`#/workflow/${id}`, '_blank')
}

const useTemplate = (id: string) => {
	router.push(`/templates/${id}`)
}
</script>

<style lang="less" scoped>
.orchestration-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;

		h1 {
			font-size: 28px;
			margin: 0;
			color: var(--text-primary);
		}

		.subtitle {
			margin: 6px 0 0;
			color: var(--text-secondary);
			font-size: 14px;
		}

		.header-actions {
			display: flex;
			gap: 12px;

			:deep(.el-button) {
				&:not(:last-child) {
					margin-right: 0;
				}
			}
		}
	}

	.core-concepts {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		margin-bottom: 24px;

		@media (max-width: 900px) {
			grid-template-columns: 1fr;
		}

		.concept-card {
			background: var(--bg-base);
			border-radius: 12px;
			padding: 20px;
			box-shadow: var(--shadow-sm);
			border-left: 4px solid #3b82f6;

			&.sequence {
				border-left-color: #3b82f6;
			}

			&.condition {
				border-left-color: #f59e0b;
			}

			&.rule {
				border-left-color: #10b981;
			}

			.concept-icon {
				font-size: 32px;
				margin-bottom: 12px;
				color: var(--el-color-primary);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				height: 40px;
				margin-bottom: 12px;

				.concept-title {
					font-size: 18px;
					font-weight: 700;
					color: var(--text-primary);
					margin-bottom: 6px;
				}

				.concept-desc {
					font-size: 13px;
					color: var(--text-secondary);
					line-height: 1.6;
				}
			}

			.concept-example {
				font-size: 12px;
				padding: 10px 12px;
				background: var(--bg-container);
				border-radius: 8px;
				color: var(--text-primary);
				font-family: 'Consolas', 'Monaco', monospace;
			}
		}
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 16px;
		margin-bottom: 24px;

		.stat-card {
			background: var(--bg-base);
			border-radius: 12px;
			padding: 18px;
			display: flex;
			align-items: center;
			gap: 12px;
			box-shadow: var(--shadow-sm);

			.stat-icon {
				width: 40px;
				height: 40px;
				border-radius: 10px;
				background: #eef2ff;
				color: #4f46e5;
				display: flex;
				align-items: center;
				justify-content: center;

				&.green {
					background: #ecfdf3;
					color: #10b981;
				}

				&.purple {
					background: #f5f3ff;
					color: #7c3aed;
				}

				&.orange {
					background: #fff7ed;
					color: #f97316;
				}
			}

			.stat-info {
				.stat-value {
					font-size: 22px;
					font-weight: 700;
					color: var(--text-primary);
				}

				.stat-label {
					font-size: 13px;
					color: var(--text-secondary);
				}
			}
		}
	}

	.content-grid {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 16px;
		margin-bottom: 16px;

		@media (max-width: 900px) {
			grid-template-columns: 1fr;
		}
	}

	.panel {
		background: var(--bg-base);
		border-radius: 12px;
		padding: 20px;
		box-shadow: var(--shadow-sm);

		&.full {
			margin-top: 8px;
		}

		.panel-title {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 16px;
			color: var(--text-primary);
		}
	}

	.workflow-list {
		display: flex;
		flex-direction: column;
		gap: 12px;

		.workflow-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12px;
			border-radius: 10px;
			border: 1px solid var(--border-light);

			.workflow-title {
				font-weight: 600;
				color: var(--text-primary);
			}

			.workflow-meta {
				font-size: 12px;
				color: var(--text-secondary);
				align-items: center;
			}
		}
	}

	.feature-list {
		display: flex;
		flex-direction: column;
		gap: 16px;

		.feature-item {
			display: flex;
			gap: 12px;
			align-items: flex-start;

			.feature-icon {
				width: 36px;
				height: 36px;
				border-radius: 10px;
				background: #f3f4f6;
				color: #374151;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.feature-title {
				font-weight: 600;
				color: #111827;
			}

			.feature-desc {
				font-size: 13px;
				color: #6b7280;
				margin-top: 4px;
			}
		}
	}

	.node-types {
		display: flex;
		flex-direction: column;
		gap: 16px;

		.node-type-group {
			.node-type-label {
				font-size: 13px;
				color: var(--text-secondary);
				margin-bottom: 8px;
				font-weight: 600;
			}

			.node-type-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 8px;
			}
		}
	}

	.template-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 16px;

		.template-card {
			border: 1px solid var(--border-light);
			border-radius: 12px;
			padding: 16px;
			background: var(--bg-container);

			.template-title {
				font-weight: 600;
				color: var(--text-primary);
				margin-bottom: 8px;
			}

			.template-desc {
				font-size: 12px;
				color: var(--text-secondary);
				line-height: 1.6;
				min-height: 54px;
				font-family: 'Consolas', 'Monaco', monospace;
				background: var(--bg-container);
				padding: 8px;
				border-radius: 6px;
				margin-bottom: 10px;
			}

			.template-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
}
</style>
