<template>
	<!-- 顶部栏 -->
	<div
		style="
			height: 64px;
			display: flex;
			align-items: center;
			padding: 0 16px;
			justify-content: space-between;
			background: var(--bg-base);
			border-bottom: 1px solid var(--border-light);
		"
	>
		<div style="display: flex; align-items: center; gap: 12px">
			<div style="font-weight: 700; font-size: 18px">{{ t('statistics.title') }}</div>
			<div style="color: var(--text-tertiary); font-size: 13px">{{ t('statistics.subtitle') }}</div>
		</div>

		<div style="display: flex; align-items: center; gap: 12px">
			<el-date-picker
				v-model="dateRange"
				type="daterange"
				:range-separator="t('common.date.rangeSeparator')"
				:start-placeholder="t('common.date.startDate')"
				:end-placeholder="t('common.date.endDate')"
				format="YYYY年MM月DD日"
			/>
		</div>
	</div>

	<div style="padding: 16px">
		<!-- 统计卡片 -->
		<el-card shadow="never" style="padding: 18px; background-color: var(--bg-base)">
			<el-row :gutter="24" justify="start">
				<el-col :span="4" v-for="(card, idx) in statsData" :key="idx">
					<div
						@click="selectCard(idx)"
						:style="{
							background: selectedCardIdx === idx ? 'var(--card-bg-selected)' : '',
							padding: '20px 16px',
							borderRadius: '8px',
							boxShadow:
								selectedCardIdx === idx
									? '0 4px 12px var(--el-color-primary-light-7)'
									: 'var(--shadow-sm)',
							border:
								selectedCardIdx === idx
									? '1px solid var(--el-color-primary)'
									: '1px solid var(--border-light)',
							textAlign: 'center',
							cursor: 'pointer',
							transition: 'all 0.3s ease'
						}"
					>
						<div style="font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px">
							{{ card.title }}
						</div>
						<div style="font-size: 32px; font-weight: 600; color: var(--text-strong)">
							{{ card.value }}
						</div>
						<div style="font-size: 12px; color: var(--text-placeholder); margin-top: 8px">
							{{ card.subtitle }}
						</div>
					</div>
				</el-col>
			</el-row>
		</el-card>

		<!-- 执行统计图表 -->
		<el-card style="margin-top: 16px; padding: 18px">
			<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px">
				<div style="font-weight: 600">{{ currentChartTitle }}</div>
				<div style="display: flex; gap: 8px">
					<div style="display: flex; align-items: center; gap: 4px">
						<div
							style="
								width: 12px;
								height: 12px;
								background: var(--el-color-success);
								border-radius: 2px;
							"
						></div>
						<span style="font-size: 12px; color: var(--text-secondary)">
							{{ t('pages.statisticsPage.legend.successful') }}
						</span>
					</div>
					<div style="display: flex; align-items: center; gap: 4px">
						<div
							style="
								width: 12px;
								height: 12px;
								background: var(--el-color-danger);
								border-radius: 2px;
							"
						></div>
						<span style="font-size: 12px; color: var(--text-secondary)">
							{{ t('pages.statisticsPage.legend.failed') }}
						</span>
					</div>
				</div>
			</div>
			<ExecutionChart :data="currentChartData" />
		</el-card>

		<!-- 执行统计表格 -->
		<el-card style="margin-top: 16px; padding: 18px">
			<div style="font-weight: 600; margin-bottom: 16px; font-size: 14px">
				{{ currentTableTitle }}
			</div>
			<el-table :data="filteredTableData" style="width: 100%" stripe border>
				<el-table-column type="selection" width="50" />
				<el-table-column prop="name" :label="t('pages.statisticsPage.table.name')" width="120" />
				<el-table-column
					prop="totalExecutions"
					:label="t('pages.statisticsPage.table.totalExecutions')"
					width="140"
				/>
				<el-table-column
					prop="failedExecutions"
					:label="t('pages.statisticsPage.table.failedExecutions')"
					width="160"
				/>
				<el-table-column prop="failureRate" :label="t('pages.statisticsPage.table.failureRate')" width="100" />
				<el-table-column prop="timeSaved" :label="t('pages.statisticsPage.table.timeSaved')" width="100" />
				<el-table-column prop="avgRuntime" :label="t('pages.statisticsPage.table.avgRuntime')" width="140" />
				<el-table-column prop="projectName" :label="t('pages.statisticsPage.table.projectName')" min-width="180" />
			</el-table>

			<!-- 分页器 -->
			<div
				style="
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 16px;
					gap: 12px;
				"
			>
				<el-pagination
					background
					:page-size="pageSize"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50]"
					@update:current-page="currentPage = $event"
					@update:page-size="pageSize = $event"
					:total="filteredTableData.length"
					layout="total, prev, pager, next, sizes"
				/>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import ExecutionChart from '@/components/Chart/ExecutionChart.vue'
import { useI18n } from '@/composables/useI18n'

const { t, tm } = useI18n()
// 日期范围
const dateRange = ref<[Date, Date] | null>([new Date('2026-01-20'), new Date('2026-01-27')])

// 当前选中的卡片索引
const selectedCardIdx = ref(0)

// 统计数据
const statsData = computed(
	() =>
		(tm('pages.statisticsPage.cards') as Array<{
			title: string
			value: string | number
			subtitle: string
		}>) || []
)

// 不同卡片对应的图表和表格数据
const chartTemplate = {
	categories: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']
}
const cardDataMap = computed(() => {
	const localized = (tm('pages.statisticsPage.cardData') as Array<{
		chartTitle: string
		tableTitle: string
		tableData: Array<Record<string, string | number>>
	}>) || []

	return localized.map((item, index) => ({
		...item,
		chartData: {
			...chartTemplate,
			successful:
				[
					[8, 12, 15, 24, 18, 10, 5],
					[2, 3, 1, 2, 1, 0, 0],
					[5, 8, 12, 18, 15, 8, 4],
					[12, 18, 20, 28, 22, 15, 8],
					[6, 10, 14, 22, 18, 9, 4]
				][index] || [8, 12, 15, 24, 18, 10, 5],
			failed:
				[
					[1, 2, 1, 3, 2, 1, 0],
					[1, 2, 1, 3, 2, 1, 0],
					[1, 2, 1, 3, 2, 1, 0],
					[0, 1, 0, 2, 1, 0, 0],
					[1, 1, 0, 2, 1, 1, 0]
				][index] || [1, 2, 1, 3, 2, 1, 0]
		}
	}))
})

// 当前选中卡片的图表标题
const currentChartTitle = computed(() => {
	return cardDataMap[selectedCardIdx.value]?.chartTitle || '统计图表'
})

// 当前选中卡片的图表数据
const currentChartData = computed(() => {
	return cardDataMap[selectedCardIdx.value]?.chartData || cardDataMap[0].chartData
})

// 当前选中卡片的表格标题
const currentTableTitle = computed(() => {
	return cardDataMap[selectedCardIdx.value]?.tableTitle || '统计明细'
})

// 当前选中卡片的表格数据
const filteredTableData = computed(() => {
	return cardDataMap[selectedCardIdx.value]?.tableData || []
})

// 点击卡片
const selectCard = (idx: number) => {
	selectedCardIdx.value = idx
	currentPage.value = 1
}

// 分页
const pageSize = ref(10)
const currentPage = ref(1)
</script>

<style scoped>
:deep(.el-date-picker) {
	width: 280px;
}

:deep(.el-card) {
	border: 1px solid var(--border-light);
}

:deep(.el-table) {
	font-size: 13px;
}

:deep(.el-table__header-wrapper) {
	background-color: var(--bg-container);
}

:deep(.el-pagination) {
	margin-top: 16px;
}
</style>
