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

import { useCanvasNodeContext } from '../../../../hooks/useCanvasNodeContext'
import { useVueFlowContext } from '../../../../hooks/useVueFlowContext'
import { getNodeExecutionStatus } from '../../../../utils/execution-status'

const node = useCanvasNodeContext()
const { nodeMap } = useVueFlowContext()

const nodeClass = computed(() => {
	let classes: string[] = []
	if (node.props.value.selected) {
		classes.push('ring-6px', 'ring-#e0e2e7')
	}
	if (node.inputs.value.length === 0) {
		classes.push('rounded-l-36px')
	}
	if (node.outputs.value.length === 0) {
		classes.push('rounded-r-36px')
	}

	return classes
})
const nodeData = computed(() => node.props.value.node)

const nodeType = computed(() => nodeMap.value[nodeData.value?.nodeType!])

const nodeSubtitle = computed(() => {
	const getSubtitle = nodeType.value?.getSubtitle
	if (getSubtitle) {
		return getSubtitle(nodeData.value)
	}
	return ''
})

const executionStatus = computed(() => getNodeExecutionStatus(node.props.value.node))

const warningInfo = computed(() => {
	const validate = nodeType.value?.validate
	return validate && validate(nodeData.value?.data)
})

const resolvedIcon = computed(() => {
	const icon = `${nodeType.value?.icon || ''}`
	if (!icon) return 'lucide:cloud'
	if (icon.startsWith('data:image/')) return icon
	if (icon.length > 64 && /^[A-Za-z0-9+/=]+$/.test(icon)) {
		return `data:image/png;base64,${icon}`
	}
	return icon
})

const isImageIcon = computed(() => resolvedIcon.value.startsWith('data:image/'))
</script>

<template>
	<div
		:data-execution-status="executionStatus"
		:data-pending="nodeData?.data?.pending ? 'true' : 'false'"
		:class="nodeClass"
		class="canvas-node-status-shell default-node w-full h-full bg-#fff box-border border-1.5px border-solid border-#dcdcdc rounded-8px relative"
	>
		<div className="w-full h-full relative flex items-center justify-center">
			<div
				class="relative flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-lg"
				:style="{ background: nodeType?.iconColor }"
			>
				<div
					class="absolute inset-0 bg-gradient-to-br from-white/30 to-transparent rounded-lg"
				></div>
				<img
					v-if="isImageIcon"
					:src="resolvedIcon"
					alt="node icon"
					class="relative z-10 w-20px h-20px object-contain"
				/>
				<Icon v-else :icon="resolvedIcon" color="#ffffff" class="relative z-10" width="20" />
			</div>
		</div>

		<!-- warning -->
		<el-tooltip>
			<template #content>{{ warningInfo || '请检查配置' }}</template>
			<div v-if="warningInfo" class="absolute right-10px bottom-0">
				<Icon icon="clarity:warning-solid" color="#ff4d4f" size="16" />
			</div>
		</el-tooltip>

		<div
			className="absolute w-[150%] break-all -translate-x-1/2 left-1/2 bottom-auto mt-10px text-12px text-center text-#333"
		>
			<div>{{ nodeData?.name || nodeType?.displayName || '节点标题' }}</div>
			<div className="text-12px text-center text-#999 truncate">
				{{ nodeSubtitle }}
			</div>
		</div>
	</div>
</template>
