<template>
  <div class="playground">
    <!-- Header -->
    <header class="header">
      <div class="header-content">
        <div class="header-left" @click="goHome">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回</span>
        </div>
        <div class="header-title">
          <h1>测试场</h1>
          <p>交互式测试和评估 AI 模型</p>
        </div>
      </div>
    </header>

    <!-- Main -->
    <div class="main">
      <!-- Config Panel -->
      <div class="config-panel">
        <div class="config-content">
          <div class="config-item">
            <label>模型</label>
            <el-select v-model="config.model" class="model-select">
              <el-option label="GPT-4o" value="gpt-4o">
                <span class="model-option">
                  <span class="model-name">GPT-4o</span>
                  <span class="model-provider">OpenAI</span>
                </span>
              </el-option>
              <el-option label="GPT-4o-mini" value="gpt-4o-mini">
                <span class="model-option">
                  <span class="model-name">GPT-4o Mini</span>
                  <span class="model-provider">OpenAI</span>
                </span>
              </el-option>
              <el-option label="Claude-3.5" value="claude-3.5">
                <span class="model-option">
                  <span class="model-name">Claude 3.5</span>
                  <span class="model-provider">Anthropic</span>
                </span>
              </el-option>
              <el-option label="Gemini Pro" value="gemini-pro">
                <span class="model-option">
                  <span class="model-name">Gemini Pro</span>
                  <span class="model-provider">Google</span>
                </span>
              </el-option>
            </el-select>
          </div>
          <div class="config-item">
            <label>Temperature</label>
            <div class="slider-wrap">
              <el-slider v-model="config.temperature" :min="0" :max="2" :step="0.1" />
              <span class="slider-value">{{ config.temperature }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Chat Area -->
      <div class="chat-container">
        <div class="messages" ref="messagesRef">
          <div
            v-for="(msg, index) in messages"
            :key="index"
            class="message"
            :class="msg.role"
          >
            <div class="message-avatar">
              <el-icon v-if="msg.role === 'user'"><User /></el-icon>
              <el-icon v-else><Robot /></el-icon>
            </div>
            <div class="message-bubble">
              <div class="message-text" v-html="formatMessage(msg.content)"></div>
            </div>
          </div>
          <div v-if="loading" class="message assistant">
            <div class="message-avatar">
              <el-icon><Robot /></el-icon>
            </div>
            <div class="message-bubble">
              <div class="loading-dots">
                <span></span><span></span><span></span>
              </div>
            </div>
          </div>
        </div>

        <!-- Input -->
        <div class="input-area">
          <el-input
            v-model="userInput"
            type="textarea"
            :rows="2"
            placeholder="输入消息... (Ctrl+Enter 发送)"
            resize="none"
            @keydown.enter.ctrl="sendMessage"
          />
          <el-button
            type="primary"
            @click="sendMessage"
            :loading="loading"
            :disabled="!userInput.trim()"
            class="send-btn"
          >
            <el-icon><Promotion /></el-icon>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const messages = ref([
  { role: 'assistant', content: '你好！我是你的 AI 测试助手。\n\n从顶部选择一个模型，然后向我提问。' }
])

const userInput = ref('')
const loading = ref(false)
const messagesRef = ref(null)

const config = reactive({ model: 'gpt-4o-mini', temperature: 0.7 })

const goHome = () => router.push('/')

const sendMessage = async () => {
  if (!userInput.value.trim() || loading.value) return
  const userMessage = userInput.value.trim()
  userInput.value = ''
  loading.value = true
  messages.value.push({ role: 'user', content: userMessage })
  await nextTick()
  scrollToBottom()
  setTimeout(() => {
    messages.value.push({ role: 'assistant', content: '这是一个演示回复。\n\n在实际生产环境中，这会调用你选择的模型 API。' })
    loading.value = false
    nextTick(scrollToBottom)
  }, 1200)
}

const scrollToBottom = () => {
  if (messagesRef.value) messagesRef.value.scrollTop = messagesRef.value.scrollHeight
}

const formatMessage = (content) => content.replace(/\n/g, '<br>')
</script>

<style scoped>
.playground {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px 24px;
}

.header-content {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.header-left:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.header-title h1 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 2px;
}

.header-title p {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Main */
.main {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Config Panel */
.config-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.config-content {
  display: flex;
  gap: 32px;
  align-items: center;
}

.config-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.config-item label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.model-select {
  width: 180px;
}

.model-option {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.model-name {
  font-weight: 500;
}

.model-provider {
  font-size: 12px;
  color: var(--text-muted);
}

.slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider-wrap .el-slider {
  width: 140px;
}

.slider-value {
  font-size: 13px;
  color: var(--text-tertiary);
  min-width: 32px;
}

/* Chat Container */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  min-height: 500px;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.message {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
  animation: messageIn 0.3s ease;
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.message.assistant .message-avatar {
  background: var(--accent-primary-muted);
  color: var(--accent-primary);
}

.message.user .message-avatar {
  background: var(--success-muted);
  color: var(--success);
}

.message-bubble {
  max-width: 70%;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
}

.message.assistant .message-bubble {
  background: var(--bg-tertiary);
  border-bottom-left-radius: 4px;
}

.message.user .message-bubble {
  background: var(--accent-primary-muted);
  border-bottom-right-radius: 4px;
}

.message-text {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Loading */
.loading-dots {
  display: flex;
  gap: 6px;
  padding: 4px 0;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Input Area */
.input-area {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-tertiary);
}

.input-area .el-textarea {
  flex: 1;
}

.send-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

/* Responsive */
@media (max-width: 768px) {
  .config-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .message-bubble {
    max-width: 85%;
  }
}
</style>
