<template>
    <AdminLayout title="智能体管理" info="配置和管理AI智能客服">
        <div class="agent-container">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>AI客服配置</span>
                        <el-button type="primary" size="small" @click="saveConfig">保存配置</el-button>
                    </div>
                </template>

                <el-form :model="agentConfig" label-width="150px">
                    <el-form-item label="智能体名称">
                        <el-input v-model="agentConfig.name" placeholder="请输入智能体名称" />
                    </el-form-item>

                    <el-form-item label="AI模型">
                        <el-select v-model="agentConfig.model" style="width: 100%;">
                            <el-option label="GPT-4" value="gpt-4" />
                            <el-option label="Claude-3" value="claude-3" />
                            <el-option label="文心一言" value="ernie" />
                            <el-option label="本地模型" value="local" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="温度(Temperature)">
                        <el-slider v-model="agentConfig.temperature" :min="0" :max="1" :step="0.1" show-stops />
                        <span style="margin-left: 12px; color: #909399;">{{ agentConfig.temperature }}</span>
                    </el-form-item>

                    <el-form-item label="最大令牌数">
                        <el-input-number v-model="agentConfig.maxTokens" :min="100" :max="4000" />
                    </el-form-item>

                    <el-form-item label="系统提示词">
                        <el-input v-model="agentConfig.systemPrompt" type="textarea" :rows="4" placeholder="输入系统提示词，用于指导AI的行为" />
                    </el-form-item>

                    <el-form-item label="启用知识库">
                        <el-switch v-model="agentConfig.enableKnowledge" />
                        <span style="margin-left: 12px; color: #909399;">{{ agentConfig.enableKnowledge ? '已启用' : '未启用' }}</span>
                    </el-form-item>

                    <el-form-item label="启用情感分析">
                        <el-switch v-model="agentConfig.enableSentiment" />
                        <span style="margin-left: 12px; color: #909399;">{{ agentConfig.enableSentiment ? '已启用' : '未启用' }}</span>
                    </el-form-item>

                    <el-form-item label="启用自动转工单">
                        <el-switch v-model="agentConfig.enableAutoTicket" />
                        <span style="margin-left: 12px; color: #909399;">{{ agentConfig.enableAutoTicket ? '已启用' : '未启用' }}</span>
                    </el-form-item>

                    <el-form-item label="响应超时(秒)">
                        <el-input-number v-model="agentConfig.timeout" :min="5" :max="60" />
                    </el-form-item>

                    <el-form-item label="日志级别">
                        <el-select v-model="agentConfig.logLevel" style="width: 100%;">
                            <el-option label="DEBUG" value="debug" />
                            <el-option label="INFO" value="info" />
                            <el-option label="WARN" value="warn" />
                            <el-option label="ERROR" value="error" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-card>

            <!-- 测试区域 -->
            <el-card style="margin-top: 16px;">
                <template #header>
                    <span>测试智能体</span>
                </template>

                <div class="test-section">
                    <el-input v-model="testMessage" type="textarea" :rows="3" placeholder="输入测试消息..." style="margin-bottom: 12px;" />
                    <el-button type="primary" @click="testAgent">发送测试</el-button>

                    <div v-if="testResponse" class="test-response">
                        <h4>AI响应:</h4>
                        <p>{{ testResponse }}</p>
                    </div>
                </div>
            </el-card>

            <!-- 性能统计 -->
            <el-card style="margin-top: 16px;">
                <template #header>
                    <span>性能统计</span>
                </template>

                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="stat-box">
                            <div class="stat-value">{{ stats.totalChats }}</div>
                            <div class="stat-label">总对话数</div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="stat-box">
                            <div class="stat-value">{{ stats.avgResponseTime }}ms</div>
                            <div class="stat-label">平均响应时间</div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="stat-box">
                            <div class="stat-value">{{ stats.satisfaction }}</div>
                            <div class="stat-label">平均满意度</div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="stat-box">
                            <div class="stat-value">{{ stats.uptime }}%</div>
                            <div class="stat-label">系统可用性</div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </div>
    </AdminLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AdminLayout from '@/views/admin/AdminLayout.vue'
import { ElMessage } from 'element-plus'

const agentConfig = ref({
    name: '泰豪小电智能客服',
    model: 'gpt-4',
    temperature: 0.7,
    maxTokens: 2000,
    systemPrompt: '你是一个专业的客服助手，代表泰豪小电公司。你需要帮助客户解决设备相关的问题，提供友好、专业的服务。如果问题超出你的能力范围，请建议转接给人工客服。',
    enableKnowledge: true,
    enableSentiment: true,
    enableAutoTicket: true,
    timeout: 30,
    logLevel: 'info'
})

const testMessage = ref('')
const testResponse = ref('')

const stats = ref({
    totalChats: 1258,
    avgResponseTime: 1250,
    satisfaction: 4.5,
    uptime: 99.8
})

const saveConfig = () => {
    ElMessage.success('配置保存成功')
}

const testAgent = () => {
    if (!testMessage.value.trim()) {
        ElMessage.warning('请输入测试消息')
        return
    }
    testResponse.value = '感谢您的咨询。我已收到您的问题，正在为您处理。如果您的问题涉及设备故障，我可以帮您创建一个工单，由我们的技术团队为您服务。'
    ElMessage.success('测试消息已发送')
}
</script>

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

.agent-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.test-response {
    margin-top: 12px;
    padding: 12px;
    background: #f5f7fa;
    border-radius: 8px;
    border-left: 4px solid #409eff;
}

.test-response h4 {
    margin: 0 0 8px 0;
    color: #303133;
}

.test-response p {
    margin: 0;
    color: #606266;
    line-height: 1.6;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 8px;
    text-align: center;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #409eff;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 13px;
    color: #909399;
}
</style>