<template>
    <div class="chat-default">
        <!-- AI 头像 -->
        <div class="ai-avatar">
            <div class="avatar-icon" :style="{ background: agent.color }">
                {{ agent.icon }}
            </div>
        </div>
        
        <!-- 描述文字 -->
        <p class="welcome-text">
            {{ agent.description }}
        </p>
        
        <!-- 欢迎标题 -->
        <h2 class="welcome-title">{{ welcomeTitle }}</h2>
        
        <!-- 建议卡片 -->
        <div class="suggestion-cards">
            <div
                v-for="(suggestion, index) in currentSuggestions"
                :key="index"
                class="suggestion-card"
                @click="handleSuggestionClick(suggestion)"
            >
                <div class="card-icon" :style="{ background: agent.color }">
                    <component :is="cardIcons[index % cardIcons.length]" />
                </div>
                <p class="card-text">{{ suggestion }}</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { Building2 as OfficeBuilding, AlertTriangle as Warning, Cloud as Cloudy } from 'lucide-vue-next'

interface Agent {
    id: string
    name: string
    icon: string
    color: string
    description: string
}

interface Props {
    agent: Agent
}

const props = defineProps<Props>()
const emit = defineEmits<{
    suggestionClick: [suggestion: string]
}>()

// 各智能体的建议内容
const agentSuggestions: Record<string, string[]> = {
    default: [
        '城市生命线关键设施有哪些？',
        '消防安全隐患常见问题以及处理措施有哪些？',
        '如何平衡排水能力和生态环境保护？'
    ],
    emergency: [
        '应急预案应该包含哪些关键内容？',
        '突发事件的处理流程是什么？',
        '如何建立高效的应急响应机制？'
    ],
    analysis: [
        '如何分析城市设施运行数据？',
        '帮我生成一份数据分析报告',
        '如何预测设施故障风险？'
    ],
    safety: [
        '安全检查的标准流程是什么？',
        '常见安全隐患有哪些类型？',
        '如何制定隐患整改计划？'
    ]
}

// 各智能体的欢迎标题
const agentWelcomeTitles: Record<string, string> = {
    default: '今天需要我帮你做点什么吗？',
    emergency: '需要我帮你处理什么应急事件？',
    analysis: '需要我帮你分析什么数据？',
    safety: '需要我帮你检查什么安全隐患？'
}

// 当前智能体的建议
const currentSuggestions = computed(() => {
    return agentSuggestions[props.agent.id] || agentSuggestions.default
})

// 当前欢迎标题
const welcomeTitle = computed(() => {
    return agentWelcomeTitles[props.agent.id] || agentWelcomeTitles.default
})

// 卡片图标
const cardIcons = [OfficeBuilding, Warning, Cloudy]

// 处理建议点击
const handleSuggestionClick = (suggestion: string) => {
    emit('suggestionClick', suggestion)
}
</script>

<style lang="scss" scoped>
@import url('./ChatDefault.scss');
</style>