<template>
	<div class="execution-container">
		<div class="header">
			<div>
				<h1>{{ t('pages.execution.title') }}</h1>
				<p class="subtitle">{{ t('pages.execution.subtitle') }}</p>
			</div>
			<el-button type="primary" @click="refresh">
				<el-icon><RefreshRight /></el-icon>
				{{ t('common.refresh') }}
			</el-button>
		</div>

		<div class="stats-grid">
			<div class="stat-card">
				<div class="stat-icon">
					<SvgIcon name="play" size="20" />
				</div>
				<div>
					<div class="stat-value">186</div>
					<div class="stat-label">{{ t('pages.execution.stats.todayExecutions') }}</div>
				</div>
			</div>
			<div class="stat-card">
				<div class="stat-icon success">
					<SvgIcon name="check-circle" size="20" />
				</div>
				<div>
					<div class="stat-value">96.8%</div>
					<div class="stat-label">{{ t('pages.execution.stats.successRate') }}</div>
				</div>
			</div>
			<div class="stat-card">
				<div class="stat-icon warning">
					<SvgIcon name="clock" size="20" />
				</div>
				<div>
					<div class="stat-value">2.4s</div>
					<div class="stat-label">{{ t('pages.execution.stats.avgDuration') }}</div>
				</div>
			</div>
			<div class="stat-card">
				<div class="stat-icon danger">
					<SvgIcon name="x-circle" size="20" />
				</div>
				<div>
					<div class="stat-value">6</div>
					<div class="stat-label">{{ t('pages.execution.stats.failedCount') }}</div>
				</div>
			</div>
		</div>

		<div class="filters">
			<el-input
				v-model="keyword"
				:placeholder="t('pages.execution.filters.keyword')"
				clearable
				class="filter-item"
			>
				<template #prefix>
					<el-icon><Search /></el-icon>
				</template>
			</el-input>
			<el-select
				v-model="status"
				:placeholder="t('pages.execution.filters.status')"
				class="filter-item"
				clearable
			>
				<el-option :label="t('common.all')" value="" />
				<el-option :label="t('common.status.success')" value="success" />
				<el-option :label="t('common.status.failed')" value="failed" />
				<el-option :label="t('common.status.running')" value="running" />
			</el-select>
			<el-date-picker
				v-model="dateRange"
				type="daterange"
				:range-separator="t('common.date.rangeSeparator')"
				:start-placeholder="t('common.date.start')"
				:end-placeholder="t('common.date.end')"
				class="filter-item"
			/>
			<el-button @click="resetFilters">{{ t('common.reset') }}</el-button>
		</div>

		<div class="panel">
			<el-table :data="filteredExecutions" stripe style="width: 100%">
				<el-table-column prop="workflow" :label="t('pages.execution.table.workflow')" />
				<el-table-column prop="executionId" :label="t('pages.execution.table.executionId')" />
				<el-table-column prop="startedAt" :label="t('pages.execution.table.startedAt')" />
				<el-table-column prop="duration" :label="t('pages.execution.table.duration')" />
				<el-table-column prop="trigger" :label="t('pages.execution.table.trigger')" />
				<el-table-column :label="t('pages.execution.table.status')">
					<template #default="scope">
						<el-tag :type="statusType(scope.row.status)">
							{{ statusText(scope.row.status) }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="t('pages.execution.table.actions')">
					<template #default>
						<el-button text size="small">{{ t('common.details') }}</el-button>
						<el-button text size="small">{{ t('common.retry') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="side-panels">
			<div class="panel">
				<div class="panel-title">{{ t('pages.execution.panels.summary') }}</div>
				<div class="summary-item" v-for="item in summary" :key="item.label">
					<span class="label">{{ item.label }}</span>
					<span class="value">{{ item.value }}</span>
				</div>
			</div>
			<div class="panel">
				<div class="panel-title">{{ t('pages.execution.panels.tips') }}</div>
				<ul class="tips">
					<li v-for="item in tips" :key="item">{{ item }}</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { RefreshRight, Search } from '@element-plus/icons-vue'
import { useI18n } from '@/composables/useI18n'

const { t, tm } = useI18n()
const keyword = ref('')
const status = ref('')
const dateRange = ref<[Date, Date] | null>(null)

const executions = computed(
	() =>
		(tm('pages.execution.executions') as Array<{
			workflow: string
			executionId: string
			startedAt: string
			duration: string
			trigger: string
			status: string
		}>) || []
)

const summary = computed(
	() => (tm('pages.execution.summary') as Array<{ label: string; value: string }>) || []
)

const tips = computed(() => (tm('pages.execution.tips') as string[]) || [])

const filteredExecutions = computed(() => {
	const q = keyword.value.trim().toLowerCase()
	return executions.value.filter((item) => {
		const matchKeyword =
			!q || item.workflow.toLowerCase().includes(q) || item.executionId.toLowerCase().includes(q)
		const matchStatus = !status.value || item.status === status.value
		return matchKeyword && matchStatus
	})
})

const statusType = (value: string) => {
	if (value === 'success') return 'success'
	if (value === 'failed') return 'danger'
	if (value === 'running') return 'warning'
	return 'info'
}

const statusText = (value: string) => {
	if (value === 'success') return t('common.status.success')
	if (value === 'failed') return t('common.status.failed')
	if (value === 'running') return t('common.status.running')
	return t('common.status.unknown')
}

const refresh = () => {
	console.log('refresh executions')
}

const resetFilters = () => {
	keyword.value = ''
	status.value = ''
	dateRange.value = null
}
</script>

<style lang="less" scoped>
.execution-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;

		h1 {
			font-size: 28px;
			margin: 0;
			color: var(--text-primary);
		}

		.subtitle {
			margin: 6px 0 0;
			color: var(--text-secondary);
			font-size: 14px;
		}
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 16px;
		margin-bottom: 20px;

		.stat-card {
			background: var(--bg-base);
			border-radius: 12px;
			padding: 18px;
			box-shadow: var(--shadow-sm);
			display: flex;
			gap: 12px;
			align-items: center;

			.stat-icon {
				width: 40px;
				height: 40px;
				border-radius: 10px;
				background: #eef2ff;
				color: #4f46e5;
				display: flex;
				align-items: center;
				justify-content: center;

				&.success {
					background: #ecfdf3;
					color: #10b981;
				}

				&.warning {
					background: #fff7ed;
					color: #f97316;
				}

				&.danger {
					background: #fef2f2;
					color: #ef4444;
				}
			}

			.stat-value {
				font-size: 22px;
				font-weight: 700;
				color: var(--text-primary);
			}

			.stat-label {
				font-size: 13px;
				color: var(--text-secondary);
			}
		}
	}

	.filters {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin-bottom: 16px;
		align-items: center;

		.filter-item {
			width: 220px;
		}
	}

	.panel {
		background: var(--bg-base);
		border-radius: 12px;
		padding: 20px;
		box-shadow: var(--shadow-sm);
	}

	.side-panels {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 16px;
		margin-top: 16px;

		.panel-title {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 12px;
			color: var(--text-primary);
		}

		.summary-item {
			display: flex;
			justify-content: space-between;
			padding: 10px 0;
			border-bottom: 1px solid var(--border-light);

			.label {
				color: var(--text-secondary);
				font-size: 13px;
			}

			.value {
				font-weight: 600;
				color: var(--text-primary);
			}
		}

		.tips {
			margin: 0;
			padding-left: 16px;
			color: var(--text-secondary);
			line-height: 1.6;
			font-size: 13px;
		}
	}
}
</style>
