<template>
	<el-dialog
		:model-value="true"
		width="740px"
		class="start-node-guide-dialog"
		:close-on-click-modal="false"
		append-to-body
		@close="$emit('close')"
		align-center
	>
		<template #header>
			<div class="start-node-guide__header">
				<h2>{{ t('pages.editor.startGuideTitle') }}</h2>
			</div>
		</template>
		<p>{{ t('pages.editor.startGuideSubtitle') }}</p>
		<div class="start-node-guide__cards">
			<button
				v-for="item in startNodes"
				:key="item.type"
				type="button"
				class="start-node-guide__card"
				@click="$emit('create-node', item.type)"
			>
				<span class="start-node-guide__icon" :style="{ background: item.color }">
					<Icon :icon="item.icon" width="18" height="18" />
				</span>
				<span class="start-node-guide__card-title">{{ item.title }}</span>
				<span class="start-node-guide__card-desc">{{ item.description }}</span>
			</button>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { Icon } from '@repo/ui'
import { useI18n } from '@/composables/useI18n'

defineEmits<{
	'create-node': [type: string]
	close: []
}>()

const { t } = useI18n()

const startNodes = [
	{
		type: 'start',
		title: t('pages.editor.startGuideStartNodeTitle'),
		description: t('pages.editor.startGuideStartNodeDesc'),
		icon: 'lucide:home',
		color: '#0b74ff'
	},
	{
		type: 'trigger-schedule',
		title: t('nodes.meta.trigger-schedule.displayName'),
		description: t('pages.editor.startGuideScheduleNodeDesc'),
		icon: 'lucide:clock',
		color: '#7c3aed'
	},
	{
		type: 'trigger-webhook',
		title: t('nodes.meta.trigger-webhook.displayName'),
		description: t('pages.editor.startGuideWebhookNodeDesc'),
		icon: 'lucide:webhook',
		color: '#0b74ff'
	}
]
</script>

<style scoped lang="less">
.start-node-guide__header {
	display: inline-flex;
	width: 100%;
}

.start-node-guide__header h2 {
	margin: 0;
	color: #101828;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.start-node-guide__header p {
	margin: 6px 0 0;
	color: #667085;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

.start-node-guide__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid #d5dce8;
	border-radius: 50%;
	background: #f8fafc;
	color: #667085;
	cursor: pointer;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease;
}

.start-node-guide__close:hover {
	border-color: #b8c2d6;
	background: #eef4ff;
	color: #1d2939;
	transform: translateY(-1px);
}

.start-node-guide__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.start-node-guide__card {
	display: flex;
	min-height: 160px;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 14px rgb(15 23 42 / 9%);
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.start-node-guide__card:hover {
	border-color: #9cc3ff;
	box-shadow: 0 10px 22px rgb(41 109 255 / 14%);
	transform: translateY(-2px);
}

.start-node-guide__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	color: #fff;
}

.start-node-guide__card-title {
	margin-top: 14px;
	color: #101828;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.start-node-guide__card-desc {
	margin-top: 6px;
	color: #667085;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
}

@media (max-width: 760px) {
	.start-node-guide__cards {
		grid-template-columns: 1fr;
	}

	.start-node-guide__card {
		min-height: auto;
	}
}

@media (max-width: 520px) {
	.start-node-guide__header h2 {
		font-size: 18px;
	}

	.start-node-guide__header p {
		font-size: 12px;
	}
}

:global(.start-node-guide-dialog .el-dialog__header) {
	padding: 24px 24px 14px;
}

:global(.start-node-guide-dialog .el-dialog__body) {
	padding: 0 24px 24px;
}

:global(.start-node-guide-dialog.el-dialog) {
	max-width: calc(100vw - 32px);
}
</style>
