<template>
	<el-drawer
		:model-value="visible"
		:title="t('pages.vectorStore.detail')"
		direction="rtl"
		size="520px"
		@update:model-value="$emit('update:visible', $event)"
	>
		<template v-if="detailData">
			<el-descriptions :column="1" border>
				<el-descriptions-item :label="t('pages.vectorStore.name')">{{
					detailData.name
				}}</el-descriptions-item>
				<el-descriptions-item :label="t('pages.vectorStore.engineType')">
					<el-tag effect="plain" size="small">{{
						formatEngineType(detailData.engine_type)
					}}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item :label="t('pages.vectorStore.connectionAddr')">
					{{ detailData.connection_config?.addr || '-' }}
				</el-descriptions-item>
				<el-descriptions-item :label="t('pages.vectorStore.username')">
					{{ detailData.connection_config?.username || '-' }}
				</el-descriptions-item>
				<el-descriptions-item :label="t('pages.vectorStore.version')">
					{{ detailData.connection_config?.version || '-' }}
				</el-descriptions-item>
				<el-descriptions-item :label="t('pages.vectorStore.indexName')">
					{{ detailData.index_config?.index_name || '-' }}
				</el-descriptions-item>
				<el-descriptions-item :label="t('pages.vectorStore.shards')">
					{{ detailData.index_config?.number_of_shards ?? '-' }}
				</el-descriptions-item>
				<el-descriptions-item :label="t('pages.vectorStore.replicas')">
					{{ detailData.index_config?.number_of_replicas ?? '-' }}
				</el-descriptions-item>
				<el-descriptions-item :label="t('pages.vectorStore.source')">
					<el-tag
						:type="detailData.source === 'system' ? 'warning' : 'info'"
						effect="light"
						size="small"
					>
						{{
							detailData.source === 'system'
								? t('pages.vectorStore.sourceSystem')
								: t('pages.vectorStore.sourceUser')
						}}
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item :label="t('pages.vectorStore.creationTime')">
					{{ detailData.creationTime || '-' }}
				</el-descriptions-item>
				<el-descriptions-item :label="t('pages.vectorStore.updateTime')">
					{{ detailData.updateTime || '-' }}
				</el-descriptions-item>
			</el-descriptions>
		</template>
		<el-skeleton v-else :rows="8" animated />
	</el-drawer>
</template>

<script setup lang="ts">
import { vector } from '@repo/api-service'
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useI18n } from '@/composables/useI18n'
import type { EngineTypeConfig, VectorStoreItem } from './types'

const props = defineProps<{
	visible: boolean
	targetId: string
	engineTypes: EngineTypeConfig[]
}>()

defineEmits<{
	'update:visible': [value: boolean]
}>()

const { t } = useI18n()
const detailData = ref<VectorStoreItem | null>(null)

function formatEngineType(type: string) {
	const config = props.engineTypes.find((item) => item.type === type)
	return config?.display_name || type.toUpperCase()
}

async function loadDetail(id: string) {
	detailData.value = null
	try {
		const res = await vector.postInfo({ id })
		if (res?.isSuccess && res.result) {
			detailData.value = res.result as VectorStoreItem
		}
	} catch {
		ElMessage.error(t('pages.vectorStore.getDetailFailed'))
	}
}

watch(
	() => props.visible,
	(val) => {
		if (val && props.targetId) {
			loadDetail(props.targetId)
		} else if (!val) {
			detailData.value = null
		}
	}
)
</script>
