<script lang="ts" setup>
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Icon } from '@repo/ui'

import { useI18n } from '@/composables/useI18n'

const props = defineProps<{
	nodeType: string
	isListening: boolean
	webhookDebugUrl: string
	nextScheduleRunText: string
}>()

const emit = defineEmits<{
	(e: 'stop'): void
}>()

const { t } = useI18n()

const isScheduleTrigger = computed(() => props.nodeType === 'trigger-schedule')
const isWebhookTrigger = computed(() => props.nodeType === 'trigger-webhook')
const titleText = computed(() =>
	props.isListening
		? t('pages.runWorkflow.triggerPanel.listening')
		: t('pages.runWorkflow.triggerPanel.stopped')
)

const iconName = computed(() =>
	isScheduleTrigger.value ? 'lucide:calendar-clock' : 'lucide:webhook'
)

const iconGradient = computed(() =>
	isScheduleTrigger.value
		? 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)'
		: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)'
)

const copyWebhookUrl = async () => {
	if (!props.webhookDebugUrl) return
	try {
		await navigator.clipboard.writeText(props.webhookDebugUrl)
		ElMessage.success(t('pages.runWorkflow.triggerPanel.copySuccess'))
	} catch {
		ElMessage.error(t('pages.runWorkflow.triggerPanel.copyFailed'))
	}
}
</script>

<template>
	<div class="trigger-tab">
		<div class="trigger-hero">
			<div class="trigger-hero__icon" :style="{ background: iconGradient }">
				<Icon :icon="iconName" color="#fff" width="28" height="28" />
			</div>

			<div class="trigger-hero__title">{{ titleText }}</div>

			<div v-if="isScheduleTrigger && nextScheduleRunText" class="trigger-hero__meta">
				{{ t('pages.runWorkflow.triggerPanel.nextRun') }}{{ nextScheduleRunText }}
			</div>

			<div v-if="isWebhookTrigger && webhookDebugUrl" class="trigger-hero__url-row">
				<span class="trigger-hero__url-label">{{
					t('pages.runWorkflow.triggerPanel.webhookHint')
				}}</span>
				<button type="button" class="trigger-hero__url" @click="copyWebhookUrl">
					{{ webhookDebugUrl }}
				</button>
			</div>

			<el-button class="mt-12px" type="primary" v-if="isListening" @click="emit('stop')">
				<Icon icon="lucide:stop-circle" color="#ddd" width="18" height="18" />
				<span class="ml-4px">{{ t('pages.runWorkflow.triggerPanel.stop') }}</span>
			</el-button>
		</div>
	</div>
</template>

<style lang="less" scoped>
.trigger-tab {
	height: 100%;
	padding: 24px 16px 16px;
	overflow-y: auto;
}

.trigger-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.trigger-hero__icon {
	width: 60px;
	height: 60px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.trigger-hero__title {
	margin-top: 20px;
	font-size: 16px;
	font-weight: 700;
	color: #344054;
}

.trigger-hero__desc {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.7;
	color: #667085;
}

.trigger-hero__meta {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.7;
	color: #667085;
}

.trigger-hero__url-row {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.trigger-hero__url-label {
	font-size: 13px;
	color: #667085;
}

.trigger-hero__url {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background: #f8fafc;
	font-size: 13px;
	line-height: 1.6;
	color: #101828;
	text-align: left;
	word-break: break-all;
	cursor: pointer;
}

.trigger-hero__url:hover {
	border-color: #3b82f6;
	background: #eff6ff;
}
</style>
