<template>
	<div class="log-stream-container">
		<div class="header">
			<h1>{{ t('pages.logStream.title') }}</h1>
			<div class="header-actions">
				<el-input
					v-model="searchKeyword"
					:placeholder="t('pages.logStream.searchPlaceholder')"
					:prefix-icon="Search"
					style="width: 300px"
				/>
				<el-button type="primary" @click="refreshLogs">
					<el-icon>
						<RefreshRight />
					</el-icon>
					{{ t('common.refresh') }}
				</el-button>
			</div>
		</div>

		<div class="filters">
			<el-select v-model="selectedLevel" :placeholder="t('pages.logStream.levelPlaceholder')" style="width: 150px">
				<el-option :label="t('common.all')" value="" />
				<el-option :label="t('common.status.info')" value="info" />
				<el-option :label="t('common.status.warning')" value="warning" />
				<el-option :label="t('common.status.error')" value="error" />
			</el-select>
			<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')"
			/>
		</div>

		<div class="logs-container">
			<div v-for="log in filteredLogs" :key="log.id" :class="['log-item', `log-${log.level}`]">
				<div class="log-header">
					<span :class="['log-level', `level-${log.level}`]">{{ log.level.toUpperCase() }}</span>
					<span class="log-time">{{ log.timestamp }}</span>
					<span class="log-workflow">{{ log.workflowName }}</span>
				</div>
				<div class="log-message">{{ log.message }}</div>
				<div v-if="log.details" class="log-details">
					<pre>{{ JSON.stringify(log.details, null, 2) }}</pre>
				</div>
			</div>
		</div>
	</div>
</template>

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

const { t, tm } = useI18n()
const searchKeyword = ref('')
const selectedLevel = ref('')
const dateRange = ref([])

const logs = computed(
	() =>
		(tm('pages.logStream.logs') as Array<{
			id: number
			level: string
			timestamp: string
			workflowName: string
			message: string
			details: Record<string, unknown>
		}>) || []
)

const filteredLogs = computed(() => {
	return logs.value.filter((log) => {
		const matchesKeyword =
			!searchKeyword.value ||
			log.message.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
			log.workflowName.toLowerCase().includes(searchKeyword.value.toLowerCase())
		const matchesLevel = !selectedLevel.value || log.level === selectedLevel.value
		return matchesKeyword && matchesLevel
	})
})

const refreshLogs = () => {
	console.log('Refreshing logs...')
}
</script>

<style lang="less" scoped>
.log-stream-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;

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

		h1 {
			font-size: 28px;
			font-weight: 600;
				color: var(--text-primary);
			display: flex;
			gap: 12px;
			align-items: center;
		}
	}

	.filters {
		display: flex;
		gap: 16px;
		margin-bottom: 24px;
	}

	.logs-container {
		display: flex;
		flex-direction: column;
		gap: 12px;

		.log-item {
			background: var(--bg-base);
			border-radius: 8px;
			padding: 16px;
			border-left: 4px solid var(--border-light);
			box-shadow: var(--shadow-sm);
			transition: all 0.3s;

			&:hover {
				box-shadow: var(--shadow-md);
			}

			&.log-info {
				border-left-color: #3b82f6;
			}

			&.log-warning {
				border-left-color: #f59e0b;
			}

			&.log-error {
				border-left-color: #ef4444;
			}

			.log-header {
				display: flex;
				align-items: center;
				gap: 12px;
				margin-bottom: 8px;

				.log-level {
					font-size: 11px;
					font-weight: 700;
					padding: 4px 8px;
					border-radius: 4px;
					text-transform: uppercase;

					&.level-info {
						background: #dbeafe;
						color: #1e40af;
					}

					&.level-warning {
						background: #fef3c7;
						color: #92400e;
					}

					&.level-error {
						background: #fee2e2;
						color: #991b1b;
					}
				}

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

				.log-workflow {
					font-size: 13px;
					color: var(--el-color-primary);
					font-weight: 500;
				}
			}

			.log-message {
				font-size: 14px;
				color: var(--text-primary);
				line-height: 1.6;
				margin-bottom: 8px;
			}

			.log-details {
				background: var(--bg-container);
				border-radius: 4px;
				padding: 12px;
				margin-top: 12px;

				pre {
					margin: 0;
					font-size: 12px;
					color: var(--text-secondary);
					line-height: 1.6;
					overflow-x: auto;
				}
			}
		}
	}
}
</style>
