<template>
	<el-dialog
		:model-value="modelValue"
		:title="t('pages.agent.agentDetail')"
		width="760px"
		destroy-on-close
		@update:model-value="emit('update:modelValue', $event)"
	>
		<div v-if="detailItem" class="detail-modal">
			<div class="hero">
				<div class="hero__avatar">{{ detailItem.avatar?.trim() || '🤖' }}</div>
				<div class="hero__content">
					<div class="hero__title">
						{{ detailItem.name || t('pages.agent.unnamedAgent') }}
					</div>
					<div class="hero__meta">
						<el-tag effect="plain">{{ formatModeLabel(detailItem.mode) }}</el-tag>
						<el-tag type="info" effect="plain">{{ formatTypeLabel(detailItem.type) }}</el-tag>
						<el-tag
							v-if="detailItem.is_builtin"
							type="success"
							effect="plain"
						>
							Built-in
						</el-tag>
					</div>
					<div class="hero__desc">
						{{ detailItem.description || t('pages.agent.noDescription') }}
					</div>
				</div>
			</div>

			<div class="section">
				<div class="section__title">{{ t('pages.agent.detailModal.basicInfo') }}</div>
				<div class="info-grid">
					<div v-for="item in basicItems" :key="item.label" class="info-card">
						<div class="info-card__label">{{ item.label }}</div>
						<div class="info-card__value">{{ item.value }}</div>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="section__title">{{ t('pages.agent.detailModal.configSummary') }}</div>
				<div class="info-grid">
					<div v-for="item in configItems" :key="item.label" class="info-card">
						<div class="info-card__label">{{ item.label }}</div>
						<div class="info-card__value">{{ item.value }}</div>
					</div>
				</div>
			</div>

			<div v-if="promptItems.length" class="section">
				<div class="section__title">{{ t('pages.agent.detailModal.prompts') }}</div>
				<div class="prompt-list">
					<div v-for="item in promptItems" :key="item.label" class="prompt-card">
						<div class="prompt-card__head">{{ item.label }}</div>
						<pre class="prompt-card__body">{{ item.value }}</pre>
					</div>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from '@/composables/useI18n'
import type { AgentItem } from '../type'

const props = defineProps<{
	modelValue: boolean
	detailItem: AgentItem | null
	modelNameMap: Record<string, string>
}>()

const emit = defineEmits<{
	'update:modelValue': [value: boolean]
}>()

const { t } = useI18n()

function formatModeLabel(mode?: string) {
	if (mode === 'quick-answer') return t('pages.agent.modeQuickAnswer')
	if (mode === 'smart-reasoning') return t('pages.agent.modeSmartReasoning')
	if (mode === 'agent') return 'Agent'
	return t('pages.agent.modeUnset')
}

function formatTypeLabel(type?: string) {
	if (type === 'knowledgeqa') return 'Knowledge'
	if (type === 'agent') return 'Agent'
	return type || '-'
}

function formatBoolean(value?: boolean) {
	return value ? t('pages.agent.detailModal.on') : t('pages.agent.detailModal.off')
}

function formatModelName(id?: string) {
	if (!id) return '-'
	return props.modelNameMap[id] || id
}

const basicItems = computed(() => {
	const item = props.detailItem
	if (!item) return []

	return [
		{ label: t('pages.agent.detailModal.modelLabel'), value: formatModelName(item.config?.model_config?.model_id) },
		{ label: t('pages.agent.detailModal.rerankModelLabel'), value: formatModelName(item.config?.model_config?.rerank_model_id) },
		{ label: t('pages.agent.detailModal.vlmModelLabel'), value: formatModelName(item.config?.img_vlm_config?.vlm_model_id) },
		{ label: t('pages.agent.detailModal.asrModelLabel'), value: formatModelName(item.config?.img_vlm_config?.asr_model_id) },
		{ label: t('pages.agent.detailModal.creationTime'), value: item.creationTime || '-' },
		{ label: t('pages.agent.detailModal.updateTime'), value: item.updateTime || '-' }
	]
})

const configItems = computed(() => {
	const item = props.detailItem
	if (!item) return []

	return [
		{ label: t('pages.agent.detailModal.temperature'), value: `${item.config?.model_config?.temperature ?? '-'}` },
		{
			label: t('pages.agent.detailModal.maxTokens'),
			value: `${item.config?.model_config?.max_completion_tokens ?? '-'}`
		},
		{ label: t('pages.agent.detailModal.thinkingMode'), value: formatBoolean(item.config?.model_config?.thinking) },
		{
			label: t('pages.agent.detailModal.multiTurn'),
			value: formatBoolean(item.config?.multiple_config?.multi_turn_enabled)
		},
		{
			label: t('pages.agent.detailModal.kbCount'),
			value: `${item.config?.kb_config?.knowledge_bases?.length ?? 0}`
		},
		{
			label: t('pages.agent.detailModal.toolCount'),
			value: `${item.config?.setting_config?.allowed_tools?.length ?? 0}`
		}
	]
})

const promptItems = computed(() => {
	const item = props.detailItem
	if (!item) return []

	return [
		{
			label: t('pages.agent.detailModal.systemPrompt'),
			value: item.config?.basic_config?.system_prompt || ''
		},
		{
			label: t('pages.agent.detailModal.contextTemplate'),
			value: item.config?.basic_config?.context_template || ''
		},
		{
			label: t('pages.agent.detailModal.rewriteSystemPrompt'),
			value: item.config?.advanced_config?.rewrite_prompt_system || ''
		},
		{
			label: t('pages.agent.detailModal.rewriteUserPrompt'),
			value: item.config?.advanced_config?.rewrite_prompt_user || ''
		},
		{
			label: t('pages.agent.detailModal.fallbackPrompt'),
			value: item.config?.advanced_config?.fallback_prompt || ''
		}
	].filter((entry) => entry.value.trim())
})
</script>

<style scoped lang="less">
.detail-modal {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hero {
	display: flex;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--border-light);
	border-radius: 18px;
	background: var(--bg-base);
}

.hero__avatar {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: 20px;
	display: grid;
	place-items: center;
	font-size: 34px;
	background: var(--bg-overlay);
}

.hero__content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hero__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-strong);
	word-break: break-word;
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hero__desc {
	color: var(--text-secondary);
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
}

.section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.section__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-strong);
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.info-card {
	padding: 14px 16px;
	border: 1px solid var(--border-light);
	border-radius: 14px;
	background: var(--bg-base);
}

.info-card__label {
	font-size: 12px;
	color: var(--text-tertiary);
}

.info-card__value {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-primary);
	word-break: break-word;
}

.prompt-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.prompt-card {
	border: 1px solid var(--border-light);
	border-radius: 14px;
	background: var(--bg-base);
	overflow: hidden;
}

.prompt-card__head {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border-light);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	background: var(--bg-overlay);
}

.prompt-card__body {
	margin: 0;
	padding: 14px;
	max-height: 280px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 13px;
	line-height: 1.7;
	color: var(--text-primary);
	font-family: Monaco, Consolas, 'Courier New', monospace;
}

@media (max-width: 768px) {
	.hero {
		flex-direction: column;
	}

	.info-grid {
		grid-template-columns: 1fr;
	}
}
</style>
