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

const props = defineProps<{
	hasExecutionData: boolean
	statusClassName: string
	executionStatusText: string
	executionDurationText: string
	totalTokenText: string
	detailMeta: Array<{ label: string; value: string }>
	submittedParams: unknown
	detailInputText: string
	finalResultValue: unknown
	detailOutputText: string
}>()

const { t } = useI18n()
</script>

<template>
	<div class="tab-pane tab-pane--scroll">
		<div v-if="!hasExecutionData" class="empty-state">
			{{ t('pages.runWorkflow.detailPanel.empty') }}
		</div>
		<div v-else class="detail-layout">
			<div class="summary-card" :class="statusClassName">
				<div class="summary-item">
					<div class="summary-label">{{ t('pages.runWorkflow.detailPanel.status') }}</div>
					<div class="summary-value">{{ executionStatusText }}</div>
				</div>
				<div class="summary-item">
					<div class="summary-label">{{ t('pages.runWorkflow.detailPanel.duration') }}</div>
					<div class="summary-value">{{ executionDurationText }}</div>
				</div>
			</div>

			<div class="panel">
				<div class="section-title">{{ t('pages.runWorkflow.detailPanel.input') }}</div>
				<CodeEditor
					:model-value="detailInputText || '-'"
					language="json"
					:tools="true"
					:read-only="true"
					:allow-change-language="false"
					:height="220"
				/>
			</div>

			<div class="panel">
				<div class="section-title">{{ t('pages.runWorkflow.detailPanel.output') }}</div>
				<CodeEditor
					:model-value="detailOutputText || '-'"
					language="json"
					:tools="true"
					:read-only="true"
					:allow-change-language="false"
					:height="220"
				/>
			</div>

			<div class="meta-list">
				<div v-for="item in detailMeta" :key="item.label" class="meta-row">
					<span class="meta-label">{{ item.label }}</span>
					<span class="meta-value">{{ item.value }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="less" scoped>
.tab-pane {
	height: 100%;
	min-height: 0;
	margin-top: 16px;
}

.tab-pane--scroll {
	padding: 0 16px 16px;
	overflow-y: auto;
}

.empty-state {
	padding: 24px 16px;
	border-radius: 12px;
	background: #f8fafc;
	color: #667085;
	line-height: 1.6;
}

.detail-layout {
	display: flex;
	flex-direction: column;
}

.summary-card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 14px;
	border-radius: 8px;
	border: 1px solid #d0d5dd;
	background: linear-gradient(135deg, #f8fafc, #eef2ff);
}

.summary-card.is-success {
	border-color: #32d583;
	background: linear-gradient(135deg, #f0fdf4, #ecfdf3);
}

.summary-card.is-running {
	border-color: #fdb022;
	background: linear-gradient(135deg, #fffaeb, #fef3c7);
}

.summary-card.is-failed {
	border-color: #f97066;
	background: linear-gradient(135deg, #fef2f2, #fee4e2);
}

.summary-card.is-suspended {
	border-color: #98a2b3;
	background: linear-gradient(135deg, #f8fafc, #eef2f6);
}

.summary-item {
	min-width: 0;
}

.summary-label {
	font-size: 12px;
	color: #667085;
}

.summary-value {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #344054;
	word-break: break-word;
}

.panel {
	padding: 14px;
	border-radius: 16px;
	background: linear-gradient(180deg, #f8fafc 0%, #f4f7fb 100%);
	border: 1px solid #e4e7ec;
	box-shadow:
		0 8px 24px rgba(15, 23, 42, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.summary-card + .panel,
.panel + .panel,
.panel + .meta-list {
	margin-top: 14px;
	margin-bottom: 24px;
}

.section-title {
	margin-right: auto;
	font-size: 14px;
	font-weight: 600;
	color: #344054;
	margin-bottom: 12px;
}

.meta-list {
	padding: 8px 2px 4px;
}

.meta-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid #eaecf0;
	font-size: 12px;
}

.meta-row:last-child {
	border-bottom: 0;
}

.meta-label {
	color: #667085;
}

.meta-value {
	color: #344054;
	text-align: right;
	word-break: break-all;
}
</style>
