<template>
	<div class="template-detail-page">
		<!-- 顶部栏 -->
		<div class="detail-header">
			<div class="header-left">
				<el-button text @click="goBack" class="back-btn">
					<span style="font-size: 18px; margin-right: 8px"> <SvgIcon name="goback" /> </span>
					{{ t('common.back') }}
				</el-button>
				<el-divider direction="vertical" />
				<span class="breadcrumb">{{ t('pages.templateDetail.breadcrumb') }}</span>
			</div>
			<div class="template-title">{{ currentTemplate?.title }}</div>
			<el-button type="primary" @click="useTemplate">
				{{ t('pages.templateDetail.useWorkflow') }}
			</el-button>
		</div>

		<!-- 详情内容 -->
		<div class="detail-content">
			<!-- 流程图占位 -->
			<div class="workflow-diagram">
				<div class="diagram-placeholder">{{ t('pages.templateDetail.diagramPlaceholder') }}</div>
			</div>

			<!-- 下方说明文本 -->
			<div class="detail-description">
				<h3>{{ currentTemplate?.title }}</h3>
				<p>{{ currentTemplate?.description }}</p>
				<p class="detail-text">{{ t('pages.templateDetail.detailText') }}</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from '@/composables/useI18n'

interface Template {
	id: string
	title: string
	description: string
	icon: string
}

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

const currentTemplate = ref<Template | null>(null)

const templates = computed(() => {
	const items = (tm('shared.templates.catalog') as Template[]) || []
	return items.reduce<Record<string, Template>>((acc, item) => {
		acc[item.id] = item
		return acc
	}, {})
})

currentTemplate.value = templates.value[(route.params.id as string) || ''] || null

// 返回上一个路由，保留所有参数
const goBack = () => {
	router.back()
}

// 使用此工作流程，跳转到编辑器
const useTemplate = () => {
	router.push('/workflow/0')
}
</script>

<style lang="less" scoped>
.template-detail-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--bg-page);

	.detail-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24px;
		border-bottom: 1px solid var(--border-light);
		height: 50px;

		.header-left {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: var(--text-secondary);

			.back-btn {
				padding: 0;
				color: var(--el-color-primary);
				font-size: 14px;

				&:hover {
					color: var(--el-color-primary-dark-2);
				}
			}

			:deep(.el-divider--vertical) {
				margin: 0 12px;
				height: 20px;
				background-color: var(--border-light);
			}

			.breadcrumb {
				color: var(--text-secondary);
			}
		}

		.template-title {
			flex: 1;
			text-align: center;
			font-size: 18px;
			font-weight: 600;
			color: var(--text-primary);
			margin: 0 24px;
		}
	}

	.detail-content {
		flex: 1;
		overflow-y: auto;
		padding: 32px 24px;
		display: flex;
		flex-direction: column;
		gap: 32px;

		.workflow-diagram {
			flex: 1;
			min-height: 400px;
			background: var(--bg-container);
			border: 1px solid var(--border-light);
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			.diagram-placeholder {
				font-size: 14px;
				color: var(--text-tertiary);
			}
		}

		.detail-description {
			padding: 24px;
			background: var(--bg-container);
			border-radius: 8px;

			h3 {
				font-size: 16px;
				font-weight: 600;
				color: var(--text-primary);
				margin: 0 0 12px 0;
			}

			p {
				font-size: 14px;
				color: var(--text-secondary);
				margin: 0 0 8px 0;
				line-height: 1.6;

				&.detail-text {
					color: var(--text-secondary);
				}
			}
		}
	}
}
</style>
